website refactor

apps/website/ui/TeamHeroSectionWrapper.tsx

@@ -0,0 +1,147 @@
+
+
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { SkillLevelButton } from '@/ui/SkillLevelButton';
+import { Stack } from '@/ui/Stack';
+import { TeamHeroSection as UiTeamHeroSection } from '@/ui/TeamHeroSection';
+import { TeamHeroStats } from '@/ui/TeamHeroStats';
+import { Text } from '@/ui/Text';
+import {
+    Crown,
+    LucideIcon,
+    Plus,
+    Search,
+    Shield,
+    Star,
+    TrendingUp,
+} from 'lucide-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[] = [
+  {
+    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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+];
+
+interface TeamHeroSectionProps {
+  teams: TeamSummaryViewModel[];
+  teamsByLevel: Record<string, TeamSummaryViewModel[]>;
+  recruitingCount: number;
+  onShowCreateForm: () => void;
+  onBrowseTeams: () => void;
+  onSkillLevelClick: (level: SkillLevel) => void;
+}
+
+export function TeamHeroSection({
+  teams,
+  teamsByLevel,
+  recruitingCount,
+  onShowCreateForm,
+  onBrowseTeams,
+  onSkillLevelClick,
+}: TeamHeroSectionProps) {
+  return (
+    <UiTeamHeroSection
+      title={
+        <>
+          Find Your
+          <Text color="text-purple-400"> Crew</Text>
+        </>
+      }
+      description="Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions."
+      statsContent={
+        <TeamHeroStats teamCount={teams.length} recruitingCount={recruitingCount} />
+      }
+      actionsContent={
+        <>
+          <Button
+            variant="primary"
+            onClick={onShowCreateForm}
+            icon={<Icon icon={Plus} size={4} />}
+            bg="bg-purple-600"
+          >
+            Create Team
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={onBrowseTeams}
+            icon={<Icon icon={Search} size={4} />}
+          >
+            Browse Teams
+          </Button>
+        </>
+      }
+      sideContent={
+        <>
+          <Text size="xs" color="text-gray-500" weight="medium" block mb={3} uppercase letterSpacing="0.05em">
+            Find Your Level
+          </Text>
+          <Stack gap={2}>
+            {SKILL_LEVELS.map((level) => {
+              const count = teamsByLevel[level.id]?.length || 0;
+
+              return (
+                <SkillLevelButton
+                  key={level.id}
+                  label={level.label}
+                  icon={level.icon}
+                  color={level.color}
+                  bgColor={level.bgColor}
+                  borderColor={level.borderColor}
+                  count={count}
+                  onClick={() => onSkillLevelClick(level.id)}
+                />
+              );
+            })}
+          </Stack>
+        </>
+      }
+    />
+  );
+}