website refactor

apps/website/components/home/HomeStatsStrip.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { MetricCard } from '@/ui/MetricCard';
+import { Activity, Users, Trophy, Calendar } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+
+/**
+ * HomeStatsStrip - A thin strip showing some status or quick info.
+ * Part of the "Telemetry-workspace" feel.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeStatsStrip() {
+  return (
+    <Box bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
+      <Container>
+        <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={0} borderLeft borderRight borderColor="border-gray/30">
+          <MetricCard 
+            label="Active Drivers" 
+            value="1,284" 
+            icon={Users} 
+            trend={{ value: 12, isPositive: true }}
+            border={false}
+            bg="transparent"
+          />
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Live Sessions" 
+              value="42" 
+              icon={Activity} 
+              color="text-telemetry-aqua"
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Total Races" 
+              value="15,402" 
+              icon={Trophy} 
+              color="text-warning-amber"
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Next Event" 
+              value="14:00" 
+              icon={Calendar} 
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}