website refactor

apps/website/components/drivers/ActiveDriverCard.tsx

@@ -1,8 +1,8 @@
-
-
-import { Box } from '@/ui/Box';
+import React from 'react';
 import { Image } from '@/ui/Image';
 import { Text } from '@/ui/Text';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
 
 interface ActiveDriverCardProps {
   name: string;
@@ -24,25 +24,21 @@ export function ActiveDriverCard({
   onClick,
 }: ActiveDriverCardProps) {
   return (
-    <Box
+    <Stack
       as="button"
-      type="button"
+      {...({ type: 'button' } as any)}
       onClick={onClick}
       p={3}
       rounded="xl"
       bg="bg-iron-gray/40"
       border
       borderColor="border-charcoal-outline"
-      transition
-      cursor="pointer"
-      hoverBorderColor="performance-green/40"
-      group
-      textAlign="center"
+      className="transition-all hover:border-performance-green/40 group text-center"
     >
-      <Box position="relative" w="12" h="12" mx="auto" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" mb={2}>
+      <Stack position="relative" w="12" h="12" mx="auto" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" mb={2}>
         <Image src={avatarUrl || '/default-avatar.png'} alt={name} objectFit="cover" fill />
-        <Box position="absolute" bottom="0" right="0" w="3" h="3" rounded="full" bg="bg-performance-green" border borderColor="border-iron-gray" style={{ borderWidth: '2px' }} />
-      </Box>
+        <Stack position="absolute" bottom="0" right="0" w="3" h="3" rounded="full" bg="bg-performance-green" border borderColor="border-iron-gray" style={{ borderWidth: '2px' }}>{null}</Stack>
+      </Stack>
       <Text 
         size="sm" 
         weight="medium" 
@@ -54,14 +50,14 @@ export function ActiveDriverCard({
       >
         {name}
       </Text>
-      <Box display="flex" alignItems="center" justifyContent="center" gap={1}>
+      <Stack direction="row" align="center" justify="center" gap={1}>
         {categoryLabel && (
           <Text size="xs" color={categoryColor}>{categoryLabel}</Text>
         )}
         {skillLevelLabel && (
           <Text size="xs" color={skillLevelColor}>{skillLevelLabel}</Text>
         )}
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }