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 VYNDR 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 vyndr repo (monorepo)

Pages

/ (Home)

Single-page scroll with sections:

1. Hero

• Headline: "Stop guessing. Start grading."
• Subheadline: "VYNDR 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:

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

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