website refactor

apps/website/components/races/RacePageHeader.tsx

@@ -5,7 +5,6 @@ import { Flag, CalendarDays, Clock, Zap, Trophy, LucideIcon } from 'lucide-react
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Grid } from '@/ui/Grid';
 import { Surface } from '@/ui/Surface';
@@ -34,7 +33,7 @@ export function RacePageHeader({
       overflow="hidden"
     >
       {/* Background Accent */}
-      <Box 
+      <Stack 
         position="absolute" 
         top={0} 
         left={0} 
@@ -67,7 +66,7 @@ export function RacePageHeader({
 
 function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
   return (
-    <Box p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
+    <Stack p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
       <Stack gap={1}>
         <Stack direction="row" align="center" gap={2}>
           <Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} groupHoverTextColor={color !== 'text-white' ? color : undefined} />
@@ -75,6 +74,6 @@ function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIc
         </Stack>
         <Text size="2xl" weight="bold" color={color}>{value}</Text>
       </Stack>
-    </Box>
+    </Stack>
   );
 }