vyndr/specs/feature-3-1-landing-page.md

# Feature 3.1 — Landing Page

## Overview
Next.js marketing site. Hero section, How It Works, 3-tier pricing with founder badges, email capture CTA, and a blog for SEO content. Deployed on Vercel. This is the first thing a visitor sees — it needs to convert. All copy uses BetonBLK voice: direct, confident, no fluff, speaks like a sharp bettor who respects your time.

## Dependencies
- None (static marketing page, no backend calls)
- Feature 3.4 (Stripe) links from pricing CTAs

## Tech
- **Framework:** Next.js 14+ (App Router)
- **Styling:** Tailwind CSS
- **Deployment:** Vercel
- **Directory:** `web/` in the betonblk repo (monorepo)

## Pages

### / (Home)
Single-page scroll with sections:

**1. Hero**
- Headline: "Stop guessing. Start grading."
- Subheadline: "BetonBLK scans your parlay in seconds. AI-powered prop analysis across DraftKings, FanDuel, and BetMGM."
- CTA button: "Scan Your First Parlay — Free" → links to /scan (Feature 3.2)
- Background: dark, clean, sports-betting aesthetic. No stock photos.

**2. How It Works**
3-step visual flow:
1. "Paste your parlay" — illustration of leg input
2. "Get your grade" — A/B/C/D grade card with color
3. "See the edge" — reasoning breakdown preview

**3. Features Grid**
- Prop Analysis: 6-step grading pipeline
- Correlation Detection: flags conflicting legs
- Line Movement: sharp money alerts
- Bet Tracking: ROI and win rate over time
- Kill Conditions: 6 hard checks before you bet

**4. Pricing**
3-tier card layout:

| | Free | Analyst | Desk |
|---|---|---|---|
| Price | $0 | $19.99/mo | $49.99/mo |
| Founder Price | — | $14.99/mo | $34.99/mo |
| Scans | 5/month | Unlimited | Unlimited |
| Line Movement | View | View + Alerts | View + Alerts + Priority |
| Bet Tracking | No | Yes | Yes |
| Cascade Alerts | No | Yes | Priority |
| Performance Analytics | No | Basic | Full + Patterns |

Founder badge: "Founder Rate — Locked for Life" visual badge on Analyst/Desk cards.
CTA: "Get Started" on Free, "Subscribe" on paid → links to Stripe checkout (Feature 3.4).

**5. Social Proof / Trust**
- "Built by bettors, for bettors"
- Number counters: props analyzed, parlays scanned (can be seeded/estimated)

**6. Footer**
- Email capture: "Get early access + founder pricing"
- Links: Terms, Privacy, Twitter/X, Discord (placeholder)

### /login
Supabase Auth login page (email + password, or magic link).

### /signup
Supabase Auth signup page → auto-creates user profile (trigger from Feature 1.4).

### /blog
MDX-powered blog for SEO content. Static generation at build time.

**Content types:**
- Betting strategy guides ("How to Read Line Movement Like a Sharp")
- Prop analysis breakdowns ("Why PRA Props Are the Most Profitable Market")
- Product updates ("New: Cascade Alerts When Your Player Gets Scratched")
- Stat explainers ("What Back-to-Back Games Do to Over/Under Props")

**Implementation:**
- MDX files in `content/blog/` directory
- `@next/mdx` or `contentlayer` for parsing
- Each post: frontmatter (title, date, slug, description, tags) + MDX body
- `/blog` index page with post list, sorted by date
- `/blog/[slug]` dynamic route for individual posts
- SEO: Open Graph tags, JSON-LD structured data, sitemap.xml
- Reading time estimate in post header

**Blog post frontmatter:**
```mdx
---
title: "How to Read Line Movement Like a Sharp"
date: "2026-03-22"
slug: "line-movement-guide"
description: "Line moves tell a story. Here's how to read it."
tags: ["strategy", "line-movement", "sharp-money"]
---
```

**Blog component structure:**
```
web/
├── app/
│   └── blog/
│       ├── page.tsx          # Blog index
│       └── [slug]/page.tsx   # Individual post
├── content/
│   └── blog/
│       ├── line-movement-guide.mdx
│       └── pra-props-explained.mdx
```

## BetonBLK Voice Guide
All user-facing copy follows these rules:
- **Direct.** No hedging. "This line is soft" not "This line might be worth considering."
- **Confident.** The system did the work. Present findings with authority.
- **Concise.** Bettors scan fast. Short sentences. No filler.
- **Respectful.** Never condescending. Assume the reader knows the game.
- **Honest.** If the edge is thin, say so. A D grade is "no edge — avoid" not "proceed with caution."

Examples:
- Hero: "Stop guessing. Start grading."
- Grade A: "Strong edge. Clear play."
- Grade D: "No edge. Walk away."
- Kill condition: "Back-to-back game. High-minute player. Historically underperforms."
- Upgrade pitch: "You've got a good eye. Unlock unlimited scans."

## Component Structure
```
web/
├── app/
│   ├── layout.tsx          # Root layout, fonts, metadata
│   ├── page.tsx            # Landing page (home)
│   ├── login/page.tsx      # Login
│   ├── signup/page.tsx     # Signup
│   ├── scan/page.tsx       # Feature 3.2
│   ├── tracker/page.tsx    # Feature 3.3
│   ├── blog/
│   │   ├── page.tsx        # Blog index
│   │   └── [slug]/page.tsx # Individual post
│   └── api/               # Next.js API routes (proxy to backend if needed)
├── components/
│   ├── Hero.tsx
│   ├── HowItWorks.tsx
│   ├── Features.tsx
│   ├── Pricing.tsx
│   ├── Footer.tsx
│   ├── GradeCard.tsx       # Reusable A/B/C/D grade display
│   ├── BlogCard.tsx        # Post preview card for blog index
│   └── ui/                 # Shared UI primitives
├── content/
│   └── blog/              # MDX blog posts
├── lib/
│   ├── supabase.ts         # Supabase client (browser)
│   ├── api.ts              # Backend API client
│   └── blog.ts             # MDX parsing + post listing helpers
├── public/
│   └── ...                 # Static assets
├── tailwind.config.ts
├── next.config.ts
└── package.json
```

## Design System
- **Colors:** Dark background (#0a0a0a), card backgrounds (#141414), accent green (#22c55e for A grade), yellow (#eab308 for B), orange (#f97316 for C), red (#ef4444 for D)
- **Typography:** Inter for body, JetBrains Mono for grades/numbers
- **Cards:** Rounded, subtle border, slight glow on hover
- **Grade colors:** A=green, B=yellow, C=orange, D=red — consistent across all UI

## Acceptance Criteria
1. Landing page loads with hero, how it works, features, pricing, footer
2. Pricing cards show all 3 tiers with correct prices and feature lists
3. Founder badges visible on Analyst and Desk cards
4. CTA buttons link to correct destinations (scan, checkout)
5. Login/signup pages functional with Supabase Auth
6. Email capture form in footer collects email (store in Supabase or simple list)
7. Blog index at /blog lists posts sorted by date
8. Individual blog posts render MDX with correct formatting
9. Blog posts include Open Graph tags and JSON-LD structured data
10. All copy follows BetonBLK voice (direct, confident, concise)
11. Responsive: works on mobile, tablet, desktop
12. Deploys to Vercel
13. Lighthouse performance score > 90
14. Dark theme throughout, grade colors consistent

## Test Plan
- Visual regression: screenshots at 3 breakpoints (mobile/tablet/desktop)
- Link verification: all CTAs navigate correctly
- Auth flow: signup → login → redirect to /scan
- Email capture: submit email → stored
- Blog: index page renders, individual post renders MDX
- Blog: SEO tags present in page source
- Lighthouse audit: performance > 90, accessibility > 85