fix e2e

apps/website/components/drivers/CategoryDistribution.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
+];
+
+interface CategoryDistributionProps {
+  drivers: DriverLeaderboardItemViewModel[];
+}
+
+export function CategoryDistribution({ drivers }: CategoryDistributionProps) {
+  const distribution = CATEGORIES.map((category) => ({
+    ...category,
+    count: drivers.filter((d) => d.category === category.id).length,
+    percentage: drivers.length > 0
+      ? Math.round((drivers.filter((d) => d.category === category.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-purple-400/10 border border-purple-400/20">
+          <BarChart3 className="w-5 h-5 text-purple-400" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Category Distribution</h2>
+          <p className="text-xs text-gray-500">Driver population by category</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        {distribution.map((category) => (
+          <div
+            key={category.id}
+            className={`p-4 rounded-xl ${category.bgColor} border ${category.borderColor}`}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className={`text-2xl font-bold ${category.color}`}>{category.count}</span>
+            </div>
+            <p className="text-white font-medium mb-1">{category.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 ${
+                  category.id === 'beginner' ? 'bg-green-400' :
+                  category.id === 'intermediate' ? 'bg-primary-blue' :
+                  category.id === 'advanced' ? 'bg-purple-400' :
+                  category.id === 'pro' ? 'bg-yellow-400' :
+                  category.id === 'endurance' ? 'bg-orange-400' :
+                  'bg-red-400'
+                }`}
+                style={{ width: `${category.percentage}%` }}
+              />
+            </div>
+            <p className="text-xs text-gray-500 mt-1">{category.percentage}% of drivers</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/website/components/drivers/CircularProgress.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+interface CircularProgressProps {
+  value: number;
+  max: number;
+  label: string;
+  color: string;
+  size?: number;
+}
+
+export function CircularProgress({ value, max, label, color, size = 80 }: CircularProgressProps) {
+  const percentage = Math.min((value / max) * 100, 100);
+  const strokeWidth = 6;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg className="transform -rotate-90" width={size} height={size}>
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            className="text-charcoal-outline"
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            className={color}
+            style={{ transition: 'stroke-dashoffset 0.5s ease-in-out' }}
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-lg font-bold text-white">{percentage.toFixed(0)}%</span>
+        </div>
+      </div>
+      <span className="text-xs text-gray-400 mt-2">{label}</span>
+    </div>
+  );
+}

apps/website/components/drivers/DriverProfile.tsx

@@ -43,12 +43,14 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
         // Load team data if available
         if (profile.teamMemberships && profile.teamMemberships.length > 0) {
           const currentTeam = profile.teamMemberships.find(m => m.isCurrent) || profile.teamMemberships[0];
-          setTeamData({
-            team: {
-              name: currentTeam.teamName,
-              tag: currentTeam.teamTag ?? ''
-            }
-          });
+          if (currentTeam) {
+            setTeamData({
+              team: {
+                name: currentTeam.teamName,
+                tag: currentTeam.teamTag ?? ''
+              }
+            });
+          }
         }
       } catch (error) {
         console.error('Failed to load driver profile data:', error);

apps/website/components/drivers/FeaturedDriverCard.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { Trophy, Crown, Star, TrendingUp, Shield, Flag } from 'lucide-react';
+import Image from 'next/image';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { 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' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
+];
+
+interface FeaturedDriverCardProps {
+  driver: DriverLeaderboardItemViewModel;
+  position: number;
+  onClick: () => void;
+}
+
+export function FeaturedDriverCard({ driver, position, onClick }: FeaturedDriverCardProps) {
+  const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+  const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+
+  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>
+        <div className="flex gap-2">
+          {categoryConfig && (
+            <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${categoryConfig.bgColor} ${categoryConfig.color} border ${categoryConfig.borderColor}`}>
+              {categoryConfig.label}
+            </span>
+          )}
+          <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${levelConfig?.bgColor} ${levelConfig?.color} border ${levelConfig?.borderColor}`}>
+            {levelConfig?.label}
+          </span>
+        </div>
+      </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={driver.avatarUrl || mediaConfig.avatars.defaultFallback} 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>
+  );
+}

apps/website/components/drivers/HorizontalBarChart.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+interface HorizontalBarChartProps {
+  data: { label: string; value: number; color: string }[];
+  maxValue: number;
+}
+
+export function HorizontalBarChart({ data, maxValue }: HorizontalBarChartProps) {
+  return (
+    <div className="space-y-3">
+      {data.map((item) => (
+        <div key={item.label}>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-gray-400">{item.label}</span>
+            <span className="text-white font-medium">{item.value}</span>
+          </div>
+          <div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
+              style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/website/components/drivers/LeaderboardPreview.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Award, Crown, Flag, ChevronRight } from 'lucide-react';
+import Image from 'next/image';
+import Button from '@/components/ui/Button';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
+];
+
+interface LeaderboardPreviewProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  onDriverClick: (id: string) => void;
+}
+
+export function LeaderboardPreview({ drivers, onDriverClick }: LeaderboardPreviewProps) {
+  const router = useRouter();
+  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 categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+            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={driver.avatarUrl || mediaConfig.avatars.defaultFallback} 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}
+                    {categoryConfig && (
+                      <span className={categoryConfig.color}>{categoryConfig.label}</span>
+                    )}
+                    <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>
+  );
+}

apps/website/components/drivers/RecentActivity.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Activity } from 'lucide-react';
+import Image from 'next/image';
+import { mediaConfig } from '@/lib/config/mediaConfig';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
+];
+
+interface RecentActivityProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  onDriverClick: (id: string) => void;
+}
+
+export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
+  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);
+          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+          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={driver.avatarUrl || mediaConfig.avatars.defaultFallback} 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>
+              <div className="flex items-center justify-center gap-1 text-xs">
+                {categoryConfig && (
+                  <span className={categoryConfig.color}>{categoryConfig.label}</span>
+                )}
+                <span className={levelConfig?.color}>{levelConfig?.label}</span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/website/components/drivers/SkillDistribution.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+interface SkillDistributionProps {
+  drivers: DriverLeaderboardItemViewModel[];
+}
+
+export 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>
+  );
+}