website refactor

apps/website/templates/LeaderboardsTemplate.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import React from 'react';
+import { Trophy, Users } from 'lucide-react';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
+import { PageHero } from '@/ui/PageHero';
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
-import { LeaderboardsHero } from '@/components/leaderboards/LeaderboardsHero';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 
 interface LeaderboardsTemplateProps {
@@ -26,9 +27,24 @@ export function LeaderboardsTemplate({
 }: LeaderboardsTemplateProps) {
   return (
     <Container size="lg" py={8}>
-      <LeaderboardsHero 
-        onNavigateToDrivers={onNavigateToDrivers}
-        onNavigateToTeams={onNavigateToTeams}
+      <PageHero
+        title="Leaderboards"
+        description="Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics."
+        icon={Trophy}
+        actions={[
+          {
+            label: 'Driver Rankings',
+            onClick: onNavigateToDrivers,
+            icon: Trophy,
+            variant: 'primary'
+          },
+          {
+            label: 'Team Rankings',
+            onClick: onNavigateToTeams,
+            icon: Users,
+            variant: 'secondary'
+          }
+        ]}
       />
 
       <Grid cols={12} gap={6} mt={10}>