// ─── Atoms & small components ────────────────────────────────────
const Arrow = ({ size = 14 }) => (
);
const ArrowUpRight = ({ size = 14 }) => (
);
const Check = ({ size = 16 }) => (
);
const Eyebrow = ({ num, children, accent = false }) => (
{num && {num}}
{children}
);
// Section header with eyebrow + display title + optional lead
function SectionHeader({ eyebrowNum, eyebrow, title, lead, align = "left", max = 720 }) {
return (
{eyebrow}
{title}
{lead && {lead}
}
);
}
// ─── Geometric hero ornament ──────────────────────────────
function HeroOrnament({ scale = 1 }) {
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf;
let start = performance.now();
const loop = (now) => {
setT((now - start) / 1000);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const rot = (t * 4) % 360;
const pulse = 1 + Math.sin(t * 0.9) * 0.02;
return (
);
}
// Compact geometric mark used as case-card visual
function CaseGlyph({ hue = 222, pattern = 0 }) {
const c = `oklch(0.58 0.2 ${hue})`;
const c2 = `oklch(0.48 0.22 ${hue})`;
const bg = `oklch(0.96 0.04 ${hue})`;
return (
);
}
// Animated live counter
function AnimatedStat({ num, label, sub }) {
return (
{num}
{label}
{sub &&
{sub}
}
);
}
// Accordion
function Accordion({ items }) {
const [open, setOpen] = React.useState(0);
return (
{items.map((it, i) => {
const isOpen = open === i;
return (
);
})}