Stats

const stats = [
  { value: "99.99%", label: "Uptime over the last year" },
  { value: "120k+", label: "Developers building with us" },
  { value: "8B", label: "Requests served per day" },
  { value: "<40ms", label: "Median global response time" },
];

export function Stats() {
  return (
    <section className="bg-zinc-50 py-24 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50">
      <div className="mx-auto max-w-5xl px-6">
        <div className="grid 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">
          {stats.map((s) => (
            <div
              key={s.label}
              className="bg-white p-8 text-center dark:bg-zinc-900"
            >
              <div className="text-4xl font-semibold tracking-tight">
                {s.value}
              </div>
              <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
                {s.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}