File size: 2,586 Bytes
557ab38 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /**
* Numbers — a magazine-style data page. Big display numerals, small
* eyebrow labels, ruled dividers between rows. No cards, no gradients.
* The point is to present the resume metrics as if a designer laid them out.
*/
import { motion } from "motion/react";
const ROWS = [
{
label: "Field-level F1",
value: "0.94",
sub: "SROIE test split",
},
{
label: "Doc-level exact match",
value: "78%",
sub: "CORD test split",
},
{
label: "Median latency",
value: "1.9s",
sub: "text-only PDFs",
},
{
label: "Cost per doc",
value: "$0.0004",
sub: "GPT-5 nano, avg 2.4k input tokens",
},
];
export function Numbers() {
return (
<section className="mx-auto w-full max-w-[1240px] border-t border-[var(--rule)] px-6 py-24 md:px-10">
<div className="mb-14 flex items-end justify-between gap-6">
<div>
<p className="eyebrow mb-4">Quantified</p>
<h2 className="font-display text-[clamp(38px,5vw,72px)] leading-[1] text-[var(--ink-strong)]">
The numbers behind
<br />
<span className="font-display-italic">the pipeline.</span>
</h2>
</div>
<p className="hidden max-w-[280px] text-[13px] leading-[1.6] text-[var(--ink-soft)] md:block">
Every claim below comes from the eval harness in{" "}
<code className="font-mono text-[12px]">src/eval/</code>.
Reproduce with{" "}
<code className="font-mono text-[12px]">python scripts/run_eval.py</code>.
</p>
</div>
<div>
{ROWS.map((r, i) => (
<motion.div
key={r.label}
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-60px" }}
transition={{
duration: 0.7,
delay: i * 0.08,
ease: [0.16, 1, 0.3, 1],
}}
className="grid grid-cols-[1fr_auto] items-baseline gap-6 border-t border-[var(--rule)] py-8 md:grid-cols-[1fr_auto_1fr]"
>
<p className="text-[13px] uppercase tracking-[0.16em] text-[var(--ink-soft)]">
{r.label}
</p>
<p className="font-display text-[clamp(56px,7vw,108px)] leading-none text-[var(--ink-strong)]">
{r.value}
</p>
<p className="hidden text-[13px] leading-[1.5] text-[var(--ink-mute)] md:block md:text-right">
{r.sub}
</p>
</motion.div>
))}
</div>
</section>
);
}
|