193 lines
7.4 KiB
Markdown
193 lines
7.4 KiB
Markdown
# 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:**
|
|
```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
|
|
```
|
|
|
|
## 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
|