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