website refactor

apps/website/templates/DriverRankingsTemplate.tsx

@@ -5,7 +5,7 @@ import { Trophy, ChevronLeft } from 'lucide-react';
 import { Container } from '@/ui/Container';
 import { PageHeader } from '@/ui/PageHeader';
 import { RankingsPodium } from '@/components/leaderboards/RankingsPodium';
-import { RankingsTable } from '@/components/leaderboards/RankingsTable';
+import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
@@ -65,11 +65,13 @@ export function DriverRankingsTemplate({
       />
 
       {/* Leaderboard Table */}
-      <RankingsTable 
+      <LeaderboardTable 
         drivers={viewData.drivers.map(d => ({
           ...d,
           rating: Number(d.rating),
-          wins: Number(d.wins)
+          wins: Number(d.wins),
+          racesCompleted: d.racesCompleted || 0,
+          avatarUrl: d.avatarUrl || ''
         }))} 
         onDriverClick={onDriverClick} 
       />

apps/website/templates/DriversTemplate.tsx

@@ -31,7 +31,6 @@ export function DriversTemplate({
   return (
     <main>
       <PageHeader
-        icon={Users}
         title="Drivers"
         description="Global driver roster and statistics."
         action={

apps/website/templates/LeaderboardsTemplate.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
-import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
+import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 import { Section } from '@/ui/Section';
 import { PageHero } from '@/ui/PageHero';
@@ -28,7 +28,7 @@ export function LeaderboardsTemplate({
     <Section variant="default" padding="lg">
       <PageHero
         title="Global Standings"
-        description="Consolidated performance metrics for drivers and teams. Data-driven rankings based on competitive results and technical consistency."
+        description="Performance metrics for drivers and teams. Rankings are calculated based on competitive results and consistency across all events."
         icon={Activity}
         actions={[
           {
@@ -53,9 +53,12 @@ export function LeaderboardsTemplate({
           onNavigateToDrivers={onNavigateToDrivers} 
         />
         <TeamLeaderboardPreview 
-          topTeams={viewData.teams} 
+          teams={viewData.teams.map(t => ({
+            ...t,
+            logoUrl: t.logoUrl || ''
+          }))} 
           onTeamClick={onTeamClick} 
-          onViewFullLeaderboard={onNavigateToTeams} 
+          onNavigateToTeams={onNavigateToTeams} 
         />
       </FeatureGrid>
     </Section>

apps/website/templates/TeamRankingsTemplate.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { Users, ChevronLeft } from 'lucide-react';
+import { Container } from '@/ui/Container';
+import { PageHeader } from '@/ui/PageHeader';
+import { TeamLeaderboardTable } from '@/components/leaderboards/TeamLeaderboardTable';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
+import type { TeamRankingsViewData } from '@/lib/view-data/TeamRankingsViewData';
+
+interface TeamRankingsTemplateProps {
+  viewData: TeamRankingsViewData;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onTeamClick?: (id: string) => void;
+  onBackToLeaderboards?: () => void;
+}
+
+export function TeamRankingsTemplate({
+  viewData,
+  searchQuery,
+  onSearchChange,
+  onTeamClick,
+  onBackToLeaderboards,
+}: TeamRankingsTemplateProps): React.ReactElement {
+  return (
+    <Container size="lg" py={8}>
+      <PageHeader
+        title="Team Leaderboard"
+        description="Global rankings of all teams based on performance and consistency"
+        icon={Users}
+        action={
+          onBackToLeaderboards && (
+            <Button 
+              variant="secondary" 
+              onClick={onBackToLeaderboards} 
+              icon={<Icon icon={ChevronLeft} size={4} />}
+            >
+              Back to Leaderboards
+            </Button>
+          )
+        }
+      />
+
+      <LeaderboardFiltersBar 
+        searchQuery={searchQuery}
+        onSearchChange={onSearchChange}
+        placeholder="Search teams..."
+      />
+
+      <TeamLeaderboardTable 
+        teams={viewData.teams.map(t => ({
+          ...t,
+          totalRaces: t.totalRaces || 0,
+          rating: t.rating || 0
+        }))} 
+        onTeamClick={onTeamClick} 
+      />
+    </Container>
+  );
+}

apps/website/templates/layout/GlobalSidebarTemplate.tsx

@@ -24,11 +24,9 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
       position="sticky"
       top="56px"
       height="calc(100vh - 56px)"
-      style={{
-        borderRight: '1px solid var(--ui-color-border-default)',
-        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
-        background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
-      }}
+      borderRight={true}
+      shadow="inset -1px 0 0 0 rgba(255, 255, 255, 0.01)"
+      bg="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
     >
       <DashboardRail>
         <Box py={8} fullWidth>