website refactor

apps/website/components/races/LiveRacesBanner.tsx

@@ -1,9 +1,8 @@
 
 
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
-import { Box } from '@/ui/Box';
-import { LiveRaceItem } from '@/components/races/LiveRaceItem';
 import { Stack } from '@/ui/Stack';
+import { LiveRaceItem } from '@/components/races/LiveRaceItem';
 import { Text } from '@/ui/Text';
 
 interface LiveRacesBannerProps {
@@ -15,7 +14,7 @@ export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps
   if (liveRaces.length === 0) return null;
 
   return (
-    <Box 
+    <Stack 
       position="relative" 
       overflow="hidden" 
       rounded="xl" 
@@ -24,7 +23,7 @@ export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps
       borderColor="border-performance-green/30"
       bg="linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1), transparent)"
     >
-      <Box 
+      <Stack 
         position="absolute" 
         top="0" 
         right="0" 
@@ -35,13 +34,13 @@ export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps
         blur="xl" 
       />
       
-      <Box position="relative" zIndex={10}>
-        <Box mb={4}>
+      <Stack position="relative" zIndex={10}>
+        <Stack mb={4}>
           <Stack direction="row" align="center" gap={2} bg="bg-performance-green/20" px={3} py={1} rounded="full" w="fit">
-            <Box w="2" h="2" bg="bg-performance-green" rounded="full" />
+            <Stack w="2" h="2" bg="bg-performance-green" rounded="full" />
             <Text weight="semibold" size="sm" color="text-performance-green">LIVE NOW</Text>
           </Stack>
-        </Box>
+        </Stack>
         
         <Stack gap={3}>
           {liveRaces.map((race) => (
@@ -53,7 +52,7 @@ export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps
             />
           ))}
         </Stack>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }