Add oversized globe background to stats section

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

components/site/stats-globe.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { type COBEOptions } from 'cobe';
+
+import { Globe } from '@/components/ui/globe';
+
+// Rotation per frame. Default globe is 0.005; lower is slower, 0 stops it.
+const GLOBE_SPEED = 0.003;
+
+const globeConfig: COBEOptions = {
+  width: 800,
+  height: 800,
+  onRender: () => {},
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.22,
+  dark: 1,
+  diffuse: 1.2,
+  mapSamples: 20000,
+  mapBrightness: 5,
+  baseColor: [0.22, 0.22, 0.22],
+  markerColor: [1, 1, 1],
+  glowColor: [0.1, 0.1, 0.1],
+  markers: [
+    { location: [37.7749, -122.4194], size: 0.08 },
+    { location: [40.7128, -74.006], size: 0.06 },
+    { location: [51.5072, -0.1276], size: 0.07 },
+    { location: [48.8566, 2.3522], size: 0.05 },
+    { location: [1.3521, 103.8198], size: 0.08 },
+    { location: [35.6762, 139.6503], size: 0.06 },
+    { location: [-33.8688, 151.2093], size: 0.05 },
+    { location: [-23.5505, -46.6333], size: 0.06 },
+  ],
+};
+
+export function StatsGlobe() {
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 overflow-hidden [mask-image:radial-gradient(ellipse_80%_110%_at_50%_90%,black_45%,transparent_100%)]"
+    >
+      <div className="absolute left-1/2 top-[6%] aspect-square w-[760px] -translate-x-1/2 opacity-90 sm:w-[1040px] lg:w-[1280px]">
+        <Globe className="max-w-none" config={globeConfig} speed={GLOBE_SPEED} />
+      </div>
+      <div className="absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-t from-black/80 to-transparent" />
+    </div>
+  );
+}

components/site/stats.tsx

@@ -1,3 +1,5 @@
+import { StatsGlobe } from '@/components/site/stats-globe';
+
 const stats = [
   { value: '45ms', label: 'Median edge response, worldwide' },
   { value: '99.99%', label: 'Platform uptime over the last year' },
@@ -7,10 +9,14 @@ const stats = [
 
 export function Stats() {
   return (
-    <section className="border-y border-white/10 bg-black">
-      <div className="mx-auto grid max-w-6xl grid-cols-2 gap-px overflow-hidden bg-white/10 lg:grid-cols-4">
+    <section className="relative overflow-hidden border-y border-white/10 bg-black py-16 sm:py-24">
+      <StatsGlobe />
+      <div className="relative z-10 mx-auto grid max-w-6xl grid-cols-2 gap-px lg:grid-cols-4">
         {stats.map((stat) => (
-          <div key={stat.label} className="bg-black px-6 py-12 text-center">
+          <div
+            key={stat.label}
+            className="px-6 py-12 text-center ring-1 ring-white/10"
+          >
             <div className="text-4xl font-semibold tracking-tight sm:text-5xl">
               {stat.value}
             </div>