Cashclaw Landing Page

If the client provides only "make me a landing page," ask these questions before writing. Traffic source matters -- an ad landing page is different from an organic SEO page.

Step 2: Wireframe Structure

Before writing copy, define the page structure. Use a section-based approach:

## 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

Share this wireframe with the client for approval before writing copy.

Step 3: Copywriting

Write copy using one of these proven frameworks:

AIDA Framework (Attention - Interest - Desire - Action):

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."

PAS Framework (Problem - Agitate - Solve):

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.

Copywriting Rules (apply to every page):

1. Headline: Maximum 10 words. Must communicate the core benefit, not the feature.

   • Bad: "AI-Powered Project Management Software"
   • Good: "Ship Projects 3x Faster Without the Chaos"

2. Subheadline: One sentence that adds context to the headline. Maximum 20 words.

3. Body Copy:

   • Write in second person ("you" and "your").
   • Short sentences. Max 15 words average.
   • Short paragraphs. Max 3 sentences.
   • Use bullet points for lists of 3+ items.
   • Bold key phrases for scanners.

4. CTA Buttons:

   • Action verbs only: "Start Free Trial," "Get Your Report," "Book a Demo."
   • Never: "Submit," "Click Here," "Learn More" (too vague).
   • One primary CTA per section. Repeat the same CTA, do not introduce new ones.

5. Social Proof:

   • Specific numbers beat vague claims ("2,847 teams" not "thousands of teams").
   • Testimonials must include name, title, company. Photo placeholder noted.
   • Results-focused quotes: "{Metric} improved by {percent} in {timeframe}."

6. Objection Handling (FAQ):

   • Address the top 4-6 reasons someone would NOT buy.
   • Answer directly -- no corporate deflection.
   • Include pricing objection, time-to-value, and security/trust.

Step 4: HTML/CSS Generation (Standard and Pro)

Generate a fully responsive, single-file HTML page:

Technical Requirements:

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

CSS Variable Structure:

: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;
}

Step 5: A/B Variant (Pro Tier)

Create a second variant that tests one of these elements:

1. Headline variant - Different angle on the same value prop.
2. CTA variant - Different button text or placement.
3. Social proof variant - Different testimonial or proof element in hero.
4. Layout variant - Different section order (e.g., proof before features).

Document the hypothesis for each variant:

## 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

Step 6: Quality Checklist

Before delivering, verify:

[ ] 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)

Deliverable Format

Every landing page delivery includes:

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

brief-summary.md Format

# 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}

Quality Standards

• Headlines must be original. Never use overused phrases like "The Future of X" or "X Made Easy."
• Every section must earn its place. If it does not move the visitor closer to the CTA, cut it.
• Testimonials must feel real. Generic praise like "Great product!" is worthless. Demand specific results.
• HTML must be valid. Run through W3C validator mentally -- no unclosed tags, no deprecated elements.
• CSS must be clean. No !important unless absolutely necessary. No unused selectors.
• The page must tell a complete story from headline to final CTA.
• Never use stock photo descriptions. Use specific image direction relevant to the product.
• Mobile experience is not an afterthought. Test the mental model at 320px first.

Example Commands

# 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