Files
vyndr/web/src/components/Features.tsx
T

120 lines
3.8 KiB
TypeScript

const FEATURES = [
{
icon: '◆',
title: 'Multi-dimensional player archetypes',
body: 'Players aren\'t one thing. Our model scores every dimension — pitcher discipline, batter approach, NBA usage shape — and blends them per matchup.',
},
{
icon: '↻',
title: 'Auto-calibrating engine',
body: 'Every resolved grade trains the next one. Point-biserial weight tuning, per-stat calibration, blind-spot detection. The model improves itself.',
},
{
icon: '⚡',
title: 'Beat reporter intelligence',
body: 'Lineup intel from the people closest to the team — 30 minutes before tip. Trust-tiered, redistribution-aware, line-correlated.',
},
{
icon: '⊘',
title: 'Kill conditions',
body: 'We don\'t just grade the prop. We tell you what kills it. Six hard checks per read: minutes, sample, fatigue, blowout risk, splits, line conflict.',
},
{
icon: '∿',
title: 'Parlay correlation math',
body: 'Phi-coefficient analysis catches the legs that secretly fight each other. The books love correlated unders. We surface them.',
},
{
icon: '⌧',
title: 'ABS intelligence (MLB)',
body: 'The automated strike zone changes everything. Per-pitcher, per-batter discipline scoring. Zone 14 framing loss. Challenge math.',
},
{
icon: '◯',
title: 'Every sport, one engine',
body: 'NBA. MLB. WNBA. Soccer. NFL coming September 2026 — more rolling out through 2026. A unified intelligence layer with sport-specific calibration.',
},
{
icon: '⌦',
title: 'The honest ledger',
body: 'Every grade. Every result. No hiding. No deletion. Brier score and CLV from day one. Public accuracy by tier.',
},
];
export default function Features() {
return (
<section
style={{
padding: '96px 24px',
borderTop: '1px solid var(--border)',
}}
>
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
<header style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
<h2
className="text-balance"
style={{
fontSize: 'clamp(28px, 4vw, 44px)',
fontWeight: 700,
letterSpacing: '-0.02em',
marginBottom: 16,
}}
>
One platform. Everything connected.
</h2>
<p style={{ fontSize: 17, color: 'var(--text-secondary)' }}>
Built by bettors who got tired of switching between five tabs to grade one prop.
</p>
</header>
<div
style={{
display: 'grid',
gap: 16,
}}
className="features-grid"
>
{FEATURES.map((f, i) => (
<div
key={f.title}
className={`surface surface-hover diagonal-cut animate-fade-up stagger-${(i % 6) + 1}`}
style={{ padding: 24 }}
>
<div
className="mono"
style={{
fontSize: 28,
color: 'var(--grade-a)',
marginBottom: 16,
lineHeight: 1,
}}
aria-hidden
>
{f.icon}
</div>
<h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>{f.title}</h3>
<p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{f.body}</p>
</div>
))}
</div>
</div>
<style jsx>{`
:global(.features-grid) {
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
:global(.features-grid) {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
:global(.features-grid) {
grid-template-columns: repeat(4, 1fr);
}
}
`}</style>
</section>
);
}