website refactor

apps/website/components/teams/TeamHeroSectionWrapper.tsx

@@ -1,73 +1,52 @@
 
 
+'use client';
+
 import { SkillLevelButton } from '@/components/drivers/SkillLevelButton';
-import { TeamHeroSection as UiTeamHeroSection } from '@/components/teams/TeamHeroSection';
 import { TeamHeroStats } from '@/components/teams/TeamHeroStats';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { TeamHero } from '@/ui/TeamHero';
 import { Text } from '@/ui/Text';
 import {
     Crown,
-    LucideIcon,
     Plus,
     Search,
     Shield,
     Star,
     TrendingUp,
 } from 'lucide-react';
+import React from 'react';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 
-interface SkillLevelConfig {
-  id: SkillLevel;
-  label: string;
-  icon: LucideIcon;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-  description: string;
-}
-
-const SKILL_LEVELS: SkillLevelConfig[] = [
+const SKILL_LEVELS = [
   {
     id: 'pro',
     label: 'Pro',
     icon: Crown,
-    color: 'text-warning-amber',
-    bgColor: 'bg-yellow-400/10',
-    borderColor: 'border-yellow-400/30',
-    description: 'Elite competition, sponsored teams',
+    intent: 'warning' as const,
   },
   {
     id: 'advanced',
     label: 'Advanced',
     icon: Star,
-    color: 'text-purple-400',
-    bgColor: 'bg-purple-900/10',
-    borderColor: 'border-purple-900/30',
-    description: 'Competitive racing, high consistency',
+    intent: 'primary' as const,
   },
   {
     id: 'intermediate',
     label: 'Intermediate',
     icon: TrendingUp,
-    color: 'text-primary-blue',
-    bgColor: 'bg-blue-900/10',
-    borderColor: 'border-blue-900/30',
-    description: 'Growing skills, regular practice',
+    intent: 'telemetry' as const,
   },
   {
     id: 'beginner',
     label: 'Beginner',
     icon: Shield,
-    color: 'text-performance-green',
-    bgColor: 'bg-green-900/10',
-    borderColor: 'border-green-900/30',
-    description: 'Learning the basics, friendly environment',
+    intent: 'success' as const,
   },
-];
+] as const;
 
 interface TeamHeroSectionProps {
   teams: TeamSummaryViewModel[];
@@ -87,24 +66,23 @@ export function TeamHeroSection({
   onSkillLevelClick,
 }: TeamHeroSectionProps) {
   return (
-    <UiTeamHeroSection
+    <TeamHero
       title={
-        <>
+        <React.Fragment>
           Find Your
-          <Text color="text-purple-400"> Crew</Text>
-        </>
+          <Text as="span" variant="primary"> Crew</Text>
+        </React.Fragment>
       }
       description="Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions."
-      statsContent={
+      stats={
         <TeamHeroStats teamCount={teams.length} recruitingCount={recruitingCount} />
       }
-      actionsContent={
-        <>
+      actions={
+        <React.Fragment>
           <Button
             variant="primary"
             onClick={onShowCreateForm}
             icon={<Icon icon={Plus} size={4} />}
-            bg="bg-purple-600"
           >
             Create Team
           </Button>
@@ -115,14 +93,14 @@ export function TeamHeroSection({
           >
             Browse Teams
           </Button>
-        </>
+        </React.Fragment>
       }
       sideContent={
-        <>
-          <Text size="xs" color="text-gray-500" weight="medium" block mb={3} uppercase letterSpacing="0.05em">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Text size="xs" variant="low" weight="bold" uppercase>
             Find Your Level
           </Text>
-          <Stack gap={2}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
             {SKILL_LEVELS.map((level) => {
               const count = teamsByLevel[level.id]?.length || 0;
 
@@ -131,16 +109,13 @@ 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)}
+                  onClick={() => onSkillLevelClick(level.id as SkillLevel)}
                 />
               );
             })}
-          </Stack>
-        </>
+          </div>
+        </div>
       }
     />
   );