[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-439-Primer":3},"# Coding Agent Prompt — \"Primer\" Themed Landing Page\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in a single attempt — no partial output, no TODOs, no placeholders for unfinished work.\n\n**Theme:** Primer — GitHub's design language. Keywords: developer-tool clarity, dense but calm, content-first, code-friendly, flat-platform, robust light\u002Fdark theming. **Signature move:** a single consistent 1px hairline border + 6px radius repeated identically across nav, cards, buttons, and inputs — developer-tool density paired with calm, never-noisy borders.\n\n**Required sections (in this order):** Sticky Header\u002FNav (hosts the mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (with email capture), Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline CSS:** the `style=\"...\"` attribute is forbidden anywhere in the HTML. No `\u003Cstyle>` blocks in `index.html`.\n- **Class\u002FID selectors only:** every design property, layout rule, and state is targeted via class or ID selectors in `style.css`.\n- **Clean markup:** HTML stays semantic and style-agnostic — re-theming the page must require editing only `style.css`, never the markup.\n- **Extend, don't rewrite:** the Primer base classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) are the foundation; extend them and keep the hairline-border + 6px-radius signature intact in every new component.\n\n### 1.2 CSS Variables & Theme Tokens\n- **Mandatory canonical tokens** in `:root`, mapped to Primer light values:\n  `--primary: #1f883d; --secondary: #0969da; --bg-primary: #f6f8fa; --bg-secondary: #ffffff; --text-primary: #1f2328; --text-secondary: #59636e; --text-success: #1a7f37; --text-error: #cf222e; --border-default: #d0d7de; --border-error: #cf222e; --border-success: #1f883d;`\n- **Extended Primer tokens** (define with these exact values): `--color-bg: #f6f8fa; --color-surface: #ffffff; --color-surface-strong: #f6f8fa; --color-border: #d0d7de; --color-text: #1f2328; --color-text-muted: #59636e; --color-primary: #1f883d; --color-accent: #0969da; --color-danger: #cf222e; --radius-sm: 6px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 0 rgba(31,35,40,0.04); --shadow-md: 0 3px 6px rgba(140,149,159,0.15); --shadow-lg: 0 8px 24px rgba(140,149,159,0.2); --font-sans: -apple-system, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', sans-serif; --font-display: -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace; --font-base: var(--font-sans);` type scale `--text-xs: 0.75rem` through `--text-5xl: 3.25rem` (sm 0.8125, base 0.875, lg 1, xl 1.25, 2xl 1.5, 3xl 2, 4xl 2.5); space scale `--space-1: 4px` through `--space-24: 80px` (2:8, 3:12, 4:16, 6:20, 8:28, 12:40, 16:56); `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --focus-ring: 0 0 0 3px rgba(9,105,218,0.3); --code-diff-add: #d1f4dc;`\n- **Additional required tokens:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 200ms`, `--z-header: 900`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--header-height`.\n- **Tokenize button values:** move the base button's hardcoded colors into `--btn-bg`, `--btn-hover-bg`, `--btn-active-bg`, `--btn-hover-border`, `--btn-primary-hover-bg` so dark mode can override them.\n- **No hardcoded colors outside `:root`\u002Ftheme blocks:** every rule references `var(--...)`.\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in both themes, not just the default.\n- **Background rule:** the page background is `#f6f8fa`, never pure white; where a near-white is needed use `#fefefe`, not `#ffffff`. **Exception (Primer spec):** `--color-surface: #ffffff` is an explicit theme token for cards\u002Fsurfaces — retain it; `#ffffff` remains forbidden as a page-level background.\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** define dark token overrides both under `@media (prefers-color-scheme: dark)` (no-JS first visit) and a `.dark` class on `\u003Chtml>` (toggle); the `.dark` class must win when applied.\n- **Recommended dark palette (GitHub dark primitives):** `--color-bg: #0d1117; --color-surface: #161b22; --color-surface-strong: #21262d; --color-border: #30363d; --color-text: #e6edf3; --color-text-muted: #7d8590; --color-primary: #238636; --color-accent: #388bfd; --color-danger: #f85149; --code-diff-add: rgba(46,160,67,0.15); --focus-ring: 0 0 0 3px rgba(56,139,253,0.4);` canonical map: `--primary: #238636; --secondary: #388bfd; --bg-primary: #0d1117; --bg-secondary: #161b22; --text-primary: #e6edf3; --text-secondary: #7d8590; --text-success: #3fb950; --text-error: #f85149; --border-default: #30363d; --border-error: #f85149; --border-success: #2ea043;` button tokens: `--btn-bg: #21262d; --btn-hover-bg: #30363d; --btn-active-bg: #3d444d; --btn-primary-hover-bg: #2ea043;` shadows switch to black-based `rgba(1,4,9,…)`; badge text `#3fb950`.\n- **Token-only switching:** theme changes must never require HTML restructuring or duplicated stylesheets.\n- **Persistence:** store the choice in `localStorage` (key `\"theme\"`); on first visit fall back to `prefers-color-scheme`. Include `\u003Cmeta name=\"color-scheme\" content=\"light dark\">` and update `\u003Cmeta name=\"theme-color\">` on toggle.\n- **Toggle control:** visible in the header — icon-only button, min 44×44px, `aria-pressed=\"true\"` when dark is active, dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"), sun\u002Fmoon icon swap, visible focus ring.\n- **Validation gate (source spec note, translated):** the source declares no theme modes — you must validate every section in both light and dark before delivering, with text contrast ≥ 4.5:1.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Default alignment:** every flex container defaults to `align-items: center` unless an exception is explicitly justified (documented exception: feature\u002Fpricing\u002Ftestimonial card grids use `stretch` so card heights match).\n- **Mobile-first:** all multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to one column below 768px. No horizontal scrolling at any width from 320px up.\n- **Sticky header:** flex row, `position: sticky; top: 0; z-index: var(--z-header)`, surface background, hairline bottom border; nav links collapse behind a menu button on mobile (see 2.5).\n\n### 1.5 Styling Approach — Custom CSS, No Framework\n- The source specification supplies its own token system and base classes; treat this as the requested styling approach: **pure hand-written CSS** in one `style.css` — no Tailwind, no Bootstrap, no CSS-in-JS, no preprocessors.\n- Build **generic reusable classes** (`.btn`, `.btn--primary`, `.btn--danger`, `.card`, `.input`, `.badge`, `.nav`) and compose all sections from them.\n\n### 1.6 Typography & Icons\n- **Mandatory rule:** Google Fonts for text and Google Material Symbols for icons, bound to `--font-base`.\n- **Exception (Primer theme, per source spec):** typography uses GitHub's system stack (`-apple-system, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', sans-serif`, optionally prepending Mona Sans loaded from its official CDN) with `ui-monospace` for code, and iconography uses **Octicons as inline SVG** — these replace Google Fonts\u002FMaterial Symbols for this build.\n- **Octicon rules:** every icon is an inline `\u003Csvg>` with `fill=\"currentColor\"`, `aria-hidden=\"true\"`, `focusable=\"false\"`, default 16px, inheriting theme color automatically. No other inline SVG usage is permitted; no local icon files.\n- **Code blocks** (hero visual) use `--font-mono` with token-driven colors and one `--code-diff-add` highlighted line.\n\n---\n\n## 2. PAGE BLUEPRINT & COMPONENT DESIGN SPECIFICATIONS\n\n### 2.0 Required Sections (top to bottom)\n1. **Header\u002FNav:** logo (mark-github octicon + product name), anchor links (Features, How It Works, Pricing, FAQ), theme toggle, \"Sign up\" `.btn--primary`.\n2. **Hero:** `.badge` eyebrow, single `\u003Ch1>`, supporting copy, two CTAs (`.btn--primary` \"Get started\" + `.btn` \"View documentation\"), and a code-window card (mono font, one `--code-diff-add` diff line) as the visual; muted trust line beneath.\n3. **Features:** section heading + 3 `.card`s in a responsive grid; each: octicon in a tinted square, `\u003Ch3>`, description, \"Learn more\" link.\n4. **How It Works:** 3 numbered steps (numbered circles, hairline connector line), `\u003Ch3>` + text each; stacks vertically on mobile.\n5. **Testimonials:** 3 cards — CSS initials-circle avatar (no external images), quote, name, muted role; skeleton and empty-state styles defined for these (see 2.2).\n6. **Pricing:** 3 tier cards; middle tier elevated (primary\u002Faccent border + \"Popular\" `.badge`); each: tier name, price, check-octicon feature list, CTA. Include an accessible Monthly\u002FAnnual toggle that updates prices and announces changes via `aria-live=\"polite\"`.\n7. **FAQ:** 5–6 Q&A pairs as an accordion (see 2.4). **No modals anywhere on this page.**\n8. **Final CTA:** full-width band on `--color-surface-strong`, `\u003Ch2>`, copy, and the email-capture form (see 2.3).\n9. **Footer:** 4 columns of secondary links (Product, Resources, Company, Legal), social octicons with `aria-label`, copyright line, muted text throughout.\n\n### 2.1 Button Component\nBase `.btn` per spec: flex, `align-items: center; justify-content: center; gap: 0.5rem`, min 44×44px touch target, weight 500 at `--text-base`, padding `--space-2 --space-4`, `--radius-md`, `--btn-bg` background, 1px hairline border, `--shadow-sm`, fast transitions. All states via classes:\n- **Hover:** background\u002Fborder shift via `--btn-hover-bg`\u002F`--btn-hover-border`, `cursor: pointer`.\n- **Focus:** `:focus-visible` → `outline: none; box-shadow: var(--focus-ring)` — keyboard focus is never removed.\n- **Active\u002Fpressed:** `transform: scale(0.97)` + `--btn-active-bg`.\n- **Loading:** `.is-loading` (or `aria-busy=\"true\"`): `pointer-events: none`, double-click-proof, CSS border spinner or rotating sync-octicon in the icon slot, button dimensions unchanged.\n- **Disabled:** `opacity: 0.5; cursor: not-allowed;` greyscale; hover\u002Factive suppressed.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` — border + text via `--text-success` \u002F `--text-error`, used for temporary submit feedback.\n- **Variants:** `.btn` (default), `.btn--primary` (green, white text, `--btn-primary-hover-bg` on hover), `.btn--danger` (defined for completeness; visually distinct in both themes).\n\n### 2.2 Card Component\n- **Default:** `.card` per spec — `--color-surface` background, 1px hairline border, `--radius-lg`, `--shadow-sm`, `--space-6` padding, flexbox internals.\n- **Hover (interactive cards):** `transform: translateY(-2px)` + `--shadow-md`, `transition: var(--transition-normal) var(--ease-standard)`.\n- **Focus-within:** when a child link\u002Fbutton is focused, the card border shifts to `--color-accent` — a visible keyboard path.\n- **Loading (skeleton):** `.card--skeleton` with a CSS shimmer keyframe over muted blocks, `aria-busy=\"true\"`, zero layout shift.\n- **Empty state:** `.card--empty` — centered octicon + short guidance text, as a structured fallback for testimonial\u002Ffeature content.\n\n### 2.3 Form & Input (Final-CTA email capture)\n- **Structure:** `.input-group` flex column wrapping `\u003Clabel>`, `\u003Cinput class=\"input\">` (mono font, full width, hairline border, `--radius-md`), and a dedicated error\u002Ffeedback container with `aria-live=\"polite\"`; the input references it via `aria-describedby`.\n- **States:** empty; focused (accent border + `--focus-ring`); filled; valid (`--border-success` + check octicon); invalid (`aria-invalid=\"true\"`, `--border-error`, error octicon, red message text — never color-only); disabled; read-only.\n- **Behavior:** validate email on blur and on submit; on submit the button enters loading (~1s simulated), then a success state with inline confirmation announced via `aria-live`. No page reload; no `alert()`.\n\n### 2.4 FAQ Accordion\n- Use `\u003Cdetails>\u002F\u003Csummary>` (or button + `aria-expanded`\u002F`aria-controls` if scripting); `\u003Csummary>` is flex, `align-items: center`, `justify-content: space-between`, with a chevron-down octicon rotating 180° on open.\n- Smooth expand\u002Fcollapse animation (grid-rows or measured max-height technique); fully disabled under `prefers-reduced-motion`.\n- Hairline dividers between items; `:focus-visible` ring on the summary; full keyboard operability.\n\n### 2.5 Theme Toggle & Mobile Menu\n- **Theme toggle:** per 1.3 — icon-only, 44×44px, `aria-pressed`, dynamic `aria-label`, sun\u002Fmoon octicon swap, focus ring.\n- **Mobile menu:** three-bars button with `aria-expanded` + `aria-controls`; panel layered at `--z-dropdown`; closes on `Esc`, on link click, and on outside click; all links keyboard reachable.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n- **Responsive by default:** fluid type via the `--text-*` scale, breakpoints at ~640\u002F768\u002F1024px, zero horizontal overflow at any width ≥ 320px.\n- **Smooth animations:** every state change transitions with `--transition-fast`\u002F`--transition-normal` + `--ease-standard`; `@media (prefers-reduced-motion: reduce)` disables transforms, spins, shimmer, and smooth scrolling.\n- **Accessibility (a11y):** skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); exactly one `\u003Ch1>`; logical heading, DOM, and focus order; full keyboard operability (no mouse-only interactions); visible focus everywhere; `aria-live` regions for form errors, pricing updates, and loading states; contrast ≥ 4.5:1 in both themes; state is never communicated by color alone (always icon + text).\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark (define it even if unused on this page).\n- **Anchor navigation:** smooth scrolling with `scroll-margin-top: var(--header-height)` on all sections; disabled under reduced motion.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n- **Files:** `index.html`, `style.css`, `script.js` — three separate files. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no inline script blocks and no `onclick`-style handler attributes.\n- **Naming convention:** BEM only (`block__element--modifier`) across the entire deliverable — never mix conventions. Section blocks: `.hero`, `.features`, `.steps`, `.testimonials`, `.pricing`, `.faq`, `.cta-final`, `.footer`.\n- **Copy:** all user-facing copy in **English**. Invent a coherent fictional developer-tool product (e.g., a code review\u002FCI platform) and write realistic copy for it — headline, feature descriptions, 3 testimonials with names and roles, 3 pricing tiers with features and prices, 5–6 FAQ Q&As, footer link labels. **No lorem ipsum.** No emoji in UI copy.\n- **Assets:** fully self-contained — no external images; avatars are CSS initials circles; visuals are styled cards\u002Fcode windows; icons are octicons only.\n- **Completeness:** deliver the full working page on the first attempt — all 9 sections, both themes validated, every component state implemented as specified. No unrequested placeholders; where content was unspecified, invent realistic, theme-appropriate content.\n",1791954986891]