A row of animated ring-gauge stat cards whose arcs sweep in on scroll, with orbiting metric labels and a hover flood that inverts the number inside the ring.
"use client";
import OrbitRingStats from "@/components/ui/orbit-ring-stats";
export default function OrbitRingStatsPaperDemo() {
return (
<div className="flex min-h-full w-full items-center justify-center px-4 py-12 bg-[#f3f1ec] text-[#1b1a17]">
<div className="w-full max-w-4xl">
<p className="font-mono text-[11px] uppercase tracking-[0.16em] text-[#6f6a62]">
Majlis Coworking · Q3 2026
</p>
<h2 className="mt-3 text-2xl font-semibold tracking-tight sm:text-3xl">
A full house, most days
</h2>
<OrbitRingStats
className="mt-10"
theme="paper"
label="Q3 figures"
rings={[
{
label: "Desks in use",
value: 78,
unit: "%",
note: "+6 pts on Q2",
orbit: "Desk utilisation · goal 75%",
},
{
label: "Renewals",
value: 88,
unit: "%",
note: "212 of 241 members",
orbit: "Members renewing · goal 85%",
},
{
label: "Event seats",
value: 64,
unit: "%",
note: "Thursday talks",
orbit: "Event attendance · goal 70%",
},
{
label: "Solved in 1 h",
value: 93,
unit: "%",
note: "Median 18 min",
orbit: "Support tickets · goal 90%",
},
]}
/>
</div>
</div>
);
}
