website refactor

apps/website/templates/LeaderboardsTemplate.tsx

@@ -3,11 +3,11 @@
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
-import { Container } from '@/ui/Container';
-import { GridItem } from '@/ui/GridItem';
+import { Section } from '@/ui/Section';
 import { PageHero } from '@/ui/PageHero';
-import { Grid } from '@/ui/Grid';
-import { Trophy, Users } from 'lucide-react';
+import { FeatureGrid } from '@/ui/FeatureGrid';
+import { Trophy, Users, Activity } from 'lucide-react';
+import React from 'react';
 
 interface LeaderboardsTemplateProps {
   viewData: LeaderboardsViewData;
@@ -25,11 +25,11 @@ export function LeaderboardsTemplate({
   onNavigateToTeams
 }: LeaderboardsTemplateProps) {
   return (
-    <Container size="lg" py={8}>
+    <Section variant="default" padding="lg">
       <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}
+        title="Global Standings"
+        description="Consolidated performance metrics for drivers and teams. Data-driven rankings based on competitive results and technical consistency."
+        icon={Activity}
         actions={[
           {
             label: 'Driver Rankings',
@@ -38,7 +38,7 @@ export function LeaderboardsTemplate({
             variant: 'primary'
           },
           {
-            label: 'Team Rankings',
+            label: 'Team Standings',
             onClick: onNavigateToTeams,
             icon: Users,
             variant: 'secondary'
@@ -46,26 +46,18 @@ export function LeaderboardsTemplate({
         ]}
       />
 
-      <Grid cols={12} gap={6} mt={10}>
-        <GridItem colSpan={12} lgSpan={6}>
-          <DriverLeaderboardPreview 
-            drivers={viewData.drivers} 
-            onDriverClick={onDriverClick} 
-            onNavigateToDrivers={onNavigateToDrivers} 
-          />
-        </GridItem>
-        <GridItem colSpan={12} lgSpan={6}>
-          <TeamLeaderboardPreview 
-            topTeams={viewData.teams.map(team => ({
-              ...team,
-              isRecruiting: false,
-              performanceLevel: 'N/A'
-            }))} 
-            onTeamClick={onTeamClick} 
-            onViewFullLeaderboard={onNavigateToTeams} 
-          />
-        </GridItem>
-      </Grid>
-    </Container>
+      <FeatureGrid columns={{ base: 1, lg: 2 }} gap={8}>
+        <DriverLeaderboardPreview 
+          drivers={viewData.drivers} 
+          onDriverClick={onDriverClick} 
+          onNavigateToDrivers={onNavigateToDrivers} 
+        />
+        <TeamLeaderboardPreview 
+          topTeams={viewData.teams} 
+          onTeamClick={onTeamClick} 
+          onViewFullLeaderboard={onNavigateToTeams} 
+        />
+      </FeatureGrid>
+    </Section>
   );
 }