Landing Page Generator¶

Domain: Product | Skill: landing-page-generator | Source: product-team/landing-page-generator/SKILL.md

Landing Page Generator¶

Generate high-converting landing pages from a product description. Output 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 section variants (centered, split, gradient, video-bg, minimal)
Feature sections (grid, alternating, cards with icons)
Pricing tables (2–4 tiers with feature lists and 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 Tailwind class sets

Generation Workflow¶

Follow these steps in order for every landing page request:

Gather inputs — collect product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework using the trigger format below. Ask only for missing fields.
Select design style — map the user's choice (or infer from context) to one of the four Tailwind class sets in the Design Style Reference.
Apply copy framework — write all headline and body copy using the chosen framework (PAS / AIDA / BAB) before generating components.
Generate sections in order — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product.
Validate against SEO checklist — run through every item in the SEO Checklist before outputting final code. Fix any gaps inline.
Output final components — deliver complete, copy-paste-ready TSX files 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.

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="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <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">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          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 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". Use <Check> icon per feature row. Layout: grid gap-8 lg:grid-cols-3.

FAQ with Schema Markup¶

Inject FAQPage JSON-LD via <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> inside the section. Map FAQs with { q, a } into shadcn <Accordion> with type="single" collapsible. Container: max-w-3xl.

Testimonials: Grid (grid-cols-1 md:grid-cols-3) or single-quote hero block with avatar, name, role, and quote text.
CTA Banner: Full-width section with headline, subhead, and two buttons (primary + ghost). Add trust signals (money-back guarantee, logo strip) immediately below.
Footer: Logo + nav columns + social links + legal. Use border-t border-gray-800 separator.

SEO Checklist¶

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 with `@next/bundle-analyzer`

Common Pitfalls¶

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

Landing Page Generator¶

Landing Page Generator¶

Core Capabilities¶

Generation Workflow¶

Triggering This Skill¶

Design Style Reference¶

Copy Frameworks¶

Representative Component: Hero (Centered Gradient — Dark SaaS)¶

Other Section Patterns¶

Feature Section (Alternating)¶

Pricing Table¶

FAQ with Schema Markup¶

Testimonials, CTA, Footer¶

SEO Checklist¶

Performance Targets¶

Common Pitfalls¶