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,149 @@
|
||||
# Feature 3.2 — Scan UI
|
||||
|
||||
## Overview
|
||||
The parlay scanner interface. Users input legs via a manual form builder, submit for analysis, and see color-coded grades with full reasoning. Displays scan count for free tier users, upgrade prompts at the limit.
|
||||
|
||||
## Dependencies
|
||||
- Feature 2.1 — Parlay Scan API (`POST /api/scan/parlay`)
|
||||
- Feature 3.1 — Landing Page (shared layout, auth, design system)
|
||||
|
||||
## Page: /scan
|
||||
|
||||
### Layout
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ Header: BetonBLK logo + nav + scan counter │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─── Leg Builder ────────────────────────┐ │
|
||||
│ │ Player: [___________] (autocomplete) │ │
|
||||
│ │ Stat: [points ▼] Line: [26.5] │ │
|
||||
│ │ Direction: [Over ▼] Book: [DK ▼] │ │
|
||||
│ │ [+ Add Leg] │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Legs: ┌──┐ ┌──┐ ┌──┐ │
|
||||
│ │L1│ │L2│ │L3│ (removable chips) │
|
||||
│ └──┘ └──┘ └──┘ │
|
||||
│ │
|
||||
│ [🔍 Scan Parlay] │
|
||||
│ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Results (after scan): │
|
||||
│ │
|
||||
│ ┌─ Overall ──────────────────────────────┐ │
|
||||
│ │ PARLAY GRADE: [B] Confidence: 68% │ │
|
||||
│ │ Correlations: 1 flag │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ Leg 1 ────────────────────────────────┐ │
|
||||
│ │ Jokic Over 26.5 pts [A] 85% │ │
|
||||
│ │ Season: 26.3 | Last 10: 28.1 │ │
|
||||
│ │ Home: 27.8 | vs LAL: 30.5 │ │
|
||||
│ │ Kill conditions: none │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ Leg 2 ────────────────────────────────┐ │
|
||||
│ │ LeBron Over 8.5 reb [C] 52% │ │
|
||||
│ │ ... │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ Correlations ─────────────────────────┐ │
|
||||
│ │ ⚠ Same game, same team: LeBron + AD │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [📋 Save to Bet Tracker] [🔄 New Scan] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Components
|
||||
|
||||
**ScanCounter** (header)
|
||||
- Shows "3 of 5 scans used" for free tier
|
||||
- Shows "Unlimited" for paid tiers
|
||||
- Progress bar visual
|
||||
|
||||
**LegBuilder**
|
||||
- Player input with autocomplete (calls GET /players/search on NBA stats service)
|
||||
- Stat type dropdown: points, rebounds, assists, threes, blocks, steals, pra, turnovers
|
||||
- Line: numeric input
|
||||
- Direction: over/under toggle
|
||||
- Book: DraftKings, FanDuel, BetMGM dropdown
|
||||
- "Add Leg" button → adds to legs list (2-12 legs)
|
||||
|
||||
**LegChip**
|
||||
- Compact display: "Jokic O26.5 pts DK"
|
||||
- Remove button (X)
|
||||
- Reorderable (nice-to-have)
|
||||
|
||||
**ScanButton**
|
||||
- Disabled until 2+ legs added
|
||||
- Loading state during API call
|
||||
- Calls `POST /api/scan/parlay` with auth token
|
||||
|
||||
**ResultsPanel**
|
||||
- Overall parlay grade card (large, color-coded)
|
||||
- Individual leg cards with grade, confidence, edge, reasoning summary
|
||||
- Correlation flags section with icons
|
||||
- Kill conditions listed per leg
|
||||
|
||||
**UpgradePitch** (modal or inline)
|
||||
- Appears at scan 5 (from API response `upgrade_pitch`)
|
||||
- Shows personalized hook, insight, CTA
|
||||
- "Subscribe" button → Stripe checkout
|
||||
- "Maybe Later" dismisses
|
||||
|
||||
**GradeCard** (shared component from 3.1)
|
||||
- Letter grade (A/B/C/D) with background color
|
||||
- Confidence percentage
|
||||
- Edge percentage
|
||||
|
||||
### State Management
|
||||
```
|
||||
scanState = {
|
||||
legs: [], // array of leg objects
|
||||
isScanning: false, // loading state
|
||||
results: null, // API response
|
||||
error: null, // error message
|
||||
scanCount: 0, // from user profile
|
||||
scansRemaining: 5, // computed
|
||||
upgradePitch: null, // from API when applicable
|
||||
}
|
||||
```
|
||||
|
||||
### API Integration
|
||||
```
|
||||
1. Player search: GET http://localhost:8000/players/search?name=...
|
||||
→ Autocomplete results (debounced, 300ms)
|
||||
|
||||
2. Scan: POST /api/scan/parlay
|
||||
Headers: { Authorization: Bearer <jwt> }
|
||||
Body: { legs: [...] }
|
||||
→ Full parlay analysis response
|
||||
|
||||
3. Save to tracker: POST /api/bets/quickslip
|
||||
→ Creates bet from scan results
|
||||
```
|
||||
|
||||
## Acceptance Criteria
|
||||
1. Leg builder allows adding 2-12 legs with all required fields
|
||||
2. Player autocomplete searches as user types (debounced)
|
||||
3. Scan button calls API and displays results with grades
|
||||
4. Grade cards show correct colors (A=green, B=yellow, C=orange, D=red)
|
||||
5. Correlation flags displayed with appropriate severity icons
|
||||
6. Kill conditions listed per leg
|
||||
7. Scan counter shows remaining scans for free tier
|
||||
8. Upgrade pitch modal appears at scan 5 with personalized content
|
||||
9. "Save to Bet Tracker" creates a bet via quickslip API
|
||||
10. Error states handled: API down, invalid input, auth expired
|
||||
11. Responsive: works on mobile and desktop
|
||||
12. Loading states during API calls
|
||||
|
||||
## Test Plan
|
||||
- Component tests: LegBuilder adds/removes legs correctly
|
||||
- Component tests: GradeCard renders correct color per grade
|
||||
- Integration: full scan flow → results displayed
|
||||
- Upgrade pitch: appears at correct scan count
|
||||
- Error handling: API error → user-friendly message
|
||||
- Responsive: mobile leg builder usable
|
||||
Reference in New Issue
Block a user