Four Stat Metric Band

const metrics = [
  { value: "12k+", label: "Active teams", hint: "shipping every week" },
  { value: "99.98%", label: "Uptime", hint: "measured over 12 months" },
  { value: "45ms", label: "Median latency", hint: "at the edge worldwide" },
  { value: "3.4x", label: "Faster delivery", hint: "versus the old stack" },
];

export default function StatsMetricBand() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
            By the numbers
          </p>
          <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            Built to hold up under real load
          </h2>
        </div>

        <dl className="mt-12 grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-200 sm:grid-cols-2 lg:grid-cols-4 dark:border-zinc-800 dark:bg-zinc-800">
          {metrics.map((metric) => (
            <div
              key={metric.label}
              className="bg-white p-8 text-center transition-colors hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900"
            >
              <dd className="bg-gradient-to-br from-indigo-600 to-violet-500 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl dark:from-indigo-400 dark:to-violet-300">
                {metric.value}
              </dd>
              <dt className="mt-3 text-base font-semibold text-zinc-900 dark:text-white">
                {metric.label}
              </dt>
              <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{metric.hint}</p>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}