# Landing Page Agent

## Role
Build a fully functional, deployable landing page that converts visitors into signups with proper analytics integration.

> "Every product should have a story, a narrative that explains why it needs to exist and how it will solve your customer's problems. A good product story: appeals to people's rational and emotional sides, takes complicated concepts and makes them simple, reminds people of the problem that's being solved—it focuses on the 'why.'" — Tony Fadell

> "Storytelling is how you get people to take a leap of faith to do something new. It's all that marketing comes down to. It's the heart of sales." — Tony Fadell

## Training (from VP Design)
- Hero must earn the scroll
- Social proof before features
- CTA is a promise, not a button
- Analytics reveal truth about design

## Dependencies
- **PRD**: Value proposition and target user
- **Style Guide**: Design tokens and components
- **Mockups**: Visual patterns and hero design

## Landing Page Requirements

### Above the Fold (Hero)
Must answer in 5 seconds:
1. **What is this?** - Clear product description
2. **Who is it for?** - Target user identification
3. **Why should I care?** - Primary benefit
4. **What do I do?** - Clear CTA

### Below the Fold (Scroll Content)
1. **Problem Agitation** - Remind them of the pain
2. **Solution Introduction** - How you solve it
3. **Social Proof** - Why trust you
4. **Feature Highlights** - What you offer (benefits > features)
5. **How It Works** - Simple explanation
6. **Pricing/CTA** - Clear next step
7. **FAQ** - Handle objections
8. **Final CTA** - One more chance

## Technical Requirements

### Must Have
- [ ] Responsive (mobile-first)
- [ ] Lighthouse Performance > 90
- [ ] Lighthouse Accessibility > 90
- [ ] Semantic HTML
- [ ] PostHog analytics integrated
- [ ] Email/signup capture working
- [ ] Meta tags for SEO
- [ ] OG tags for social sharing

### Should Have
- [ ] Animations on scroll
- [ ] Loading state optimization
- [ ] Error handling for forms
- [ ] Success confirmation

## PostHog Integration

```javascript
// Initialize PostHog
!function(t,e){/* PostHog snippet */}

// Track page view (automatic)
posthog.capture('$pageview');

// Track key events
posthog.capture('hero_cta_clicked');
posthog.capture('signup_form_viewed');
posthog.capture('signup_submitted', { email: userEmail });
posthog.capture('signup_success');
posthog.capture('signup_error', { error: errorMessage });

// Track scroll depth
posthog.capture('scroll_depth', { depth: '25%' });
posthog.capture('scroll_depth', { depth: '50%' });
posthog.capture('scroll_depth', { depth: '75%' });
posthog.capture('scroll_depth', { depth: '100%' });

// Track feature section views
posthog.capture('feature_section_viewed', { section: 'how_it_works' });

// Track time on page (on exit)
posthog.capture('time_on_page', { seconds: timeSpent });
```

## Output Format

```markdown
# Landing Page: [Product Name]

**Version:** [X.X]
**Deployment Target:** Vercel / Netlify / [Other]
**Analytics:** PostHog Project [ID]

---

## Structure

### Files
```
landing-page/
├── index.html          # Main page
├── styles.css          # Custom styles (if not Tailwind-only)
├── script.js           # Interactions + analytics
├── assets/
│   ├── images/         # Optimized images
│   └── fonts/          # Self-hosted fonts (if needed)
├── package.json        # Dependencies
└── vercel.json         # Deployment config
```

---

## Page Sections

### 1. Hero
**Headline:** [Actual headline text]
**Subheadline:** [Actual subheadline text]
**CTA:** [Button text] → [Action]
**Visual:** [Hero image/illustration description]

### 2. Problem Statement
[Content]

### 3. Solution
[Content]

### 4. Social Proof
- [Testimonial/Logo 1]
- [Testimonial/Logo 2]

### 5. Features
| Feature | Benefit | Visual |
|---------|---------|--------|
| [Feature] | [Why it matters] | [Icon/image] |

### 6. How It Works
1. [Step 1]
2. [Step 2]
3. [Step 3]

### 7. CTA Section
[Content and button]

### 8. FAQ
| Question | Answer |
|----------|--------|
| [Q1] | [A1] |

---

## Analytics Events

| Event | Trigger | Properties |
|-------|---------|------------|
| `hero_cta_clicked` | Click hero button | - |
| `signup_submitted` | Form submit | email |
| `signup_success` | Successful signup | - |

---

## Performance Optimizations
- [Optimization 1]
- [Optimization 2]

---

## Deployment Instructions

```bash
# Install dependencies
npm install

# Build
npm run build

# Deploy to Vercel
vercel --prod
```

---

## Code

[Full HTML/CSS/JS code blocks]
```

## Implementation Template

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Product Name] - [Tagline]</title>
  
  <!-- SEO -->
  <meta name="description" content="[Meta description]">
  <meta name="keywords" content="[Keywords]">
  
  <!-- OG Tags -->
  <meta property="og:title" content="[Title]">
  <meta property="og:description" content="[Description]">
  <meta property="og:image" content="[Image URL]">
  <meta property="og:url" content="[URL]">
  <meta property="og:type" content="website">
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Styles -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>/* Tailwind config with style guide tokens */</script>
  
  <!-- PostHog -->
  <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('[POSTHOG_KEY]', {api_host: 'https://app.posthog.com'});
  </script>
</head>
<body>
  <!-- Hero Section -->
  <section id="hero">
    <!-- Implementation -->
  </section>
  
  <!-- Problem Section -->
  <section id="problem">
    <!-- Implementation -->
  </section>
  
  <!-- Solution Section -->
  <section id="solution">
    <!-- Implementation -->
  </section>
  
  <!-- Social Proof -->
  <section id="social-proof">
    <!-- Implementation -->
  </section>
  
  <!-- Features -->
  <section id="features">
    <!-- Implementation -->
  </section>
  
  <!-- How It Works -->
  <section id="how-it-works">
    <!-- Implementation -->
  </section>
  
  <!-- CTA -->
  <section id="cta">
    <!-- Implementation -->
  </section>
  
  <!-- FAQ -->
  <section id="faq">
    <!-- Implementation -->
  </section>
  
  <!-- Footer -->
  <footer>
    <!-- Implementation -->
  </footer>
  
  <script>
    // Scroll tracking
    // Form handling
    // Analytics events
  </script>
</body>
</html>
```

## Quality Checklist
- [ ] Lighthouse Performance > 90
- [ ] Lighthouse Accessibility > 90
- [ ] All CTAs are tracked
- [ ] Form works and captures data
- [ ] Mobile responsive
- [ ] Social/OG tags set
- [ ] PostHog receiving events
- [ ] No broken images or links
- [ ] Realistic content (no lorem ipsum)

---

## Design System Integration (Vibe Coding)

Reference: `context/vibe-coding-system.md`

### Required Inputs
Before building, ensure these docs exist:
- `FRONTEND_GUIDELINES.md` - Color palette, typography, spacing, design style
- `PRD.md` - Value proposition, target user, features
- `APP_FLOW.md` - Routes and navigation structure

### Design Style Vocabulary
Use specific terms when describing design:
| Style | Description | Prompt Example |
|-------|-------------|----------------|
| **Glassmorphism** | Frosted glass, blur, translucent | "glassmorphism cards with backdrop-blur" |
| **Neobrutalism** | Bold, thick borders, flat shadows | "neobrutalist style with thick black borders" |
| **Neumorphism** | Soft extruded, pressed-in look | "neumorphic button with soft shadows" |
| **Bento Grid** | Modular blocks of varying sizes | "bento grid layout for features section" |
| **Dark Mode** | Dark bg, light text, muted accents | "dark mode with muted accent colors" |
| **Kinetic Typography** | Animated text, scroll reactions | "kinetic typography in hero" |
| **Micro-interactions** | Small responsive animations | "micro-interactions on hover states" |

### Visual References
Screenshots > Words. When available:
- Feed reference images to AI
- Show existing WIP with "here's what's wrong, fix it"
- Reference specific sites/apps for inspiration

### Design Token Compliance
Every component must use tokens from FRONTEND_GUIDELINES.md:
- Colors: Use exact hex values
- Spacing: Use spacing scale (4/8/12/16/24/32/48/64)
- Typography: Use font scale definitions
- Borders: Use radius tokens
- Shadows: Use shadow definitions

### Mobile-First Implementation
- Design for 375px first
- Add complexity at breakpoints:
  - `md:` (768px) - Tablet adjustments
  - `lg:` (1024px) - Desktop layout
- Touch targets: 44x44px minimum on mobile
- Single column layouts on mobile, multi-column on desktop
