website refactor

apps/website/components/drivers/RatingBreakdown.tsx

@@ -1,11 +1,10 @@
 
 
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { RatingComponent } from '@/components/drivers/RatingComponent';
 import { RatingHistoryItem } from '@/components/drivers/RatingHistoryItem';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface RatingBreakdownProps {
@@ -94,23 +93,23 @@ export function RatingBreakdown({
       </Card>
 
       <Card borderColor="border-primary-blue/30" bg="bg-charcoal-outline/20">
-        <Box display="flex" alignItems="center" gap={3} mb={3}>
+        <Stack display="flex" alignItems="center" gap={3} mb={3}>
           <Text size="2xl">📈</Text>
           <Heading level={3}>Rating Insights</Heading>
-        </Box>
+        </Stack>
         <Stack as="ul" gap={2}>
-          <Box as="li" display="flex" alignItems="start" gap={2}>
+          <Stack as="li" display="flex" alignItems="start" gap={2}>
             <Text color="text-performance-green" mt={0.5}>✓</Text>
             <Text size="sm" color="text-gray-400">Strong safety rating - keep up the clean racing!</Text>
-          </Box>
-          <Box as="li" display="flex" alignItems="start" gap={2}>
+          </Stack>
+          <Stack as="li" display="flex" alignItems="start" gap={2}>
             <Text color="text-warning-amber" mt={0.5}>→</Text>
             <Text size="sm" color="text-gray-400">Skill rating improving - competitive against higher-rated drivers</Text>
-          </Box>
-          <Box as="li" display="flex" alignItems="start" gap={2}>
+          </Stack>
+          <Stack as="li" display="flex" alignItems="start" gap={2}>
             <Text color="text-primary-blue" mt={0.5}>i</Text>
             <Text size="sm" color="text-gray-400">Complete more races to stabilize your ratings</Text>
-          </Box>
+          </Stack>
         </Stack>
       </Card>
     </Stack>