claude-skills-reference/product-team/landing-page-generator/references/landing-page-patterns.md

Landing Page Patterns

This reference captures high-converting page patterns and copy structures.

Hero Section Patterns

Pattern 1: Problem-Solution Hero

• Headline names the painful problem.
• Subheadline states the clear outcome.
• Primary CTA starts immediately.
• Optional supporting visual demonstrates product in context.

Pattern 2: Outcome-First Hero

• Headline leads with measurable value.
• Subheadline clarifies who the page is for.
• CTA is action-oriented and specific.

Pattern 3: Authority Hero

• Headline + trust indicator (logos, testimonial snippet, proof metric).
• Useful when category skepticism is high.

Social Proof Layouts

Logo Strip + Proof Metric

• Keep to recognizable logos.
• Add one proof metric (e.g., active users, revenue saved, hours reduced).

Testimonial Grid

• 3-6 testimonials across segments.
• Include role/company where possible.
• Prefer concrete outcomes over generic praise.

Case Study Snapshot

• Mini blocks: challenge -> approach -> measurable result.

CTA Best Practices

• Use one dominant CTA per section.
• Match CTA verb to user intent ("Start trial", "Get demo", "Run audit").
• Keep CTA copy specific; avoid vague labels like "Submit".
• Reduce friction near CTA (short form, trust indicators, no surprise commitments).

Above-the-Fold Checklist

• Clear value proposition in first viewport
• Audience clarity (who this is for)
• One primary CTA visible without scrolling
• Proof element (logos, stat, quote)
• Visual hierarchy emphasizes headline + CTA
• Mobile layout keeps CTA accessible

Conversion-Optimized Templates

SaaS Demo Page

1. Hero with problem-solution framing
2. Product walkthrough section
3. Social proof strip
4. Benefits by persona
5. Objection handling FAQ
6. Final CTA

Lead Magnet Page

1. Promise + asset preview
2. Bullet outcomes
3. Short form
4. Trust/privacy note

Product Launch Page

1. Outcome-first hero
2. Why now / differentiation
3. Feature blocks
4. Testimonials / beta feedback
5. Pricing or waitlist CTA

Headline Formulas

PAS (Problem-Agitate-Solution)

• Problem: identify the pain
• Agitate: show consequences of inaction
• Solution: position the offer as relief

Example structure: "Still [problem]? Stop [negative consequence] and start [desired outcome]."

AIDA (Attention-Interest-Desire-Action)

• Attention: pattern interrupt headline
• Interest: relevant context and stakes
• Desire: proof and benefits
• Action: concrete next step

4U Formula

• Useful: clear practical value
• Urgent: reason to act now
• Unique: differentiated promise
• Ultra-specific: concrete outcome and scope

Example structure: "Get [specific result] in [timeframe] without [common pain]."