82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
const STEPS = [
|
|
{
|
|
n: '01',
|
|
title: 'Read a prop',
|
|
body: 'Pick a sport. Find the player. Set the line. We grade it in seconds across forty-plus factors.',
|
|
},
|
|
{
|
|
n: '02',
|
|
title: 'Read the grade',
|
|
body: 'Letter grade. Projection. Confidence. Factor breakdown. Kill conditions. Alt line ladder. The whole picture.',
|
|
},
|
|
{
|
|
n: '03',
|
|
title: 'Make the call',
|
|
body: 'Take the prop, walk away, or shop the alt line. Either way, you decided with intelligence — not vibes.',
|
|
},
|
|
];
|
|
|
|
export default function HowItWorks() {
|
|
return (
|
|
<section
|
|
style={{
|
|
padding: '96px 24px',
|
|
borderTop: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: 1100, 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 }}
|
|
>
|
|
How it works.
|
|
</h2>
|
|
<p style={{ fontSize: 17, color: 'var(--text-secondary)' }}>
|
|
Three steps. No tout picks. No black box.
|
|
</p>
|
|
</header>
|
|
|
|
<div className="hiw-grid" style={{ display: 'grid', gap: 24, position: 'relative' }}>
|
|
{STEPS.map((s, i) => (
|
|
<div
|
|
key={s.n}
|
|
className={`surface diagonal-cut animate-fade-up stagger-${i + 1}`}
|
|
style={{
|
|
padding: 32,
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<div
|
|
className="mono"
|
|
style={{
|
|
fontSize: 12,
|
|
fontWeight: 700,
|
|
color: 'var(--grade-a)',
|
|
letterSpacing: '0.10em',
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
STEP {s.n}
|
|
</div>
|
|
<h3 style={{ fontSize: 22, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>{s.title}</h3>
|
|
<p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{s.body}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
:global(.hiw-grid) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
@media (min-width: 768px) {
|
|
:global(.hiw-grid) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|