landing-page-generator

---
name: landing-page-generator
description: Use when the user wants to create a landing page, marketing page, homepage, lead capture page, campaign page, or conversion-optimized page, or wants to A/B test landing page variants.
category: Product
version: 1.0.0
tools: []
---

# Landing Page Generator

Generate high-converting landing pages from a product description: complete Next.js/React components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts.

**Target:** LCP < 1s · CLS < 0.1 · FID < 100ms
**Output:** TSX components + Tailwind styles + SEO meta + copy variants

## Core Capabilities
5 hero variants (centered, split, gradient, video-bg, minimal) · feature sections (grid, alternating, cards with icons) · pricing tables (2-4 tiers, feature lists, toggle) · FAQ accordion with schema markup · testimonials (grid, carousel, single-quote) · CTA sections (banner, full-page, inline) · footer (simple, mega, minimal) · 4 design styles with matched Tailwind class sets.

## Generation Workflow
1. **Gather inputs** — product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework (see trigger format below). Ask only for missing fields.
2. **Analyze brand voice** (recommended) — if existing brand content is available (website copy, blog posts, marketing materials), characterize its voice profile (formality, tone, perspective) via knowledge_base_search and use it to inform design style and copy framework: formal + professional → **enterprise** style, **AIDA** framework; casual + friendly → **bold-startup** style, **BAB** framework; professional + authoritative → **dark-saas** style, **PAS** framework; casual + conversational → **clean-minimal** style, **BAB** framework.
3. **Select design style** — map the user's choice (or the inferred brand-voice match) to one of the four Tailwind class sets below.
4. **Apply copy framework** — write all headline and body copy in the chosen framework (PAS / AIDA / BAB) before generating components, matching the voice profile's formality and tone.
5. **Generate sections in order** — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product.
6. **Validate against the SEO checklist** below before finalizing. Fix any gaps inline.
7. **Output final components** — deliver complete, copy-paste-ready TSX with all Tailwind classes, SEO meta, and structured data included.

## Triggering This Skill
```
Product: [name]
Tagline: [one sentence value prop]
Target audience: [who they are]
Key pain point: [what problem you solve]
Key benefit: [primary outcome]
Pricing tiers: [free/pro/enterprise or describe]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB
```

## Design Style Reference
| Style | Background | Accent | Cards | CTA Button |
|---|---|---|---|---|
| **Dark SaaS** | `bg-gray-950 text-white` | `violet-500/400` | `bg-gray-900 border border-gray-800` | `bg-violet-600 hover:bg-violet-500` |
| **Clean Minimal** | `bg-white text-gray-900` | `blue-600` | `bg-gray-50 border border-gray-200 rounded-2xl` | `bg-blue-600 hover:bg-blue-700` |
| **Bold Startup** | `bg-white text-gray-900` | `orange-500` | `shadow-xl rounded-3xl` | `bg-orange-500 hover:bg-orange-600 text-white` |
| **Enterprise** | `bg-slate-50 text-slate-900` | `slate-700` | `bg-white border border-slate-200 shadow-sm` | `bg-slate-900 hover:bg-slate-800 text-white` |

> **Bold Startup** headings: add `font-black tracking-tight` to all `<h1>`/`<h2>` elements.

## Copy Frameworks
**PAS (Problem → Agitate → Solution)** — H1: painful state they're in; Sub: what happens if they don't fix it; CTA: what you offer. Example — H1: "Your team wastes 3 hours a day on manual reporting"; Sub: "Every hour spent on spreadsheets is an hour not closing deals. Your competitors are already automated."; CTA: "Automate your reports in 10 minutes →"

**AIDA (Attention → Interest → Desire → Action)** — H1: bold attention-grabbing statement → Sub: interesting fact or benefit → Features: desire-building proof points → CTA: clear action.

**BAB (Before → After → Bridge)** — H1: "[Before state] → [After state]" → Sub: "Here's how [product] bridges the gap" → Features: how it works (the bridge).

## Representative Component: Hero (Centered Gradient — Dark SaaS)
Use this as the structural template for all hero variants; swap layout classes, gradient direction, and image placement for split, video-bg, and minimal variants.

```tsx
export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          Now in public beta
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Ship faster.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">Break less.</span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          The deployment platform that catches errors before your users do. Zero config. Instant rollbacks. Real-time monitoring.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">Start free trial</Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">See how it works →</Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">No credit card required · 14-day free trial</p>
      </div>
    </section>
  )
}
```

## Other Section Patterns
**Feature Section (Alternating):** map over a `features` array with `{ title, description, image, badge }`, toggle layout direction with `i % 2 === 1 ? "lg:flex-row-reverse" : ""`, use `<Image>` with explicit `width`/`height` and `rounded-2xl shadow-xl`, wrap in `<section className="py-24">` with a `max-w-6xl` container.

**Pricing Table:** map over a `plans` array with `{ name, price, description, features[], cta, highlighted }`. Highlighted plan gets `border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20`; others get `border border-gray-800 bg-gray-900`. Render `null` price as "Custom". Layout: `grid gap-8 lg:grid-cols-3`.

**FAQ with Schema Markup:** inject `FAQPage` JSON-LD via a `<script type="application/ld+json">` tag inside the section. Map FAQs with `{ q, a }` into an accordion component with `type="single" collapsible`. Container: `max-w-3xl`.

**Testimonials, CTA, Footer:** Testimonials — grid (`grid-cols-1 md:grid-cols-3`) or single-quote hero block with avatar, name, role, quote. CTA Banner — full-width section with headline, subhead, two buttons (primary + ghost), and trust signals (guarantee, logo strip) below. Footer — logo + nav columns + social links + legal, `border-t border-gray-800` separator.

## SEO Checklist
- `<title>` tag: primary keyword + brand (50–60 chars)
- Meta description: benefit + CTA (150–160 chars)
- OG image: 1200×630px with product name and tagline
- H1: one per page, includes primary keyword
- Structured data: FAQPage, Product, or Organization schema
- Canonical URL set; image alt text on all `<Image>` components
- robots.txt and sitemap.xml configured; mobile viewport meta tag present
- Core Web Vitals: LCP < 1s, CLS < 0.1
- Internal linking to pricing and docs

> **Validation step:** before outputting final code, verify every checklist item above is satisfied. Fix any gaps inline — do not skip items.

## Performance Targets
| Metric | Target | Technique |
|---|---|---|
| LCP | < 1s | Preload hero image, use `priority` on Next/Image |
| CLS | < 0.1 | Set explicit width/height on all images |
| FID/INP | < 100ms | Defer non-critical JS, use `loading="lazy"` |
| TTFB | < 200ms | Use ISR or static generation for landing pages |
| Bundle | < 100KB JS | Audit and trim unused dependencies |

## Common Pitfalls
- Hero image not preloaded — add `priority` prop to the first `<Image>`
- Missing mobile breakpoints — design mobile-first with `sm:` prefixes
- Vague CTA copy — "Get started" beats "Learn more"; "Start free trial" beats "Sign up"
- Pricing page missing trust signals — add a guarantee and testimonials near the CTA
- No above-the-fold CTA on mobile — ensure the button is visible without scrolling on a 375px viewport

## Related Work
Competitive positioning research (differentiation, messaging angles) should inform landing page copy before generation — @mention a research-focused teammate for a competitive teardown if one hasn't been done. If a broader **UI Design System** (design tokens, component library) needs to be established first, @mention a design-focused teammate before building individual pages.