44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Metrics — four headline results with animated count-up on scroll-in.
|
|
* The ROAS metric is the single emerald-accented "signature" number.
|
|
*/
|
|
|
|
import Reveal from "./Reveal";
|
|
import CountUp from "./CountUp";
|
|
import { metrics } from "../content";
|
|
|
|
export default function Metrics() {
|
|
return (
|
|
<section id="results" className="metrics" aria-label="Results">
|
|
<div className="wrap">
|
|
<Reveal>
|
|
<p className="kicker">The numbers</p>
|
|
<h2 className="section__title">Results we can show you.</h2>
|
|
</Reveal>
|
|
|
|
<div className="metrics__inner">
|
|
<Reveal className="metrics__grid" stagger={0.1}>
|
|
{metrics.map((m) => (
|
|
<div
|
|
className={`metric${"accent" in m && m.accent ? " metric--accent" : ""}`}
|
|
key={m.label}
|
|
>
|
|
<p className="metric__num">
|
|
<CountUp
|
|
value={m.value}
|
|
prefix={"prefix" in m ? m.prefix : ""}
|
|
suffix={m.suffix}
|
|
decimals={"decimals" in m ? m.decimals : 0}
|
|
/>
|
|
</p>
|
|
<p className="metric__label">{m.label}</p>
|
|
</div>
|
|
))}
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|