website refactor

apps/website/components/drivers/SkillLevelButton.tsx

@@ -2,6 +2,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Group } from '@/ui/Group';
 import { LucideIcon } from 'lucide-react';
 
 interface SkillLevelButtonProps {
@@ -28,13 +29,20 @@ export function SkillLevelButton({
       variant="ghost"
       onClick={onClick}
       fullWidth
-      className={`${bgColor} border ${borderColor} flex items-center justify-between p-3 rounded-lg h-auto`}
+      style={{ 
+        padding: '0.75rem', 
+        height: 'auto', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'space-between',
+        borderRadius: 'var(--ui-radius-lg)'
+      }}
     >
-      <Stack direction="row" align="center" gap={2}>
+      <Group gap={2}>
         <Icon icon={icon} size={4} className={color} />
-        <Text weight="medium" color="text-white">{label}</Text>
-      </Stack>
-      <Text size="sm" color="text-gray-400">{count} teams</Text>
+        <Text weight="medium" variant="high">{label}</Text>
+      </Group>
+      <Text size="sm" variant="low">{count} teams</Text>
     </Button>
   );
 }