website refactor

apps/website/components/home/HomeStatsStrip.tsx

@@ -1,43 +1,39 @@
 'use client';
 
 import React from 'react';
-import { MetricCard } from '@/ui/MetricCard';
+import { StatsStrip } from '@/ui/StatsStrip';
 import { Activity, Users, Trophy, Calendar } from 'lucide-react';
-import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
 
 /**
  * HomeStatsStrip - A thin strip showing some status or quick info.
  * Part of the "Telemetry-workspace" feel.
  */
 export function HomeStatsStrip() {
-  return (
-    <Container>
-      <Grid cols={{ base: 2, md: 4 }} gap={4}>
-        <MetricCard 
-          label="Active Drivers" 
-          value="1,284" 
-          icon={Users} 
-          trend={{ value: 12, isPositive: true }}
-        />
-        <MetricCard 
-          label="Live Sessions" 
-          value="42" 
-          icon={Activity} 
-          intent="telemetry"
-        />
-        <MetricCard 
-          label="Total Races" 
-          value="15,402" 
-          icon={Trophy} 
-          intent="warning"
-        />
-        <MetricCard 
-          label="Next Event" 
-          value="14:00" 
-          icon={Calendar} 
-        />
-      </Grid>
-    </Container>
-  );
+  const stats = [
+    { 
+      label: "Active Drivers", 
+      value: "1,284", 
+      icon: Users, 
+      trend: { value: 12, isPositive: true }
+    },
+    { 
+      label: "Live Sessions", 
+      value: "42", 
+      icon: Activity, 
+      intent: "telemetry" as const
+    },
+    { 
+      label: "Total Races", 
+      value: "15,402", 
+      icon: Trophy, 
+      intent: "warning" as const
+    },
+    { 
+      label: "Next Event", 
+      value: "14:00", 
+      icon: Calendar 
+    },
+  ];
+
+  return <StatsStrip stats={stats} />;
 }