website refactor

apps/website/components/drivers/RatingComponent.tsx

@@ -1,8 +1,7 @@
 
 
-import { Box } from '@/ui/Box';
-import { ProgressBar } from '@/ui/ProgressBar';
 import { Stack } from '@/ui/Stack';
+import { ProgressBar } from '@/ui/ProgressBar';
 import { Text } from '@/ui/Text';
 
 interface RatingComponentProps {
@@ -27,13 +26,13 @@ export function RatingComponent({
   const percentage = (value / maxValue) * 100;
 
   return (
-    <Box>
-      <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
+    <Stack>
+      <Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
         <Text weight="medium" color="text-white">{label}</Text>
         <Text size="2xl" weight="bold" color={color}>
           {value}{suffix}
         </Text>
-      </Box>
+      </Stack>
       
       <ProgressBar value={percentage} max={100} color={color} mb={3} />
 
@@ -41,12 +40,12 @@ export function RatingComponent({
 
       <Stack gap={1}>
         {breakdown.map((item, index) => (
-          <Box key={index} display="flex" alignItems="center" justifyContent="between">
+          <Stack key={index} display="flex" alignItems="center" justifyContent="between">
             <Text size="xs" color="text-gray-500">{item.label}</Text>
             <Text size="xs" color="text-gray-400">{item.percentage}%</Text>
-          </Box>
+          </Stack>
         ))}
       </Stack>
-    </Box>
+    </Stack>
   );
 }