Landing Page Builder

Build complete landing pages section by section. Copy + design + code in one flow.

Page Blueprint

Every high-converting landing page follows this structure:

1. Hero Section

[Logo + minimal nav]
H1: Primary value proposition (what + for whom)
Subtitle: Expand on the benefit or "how"
[Primary CTA button]   [Secondary CTA: "See demo"]
Trust bar: "Trusted by X+ companies" + 3-5 logos
[Hero image/screenshot/video]

2. Problem Section

H2: "The problem with {current approach}"
3 pain points with icons:
  - Pain 1: specific frustration
  - Pain 2: specific frustration
  - Pain 3: specific frustration

3. Solution Section

H2: "How {Product} solves this"
3 benefits (NOT features):
  - Benefit 1: outcome they get + supporting screenshot
  - Benefit 2: outcome they get + supporting screenshot
  - Benefit 3: outcome they get + supporting screenshot

4. Social Proof Section

H2: "Trusted by teams at"
[Logo grid: 6-8 recognizable brands]
3 testimonial cards: photo + quote + name + title + company
Key metric: "X% average improvement in {outcome}"

5. How It Works

H2: "Get started in 3 steps"
Step 1: [Icon] Title → Description
Step 2: [Icon] Title → Description
Step 3: [Icon] Title → Description

6. Features Grid

H2: "Everything you need to {outcome}"
6 feature cards: icon + title + 1-line description

7. Pricing (optional)

H2: "Simple, transparent pricing"
2-3 plan cards with: name, price, features list, CTA
Highlight recommended plan
FAQ below pricing

8. FAQ Section

H2: "Frequently asked questions"
5-8 accordion items addressing common objections
Include FAQPage schema markup

9. Final CTA

H2: Restate value proposition
Subtitle: Urgency or risk reversal
[Primary CTA button — same as hero]

Section templates with Tailwind code: references/section-templates.md

Conversion principles: references/conversion-principles.md

References

• references/section-templates.md — HTML/Tailwind code for each section type
• references/conversion-principles.md — Design principles for conversion