website refactor

apps/website/components/teams/TeamCardWrapper.tsx

@@ -2,8 +2,9 @@ import { TeamCard as UiTeamCard } from '@/components/teams/TeamCard';
 import { TeamStatItem } from '@/components/teams/TeamStatItem';
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
+import { BadgeGroup } from '@/ui/BadgeGroup';
 import {
     Clock,
     Crown,
@@ -40,7 +41,7 @@ function getPerformanceBadge(level?: string) {
     case 'advanced':
       return { icon: Star, label: 'Advanced', variant: 'primary' as const };
     case 'intermediate':
-      return { icon: TrendingUp, label: 'Intermediate', variant: 'info' as const };
+      return { icon: TrendingUp, label: 'Intermediate', variant: 'default' as const };
     case 'beginner':
       return { icon: Shield, label: 'Beginner', variant: 'success' as const };
     default:
@@ -51,9 +52,9 @@ function getPerformanceBadge(level?: string) {
 function getSpecializationBadge(specialization?: string) {
   switch (specialization) {
     case 'endurance':
-      return { icon: Clock, label: 'Endurance', color: 'var(--warning-amber)' };
+      return { icon: Clock, label: 'Endurance', intent: 'warning' as const };
     case 'sprint':
-      return { icon: Zap, label: 'Sprint', color: 'var(--neon-aqua)' };
+      return { icon: Zap, label: 'Sprint', intent: 'telemetry' as const };
     default:
       return null;
   }
@@ -93,42 +94,28 @@ export function TeamCard({
         </Badge>
       )}
       specializationContent={specializationBadge && (
-        <Stack direction="row" align="center" gap={1}>
-          <Icon icon={specializationBadge.icon} size={3} color={specializationBadge.color} />
-          <Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
-        </Stack>
+        <Group gap={1}>
+          <Icon icon={specializationBadge.icon} size={3} intent={specializationBadge.intent} />
+          <Text size="xs" variant="low">{specializationBadge.label}</Text>
+        </Group>
       )}
       categoryBadge={category && (
         <Badge variant="primary">
-          <Stack w="2" h="2" rounded="full" bg="bg-purple-500" mr={1.5} />
           {category}
         </Badge>
       )}
       languagesContent={languages && languages.length > 0 && (
-        <Stack 
-          display="flex" 
-          alignItems="center" 
-          gap={1.5} 
-          px={2} 
-          py={1} 
-          rounded="md" 
-          bg="bg-iron-gray/50" 
-          border 
-          borderColor="border-charcoal-outline/30"
-        >
-          <Icon icon={Languages} size={3} color="var(--neon-purple)" />
-          <Text size="xs" color="text-gray-400">
-            {languages.slice(0, 2).join(', ')}
-            {languages.length > 2 && ` +${languages.length - 2}`}
-          </Text>
-        </Stack>
+        <Badge variant="default" icon={Languages}>
+          {languages.slice(0, 2).join(', ')}
+          {languages.length > 2 && ` +${languages.length - 2}`}
+        </Badge>
       )}
       statsContent={
-        <>
-          <TeamStatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="text-primary-blue" align="center" />
-          <TeamStatItem label="Wins" value={totalWins ?? 0} color="text-performance-green" align="center" />
-          <TeamStatItem label="Races" value={totalRaces ?? 0} color="text-white" align="center" />
-        </>
+        <Group gap={4} justify="center">
+          <TeamStatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} intent="primary" align="center" />
+          <TeamStatItem label="Wins" value={totalWins ?? 0} intent="success" align="center" />
+          <TeamStatItem label="Races" value={totalRaces ?? 0} intent="high" align="center" />
+        </Group>
       }
     />
   );