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,47 @@
|
||||
const features = [
|
||||
{
|
||||
title: 'Prop Analysis',
|
||||
description: '6-step grading pipeline. Season average, recent form, situational splits, cross-book lines, kill conditions.',
|
||||
},
|
||||
{
|
||||
title: 'Correlation Detection',
|
||||
description: 'Flags conflicting legs in your parlay. Same-game overlap, opposing players, contradictory props.',
|
||||
},
|
||||
{
|
||||
title: 'Line Movement',
|
||||
description: 'Tracks lines throughout the day. Alerts when movement hits 0.5+ points. Sharp money indicators.',
|
||||
},
|
||||
{
|
||||
title: 'Kill Conditions',
|
||||
description: '6 hard checks before you bet. Low minutes, small sample, back-to-back, blowout risk, split conflicts.',
|
||||
},
|
||||
{
|
||||
title: 'Bet Tracking',
|
||||
description: 'Log every bet. Screenshot upload, quick slip, or manual entry. Track ROI and win rate over time.',
|
||||
},
|
||||
{
|
||||
title: 'Cascade Alerts',
|
||||
description: 'Star player scratched? BetonBLK re-grades your affected parlays and alerts you instantly.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<section className="py-24 px-4 bg-[var(--card)]">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-4">Built for Serious Bettors</h2>
|
||||
<p className="text-[var(--text-muted)] text-center mb-16 max-w-lg mx-auto">
|
||||
Every feature exists because we needed it ourselves. No fluff.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{features.map((f) => (
|
||||
<div key={f.title} className="p-5 rounded-xl border border-[var(--border)] bg-[var(--bg)]">
|
||||
<h3 className="font-semibold mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-[var(--text-muted)] leading-relaxed">{f.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function Footer() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// TODO: Store email in Supabase
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="py-16 px-4 border-t border-[var(--border)]">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-12 mb-12">
|
||||
<div>
|
||||
<h3 className="font-mono font-bold text-lg mb-2">
|
||||
Beton<span className="text-[var(--accent)]">BLK</span>
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-muted)] max-w-sm">
|
||||
AI-powered parlay intelligence. Built by bettors, for bettors.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Get early access + founder pricing</h4>
|
||||
{submitted ? (
|
||||
<p className="text-[var(--grade-a)] text-sm">You're in. We'll be in touch.</p>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-[var(--accent)] text-white rounded-lg text-sm font-medium hover:opacity-90 transition"
|
||||
>
|
||||
Join
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs text-[var(--text-muted)] border-t border-[var(--border)] pt-6">
|
||||
<span>2026 BetonBLK. All rights reserved.</span>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="hover:text-white transition">Terms</a>
|
||||
<a href="#" className="hover:text-white transition">Privacy</a>
|
||||
<a href="#" className="hover:text-white transition">Twitter/X</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
const gradeColors: Record<string, string> = {
|
||||
A: 'bg-[var(--grade-a)]/10 border-[var(--grade-a)] text-[var(--grade-a)]',
|
||||
B: 'bg-[var(--grade-b)]/10 border-[var(--grade-b)] text-[var(--grade-b)]',
|
||||
C: 'bg-[var(--grade-c)]/10 border-[var(--grade-c)] text-[var(--grade-c)]',
|
||||
D: 'bg-[var(--grade-d)]/10 border-[var(--grade-d)] text-[var(--grade-d)]',
|
||||
};
|
||||
|
||||
export default function GradeCard({ grade, confidence, label }: { grade: string; confidence?: number; label?: string }) {
|
||||
const colors = gradeColors[grade] || gradeColors.D;
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-3 px-4 py-2 rounded-xl border ${colors}`}>
|
||||
<span className="font-mono font-bold text-3xl">{grade}</span>
|
||||
{confidence != null && (
|
||||
<div className="text-sm">
|
||||
<div className="font-mono font-medium">{confidence}%</div>
|
||||
{label && <div className="text-xs opacity-70">{label}</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center justify-center px-4">
|
||||
<div className="max-w-3xl text-center">
|
||||
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6">
|
||||
Stop guessing.<br />
|
||||
<span className="text-[var(--accent)]">Start grading.</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-[var(--text-muted)] mb-10 max-w-xl mx-auto">
|
||||
BetonBLK scans your parlay in seconds. AI-powered prop analysis across DraftKings, FanDuel, and BetMGM.
|
||||
</p>
|
||||
<a
|
||||
href="/scan"
|
||||
className="inline-block px-8 py-4 bg-[var(--accent)] text-white font-semibold rounded-xl text-lg hover:opacity-90 transition"
|
||||
>
|
||||
Scan Your First Parlay — Free
|
||||
</a>
|
||||
<p className="mt-4 text-sm text-[var(--text-muted)]">5 free scans. No credit card required.</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
const steps = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Build your parlay',
|
||||
description: 'Add your legs — player, stat, line, book. 2 to 12 props.',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Get your grade',
|
||||
description: 'Each leg graded A through D. Overall parlay grade with correlation checks.',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'See the edge',
|
||||
description: 'Season averages, recent form, situational splits, cross-book line comparison. Every factor explained.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function HowItWorks() {
|
||||
return (
|
||||
<section className="py-24 px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-16">How It Works</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{steps.map((step) => (
|
||||
<div key={step.number} className="p-6 rounded-2xl bg-[var(--card)] border border-[var(--border)]">
|
||||
<div className="font-mono text-[var(--accent)] text-sm font-bold mb-3">{step.number}</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{step.title}</h3>
|
||||
<p className="text-[var(--text-muted)] text-sm leading-relaxed">{step.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
const tiers = [
|
||||
{
|
||||
name: 'Free',
|
||||
price: '$0',
|
||||
founderPrice: null,
|
||||
period: '',
|
||||
cta: 'Get Started',
|
||||
ctaHref: '/signup',
|
||||
highlight: false,
|
||||
features: [
|
||||
'5 scans per month',
|
||||
'View line movements',
|
||||
'Basic prop grades',
|
||||
],
|
||||
unavailable: ['Bet tracking', 'Cascade alerts', 'Performance analytics'],
|
||||
},
|
||||
{
|
||||
name: 'Analyst',
|
||||
price: '$19.99',
|
||||
founderPrice: '$14.99',
|
||||
period: '/mo',
|
||||
cta: 'Subscribe',
|
||||
ctaHref: '/api/stripe/checkout?tier=analyst',
|
||||
highlight: true,
|
||||
features: [
|
||||
'Unlimited scans',
|
||||
'Line movement alerts',
|
||||
'Bet tracking',
|
||||
'Cascade alerts',
|
||||
'Basic performance analytics',
|
||||
],
|
||||
unavailable: ['Priority alerts', 'Behavioral patterns'],
|
||||
},
|
||||
{
|
||||
name: 'Desk',
|
||||
price: '$49.99',
|
||||
founderPrice: '$34.99',
|
||||
period: '/mo',
|
||||
cta: 'Subscribe',
|
||||
ctaHref: '/api/stripe/checkout?tier=desk',
|
||||
highlight: false,
|
||||
features: [
|
||||
'Unlimited scans',
|
||||
'Line movement + priority alerts',
|
||||
'Full bet tracking',
|
||||
'Priority cascade alerts',
|
||||
'Full performance analytics',
|
||||
'Behavioral pattern insights',
|
||||
],
|
||||
unavailable: [],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<section className="py-24 px-4" id="pricing">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-4">Simple Pricing</h2>
|
||||
<p className="text-[var(--text-muted)] text-center mb-16">Start free. Upgrade when you're ready.</p>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{tiers.map((tier) => (
|
||||
<div
|
||||
key={tier.name}
|
||||
className={`relative p-6 rounded-2xl border ${
|
||||
tier.highlight
|
||||
? 'border-[var(--accent)] bg-[var(--accent)]/5'
|
||||
: 'border-[var(--border)] bg-[var(--card)]'
|
||||
}`}
|
||||
>
|
||||
{tier.founderPrice && (
|
||||
<div className="absolute -top-3 left-4 px-3 py-0.5 bg-[var(--accent)] text-white text-xs font-mono font-bold rounded-full">
|
||||
Founder Rate — Locked for Life
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-bold mt-2 mb-1">{tier.name}</h3>
|
||||
<div className="flex items-baseline gap-1 mb-6">
|
||||
{tier.founderPrice ? (
|
||||
<>
|
||||
<span className="text-3xl font-bold font-mono">{tier.founderPrice}</span>
|
||||
<span className="text-[var(--text-muted)] text-sm">{tier.period}</span>
|
||||
<span className="ml-2 text-sm text-[var(--text-muted)] line-through">{tier.price}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-3xl font-bold font-mono">{tier.price}</span>
|
||||
<span className="text-[var(--text-muted)] text-sm">{tier.period}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<ul className="space-y-2 mb-8">
|
||||
{tier.features.map((f) => (
|
||||
<li key={f} className="flex items-start gap-2 text-sm">
|
||||
<span className="text-[var(--grade-a)] mt-0.5">+</span>
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
{tier.unavailable.map((f) => (
|
||||
<li key={f} className="flex items-start gap-2 text-sm text-[var(--text-muted)]">
|
||||
<span className="mt-0.5">-</span>
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a
|
||||
href={tier.ctaHref}
|
||||
className={`block text-center py-3 rounded-xl font-medium transition ${
|
||||
tier.highlight
|
||||
? 'bg-[var(--accent)] text-white hover:opacity-90'
|
||||
: 'bg-[var(--border)] text-white hover:bg-[var(--text-muted)]/20'
|
||||
}`}
|
||||
>
|
||||
{tier.cta}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user