tokens saved grid

docs/components/community-stats-header.tsx

@@ -0,0 +1,34 @@
+import { fetchCommunityStats, fmtNum, fmtUsd } from '@/lib/telemetry';
+
+/**
+ * Server component that renders the top-level stats for the community savings page.
+ * Fetches live data from Supabase at render time.
+ */
+export async function CommunityStatsHeader() {
+  const data = await fetchCommunityStats();
+
+  const stats = [
+    { value: fmtNum(data.total_tokens_saved), label: 'Tokens Saved' },
+    { value: fmtUsd(data.total_cost_saved), label: 'Cost Saved' },
+    { value: fmtNum(data.total_requests), label: 'Requests Optimized' },
+    { value: fmtNum(data.unique_instances), label: 'Active Instances' },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 not-prose">
+      {stats.map((s) => (
+        <div
+          key={s.label}
+          className="flex flex-col items-center p-5 rounded-xl border border-fd-border bg-fd-card"
+        >
+          <span className="text-2xl font-bold text-fd-foreground">
+            {s.value}
+          </span>
+          <span className="mt-1 text-sm text-fd-muted-foreground">
+            {s.label}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

docs/components/live-stats.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { fetchCommunityStats, fmtNum, fmtUsd } from '@/lib/telemetry';
+
+/**
+ * Server component that fetches live stats from Supabase at render time.
+ * Falls back to hardcoded data if the API is unreachable.
+ */
+export async function LiveStats() {
+  const data = await fetchCommunityStats();
+
+  const stats = [
+    { value: fmtNum(data.total_tokens_saved), label: 'Tokens Saved' },
+    { value: fmtUsd(data.total_cost_saved), label: 'Cost Saved' },
+    { value: fmtNum(data.total_requests), label: 'Requests Optimized' },
+    { value: fmtNum(data.unique_instances), label: 'Active Instances' },
+  ];
+
+  return (
+    <div className="not-prose">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 my-8">
+        {stats.map((s) => (
+          <div
+            key={s.label}
+            className="flex flex-col items-center p-5 rounded-xl border border-fd-border bg-fd-card"
+          >
+            <span className="text-2xl font-bold text-fd-foreground">
+              {s.value}
+            </span>
+            <span className="mt-1 text-sm text-fd-muted-foreground">
+              {s.label}
+            </span>
+          </div>
+        ))}
+      </div>
+      <Link
+        href="/docs/community-savings"
+        className="text-sm font-medium hover:underline"
+      >
+        View detailed charts and breakdowns &rarr;
+      </Link>
+    </div>
+  );
+}

docs/components/mdx.tsx

@@ -6,10 +6,11 @@ import { createGenerator } from 'fumadocs-typescript';
 import { TypeTable } from 'fumadocs-ui/components/type-table';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import {
-  LiveStats,
   KeyFeatures,
   FrameworkIntegrations,
 } from './marketing';
+import { LiveStats } from './live-stats';
+import { CommunityStatsHeader } from './community-stats-header';
 import { StatsSection } from './stats';
 import { CommunityCharts } from './community-charts';
 
@@ -27,6 +28,7 @@ export function getMDXComponents(components?: MDXComponents) {
     Tabs,
     StatsSection,
     CommunityCharts,
+    CommunityStatsHeader,
     LiveStats,
     KeyFeatures,
     FrameworkIntegrations,

docs/content/docs/community-savings.mdx

@@ -7,7 +7,7 @@ Real-time aggregate metrics from Headroom proxy instances worldwide. All data is
 
 ## Overview
 
-<CommunityCharts section="stats" />
+<CommunityStatsHeader />
 
 ## Savings Over Time