# /build-page — Landing Page Builder

## Usage
```
/build-page "landing page for SaaS founders"
/build-page "pricing page"
/build-page "comparison vs CompetitorX"
/build-page "feature page for AI automation"
```

## Input
- `$ARGUMENTS` — **required**: page type + target audience or comparison subject

## Process

### Step 1: Parse Intent
Extract from `$ARGUMENTS`:
- **Page type**: landing, pricing, comparison, feature, about
- **Target audience**: who is this page for? (e.g., "developers", "SaaS founders", "lawyers")
- **Comparison subject**: if comparison page, which competitor?

### Step 2: Load Context
1. Read `data/positioning.json` — select relevant copy for the audience and funnel stage
2. Read `data/competitors.json` — for comparison pages, load the specific competitor
3. Read `data/config.json` — detect project framework from repos (Next.js, plain HTML, etc.)
4. Read `data/pages.json` — check if a similar page already exists

### Step 2.5: Select Conversion Framework

For **landing pages**, use the **StoryBrand 7-part narrative framework** as the default structure. StoryBrand ensures the customer is the hero and the product is the guide:

1. **Character** — The customer is the hero, not the brand. Open with their desire. What do they want?
2. **Problem** — Three layers:
   - *External* (tangible obstacle): "20 ideas, zero data on which one matters"
   - *Internal* (emotional frustration): "Building alone, deciding alone"
   - *Philosophical* (injustice): "Solo founders shouldn't have to choose between building and strategizing"
3. **Guide** — Position the brand as the guide, not the hero. Show:
   - *Empathy*: "We understand because we faced the same problem"
   - *Authority*: Social proof, stats, trust signals
4. **Plan** — Exactly 3 steps. Reduce anxiety by making the path simple and clear.
5. **Call to Action** — Two types:
   - *Direct CTA*: The primary action (install, buy, sign up)
   - *Transitional CTA*: Lower commitment (waitlist, newsletter, demo)
6. **Failure** — What happens if they don't act? Paint the stakes. Be specific and blunt.
7. **Success** — What life looks like after. Aspirational, concrete outcomes.

This framework applies to landing pages only. Pricing, comparison, and feature pages use their own templates below.

### Step 3: Determine Page Architecture
Based on page type, plan the section layout:

**Landing page (StoryBrand-mapped):**
1. Hero — **Character**: customer desire headline, not product pitch. Transitional CTA only (waitlist/newsletter). Save direct CTA for after the narrative builds.
2. Pain Points — **Problem**: 3 cards mapped to External / Internal / Philosophical problems.
3. Guide — **Guide**: empathy statement + authority stats + 4 compact trust bullets reframed as outcomes (not features).
4. The Plan — **Plan**: exactly 3 steps (Install / Scan / Ship). Keep it dead simple.
5. Demo — **Guide (extended)**: show real output. Best asset on any dev-tool landing page.
6. Primary CTA — **Call to Action**: Direct CTA (install command) + Transitional CTA (waitlist form).
7. Failure — **Failure**: 2-3 blunt statements about what happens without action. Dark background.
8. Success — **Success**: 2-3 aspirational statements about life after. Light/accent background.
9. Pricing — Value anchor: Free tier + paid tier. Move after success so the user is emotionally primed.
10. FAQ — Objection handling: 5-6 questions that address remaining doubts.
11. Final CTA — CTA repeat: short terminal block + waitlist form.

**Pricing page:**
1. Hero — pricing headline
2. Pricing tiers — cards with features, highlighted recommended plan
3. Feature comparison table
4. FAQ — pricing-specific questions
5. CTA — start trial / contact sales

**Comparison page:**
1. Hero — "[Product] vs [Competitor]"
2. Quick comparison table
3. Detailed feature-by-feature comparison
4. Where [Product] wins
5. Social proof from switchers
6. Migration CTA

**Feature page:**
1. Hero — feature-specific headline
2. Problem → Solution narrative
3. Feature details with screenshots/visuals
4. Use cases
5. CTA

### Step 4: Select Copy
For each section, select or adapt copy from `positioning.json`:

**StoryBrand mapping from positioning.json fields:**
- `pain_points` → **Problem** cards: select 3 and assign to External / Internal / Philosophical
- `social_proof` → **Guide** authority section (stats, testimonials, trust signals)
- `messaging_pillars[].counter_objections` → **Guide** empathy ("we understand...")
- `ctas` → **Call to Action**: map to Direct CTA (primary action) + Transitional CTA (lower commitment)
- `objection_handlers` → **FAQ** section
- `messaging_pillars[].key_messages` → **Success** section (aspirational outcomes)

General rules:
- Match headline by funnel stage and audience
- Select relevant CTAs
- Pull social proof
- Adapt objection handlers for FAQ section

If positioning data is insufficient, generate new copy consistent with the existing framework.

### Step 5: Generate Code
Detect the project framework and generate appropriate code:

**For Next.js projects** (most common):
- Create a React component with TypeScript
- Use Tailwind CSS for styling
- Make it fully responsive (mobile-first)
- Include proper semantic HTML (h1, h2, sections, etc.)
- Add meta tags / SEO metadata via Next.js metadata API
- Use `'use client'` directive only if interactivity is needed

**For plain HTML projects:**
- Generate standalone HTML + CSS
- Include responsive design

**Code quality requirements:**
- Production-ready — not a prototype
- Accessible (proper ARIA labels, contrast ratios)
- Fast (no unnecessary JS, optimized images via next/image)
- SEO-friendly (semantic markup, proper heading hierarchy)

### Step 6: Track Build
Update `data/pages.json`:
```json
{
  "last_updated": "YYYY-MM-DD",
  "pages": [
    {
      "id": "page-001",
      "name": "Landing Page for SaaS Founders",
      "url_path": "/landing",
      "type": "landing",
      "status": "draft",
      "created_at": "YYYY-MM-DD",
      "positioning_snapshot": "YYYY-MM-DD",
      "competitor_refs": [],
      "files_created": ["src/app/landing/page.tsx"],
      "metrics": {
        "bounce_rate": null,
        "conversion_rate": null,
        "avg_time_on_page": null,
        "visitors": null
      }
    }
  ]
}
```

### Step 7: Output
Print:
- Files created (with full paths)
- Local dev URL to preview (e.g., `http://localhost:3000/landing`)
- Page structure summary (sections and their copy)
- Recommendation: review and run `/measure-page` once live

## Output Files
- Generated page source code (location depends on framework)
- `data/pages.json` — updated page registry