wip

apps/website/templates/DriversTemplate.tsx

@@ -19,7 +19,8 @@ import { SkillDistribution } from '@/components/drivers/SkillDistribution';
 import { CategoryDistribution } from '@/components/drivers/CategoryDistribution';
 import { LeaderboardPreview } from '@/components/drivers/LeaderboardPreview';
 import { RecentActivity } from '@/components/drivers/RecentActivity';
-import { DriversHero } from '@/components/drivers/DriversHero';
+import { HeroSection } from '@/components/shared/HeroSection';
+import { Users, Trophy } from 'lucide-react';
 import { DriversSearch } from '@/components/drivers/DriversSearch';
 import { EmptyState } from '@/components/shared/state/EmptyState';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
@@ -53,12 +54,24 @@ export function DriversTemplate({
     <Container size="lg" py={8}>
       <Stack gap={10}>
         {/* Hero Section */}
-        <DriversHero 
-          driverCount={drivers.length}
-          activeCount={activeCount}
-          totalWins={totalWins}
-          totalRaces={totalRaces}
-          onViewLeaderboard={onViewLeaderboard}
+        <HeroSection
+          title="Drivers"
+          description="Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid."
+          icon={Users}
+          stats={[
+            { label: 'drivers', value: drivers.length, color: 'text-primary-blue' },
+            { label: 'active', value: activeCount, color: 'text-performance-green', animate: true },
+            { label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
+            { label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
+          ]}
+          actions={[
+            {
+              label: 'View Leaderboard',
+              onClick: onViewLeaderboard,
+              icon: Trophy,
+              description: 'See full driver rankings'
+            }
+          ]}
         />
 
         {/* Search */}