website refactor

apps/website/components/home/HomeStatsStrip.tsx

@@ -3,8 +3,9 @@
 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';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 
 /**
  * HomeStatsStrip - A thin strip showing some status or quick info.
@@ -13,9 +14,9 @@ import { Container } from '@/ui/Container';
  */
 export function HomeStatsStrip() {
   return (
-    <Box bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
+    <Stack 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">
+        <Grid cols={2} mdCols={4} gap={0} borderLeft borderRight borderColor="border-gray/30">
           <MetricCard 
             label="Active Drivers" 
             value="1,284" 
@@ -24,7 +25,7 @@ export function HomeStatsStrip() {
             border={false}
             bg="transparent"
           />
-          <Box borderLeft borderColor="border-gray/30">
+          <Stack borderLeft borderColor="border-gray/30">
             <MetricCard 
               label="Live Sessions" 
               value="42" 
@@ -33,8 +34,8 @@ export function HomeStatsStrip() {
               border={false}
               bg="transparent"
             />
-          </Box>
-          <Box borderLeft borderColor="border-gray/30">
+          </Stack>
+          <Stack borderLeft borderColor="border-gray/30">
             <MetricCard 
               label="Total Races" 
               value="15,402" 
@@ -43,8 +44,8 @@ export function HomeStatsStrip() {
               border={false}
               bg="transparent"
             />
-          </Box>
-          <Box borderLeft borderColor="border-gray/30">
+          </Stack>
+          <Stack borderLeft borderColor="border-gray/30">
             <MetricCard 
               label="Next Event" 
               value="14:00" 
@@ -52,9 +53,9 @@ export function HomeStatsStrip() {
               border={false}
               bg="transparent"
             />
-          </Box>
-        </Box>
+          </Stack>
+        </Grid>
       </Container>
-    </Box>
+    </Stack>
   );
 }