website refactor

apps/website/components/races/RaceResultHero.tsx

@@ -1,10 +1,9 @@
 
 
 import { Trophy } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { DecorativeBlur } from '@/ui/DecorativeBlur';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
@@ -57,7 +56,7 @@ export function RaceResultHero({
         
         <Stack direction="row" align="center" justify="between" wrap gap={6} position="relative" zIndex={10}>
           <Stack direction="row" align="center" gap={5}>
-            <Box 
+            <Stack 
               position="relative" 
               display="flex" 
               alignItems="center" 
@@ -84,9 +83,9 @@ export function RaceResultHero({
                 />
               )}
               P{position}
-            </Box>
+            </Stack>
 
-            <Box>
+            <Stack>
               <Text 
                 size="3xl" 
                 weight="bold" 
@@ -98,12 +97,12 @@ export function RaceResultHero({
               </Text>
               <Stack direction="row" align="center" gap={3}>
                 <Text size="sm" color="text-gray-400">Started P{startPosition}</Text>
-                <Box w="1" h="1" rounded="full" bg="bg-charcoal-outline" />
+                <Stack w="1" h="1" rounded="full" bg="bg-charcoal-outline" />
                 <Text size="sm" color={isClean ? 'text-performance-green' : 'text-gray-400'}>
                   {incidents}x incidents {isClean && '✨'}
                 </Text>
               </Stack>
-            </Box>
+            </Stack>
           </Stack>
 
           <Stack direction="row" gap={3} wrap>