website refactor

apps/website/components/drivers/SkillLevelHeader.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { LucideIcon, ChevronRight, UserPlus } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -35,9 +34,9 @@ export function SkillLevelHeader({
   showToggle,
 }: SkillLevelHeaderProps) {
   return (
-    <Box display="flex" alignItems="center" justifyContent="between" mb={4}>
+    <Stack display="flex" alignItems="center" justifyContent="between" mb={4}>
       <Stack direction="row" align="center" gap={3}>
-        <Box 
+        <Stack 
           display="flex" 
           center 
           width="11" 
@@ -46,8 +45,8 @@ export function SkillLevelHeader({
           className={`${bgColor} border ${borderColor}`}
         >
           <Icon icon={icon} size={5} className={color} />
-        </Box>
-        <Box>
+        </Stack>
+        <Stack>
           <Stack direction="row" align="center" gap={2}>
             <Heading level={2}>{label}</Heading>
             <Badge variant="default">
@@ -60,11 +59,11 @@ export function SkillLevelHeader({
             )}
           </Stack>
           <Text size="sm" color="text-gray-500">{description}</Text>
-        </Box>
+        </Stack>
       </Stack>
 
       {showToggle && (
-        <Box
+        <Stack
           as="button"
           type="button"
           onClick={onToggle}
@@ -78,8 +77,8 @@ export function SkillLevelHeader({
         >
           <Text size="sm">{isExpanded ? 'Show less' : `View all ${teamCount}`}</Text>
           <Icon icon={ChevronRight} size={4} className={`transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
-        </Box>
+        </Stack>
       )}
-    </Box>
+    </Stack>
   );
 }