Sessions 5-7a: 955 tests, deployment ready
This commit is contained in:
+261
-16
@@ -1,22 +1,267 @@
|
||||
'use client';
|
||||
|
||||
import { GradePill } from './GradeCard';
|
||||
|
||||
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>
|
||||
<section className="radial-glow diagonal-cut" style={{ position: 'relative', overflow: 'hidden' }}>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 1200,
|
||||
margin: '0 auto',
|
||||
padding: '96px 24px 64px',
|
||||
display: 'grid',
|
||||
gap: 48,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
className="hero-grid"
|
||||
>
|
||||
<div className="animate-fade-up" style={{ maxWidth: 800 }}>
|
||||
<span
|
||||
className="mono"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
padding: '4px 12px',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.10em',
|
||||
borderRadius: 999,
|
||||
background: 'var(--accent-glow)',
|
||||
color: 'var(--grade-a)',
|
||||
marginBottom: 24,
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
NBA · MLB · WNBA
|
||||
</span>
|
||||
<h1
|
||||
className="text-balance"
|
||||
style={{
|
||||
fontSize: 'clamp(36px, 6vw, 64px)',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '-0.03em',
|
||||
lineHeight: 1.05,
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
The books have every advantage.<br />
|
||||
<span style={{ color: 'var(--grade-a)' }}>We built this to give it back.</span>
|
||||
</h1>
|
||||
<p
|
||||
className="text-pretty"
|
||||
style={{
|
||||
fontSize: 18,
|
||||
color: 'var(--text-secondary)',
|
||||
lineHeight: 1.6,
|
||||
marginBottom: 32,
|
||||
maxWidth: 600,
|
||||
}}
|
||||
>
|
||||
Grade your NBA, MLB, and WNBA props with intelligence the books don't want you to have.
|
||||
Forty-plus factors. Kill conditions. Alt-line ladders. The honest ledger.
|
||||
</p>
|
||||
<SportBadgeStrip />
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 24 }}>
|
||||
<a href="/signup" className="btn-primary" style={{ padding: '14px 28px', fontSize: 15 }}>
|
||||
Get Started — Free
|
||||
</a>
|
||||
<a href="/ledger" className="btn-ghost" style={{ padding: '14px 28px', fontSize: 15 }}>
|
||||
See the Ledger
|
||||
</a>
|
||||
</div>
|
||||
<p style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 16 }}>
|
||||
5 free reads every month. No credit card. Cancel anytime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FloatingDemoCard />
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '0 24px 32px',
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
VYNDR is an analytics tool, not a sportsbook. Gamble responsibly. 1-800-522-4700.
|
||||
</p>
|
||||
|
||||
<style jsx>{`
|
||||
@media (min-width: 960px) {
|
||||
:global(.hero-grid) {
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const SPORTS_DISPLAY = [
|
||||
{ label: 'NBA', active: true, color: '#E94B3C' },
|
||||
{ label: 'MLB', active: true, color: '#1E90FF' },
|
||||
{ label: 'WNBA', active: true, color: '#F7944A' },
|
||||
{ label: 'NFL', active: false, color: '#013369' },
|
||||
{ label: 'NHL', active: false, color: '#A0A0B0' },
|
||||
{ label: 'TENNIS', active: false, color: '#C5B358' },
|
||||
{ label: 'MMA', active: false, color: '#D4AF37' },
|
||||
{ label: 'BOXING', active: false, color: '#8B0000' },
|
||||
{ label: 'GOLF', active: false, color: '#2E7D32' },
|
||||
];
|
||||
|
||||
function SportBadgeStrip() {
|
||||
return (
|
||||
<div
|
||||
role="list"
|
||||
aria-label="Supported sports"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
flexWrap: 'wrap',
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
maxWidth: 640,
|
||||
}}
|
||||
>
|
||||
{SPORTS_DISPLAY.map((s) => {
|
||||
const base: React.CSSProperties = {
|
||||
fontFamily: 'IBM Plex Mono, JetBrains Mono, monospace',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.08em',
|
||||
padding: '5px 11px',
|
||||
borderRadius: 999,
|
||||
textTransform: 'uppercase',
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
return s.active ? (
|
||||
<span
|
||||
key={s.label}
|
||||
role="listitem"
|
||||
style={{
|
||||
...base,
|
||||
color: s.color,
|
||||
background: `${s.color}1A`,
|
||||
border: `1px solid ${s.color}66`,
|
||||
boxShadow: `0 0 12px ${s.color}33`,
|
||||
}}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
key={s.label}
|
||||
role="listitem"
|
||||
title="COMING THIS SUMMER"
|
||||
aria-label={`${s.label} — coming this summer`}
|
||||
style={{
|
||||
...base,
|
||||
color: 'var(--text-2)',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FloatingDemoCard() {
|
||||
return (
|
||||
<div
|
||||
className="animate-fade-up stagger-3"
|
||||
style={{
|
||||
position: 'relative',
|
||||
transform: 'rotate(-1deg)',
|
||||
padding: 24,
|
||||
background: 'var(--bg-elevated)',
|
||||
border: '1px solid var(--border-focus)',
|
||||
borderRadius: 20,
|
||||
boxShadow: '0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-glow)',
|
||||
maxWidth: 380,
|
||||
marginInline: 'auto',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<div>
|
||||
<span
|
||||
className="mono"
|
||||
style={{
|
||||
fontSize: 11,
|
||||
padding: '2px 8px',
|
||||
borderRadius: 999,
|
||||
background: 'rgba(233,75,60,0.15)',
|
||||
color: '#E94B3C',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
NBA
|
||||
</span>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 600, marginTop: 8 }}>Nikola Jokic</h3>
|
||||
<p className="mono" style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
|
||||
Over 26.5 points
|
||||
</p>
|
||||
</div>
|
||||
<GradePill grade="A-" confidence={73} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||||
<Stat label="Projection" value="29.4 pts" />
|
||||
<Stat label="Edge" value="+6.2%" tone="positive" />
|
||||
</div>
|
||||
<ul style={{ display: 'grid', gap: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
|
||||
<li style={row}>
|
||||
<span>Matchup</span>
|
||||
<span style={{ color: 'var(--text-primary)' }}>LAL · 26th vs C</span>
|
||||
</li>
|
||||
<li style={row}>
|
||||
<span>L10 form</span>
|
||||
<span style={{ color: 'var(--text-primary)' }}>27.4 / 7 of 10</span>
|
||||
</li>
|
||||
<li style={row}>
|
||||
<span>Usage shift</span>
|
||||
<span style={{ color: 'var(--grade-a)' }}>+3.2% w/o Murray</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const row: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
paddingBlock: 4,
|
||||
borderBottom: '1px solid var(--border)',
|
||||
};
|
||||
|
||||
function Stat({ label, value, tone }: { label: string; value: string; tone?: 'positive' }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '8px 12px',
|
||||
background: 'var(--bg-surface)',
|
||||
borderRadius: 10,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>{label}</div>
|
||||
<div
|
||||
className="mono"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: tone === 'positive' ? 'var(--grade-a)' : 'var(--text-primary)',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user