## Page Structure

### Section 1: Hero
- Headline (primary value proposition)
- Subheadline (supporting detail, 1 sentence)
- Primary CTA button
- Hero image/video placeholder
- Trust badges (optional)

### Section 2: Problem
- Pain point identification (2-3 bullet points)
- "Sound familiar?" empathy hook

### Section 3: Solution
- How the product solves the problem
- 3 key benefits (icon + headline + description)

### Section 4: Social Proof
- Testimonials (2-3 with name, title, photo placeholder)
- Logos of known clients/partners
- Key metrics ("10,000+ users", "99.9% uptime")

### Section 5: Features/How It Works
- 3-step process or feature breakdown
- Screenshots or illustrations

### Section 6: Pricing (if applicable)
- Plan comparison or single offer
- Highlight recommended plan

### Section 7: FAQ
- 4-6 common objections answered

### Section 8: Final CTA
- Restate value proposition
- Urgency element (if authentic)
- Primary CTA button repeated

HERO: Attention - Bold headline that stops scrolling.
PROBLEM: Interest - "You know that feeling when..."
SOLUTION: Desire - "Imagine if you could..."
CTA: Action - "Start your free trial today."

HERO: Problem - State the pain directly.
PROBLEM: Agitate - Make the consequences vivid.
SOLUTION: Solve - Present the product as the answer.
CTA: Action - Clear next step.

HTML:
  - Semantic HTML5 (header, main, section, footer)
  - Accessible (ARIA labels, alt text, focus states)
  - Meta tags (title, description, OG tags, Twitter Card)
  - Favicon link placeholder
  - Google Fonts link (1-2 fonts max)

CSS:
  - Inline or embedded (single-file delivery)
  - Mobile-first responsive (breakpoints: 480px, 768px, 1024px)
  - CSS variables for colors, fonts, spacing
  - Smooth scroll behavior
  - Button hover/active states
  - No CSS frameworks (clean, custom CSS)

Performance:
  - No JavaScript required for core functionality
  - System font stack fallback
  - Minimal CSS (target under 10KB)
  - No external dependencies except Google Fonts
  - Lazy load image placeholders

:root {
  --color-primary: #2563eb;
  --color-secondary: #1e40af;
  --color-accent: #f59e0b;
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-border: #e5e7eb;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-section: 5rem;
  --max-width: 1200px;
  --border-radius: 8px;
}

## A/B Test Plan

### Variant A (Control)
- Headline: "{headline A}"
- CTA: "{cta A}"
- Hypothesis: Benefit-driven headline appeals to pain-aware audience.

### Variant B (Challenger)
- Headline: "{headline B}"
- CTA: "{cta B}"
- Hypothesis: Curiosity-driven headline performs better for cold traffic.

### Success Metric
- Primary: CTA click-through rate
- Secondary: Scroll depth past hero section
- Sample size: Minimum 500 visitors per variant before declaring winner

[ ] Headline communicates a benefit, not a feature
[ ] Only one primary CTA on the entire page
[ ] CTA button appears at least 3 times (hero, mid-page, footer)
[ ] Page loads without JavaScript
[ ] Responsive on mobile (320px), tablet (768px), desktop (1024px+)
[ ] All placeholder images have descriptive alt text
[ ] Color contrast ratio meets WCAG AA (4.5:1 for text)
[ ] No spelling or grammar errors
[ ] Social proof includes specific numbers or results
[ ] FAQ addresses top objections
[ ] Meta title is 50-60 characters
[ ] Meta description is 150-160 characters with CTA
[ ] OG image tag is present (placeholder if no image)
[ ] Page structure follows logical reading order
[ ] No horizontal scrolling on any viewport
[ ] Form fields (if any) have proper labels and validation
[ ] Font sizes are readable (min 16px body, 14px captions)
[ ] Whitespace is generous -- sections breathe
[ ] Copy is scannable (bold, bullets, short paragraphs)
[ ] A/B variant changes exactly one element (Pro tier)

deliverables/
  landing-page-{project}-{date}.html   - Complete HTML file (Standard/Pro)
  copy.md                               - Page copy in Markdown (all tiers)
  brief-summary.md                      - Quick summary and implementation notes

# Landing Page Delivery Summary

**Project:** {project_name}
**Tier:** {Basic|Standard|Pro}
**Date:** {date}

## What Was Delivered
- {List of files and what each contains}

## Copy Framework Used
- {AIDA/PAS/other} -- {why this was chosen}

## Implementation Notes
- {How to deploy: upload HTML, copy/paste, integrate with CMS}
- {Placeholder images to replace: list with recommended dimensions}
- {Form action URL to configure}
- {Analytics tracking to add}

## A/B Test Notes (Pro)
- {Variant descriptions and hypothesis}
- {Recommended test duration}

# Create copy-only landing page
cashclaw landing --type copy --product "SaaS dashboard tool" --cta "start-trial" --framework aida

# Create full HTML landing page
cashclaw landing --type html --product "SaaS dashboard tool" --cta "start-trial" --colors "#2563eb,#1e40af,#f59e0b"

# Create pro landing page with A/B variant
cashclaw landing --type html --product "SaaS dashboard tool" --cta "start-trial" --ab-test headline --tier pro

# Preview the generated page
cashclaw landing preview --file landing-page-dashboard-2026-03-15.html