website refactor

apps/website/templates/LeaderboardsTemplate.tsx

@@ -1,11 +1,14 @@
-'use client';
-
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
 import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 import { Section } from '@/ui/Section';
-import { PageHero } from '@/ui/PageHero';
+import { PageHeader } from '@/ui/PageHeader';
 import { FeatureGrid } from '@/ui/FeatureGrid';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
 import { Trophy, Users, Activity } from 'lucide-react';
 import React from 'react';
 
@@ -24,43 +27,86 @@ export function LeaderboardsTemplate({
   onNavigateToDrivers,
   onNavigateToTeams
 }: LeaderboardsTemplateProps) {
-  return (
-    <Section variant="default" padding="lg">
-      <PageHero
-        title="Global Standings"
-        description="Performance metrics for drivers and teams. Rankings are calculated based on competitive results and consistency across all events."
-        icon={Activity}
-        actions={[
-          {
-            label: 'Driver Rankings',
-            onClick: onNavigateToDrivers,
-            icon: Trophy,
-            variant: 'primary'
-          },
-          {
-            label: 'Team Standings',
-            onClick: onNavigateToTeams,
-            icon: Users,
-            variant: 'secondary'
-          }
-        ]}
-      />
+  const top10Drivers = viewData.drivers.slice(0, 10);
+  const top5Teams = viewData.teams.slice(0, 5);
+  
+  // Newcomers: less than 10 races, sorted by rating
+  const topNewcomers = [...viewData.drivers]
+    .filter(d => d.racesCompleted < 10)
+    .sort((a, b) => b.rating - a.rating)
+    .slice(0, 5);
+    
+  // All time: sorted by wins
+  const topAllTime = [...viewData.drivers]
+    .sort((a, b) => b.wins - a.wins)
+    .slice(0, 5);
 
-      <FeatureGrid columns={{ base: 1, lg: 2 }} gap={8}>
-        <DriverLeaderboardPreview 
-          drivers={viewData.drivers} 
-          onDriverClick={onDriverClick} 
-          onNavigateToDrivers={onNavigateToDrivers} 
-        />
-        <TeamLeaderboardPreview 
-          teams={viewData.teams.map(t => ({
-            ...t,
-            logoUrl: t.logoUrl || ''
-          }))} 
-          onTeamClick={onTeamClick} 
-          onNavigateToTeams={onNavigateToTeams} 
-        />
-      </FeatureGrid>
+  return (
+    <Section variant="default" padding="none" py={12}>
+      <Container size="full" padding="lg">
+        <Stack gap={16}>
+          <PageHeader
+            title="Leaderboards"
+            description="Global Performance Standings"
+            icon={Activity}
+            action={
+              <Group gap={4}>
+                <Button
+                  variant="secondary"
+                  onClick={onNavigateToDrivers}
+                  icon={<Icon icon={Trophy} size={4} />}
+                >
+                  Drivers
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={onNavigateToTeams}
+                  icon={<Icon icon={Users} size={4} />}
+                >
+                  Teams
+                </Button>
+              </Group>
+            }
+          />
+
+          {/* Top 10 2026 up top */}
+          <DriverLeaderboardPreview 
+            title="Top 10 Drivers 2026"
+            subtitle="Current Season Standings"
+            drivers={top10Drivers} 
+            onDriverClick={onDriverClick} 
+            onNavigateToDrivers={onNavigateToDrivers} 
+          />
+
+          <FeatureGrid columns={{ base: 1, lg: 2 }} gap={12}>
+            <TeamLeaderboardPreview 
+              teams={top5Teams.map(t => ({
+                ...t,
+                logoUrl: t.logoUrl || ''
+              }))} 
+              onTeamClick={onTeamClick} 
+              onNavigateToTeams={onNavigateToTeams} 
+            />
+            
+            <Stack gap={12}>
+              <DriverLeaderboardPreview 
+                title="Top Newcomers"
+                subtitle="Rising Stars (< 10 Races)"
+                drivers={topNewcomers} 
+                onDriverClick={onDriverClick} 
+                onNavigateToDrivers={onNavigateToDrivers} 
+              />
+              <DriverLeaderboardPreview 
+                title="Top All Time"
+                subtitle="Most Wins"
+                drivers={topAllTime} 
+                onDriverClick={onDriverClick} 
+                onNavigateToDrivers={onNavigateToDrivers} 
+              />
+            </Stack>
+          </FeatureGrid>
+        </Stack>
+      </Container>
     </Section>
   );
 }