[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-276-Social-Proof-Focused":3},"# BUILD PROMPT — \"Social Proof-Focused\" Landing Page (Corporate & SaaS)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality, Social Proof-Focused landing page for a fictional B2B SaaS product on the first attempt. Every rule below is mandatory and non-negotiable.\n\n---\n\n## 0. PROJECT BRIEF & PAGE BLUEPRINT\n\n**0.1 Theme & Mood**\n- 2020s modern Corporate & SaaS aesthetic: clean, generous whitespace, soft elevation, rounded geometry, credibility-first design.\n- The page's entire persuasive engine is social proof: testimonials, client logos, ratings, metrics, case studies, and trust badges.\n- Invent one plausible B2B SaaS product name (e.g., an analytics\u002Foperations platform) and use it consistently across all copy.\n\n**0.2 Required Sections (in this exact order)**\n1. **Sticky Header** — wordmark logo, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, \"Get Started\" CTA, accessible mobile menu.\n2. **Hero** — headline, subheadline, primary + secondary CTA, avatar stack with aggregate rating (\"4.9\u002F5 from 2,300+ reviews\"), and a trust bar containing the client logo grid plus a row of count-up stat counters.\n3. **Features** — exactly 3 cards (icon badge, title, copy).\n4. **How It Works** — exactly 3 numbered steps.\n5. **Testimonials** — carousel of testimonial cards (avatar, star rating, blockquote, name\u002Frole\u002Fcompany) plus one featured case-study card with a before\u002Fafter metric comparison.\n6. **Pricing** — 3 tiers, middle tier highlighted with a \"Most Popular\" badge.\n7. **FAQ** — accessible accordion, 5–6 items.\n8. **Final CTA** — headline + email-capture form.\n9. **Footer** — secondary link columns (Product, Company, Resources, Legal), contact links, copyright.\n\n**0.3 Color Direction (map to tokens in 1.2)**\n- **Primary:** trust blue for brand and CTAs; success\u002Fgrowth green for metrics, checkmarks, and \"after\" states; neutral backgrounds.\n- **Secondary:** light grey strip behind the logo grid; badge\u002Fachievement accent for \"Most Popular\", ratings, and trust badges.\n- Suggested light values: `--primary: #2563eb`, `--text-success: #15803d`, `--bg-primary: #f6f8fb`, `--bg-secondary: #fefefe`. Suggested dark values: `--primary: #60a5fa`, `--text-success: #4ade80`, `--bg-primary: #0b1220`, `--bg-secondary: #131c2e`. Refine freely but never drop below 4.5:1 text contrast.\n\n**0.4 Required Visual Effects**\n- Testimonial carousel slide animation, staggered logo grid fade-in, stat counter count-up on scroll, star ratings, subtle scroll-reveal on sections.\n\n**0.5 Copy**\n- All user-facing copy in English. Realistic, specific, credible SaaS copy (names, roles, companies, numbers). No lorem ipsum.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- All styling lives in `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in `index.html`.\n- All design properties, layout rules, and states are applied via class\u002FID selectors only.\n- HTML stays semantic and style-agnostic: retheming the page must require touching `style.css` only, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine in `:root` and override per theme: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n- Additional expected tokens: `--bg-muted` (light grey logo strip), `--font-base`, `--font-heading`, `--z-header`, `--focus-ring`, `--star-color`.\n- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens; dark background tokens pair with light text tokens.\n- Never use pure `#ffffff` for light backgrounds; near-white surfaces use `#fefefe`; the page background uses a mood-fitting light neutral (e.g., `#f6f8fb`).\n\n### 1.3 Mandatory Dark Mode\n- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; the class must win when applied.\n- Theme toggle button in the header: Material Symbols `light_mode`\u002F`dark_mode`, correct `aria-pressed`, and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- Persist the choice in `localStorage` (e.g., key `\"theme\"`); first visit falls back to `prefers-color-scheme`. Apply the stored theme as early as possible in `script.js` (the single deferred entry point) to avoid a flash of the wrong theme. No inline scripts.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless a documented exception exists (e.g., stretching equal-height pricing cards).\n- Mobile-first: rows collapse to columns on small viewports; no horizontal scrolling at any width; fluid type and spacing.\n\n### 1.5 Framework Default\n- Use Tailwind CSS (CDN acceptable) or clean custom CSS organized with `@layer`\u002F`@apply`. Pick one approach and stay consistent throughout. Every utility\u002Fcomponent class must resolve back to the CSS variables above; expose reusable classes `.btn`, `.card`, `.input-group`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load Google Fonts via `\u003Clink>` with `preconnect`: **Inter** bound to `--font-base`; a display font (e.g., **Plus Jakarta Sans**) bound to `--font-heading`.\n- All icons are **Google Material Symbols (Outlined)**. Raw inline SVGs, local icon files, and emoji icons are forbidden.\n- **Explicit exception:** the source spec requested \"star rating SVGs\" — render stars exclusively with Material Symbols (`star`, `star_half`, `star_outline`); do not use SVG for stars or anything else.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn` + BEM modifiers)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary`, `.btn--secondary` (outline), `.btn--ghost`, `.btn--danger`.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`. **Focus:** distinct ring driven by `--focus-ring` for keyboard navigation. **Active:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, blocks double-clicks\u002Fsubmits, and renders a CSS-animated spinner (rotating Material Symbol `progress` or CSS border spinner) without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form).\n- `.btn--danger` must be visually distinct in both light and dark themes.\n\n### 2.2 Cards (`.card` + BEM variants)\n- **Default:** flexbox layout, `--bg-secondary` surface, `--border-default`, `--radius-lg`, `--shadow-sm`.\n- **Hover (interactive cards only — pricing, case study):** `translateY(-2px)` + `--shadow-md`. **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- Define a `.skeleton` shimmer animation and an empty-state pattern (Material Symbol + guidance text) in CSS for any dynamically loaded region.\n- Variants: `.card--feature` (icon badge, title, copy), `.card--step` (numbered badge), `.card--pricing` (badge, price, feature list with Material Symbol `check` icons, CTA), `.card--testimonial` (avatar, stars, `blockquote`\u002F`cite`, name\u002Frole), `.card--case-study` (before\u002Fafter metrics), `.card--metric` (count-up stat).\n\n### 2.3 Forms — Final CTA Email Capture (`.input-group`)\n- Structure: flex container wrapping a `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error-feedback element with `aria-live=\"polite\"`.\n- States via CSS: empty, focused (ring), filled, valid (`--border-success` + check icon), invalid (`--border-error`, `--text-error` message + error icon), disabled, read-only.\n- `script.js` validates with an email pattern; submit triggers the button's loading state, then a success state plus a visible confirmation message. Never rely on color alone — pair icons with text.\n\n### 2.4 Modal \u002F Popup (conditional)\n- No modal is required for this build; the FAQ must be an accordion, not a modal. If you add any dialog, it must include: centered flex overlay + backdrop, CSS-animated open\u002Fclose, `Esc` and overlay-click closing, focus trapping, a Material Symbol close button, and loading\u002Fsuccess\u002Ferror states.\n\n### 2.5 Testimonial Carousel\n- Flex track of `.card--testimonial` slides; movement via `transform: translateX` with `--transition-normal`; responsive slides-per-view: 1 (\u003C768px), 2 (768–1023px), 3 (≥1024px).\n- Controls: prev\u002Fnext buttons (Material Symbols `chevron_left`\u002F`chevron_right`, 44px targets, `aria-label`s) and dot indicators (buttons, `aria-current` on the active dot).\n- Autoplay ~6s; pause on hover\u002Ffocus, on hidden tab (`visibilitychange`), and via a visible pause\u002Fplay toggle button (WCAG 2.2.2).\n- ARIA: wrapper has `role=\"region\"` + `aria-roledescription=\"carousel\"` + `aria-label`; slides have `aria-roledescription=\"slide\"` labeled \"n of m\"; `aria-live=\"off\"` on the track while autoplaying.\n- Fully keyboard operable; optional touch swipe via pointer events.\n- `prefers-reduced-motion`: autoplay disabled, slides change instantly.\n\n### 2.6 Client Logo Grid\n- 6–8 fictional company wordmarks rendered as styled text (varied `--font-heading` weights\u002Fletter-spacing so they read as distinct logos) — no external images.\n- Container: flex wrap, centered, `gap: var(--spacing-gap)`, on a `--bg-muted` (light grey) strip.\n- Logos default to `filter: grayscale(1)` + reduced opacity; hover\u002Ffocus restores full color. Staggered fade-in on scroll via IntersectionObserver + CSS transition delays (no inline styles).\n\n### 2.7 Stat Counters (Count-Up)\n- 4 metrics in the hero trust bar (e.g., teams onboarded, average rating, retention %, revenue tracked — invent realistic values).\n- HTML contains the final formatted value; `script.js` animates from 0 to target once when the section enters the viewport (~1.5–2s, ease-out), handling commas and suffixes (`+`, `%`, `\u002F5`).\n- Accessibility: the animated number is `aria-hidden=\"true\"`; an sr-only span always holds the final value.\n- `prefers-reduced-motion`: render the final value instantly, no animation.\n\n### 2.8 Star Ratings & Avatars\n- Ratings: Material Symbols `star`\u002F`star_half`\u002F`star_outline` colored with `--star-color` (an amber that remains legible in both themes); the container carries an `aria-label` (\"Rated 4.9 out of 5 from 2,300+ reviews\"); icons are `aria-hidden`.\n- Avatars: CSS circles (~48px) containing each person's initials on distinct solid\u002Fgradient backgrounds — no external photos. Hero avatar stack: overlapping circles via negative margins plus a \"+12k\" overflow chip.\n\n### 2.9 FAQ Accordion\n- 5–6 items; each header is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`, a Material Symbol `expand_more` rotating 180° when open; panels animated via CSS (`grid-template-rows: 0fr → 1fr` or equivalent); multiple panels may be open; smooth transition with `--transition-normal`; fully keyboard operable.\n\n### 2.10 Header & Footer\n- **Header:** sticky, `--z-header`, wordmark + Material Symbol logo, anchor links with visible hover\u002Ffocus states, theme toggle, CTA; mobile hamburger (Material Symbol `menu`) as an accessible disclosure: `aria-expanded`, `Esc` closes, focus managed, links are real anchors with smooth scroll that respects reduced motion. Include a skip-to-content link as the first focusable element.\n- **Footer:** 4 secondary-link columns (Product, Company, Resources, Legal), contact links using Material Symbols or text (no brand SVGs), dynamic copyright year, `--text-secondary` on `--bg-primary` with a top border.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing and breakpoints with zero horizontal overflow at any viewport width.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)`; a global `@media (prefers-reduced-motion: reduce)` block disables autoplay, count-ups (instant final values), transforms, and reveals.\n- **Accessibility:** 4.5:1 text contrast in both themes; never color-only state (icons + text); semantic HTML5 landmarks and a correct heading hierarchy (one `h1`); `blockquote`\u002F`cite` for testimonials; correct ARIA roles\u002Flabels on all custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback.\n- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.\n- **Progressive enhancement:** with JS disabled, all content remains readable — counters show final values, carousel slides stack visibly, FAQ content is present.\n- **Destructive\u002Fdistinct actions:** any destructive control uses `.btn--danger` \u002F `--border-error` and stays distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- Exactly three files: `index.html`, `style.css`, `script.js`. `script.js` is referenced once with `defer`; no inline `\u003Cscript>` blocks and no inline styles anywhere.\n- One naming convention everywhere: **BEM** (`block__element--modifier`). Never mix conventions.\n- No unrequested placeholders: write real, specific English copy for every label, testimonial, metric, price, and FAQ. Placeholder text is permitted only for genuinely unspecified data (none is expected here).\n- Organize `style.css` with comment sections: Tokens, Base\u002FReset, Layout, Components, Sections, Utilities, Reduced Motion.\n- **Definition of done — verify before submitting:** (1) zero `style=\"\"` attributes; (2) dark mode toggles, persists across reload, and respects system preference on first visit; (3) carousel, counters, accordion, form, and mobile menu are all keyboard operable; (4) no horizontal scroll from 320px to 1920px; (5) all icons are Material Symbols; (6) reduced-motion behavior verified.\n",1791954984186]