fix e2e

apps/website/components/teams/TeamHeroSection.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import {
+  Users,
+  Search,
+  Plus,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  UserPlus,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+
+interface SkillLevelConfig {
+  id: SkillLevel;
+  label: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  description: string;
+}
+
+const SKILL_LEVELS: SkillLevelConfig[] = [
+  {
+    id: 'pro',
+    label: 'Pro',
+    icon: Crown,
+    color: 'text-yellow-400',
+    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-400/10',
+    borderColor: 'border-purple-400/30',
+    description: 'Competitive racing, high consistency',
+  },
+  {
+    id: 'intermediate',
+    label: 'Intermediate',
+    icon: TrendingUp,
+    color: 'text-primary-blue',
+    bgColor: 'bg-primary-blue/10',
+    borderColor: 'border-primary-blue/30',
+    description: 'Growing skills, regular practice',
+  },
+  {
+    id: 'beginner',
+    label: 'Beginner',
+    icon: Shield,
+    color: 'text-green-400',
+    bgColor: 'bg-green-400/10',
+    borderColor: 'border-green-400/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 default function TeamHeroSection({
+  teams,
+  teamsByLevel,
+  recruitingCount,
+  onShowCreateForm,
+  onBrowseTeams,
+  onSkillLevelClick,
+}: TeamHeroSectionProps) {
+  return (
+    <div className="relative mb-10 overflow-hidden">
+      {/* Main Hero Card */}
+      <div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
+        {/* Background decorations */}
+        <div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+            <div className="max-w-xl">
+              {/* Badge */}
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
+                <Users className="w-3.5 h-3.5" />
+                Team Racing
+              </div>
+
+              <Heading level={1} className="text-4xl lg:text-5xl mb-4">
+                Find Your
+                <span className="text-purple-400"> Crew</span>
+              </Heading>
+
+              <p className="text-gray-400 text-lg leading-relaxed mb-6">
+                Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
+              </p>
+
+              {/* Quick Stats */}
+              <div className="flex flex-wrap gap-4 mb-6">
+                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                  <Users className="w-4 h-4 text-purple-400" />
+                  <span className="text-white font-semibold">{teams.length}</span>
+                  <span className="text-gray-500 text-sm">Teams</span>
+                </div>
+                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                  <UserPlus className="w-4 h-4 text-performance-green" />
+                  <span className="text-white font-semibold">{recruitingCount}</span>
+                  <span className="text-gray-500 text-sm">Recruiting</span>
+                </div>
+              </div>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-wrap gap-3">
+                <Button
+                  variant="primary"
+                  onClick={onShowCreateForm}
+                  className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
+                >
+                  <Plus className="w-4 h-4" />
+                  Create Team
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={onBrowseTeams}
+                  className="flex items-center gap-2"
+                >
+                  <Search className="w-4 h-4" />
+                  Browse Teams
+                </Button>
+              </div>
+            </div>
+
+            {/* Skill Level Quick Nav */}
+            <div className="lg:w-72">
+              <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
+              <div className="space-y-2">
+                {SKILL_LEVELS.map((level) => {
+                  const LevelIcon = level.icon;
+                  const count = teamsByLevel[level.id]?.length || 0;
+
+                  return (
+                    <button
+                      key={level.id}
+                      type="button"
+                      onClick={() => onSkillLevelClick(level.id)}
+                      className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
+                    >
+                      <div className="flex items-center gap-2">
+                        <LevelIcon className={`w-4 h-4 ${level.color}`} />
+                        <span className="text-white font-medium">{level.label}</span>
+                      </div>
+                      <span className="text-gray-400 text-sm">{count} teams</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/teams/TeamSearchBar.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Search } from 'lucide-react';
+import Input from '@/components/ui/Input';
+
+interface TeamSearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export default function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
+  return (
+    <div id="teams-list" className="mb-6 scroll-mt-8">
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+          <Input
+            type="text"
+            placeholder="Search teams by name, description, region, or language..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-11"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}