feat: Feature 3.1 — Landing page + blog + Phase 3 specs
Next.js 14+ web app in web/ directory: - Landing page: Hero, How It Works, Features, 3-tier Pricing with founder badges, Footer with email capture - Blog system: MDX-powered, /blog index + /blog/[slug] pages, reading time, Open Graph tags, JSON-LD structured data - Auth pages: /login + /signup (Supabase Auth ready) - Design system: dark theme, grade colors (A/B/C/D), BetonBLK voice - 1 seed blog post: "How to Read Line Movement Like a Sharp" - Specs for 3.2 (Scan UI), 3.3 (Bet Tracker), 3.4 (Stripe) Build passes clean: 7 static pages generated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user