website refactor

apps/website/components/drivers/DriverHeaderPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
 
@@ -27,7 +26,7 @@ export function DriverHeaderPanel({
   const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
 
   return (
-    <Box 
+    <Stack 
       bg="bg-panel-gray" 
       rounded="xl" 
       border 
@@ -36,7 +35,7 @@ export function DriverHeaderPanel({
       position="relative"
     >
       {/* Background Accent */}
-      <Box 
+      <Stack 
         position="absolute" 
         top={0} 
         left={0} 
@@ -46,10 +45,10 @@ export function DriverHeaderPanel({
         opacity={0.5}
       />
 
-      <Box p={6} position="relative">
+      <Stack p={6} position="relative">
         <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
           {/* Avatar */}
-          <Box 
+          <Stack 
             width="32" 
             height="32" 
             rounded="2xl" 
@@ -65,10 +64,10 @@ export function DriverHeaderPanel({
               fill 
               objectFit="cover" 
             />
-          </Box>
+          </Stack>
 
           {/* Info */}
-          <Box flexGrow={1}>
+          <Stack flexGrow={1}>
             <Stack gap={2}>
               <Stack direction="row" align="center" gap={3} wrap>
                 <Text as="h1" size="3xl" weight="bold" color="text-white">
@@ -94,16 +93,16 @@ export function DriverHeaderPanel({
                 </Text>
               )}
             </Stack>
-          </Box>
+          </Stack>
 
           {/* Actions */}
           {actions && (
-            <Box flexShrink={0}>
+            <Stack flexShrink={0}>
               {actions}
-            </Box>
+            </Stack>
           )}
         </Stack>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }