Social Proof-Focused demo
Social Proof-Focused

A conversion-driven landing page style emphasizing testimonials, trust signals, and credibility elements to boost marketing and lead generation.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 13.6 KB · 1861 words
# BUILD PROMPT — "Social Proof-Focused" Landing Page (Corporate & SaaS)

**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.

---

## 0. PROJECT BRIEF & PAGE BLUEPRINT

**0.1 Theme & Mood**
- 2020s modern Corporate & SaaS aesthetic: clean, generous whitespace, soft elevation, rounded geometry, credibility-first design.
- The page's entire persuasive engine is social proof: testimonials, client logos, ratings, metrics, case studies, and trust badges.
- Invent one plausible B2B SaaS product name (e.g., an analytics/operations platform) and use it consistently across all copy.

**0.2 Required Sections (in this exact order)**
1. **Sticky Header** — wordmark logo, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, "Get Started" CTA, accessible mobile menu.
2. **Hero** — headline, subheadline, primary + secondary CTA, avatar stack with aggregate rating ("4.9/5 from 2,300+ reviews"), and a trust bar containing the client logo grid plus a row of count-up stat counters.
3. **Features** — exactly 3 cards (icon badge, title, copy).
4. **How It Works** — exactly 3 numbered steps.
5. **Testimonials** — carousel of testimonial cards (avatar, star rating, blockquote, name/role/company) plus one featured case-study card with a before/after metric comparison.
6. **Pricing** — 3 tiers, middle tier highlighted with a "Most Popular" badge.
7. **FAQ** — accessible accordion, 5–6 items.
8. **Final CTA** — headline + email-capture form.
9. **Footer** — secondary link columns (Product, Company, Resources, Legal), contact links, copyright.

**0.3 Color Direction (map to tokens in 1.2)**
- **Primary:** trust blue for brand and CTAs; success/growth green for metrics, checkmarks, and "after" states; neutral backgrounds.
- **Secondary:** light grey strip behind the logo grid; badge/achievement accent for "Most Popular", ratings, and trust badges.
- 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.

**0.4 Required Visual Effects**
- Testimonial carousel slide animation, staggered logo grid fade-in, stat counter count-up on scroll, star ratings, subtle scroll-reveal on sections.

**0.5 Copy**
- All user-facing copy in English. Realistic, specific, credible SaaS copy (names, roles, companies, numbers). No lorem ipsum.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in `style.css`. The `style="..."` attribute is **forbidden** anywhere in `index.html`.
- All design properties, layout rules, and states are applied via class/ID selectors only.
- HTML stays semantic and style-agnostic: retheming the page must require touching `style.css` only, never the markup.

### 1.2 CSS Variables & Theme Tokens
Define 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`.
- Additional expected tokens: `--bg-muted` (light grey logo strip), `--font-base`, `--font-heading`, `--z-header`, `--focus-ring`, `--star-color`.
- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens; dark background tokens pair with light text tokens.
- Never use pure `#ffffff` for light backgrounds; near-white surfaces use `#fefefe`; the page background uses a mood-fitting light neutral (e.g., `#f6f8fb`).

### 1.3 Mandatory Dark Mode
- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; the class must win when applied.
- Theme toggle button in the header: Material Symbols `light_mode`/`dark_mode`, correct `aria-pressed`, and a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").
- 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.

### 1.4 Flexbox Layout & Mobile-First Alignment
- 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).
- Mobile-first: rows collapse to columns on small viewports; no horizontal scrolling at any width; fluid type and spacing.

### 1.5 Framework Default
- Use Tailwind CSS (CDN acceptable) or clean custom CSS organized with `@layer`/`@apply`. Pick one approach and stay consistent throughout. Every utility/component class must resolve back to the CSS variables above; expose reusable classes `.btn`, `.card`, `.input-group`.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- Load Google Fonts via `<link>` with `preconnect`: **Inter** bound to `--font-base`; a display font (e.g., **Plus Jakarta Sans**) bound to `--font-heading`.
- All icons are **Google Material Symbols (Outlined)**. Raw inline SVGs, local icon files, and emoji icons are forbidden.
- **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.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons (`.btn` + BEM modifiers)
- **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`.
- **Hover:** brightness/shadow shift with `cursor: pointer`. **Focus:** distinct ring driven by `--focus-ring` for keyboard navigation. **Active:** `transform: scale(0.97)`.
- **Loading:** disables interaction, blocks double-clicks/submits, and renders a CSS-animated spinner (rotating Material Symbol `progress` or CSS border spinner) without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form).
- `.btn--danger` must be visually distinct in both light and dark themes.

### 2.2 Cards (`.card` + BEM variants)
- **Default:** flexbox layout, `--bg-secondary` surface, `--border-default`, `--radius-lg`, `--shadow-sm`.
- **Hover (interactive cards only — pricing, case study):** `translateY(-2px)` + `--shadow-md`. **Focus-within:** border highlights when a child link/button receives focus.
- Define a `.skeleton` shimmer animation and an empty-state pattern (Material Symbol + guidance text) in CSS for any dynamically loaded region.
- 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`/`cite`, name/role), `.card--case-study` (before/after metrics), `.card--metric` (count-up stat).

### 2.3 Forms — Final CTA Email Capture (`.input-group`)
- Structure: flex container wrapping a `<label>`, `<input type="email">`, and a dedicated error-feedback element with `aria-live="polite"`.
- States via CSS: empty, focused (ring), filled, valid (`--border-success` + check icon), invalid (`--border-error`, `--text-error` message + error icon), disabled, read-only.
- `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.

### 2.4 Modal / Popup (conditional)
- 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/close, `Esc` and overlay-click closing, focus trapping, a Material Symbol close button, and loading/success/error states.

### 2.5 Testimonial Carousel
- Flex track of `.card--testimonial` slides; movement via `transform: translateX` with `--transition-normal`; responsive slides-per-view: 1 (<768px), 2 (768–1023px), 3 (≥1024px).
- Controls: prev/next buttons (Material Symbols `chevron_left`/`chevron_right`, 44px targets, `aria-label`s) and dot indicators (buttons, `aria-current` on the active dot).
- Autoplay ~6s; pause on hover/focus, on hidden tab (`visibilitychange`), and via a visible pause/play toggle button (WCAG 2.2.2).
- 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.
- Fully keyboard operable; optional touch swipe via pointer events.
- `prefers-reduced-motion`: autoplay disabled, slides change instantly.

### 2.6 Client Logo Grid
- 6–8 fictional company wordmarks rendered as styled text (varied `--font-heading` weights/letter-spacing so they read as distinct logos) — no external images.
- Container: flex wrap, centered, `gap: var(--spacing-gap)`, on a `--bg-muted` (light grey) strip.
- Logos default to `filter: grayscale(1)` + reduced opacity; hover/focus restores full color. Staggered fade-in on scroll via IntersectionObserver + CSS transition delays (no inline styles).

### 2.7 Stat Counters (Count-Up)
- 4 metrics in the hero trust bar (e.g., teams onboarded, average rating, retention %, revenue tracked — invent realistic values).
- 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 (`+`, `%`, `/5`).
- Accessibility: the animated number is `aria-hidden="true"`; an sr-only span always holds the final value.
- `prefers-reduced-motion`: render the final value instantly, no animation.

### 2.8 Star Ratings & Avatars
- Ratings: Material Symbols `star`/`star_half`/`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`.
- Avatars: CSS circles (~48px) containing each person's initials on distinct solid/gradient backgrounds — no external photos. Hero avatar stack: overlapping circles via negative margins plus a "+12k" overflow chip.

### 2.9 FAQ Accordion
- 5–6 items; each header is a `<button>` 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.

### 2.10 Header & Footer
- **Header:** sticky, `--z-header`, wordmark + Material Symbol logo, anchor links with visible hover/focus 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.
- **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.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing and breakpoints with zero horizontal overflow at any viewport width.
- **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.
- **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`/`cite` for testimonials; correct ARIA roles/labels on all custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback.
- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.
- **Progressive enhancement:** with JS disabled, all content remains readable — counters show final values, carousel slides stack visibly, FAQ content is present.
- **Destructive/distinct actions:** any destructive control uses `.btn--danger` / `--border-error` and stays distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- Exactly three files: `index.html`, `style.css`, `script.js`. `script.js` is referenced once with `defer`; no inline `<script>` blocks and no inline styles anywhere.
- One naming convention everywhere: **BEM** (`block__element--modifier`). Never mix conventions.
- 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).
- Organize `style.css` with comment sections: Tokens, Base/Reset, Layout, Components, Sections, Utilities, Reduced Motion.
- **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.