wip

apps/website/app/drivers/page.tsx

@@ -2,36 +2,418 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import DriverCard from '@/components/drivers/DriverCard';
-import RankBadge from '@/components/drivers/RankBadge';
+import {
+  Trophy,
+  Medal,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  Search,
+  Plus,
+  Sparkles,
+  Users,
+  Target,
+  Zap,
+  Award,
+  ChevronRight,
+  Flame,
+  Flag,
+  Activity,
+  BarChart3,
+  UserPlus,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Card from '@/components/ui/Card';
-import { getDriverRepository, getDriverStats, getAllDriverRankings } from '@/lib/di-container';
+import Heading from '@/components/ui/Heading';
+import { getDriverRepository, getDriverStats, getAllDriverRankings, getImageService } from '@/lib/di-container';
+import Image from 'next/image';
+
+// ============================================================================
+// TYPES
+// ============================================================================
 
 type SkillLevel = 'beginner' | 'intermediate' | 'advanced' | 'pro';
 
-type DriverListItem = {
- id: string;
- name: string;
- rating: number;
- skillLevel: SkillLevel;
- nationality: string;
- racesCompleted: number;
- wins: number;
- podiums: number;
- isActive: boolean;
- rank: number;
-};
+interface DriverListItem {
+  id: string;
+  name: string;
+  rating: number;
+  skillLevel: SkillLevel;
+  nationality: string;
+  racesCompleted: number;
+  wins: number;
+  podiums: number;
+  isActive: boolean;
+  rank: number;
+}
+
+// ============================================================================
+// DEMO DATA
+// ============================================================================
+
+const DEMO_DRIVERS: DriverListItem[] = [
+  { id: 'demo-1', name: 'Max Verstappen', rating: 4250, skillLevel: 'pro', nationality: 'NL', racesCompleted: 156, wins: 47, podiums: 89, isActive: true, rank: 1 },
+  { id: 'demo-2', name: 'Lewis Hamilton', rating: 4180, skillLevel: 'pro', nationality: 'GB', racesCompleted: 198, wins: 52, podiums: 112, isActive: true, rank: 2 },
+  { id: 'demo-3', name: 'Charles Leclerc', rating: 3950, skillLevel: 'pro', nationality: 'MC', racesCompleted: 134, wins: 28, podiums: 67, isActive: true, rank: 3 },
+  { id: 'demo-4', name: 'Lando Norris', rating: 3820, skillLevel: 'advanced', nationality: 'GB', racesCompleted: 112, wins: 18, podiums: 45, isActive: true, rank: 4 },
+  { id: 'demo-5', name: 'Carlos Sainz', rating: 3750, skillLevel: 'advanced', nationality: 'ES', racesCompleted: 145, wins: 15, podiums: 52, isActive: true, rank: 5 },
+  { id: 'demo-6', name: 'Oscar Piastri', rating: 3680, skillLevel: 'advanced', nationality: 'AU', racesCompleted: 78, wins: 8, podiums: 24, isActive: true, rank: 6 },
+  { id: 'demo-7', name: 'George Russell', rating: 3620, skillLevel: 'advanced', nationality: 'GB', racesCompleted: 98, wins: 6, podiums: 31, isActive: true, rank: 7 },
+  { id: 'demo-8', name: 'Fernando Alonso', rating: 3580, skillLevel: 'advanced', nationality: 'ES', racesCompleted: 256, wins: 32, podiums: 98, isActive: true, rank: 8 },
+  { id: 'demo-9', name: 'Nico Hülkenberg', rating: 3420, skillLevel: 'advanced', nationality: 'DE', racesCompleted: 167, wins: 2, podiums: 18, isActive: true, rank: 9 },
+  { id: 'demo-10', name: 'Yuki Tsunoda', rating: 3250, skillLevel: 'intermediate', nationality: 'JP', racesCompleted: 89, wins: 1, podiums: 8, isActive: true, rank: 10 },
+  { id: 'demo-11', name: 'Alex Albon', rating: 3180, skillLevel: 'intermediate', nationality: 'TH', racesCompleted: 102, wins: 0, podiums: 4, isActive: true, rank: 11 },
+  { id: 'demo-12', name: 'Kevin Magnussen', rating: 3050, skillLevel: 'intermediate', nationality: 'DK', racesCompleted: 145, wins: 0, podiums: 2, isActive: true, rank: 12 },
+  { id: 'demo-13', name: 'Pierre Gasly', rating: 2980, skillLevel: 'intermediate', nationality: 'FR', racesCompleted: 124, wins: 1, podiums: 5, isActive: true, rank: 13 },
+  { id: 'demo-14', name: 'Esteban Ocon', rating: 2920, skillLevel: 'intermediate', nationality: 'FR', racesCompleted: 118, wins: 1, podiums: 4, isActive: true, rank: 14 },
+  { id: 'demo-15', name: 'Lance Stroll', rating: 2850, skillLevel: 'intermediate', nationality: 'CA', racesCompleted: 134, wins: 0, podiums: 3, isActive: true, rank: 15 },
+  { id: 'demo-16', name: 'Zhou Guanyu', rating: 2650, skillLevel: 'intermediate', nationality: 'CN', racesCompleted: 67, wins: 0, podiums: 0, isActive: true, rank: 16 },
+  { id: 'demo-17', name: 'Daniel Ricciardo', rating: 2500, skillLevel: 'intermediate', nationality: 'AU', racesCompleted: 189, wins: 8, podiums: 32, isActive: false, rank: 17 },
+  { id: 'demo-18', name: 'Valtteri Bottas', rating: 2450, skillLevel: 'intermediate', nationality: 'FI', racesCompleted: 212, wins: 10, podiums: 67, isActive: false, rank: 18 },
+  { id: 'demo-19', name: 'Logan Sargeant', rating: 1850, skillLevel: 'beginner', nationality: 'US', racesCompleted: 34, wins: 0, podiums: 0, isActive: false, rank: 19 },
+  { id: 'demo-20', name: 'Nyck de Vries', rating: 1750, skillLevel: 'beginner', nationality: 'NL', racesCompleted: 12, wins: 0, podiums: 0, isActive: false, rank: 20 },
+];
+
+// ============================================================================
+// SKILL LEVEL CONFIG
+// ============================================================================
+
+const SKILL_LEVELS: {
+  id: SkillLevel;
+  label: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  description: string;
+}[] = [
+  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', description: 'Elite competition level' },
+  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', description: 'Highly competitive' },
+  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', description: 'Developing skills' },
+  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', description: 'Learning the ropes' },
+];
+
+// ============================================================================
+// FEATURED DRIVER CARD COMPONENT
+// ============================================================================
+
+interface FeaturedDriverCardProps {
+  driver: DriverListItem;
+  position: number;
+  onClick: () => void;
+}
+
+function FeaturedDriverCard({ driver, position, onClick }: FeaturedDriverCardProps) {
+  const imageService = getImageService();
+  const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+
+  const getBorderColor = (pos: number) => {
+    switch (pos) {
+      case 1: return 'border-yellow-400/50 hover:border-yellow-400';
+      case 2: return 'border-gray-300/50 hover:border-gray-300';
+      case 3: return 'border-amber-600/50 hover:border-amber-600';
+      default: return 'border-charcoal-outline hover:border-primary-blue';
+    }
+  };
+
+  const getMedalColor = (pos: number) => {
+    switch (pos) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`p-5 rounded-xl bg-iron-gray/60 border-2 ${getBorderColor(position)} transition-all duration-200 text-left group hover:scale-[1.02]`}
+    >
+      {/* Header with Position */}
+      <div className="flex items-start justify-between mb-4">
+        <div className={`flex h-10 w-10 items-center justify-center rounded-full ${position <= 3 ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}`}>
+          {position <= 3 ? (
+            <Crown className={`w-5 h-5 ${getMedalColor(position)}`} />
+          ) : (
+            <span className="text-lg font-bold text-gray-400">#{position}</span>
+          )}
+        </div>
+        <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${levelConfig?.bgColor} ${levelConfig?.color} border ${levelConfig?.borderColor}`}>
+          {levelConfig?.label}
+        </span>
+      </div>
+
+      {/* Avatar & Name */}
+      <div className="flex items-center gap-4 mb-4">
+        <div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-charcoal-outline group-hover:border-primary-blue transition-colors">
+          <Image src={imageService.getDriverAvatar(driver.id)} alt={driver.name} fill className="object-cover" />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors">
+            {driver.name}
+          </h3>
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <Flag className="w-3.5 h-3.5" />
+            {driver.nationality}
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-3">
+        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+          <p className="text-lg font-bold text-primary-blue">{driver.rating.toLocaleString()}</p>
+          <p className="text-[10px] text-gray-500">Rating</p>
+        </div>
+        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+          <p className="text-lg font-bold text-performance-green">{driver.wins}</p>
+          <p className="text-[10px] text-gray-500">Wins</p>
+        </div>
+        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+          <p className="text-lg font-bold text-warning-amber">{driver.podiums}</p>
+          <p className="text-[10px] text-gray-500">Podiums</p>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ============================================================================
+// SKILL DISTRIBUTION COMPONENT
+// ============================================================================
+
+interface SkillDistributionProps {
+  drivers: DriverListItem[];
+}
+
+function SkillDistribution({ drivers }: SkillDistributionProps) {
+  const distribution = SKILL_LEVELS.map((level) => ({
+    ...level,
+    count: drivers.filter((d) => d.skillLevel === level.id).length,
+    percentage: drivers.length > 0 
+      ? Math.round((drivers.filter((d) => d.skillLevel === level.id).length / drivers.length) * 100) 
+      : 0,
+  }));
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neon-aqua/10 border border-neon-aqua/20">
+          <BarChart3 className="w-5 h-5 text-neon-aqua" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Skill Distribution</h2>
+          <p className="text-xs text-gray-500">Driver population by skill level</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {distribution.map((level) => {
+          const Icon = level.icon;
+          return (
+            <div
+              key={level.id}
+              className={`p-4 rounded-xl ${level.bgColor} border ${level.borderColor}`}
+            >
+              <div className="flex items-center justify-between mb-3">
+                <Icon className={`w-5 h-5 ${level.color}`} />
+                <span className={`text-2xl font-bold ${level.color}`}>{level.count}</span>
+              </div>
+              <p className="text-white font-medium mb-1">{level.label}</p>
+              <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all duration-500 ${
+                    level.id === 'pro' ? 'bg-yellow-400' :
+                    level.id === 'advanced' ? 'bg-purple-400' :
+                    level.id === 'intermediate' ? 'bg-primary-blue' :
+                    'bg-green-400'
+                  }`}
+                  style={{ width: `${level.percentage}%` }}
+                />
+              </div>
+              <p className="text-xs text-gray-500 mt-1">{level.percentage}% of drivers</p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// LEADERBOARD PREVIEW COMPONENT
+// ============================================================================
+
+interface LeaderboardPreviewProps {
+  drivers: DriverListItem[];
+  onDriverClick: (id: string) => void;
+}
+
+function LeaderboardPreview({ drivers, onDriverClick }: LeaderboardPreviewProps) {
+  const router = useRouter();
+  const imageService = getImageService();
+  const top5 = drivers.slice(0, 5);
+
+  const getMedalColor = (position: number) => {
+    switch (position) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  const getMedalBg = (position: number) => {
+    switch (position) {
+      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
+      case 2: return 'bg-gray-300/10 border-gray-300/30';
+      case 3: return 'bg-amber-600/10 border-amber-600/30';
+      default: return 'bg-iron-gray/50 border-charcoal-outline';
+    }
+  };
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
+            <Award className="w-5 h-5 text-yellow-400" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-white">Top Drivers</h2>
+            <p className="text-xs text-gray-500">Highest rated competitors</p>
+          </div>
+        </div>
+
+        <Button
+          variant="secondary"
+          onClick={() => router.push('/leaderboards/drivers')}
+          className="flex items-center gap-2 text-sm"
+        >
+          Full Rankings
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+        <div className="divide-y divide-charcoal-outline/50">
+          {top5.map((driver, index) => {
+            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+            const position = index + 1;
+
+            return (
+              <button
+                key={driver.id}
+                type="button"
+                onClick={() => onDriverClick(driver.id)}
+                className="flex items-center gap-4 px-4 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              >
+                {/* Position */}
+                <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
+                  {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
+                </div>
+
+                {/* Avatar */}
+                <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
+                  <Image src={imageService.getDriverAvatar(driver.id)} alt={driver.name} fill className="object-cover" />
+                </div>
+
+                {/* Info */}
+                <div className="flex-1 min-w-0">
+                  <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
+                    {driver.name}
+                  </p>
+                  <div className="flex items-center gap-2 text-xs text-gray-500">
+                    <Flag className="w-3 h-3" />
+                    {driver.nationality}
+                    <span className={levelConfig?.color}>{levelConfig?.label}</span>
+                  </div>
+                </div>
+
+                {/* Stats */}
+                <div className="flex items-center gap-4 text-sm">
+                  <div className="text-center">
+                    <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
+                    <p className="text-[10px] text-gray-500">Rating</p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
+                    <p className="text-[10px] text-gray-500">Wins</p>
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// RECENT ACTIVITY COMPONENT
+// ============================================================================
+
+interface RecentActivityProps {
+  drivers: DriverListItem[];
+  onDriverClick: (id: string) => void;
+}
+
+function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
+  const imageService = getImageService();
+  const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
+          <Activity className="w-5 h-5 text-performance-green" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Active Drivers</h2>
+          <p className="text-xs text-gray-500">Currently competing in leagues</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+        {activeDrivers.map((driver) => {
+          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+          return (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => onDriverClick(driver.id)}
+              className="p-3 rounded-xl bg-iron-gray/40 border border-charcoal-outline hover:border-performance-green/40 transition-all group text-center"
+            >
+              <div className="relative w-12 h-12 mx-auto rounded-full overflow-hidden border-2 border-charcoal-outline mb-2">
+                <Image src={imageService.getDriverAvatar(driver.id)} alt={driver.name} fill className="object-cover" />
+                <div className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-performance-green border-2 border-iron-gray" />
+              </div>
+              <p className="text-sm font-medium text-white truncate group-hover:text-performance-green transition-colors">
+                {driver.name}
+              </p>
+              <p className={`text-xs ${levelConfig?.color}`}>{levelConfig?.label}</p>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN PAGE COMPONENT
+// ============================================================================
 
 export default function DriversPage() {
   const router = useRouter();
   const [drivers, setDrivers] = useState<DriverListItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
-  const [selectedNationality, setSelectedNationality] = useState('all');
-  const [activeOnly, setActiveOnly] = useState(false);
-  const [sortBy, setSortBy] = useState<'rank' | 'rating' | 'wins' | 'podiums'>('rank');
 
   useEffect(() => {
     const load = async () => {
@@ -47,26 +429,17 @@ export default function DriversPage() {
         const totalRaces = stats?.totalRaces ?? 0;
 
         let effectiveRank = Number.POSITIVE_INFINITY;
-
         if (typeof stats?.overallRank === 'number' && stats.overallRank > 0) {
           effectiveRank = stats.overallRank;
         } else {
-          const indexInGlobal = rankings.findIndex(
-            (entry) => entry.driverId === driver.id,
-          );
+          const indexInGlobal = rankings.findIndex((entry) => entry.driverId === driver.id);
           if (indexInGlobal !== -1) {
             effectiveRank = indexInGlobal + 1;
           }
         }
 
         const skillLevel: SkillLevel =
-          rating >= 3000
-            ? 'pro'
-            : rating >= 2500
-            ? 'advanced'
-            : rating >= 1800
-            ? 'intermediate'
-            : 'beginner';
+          rating >= 3000 ? 'pro' : rating >= 2500 ? 'advanced' : rating >= 1800 ? 'intermediate' : 'beginner';
 
         const isActive = rankings.some((r) => r.driverId === driver.id);
 
@@ -84,180 +457,183 @@ export default function DriversPage() {
         };
       });
 
-      setDrivers(items);
+      // Sort by rank
+      items.sort((a, b) => {
+        const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
+        const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
+        return rankA - rankB || b.rating - a.rating;
+      });
+
+      setDrivers(items.length > 0 ? items : DEMO_DRIVERS);
       setLoading(false);
     };
 
     void load();
   }, []);
 
-  const nationalities = Array.from(
-    new Set(drivers.map((d) => d.nationality).filter(Boolean)),
-  ).sort();
-
-  const filteredDrivers = drivers.filter((driver) => {
-    const matchesSearch = driver.name
-      .toLowerCase()
-      .includes(searchQuery.toLowerCase());
-    const matchesSkill =
-      selectedSkill === 'all' || driver.skillLevel === selectedSkill;
-    const matchesNationality =
-      selectedNationality === 'all' || driver.nationality === selectedNationality;
-    const matchesActive = !activeOnly || driver.isActive;
-
-    return matchesSearch && matchesSkill && matchesNationality && matchesActive;
-  });
-
-  const sortedDrivers = [...filteredDrivers].sort((a, b) => {
-    const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
-    const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
-
-    switch (sortBy) {
-      case 'rank':
-        return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
-      case 'rating':
-        return b.rating - a.rating;
-      case 'wins':
-        return b.wins - a.wins;
-      case 'podiums':
-        return b.podiums - a.podiums;
-      default:
-        return 0;
-    }
-  });
-
   const handleDriverClick = (driverId: string) => {
+    if (driverId.startsWith('demo-')) return;
     router.push(`/drivers/${driverId}`);
   };
 
+  // Filter by search
+  const filteredDrivers = drivers.filter((driver) => {
+    if (!searchQuery) return true;
+    return (
+      driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  });
+
+  // Stats
+  const totalRaces = drivers.reduce((sum, d) => sum + d.racesCompleted, 0);
+  const totalWins = drivers.reduce((sum, d) => sum + d.wins, 0);
+  const activeCount = drivers.filter((d) => d.isActive).length;
+
+  // Featured drivers (top 4)
+  const featuredDrivers = filteredDrivers.slice(0, 4);
+
   if (loading) {
     return (
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center text-gray-400">Loading drivers...</div>
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading drivers...</p>
+          </div>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden">
+        {/* Background decoration */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+          <div className="max-w-2xl">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+                <Users className="w-6 h-6 text-primary-blue" />
+              </div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                Drivers
+              </Heading>
+            </div>
+            <p className="text-gray-400 text-lg leading-relaxed mb-6">
+              Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
+            </p>
+
+            {/* Quick Stats */}
+            <div className="flex flex-wrap gap-6">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-primary-blue" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{drivers.length}</span> drivers
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{activeCount}</span> active
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-yellow-400" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{totalWins.toLocaleString()}</span> total wins
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-neon-aqua" />
+                <span className="text-sm text-gray-400">
+                  <span className="text-white font-semibold">{totalRaces.toLocaleString()}</span> races
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA */}
+          <div className="flex flex-col gap-4">
+            <Button
+              variant="primary"
+              onClick={() => router.push('/leaderboards/drivers')}
+              className="flex items-center gap-2 px-6 py-3"
+            >
+              <Trophy className="w-5 h-5" />
+              View Leaderboard
+            </Button>
+            <p className="text-xs text-gray-500 text-center">See full driver rankings</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Search */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-white mb-2">Drivers</h1>
-        <p className="text-gray-400">
-          Browse driver profiles and stats
-        </p>
-      </div>
-
-      <Card className="mb-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
-              Search Drivers
-            </label>
-            <Input
-              type="text"
-              placeholder="Search by name..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
-              Skill Level
-            </label>
-            <select
-              className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
-              value={selectedSkill}
-              onChange={(e) => setSelectedSkill(e.target.value as SkillLevel | 'all')}
-            >
-              <option value="all">All Levels</option>
-              <option value="beginner">Beginner</option>
-              <option value="intermediate">Intermediate</option>
-              <option value="advanced">Advanced</option>
-              <option value="pro">Pro</option>
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
-              Nationality
-            </label>
-            <select
-              className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
-              value={selectedNationality}
-              onChange={(e) => setSelectedNationality(e.target.value)}
-            >
-              <option value="all">All Countries</option>
-              {nationalities.map((nat) => (
-                <option key={nat} value={nat}>
-                  {nat}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
-              Status
-            </label>
-            <label className="flex items-center pt-3">
-              <input
-                type="checkbox"
-                className="w-4 h-4 text-primary-blue bg-iron-gray border-charcoal-outline rounded focus:ring-primary-blue focus:ring-2"
-                checked={activeOnly}
-                onChange={(e) => setActiveOnly(e.target.checked)}
-              />
-              <span className="ml-2 text-sm text-gray-400">Active only</span>
-            </label>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
-              Sort By
-            </label>
-            <select
-              className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
-              value={sortBy}
-              onChange={(e) => setSortBy(e.target.value as any)}
-            >
-              <option value="rank">Overall Rank</option>
-              <option value="rating">Rating</option>
-              <option value="wins">Wins</option>
-              <option value="podiums">Podiums</option>
-            </select>
-          </div>
-        </div>
-      </Card>
-
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-sm text-gray-400">
-          {sortedDrivers.length} {sortedDrivers.length === 1 ? 'driver' : 'drivers'} found
-        </p>
-      </div>
-
-      <div className="space-y-4">
-        {sortedDrivers.map((driver) => (
-          <DriverCard
-            key={driver.id}
-            id={driver.id}
-            name={driver.name}
-            rating={driver.rating}
-            skillLevel={driver.skillLevel}
-            nationality={driver.nationality}
-            racesCompleted={driver.racesCompleted}
-            wins={driver.wins}
-            podiums={driver.podiums}
-            rank={driver.rank}
-            onClick={() => handleDriverClick(driver.id)}
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+          <Input
+            type="text"
+            placeholder="Search drivers by name or nationality..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-11"
           />
-        ))}
+        </div>
       </div>
 
-      {sortedDrivers.length === 0 && (
-        <div className="text-center py-12">
-          <p className="text-gray-400">No drivers found matching your filters.</p>
+      {/* Featured Drivers */}
+      {!searchQuery && (
+        <div className="mb-10">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-400/10 border border-yellow-400/20">
+              <Crown className="w-5 h-5 text-yellow-400" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-white">Featured Drivers</h2>
+              <p className="text-xs text-gray-500">Top performers on the grid</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {featuredDrivers.map((driver, index) => (
+              <FeaturedDriverCard
+                key={driver.id}
+                driver={driver}
+                position={index + 1}
+                onClick={() => handleDriverClick(driver.id)}
+              />
+            ))}
+          </div>
         </div>
       )}
+
+      {/* Active Drivers */}
+      {!searchQuery && <RecentActivity drivers={drivers} onDriverClick={handleDriverClick} />}
+
+      {/* Skill Distribution */}
+      {!searchQuery && <SkillDistribution drivers={drivers} />}
+
+      {/* Leaderboard Preview */}
+      <LeaderboardPreview drivers={filteredDrivers} onDriverClick={handleDriverClick} />
+
+      {/* Empty State */}
+      {filteredDrivers.length === 0 && (
+        <Card className="text-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <Search className="w-10 h-10 text-gray-600" />
+            <p className="text-gray-400">No drivers found matching "{searchQuery}"</p>
+            <Button variant="secondary" onClick={() => setSearchQuery('')}>
+              Clear search
+            </Button>
+          </div>
+        </Card>
+      )}
     </div>
   );
 }