Landing Page Builder

---
name: landing-page-builder
description: Use when generating a full landing page in HTML+Tailwind from product positioning. Triggers on "build a landing page", "generate landing page HTML", "marketing page layout", or pasted positioning + CTA.
---

# Landing Page Builder

Generate a single-file, responsive, accessible landing page in HTML+Tailwind. Most landing pages fail because the headline is feature-listing, not benefit-stating. Replace "AI-powered analytics" with "See what your users actually do." Optimize for the scroll, not the homepage tour.

## Required inputs

1. **Product** + **audience** — who is this for, in their words
2. **Primary CTA** — exactly one (book demo / sign up / start trial). Secondary CTA optional.
3. **Headline + sub-headline** — benefit-stating, not feature-listing
4. **3-6 features** — each with a 2-4 word title and one outcome-oriented sentence
5. **Social proof** — logos, a quote with attribution, OR a metric. At least one.
6. **Pricing teaser** (optional) — 3 tiers or "starting at $X". Link to full pricing page if separate.
7. **6-8 FAQs** — the questions people ACTUALLY ask before buying

If the headline reads like a feature list, push back before generating.

## Output format

A single HTML file with Tailwind via CDN (`<script src="https://cdn.tailwindcss.com"></script>`) for prototyping, OR JSX-ready markup if the user is in Next.js / Astro / Remix. Ask which.

Default to mobile-first: design at `base` (mobile) then layer `md:` and `lg:` breakpoints.

## Layout structure (top to bottom)

1. **Nav** — sticky, `backdrop-blur` on scroll, logo left, 3-5 links center, CTA right. Mobile: hamburger with `<dialog>` or disclosure pattern.
2. **Hero** — `min-h-[80vh]`, headline at `text-4xl md:text-6xl font-semibold tracking-tight`, sub at `text-lg text-gray-600`, two CTAs (primary + ghost). Optional product screenshot or short loop.
3. **Logo bar** — "Trusted by" line with 5-7 grayscale logos, `opacity-60 hover:opacity-100`. Skip if no real logos — fake logos kill trust.
4. **Features** — `grid md:grid-cols-3 gap-8`. Icon, title, body. Resist 6-feature grids that become wallpaper.
5. **Deep-dive section** (optional) — alternating image-left / image-right with `md:grid-cols-2 items-center gap-12`. Use for the 1-2 features worth a screenshot.
6. **Social proof block** — single large customer quote with photo, OR a stat block ("12,000 teams ship faster")
7. **Pricing teaser** — 3 cards, `md:grid-cols-3`, middle card highlighted with `ring-2 ring-indigo-500` or scale
8. **FAQ** — `<details>` elements with `<summary>`, native disclosure, no JS needed
9. **Final CTA band** — full-bleed, dark background, single CTA, no distractions
10. **Footer** — 3-4 columns of links + legal + social

## Accessibility & responsive

- Semantic: `<header>`, `<main>`, `<section aria-labelledby="...">`, `<footer>`
- Every section heading has an `id`; `aria-labelledby` references it
- All images have meaningful `alt` (or `alt=""` if decorative)
- Focus rings: `focus-visible:ring-2 focus-visible:ring-offset-2` on all interactive elements
- Color contrast: body text minimum `text-gray-700` on white; never `text-gray-400` for body
- Tap targets: minimum 44x44px (`min-h-11 min-w-11` on icon buttons)
- Mobile nav: keyboard-trappable when open, `Escape` closes
- Test at 320px wide — that's where layouts break

## Anti-patterns

- **Feature-listing headline**: "AI-powered, real-time, multi-tenant analytics" — nobody cares. State the outcome.
- **Three CTAs in the hero**: pick one. A secondary "Learn more" ghost button is fine; three primary buttons is panic.
- **Stock photos of diverse people pointing at laptops**: dated and unconvincing. Use product screenshots or skip.
- **`text-gray-400` body copy on white**: fails WCAG AA. Use `text-gray-700` minimum.
- **Carousel of testimonials that auto-rotates**: nobody reads them and it kills accessibility. One quote, large.
- **Pricing hidden behind "Contact sales"** for SMB products: trust killer. Show numbers.
- **Hero video that autoplays with sound**: never.

## Output

Return one HTML file (or JSX component file). At the top in a comment, list:
- Sections included
- Breakpoints used
- Any placeholder copy the user needs to replace
- 1-line a11y note (any caveats — e.g., "Mobile menu uses native `<dialog>`; falls back gracefully but check Safari < 15.4")