Stat row

Four headline numbers in a row, collapsing to two columns on mobile. Values use tabular-nums so the digits stay aligned when they change.

Contentmetricsnumbersresponsive

Preview

99.98%

Uptime

42ms

Median response

Languages

Trackers

apps/site/blocks/components/stat-row.tsx

export function StatRow() {
  return (
    <section className="border-b border-border/60">
      <div className="mx-auto grid max-w-6xl grid-cols-2 gap-8 px-4 py-16 sm:px-6 md:grid-cols-4">
        {[
          { value: '99.98%', label: 'Uptime' },
          { value: '42ms', label: 'Median response' },
          { value: '7', label: 'Languages' },
          { value: '0', label: 'Trackers' },
        ].map((stat) => (
          <div key={stat.label} className="space-y-1">
            <div className="text-3xl font-semibold tracking-tight tabular-nums">{stat.value}</div>
            <div className="text-sm text-muted-foreground">{stat.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Dependencies

None. This block is self-contained — plain React and Tailwind utility classes. Paste the file and it renders.

Colours come from CSS variables (--background, --primary, --border) using the shadcn/ui token names, so the block adopts your palette rather than importing ours.