website refactor

apps/website/templates/LeaderboardsTemplate.tsx

@@ -1,95 +1,55 @@
 'use client';
 
 import React from 'react';
-import { useRouter } from 'next/navigation';
-import { Trophy, Users, Award } from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
+import { LeaderboardsHero } from '@/components/leaderboards/LeaderboardsHero';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
-import { routes } from '@/lib/routing/RouteConfig';
-
-// ============================================================================
-// TYPES
-// ============================================================================
 
 interface LeaderboardsTemplateProps {
   viewData: LeaderboardsViewData;
+  onDriverClick: (id: string) => void;
+  onTeamClick: (id: string) => void;
+  onNavigateToDrivers: () => void;
+  onNavigateToTeams: () => void;
 }
 
-// ============================================================================
-// MAIN TEMPLATE COMPONENT
-// ============================================================================
-
-export function LeaderboardsTemplate({ viewData }: LeaderboardsTemplateProps) {
-  const router = useRouter();
-
-  const handleDriverClick = (driverId: string) => {
-    router.push(routes.driver.detail(driverId));
-  };
-
-  const handleTeamClick = (teamId: string) => {
-    router.push(routes.team.detail(teamId));
-  };
-
-  const handleNavigateToDrivers = () => {
-    router.push(routes.leaderboards.drivers);
-  };
-
-  const handleNavigateToTeams = () => {
-    router.push(routes.team.leaderboard);
-  };
-
+export function LeaderboardsTemplate({ 
+  viewData,
+  onDriverClick,
+  onTeamClick,
+  onNavigateToDrivers,
+  onNavigateToTeams
+}: LeaderboardsTemplateProps) {
   return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
-        <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-400/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-600/5 rounded-full blur-3xl" />
-        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-purple-500/5 rounded-full blur-2xl" />
+    <Container size="lg" py={8}>
+      <Box mb={10}>
+        <LeaderboardsHero 
+          onNavigateToDrivers={onNavigateToDrivers}
+          onNavigateToTeams={onNavigateToTeams}
+        />
+      </Box>
 
-        <div className="relative z-10">
-          <div className="flex items-center gap-4 mb-4">
-            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
-              <Award className="w-7 h-7 text-yellow-400" />
-            </div>
-            <div>
-              <Heading level={1} className="text-3xl lg:text-4xl">
-                Leaderboards
-              </Heading>
-              <p className="text-gray-400">Where champions rise and legends are made</p>
-            </div>
-          </div>
-
-          <p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-6">
-            Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
-          </p>
-
-          <div className="flex flex-wrap gap-3">
-            <Button
-              variant="secondary"
-              onClick={handleNavigateToDrivers}
-              className="flex items-center gap-2"
-            >
-              <Trophy className="w-4 h-4 text-primary-blue" />
-              Driver Rankings
-            </Button>
-            <Button
-              variant="secondary"
-              onClick={handleNavigateToTeams}
-              className="flex items-center gap-2"
-            >
-              <Users className="w-4 h-4 text-purple-400" />
-              Team Rankings
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <DriverLeaderboardPreview drivers={viewData.drivers} onDriverClick={handleDriverClick} onNavigateToDrivers={handleNavigateToDrivers} />
-        <TeamLeaderboardPreview teams={viewData.teams} onTeamClick={handleTeamClick} onNavigateToTeams={handleNavigateToTeams} />
-      </div>
-    </div>
+      <Grid cols={12} gap={6}>
+        <GridItem colSpan={12} lgSpan={6}>
+          <DriverLeaderboardPreview 
+            drivers={viewData.drivers} 
+            onDriverClick={onDriverClick} 
+            onNavigateToDrivers={onNavigateToDrivers} 
+          />
+        </GridItem>
+        <GridItem colSpan={12} lgSpan={6}>
+          <TeamLeaderboardPreview 
+            teams={viewData.teams} 
+            onTeamClick={onTeamClick} 
+            onNavigateToTeams={onNavigateToTeams} 
+          />
+        </GridItem>
+      </Grid>
+    </Container>
   );
-}
+}