website refactor

apps/website/components/races/NextRaceCard.tsx

@@ -2,12 +2,11 @@
 
 import { Calendar, ChevronRight, Clock } from 'lucide-react';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
@@ -43,7 +42,7 @@ export function NextRaceCard({
         borderColor: 'rgba(59, 130, 246, 0.3)',
       }}
     >
-      <Box
+      <Stack
         position="absolute"
         top="0"
         right="0"
@@ -54,7 +53,7 @@ export function NextRaceCard({
           borderBottomLeftRadius: '9999px',
         }}
       />
-      <Box position="relative">
+      <Stack position="relative">
         <Stack direction="row" align="center" gap={2} mb={4}>
           <Badge variant="primary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
             Next Race
@@ -67,7 +66,7 @@ export function NextRaceCard({
         </Stack>
 
         <Stack direction="row" align="end" justify="between" wrap gap={4}>
-          <Box>
+          <Stack>
             <Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>
               {track}
             </Heading>
@@ -88,10 +87,10 @@ export function NextRaceCard({
                 </Text>
               </Stack>
             </Stack>
-          </Box>
+          </Stack>
 
           <Stack align="end" gap={3}>
-            <Box textAlign="right">
+            <Stack textAlign="right">
               <Text
                 size="xs"
                 color="text-gray-500"
@@ -104,8 +103,8 @@ export function NextRaceCard({
               <Text size="3xl" weight="bold" color="text-primary-blue" font="mono">
                 {timeUntil}
               </Text>
-            </Box>
-            <Box>
+            </Stack>
+            <Stack>
               <Link href={href}>
                 <Button
                   variant="primary"
@@ -114,10 +113,10 @@ export function NextRaceCard({
                   View Details
                 </Button>
               </Link>
-            </Box>
+            </Stack>
           </Stack>
         </Stack>
-      </Box>
+      </Stack>
     </Surface>
   );
 }