website refactor

apps/website/components/teams/TeamHeroSectionWrapper.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { TeamHero } from '@/ui/TeamHero';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import {
     Crown,
     Plus,
@@ -27,24 +28,36 @@ const SKILL_LEVELS = [
     label: 'Pro',
     icon: Crown,
     intent: 'warning' as const,
+    color: 'text-warning-amber',
+    bgColor: 'bg-warning-amber/10',
+    borderColor: 'border-warning-amber/20',
   },
   {
     id: 'advanced',
     label: 'Advanced',
     icon: Star,
     intent: 'primary' as const,
+    color: 'text-primary-blue',
+    bgColor: 'bg-primary-blue/10',
+    borderColor: 'border-primary-blue/20',
   },
   {
     id: 'intermediate',
     label: 'Intermediate',
     icon: TrendingUp,
     intent: 'telemetry' as const,
+    color: 'text-telemetry-aqua',
+    bgColor: 'bg-telemetry-aqua/10',
+    borderColor: 'border-telemetry-aqua/20',
   },
   {
     id: 'beginner',
     label: 'Beginner',
     icon: Shield,
     intent: 'success' as const,
+    color: 'text-performance-green',
+    bgColor: 'bg-performance-green/10',
+    borderColor: 'border-performance-green/20',
   },
 ] as const;
 
@@ -96,11 +109,11 @@ export function TeamHeroSection({
         </React.Fragment>
       }
       sideContent={
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Stack gap={4}>
           <Text size="xs" variant="low" weight="bold" uppercase>
             Find Your Level
           </Text>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <Stack gap={2}>
             {SKILL_LEVELS.map((level) => {
               const count = teamsByLevel[level.id]?.length || 0;
 
@@ -109,13 +122,16 @@ export function TeamHeroSection({
                   key={level.id}
                   label={level.label}
                   icon={level.icon}
+                  color={level.color}
+                  bgColor={level.bgColor}
+                  borderColor={level.borderColor}
                   count={count}
                   onClick={() => onSkillLevelClick(level.id as SkillLevel)}
                 />
               );
             })}
-          </div>
-        </div>
+          </Stack>
+        </Stack>
       }
     />
   );