website refactor

apps/website/app/drivers/[id]/page.tsx

@@ -2,6 +2,41 @@ import { redirect } from 'next/navigation';
 import { routes } from '@/lib/routing/RouteConfig';
 import { DriverProfilePageQuery } from '@/lib/page-queries/DriverProfilePageQuery';
 import { DriverProfilePageClient } from '@/client-wrapper/DriverProfilePageClient';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+import { JsonLd } from '@/ui/JsonLd';
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id } = await params;
+  const result = await DriverProfilePageQuery.execute(id);
+
+  if (result.isErr()) {
+    return MetadataHelper.generate({
+      title: 'Driver Not Found',
+      description: 'The requested driver profile could not be found on GridPilot.',
+      path: `/drivers/${id}`,
+    });
+  }
+
+  const viewData = result.unwrap();
+  const driver = viewData.currentDriver;
+
+  if (!driver) {
+    return MetadataHelper.generate({
+      title: 'Driver Not Found',
+      description: 'The requested driver profile could not be found on GridPilot.',
+      path: `/drivers/${id}`,
+    });
+  }
+
+  return MetadataHelper.generate({
+    title: driver.name,
+    description: driver.bio || `View the professional sim racing profile of ${driver.name} on GridPilot. Career statistics, race history, and performance metrics in the iRacing community.`,
+    path: `/drivers/${id}`,
+    image: driver.avatarUrl,
+    type: 'profile',
+  });
+}
 
 export default async function DriverProfilePage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
@@ -21,9 +56,24 @@ export default async function DriverProfilePage({ params }: { params: Promise<{
   }
 
   const viewData = result.unwrap();
+  const driver = viewData.currentDriver;
+
+  const jsonLd = driver ? {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: driver.name,
+    description: driver.bio,
+    image: driver.avatarUrl,
+    url: `https://gridpilot.com/drivers/${driver.id}`,
+    knowsAbout: ['Sim Racing', 'iRacing'],
+  } : null;
+
   return (
-    <DriverProfilePageClient
-      viewData={viewData}
-    />
+    <>
+      {jsonLd && <JsonLd data={jsonLd} />}
+      <DriverProfilePageClient
+        viewData={viewData}
+      />
+    </>
   );
-}
+}

apps/website/app/drivers/page.tsx

@@ -2,6 +2,14 @@ import { redirect } from 'next/navigation';
 import { routes } from '@/lib/routing/RouteConfig';
 import { DriversPageQuery } from '@/lib/page-queries/DriversPageQuery';
 import { DriversPageClient } from '@/client-wrapper/DriversPageClient';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'Sim Racing Drivers',
+  description: 'Explore the elite roster of sim racing drivers on GridPilot. Detailed performance metrics, career history, and professional driver profiles for the iRacing community.',
+  path: '/drivers',
+});
 
 export default async function Page() {
   const result = await DriversPageQuery.execute();

apps/website/app/leaderboards/page.tsx

@@ -3,6 +3,15 @@ import { LeaderboardsPageQuery } from '@/lib/page-queries/LeaderboardsPageQuery'
 import { LeaderboardsPageClient } from '@/client-wrapper/LeaderboardsPageClient';
 import { routes } from '@/lib/routing/RouteConfig';
 import { logger } from '@/lib/infrastructure/logging/logger';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+import { JsonLd } from '@/ui/JsonLd';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'Global Leaderboards',
+  description: 'See who leads the pack on GridPilot. Comprehensive global leaderboards for drivers and teams, featuring performance rankings and career statistics.',
+  path: '/leaderboards',
+});
 
 export default async function LeaderboardsPage() {
   const result = await LeaderboardsPageQuery.execute();
@@ -24,5 +33,27 @@ export default async function LeaderboardsPage() {
 
   // Success
   const viewData = result.unwrap();
-  return <LeaderboardsPageClient viewData={viewData} />;
-}
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'ItemList',
+    name: 'Global Driver Leaderboard',
+    description: 'Top performing sim racing drivers on GridPilot',
+    itemListElement: viewData.drivers.slice(0, 10).map((d, i) => ({
+      '@type': 'ListItem',
+      position: i + 1,
+      item: {
+        '@type': 'Person',
+        name: d.name,
+        url: `https://gridpilot.com/drivers/${d.id}`,
+      },
+    })),
+  };
+
+  return (
+    <>
+      <JsonLd data={jsonLd} />
+      <LeaderboardsPageClient viewData={viewData} />
+    </>
+  );
+}

apps/website/app/leagues/[id]/page.tsx

@@ -3,11 +3,36 @@ import { LeagueOverviewTemplate } from '@/templates/LeagueOverviewTemplate';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
 import { ErrorBanner } from '@/ui/ErrorBanner';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+import { JsonLd } from '@/ui/JsonLd';
 
 interface Props {
   params: Promise<{ id: string }>;
 }
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  const result = await LeagueDetailPageQuery.execute(id);
+
+  if (result.isErr()) {
+    return MetadataHelper.generate({
+      title: 'League Not Found',
+      description: 'The requested league could not be found on GridPilot.',
+      path: `/leagues/${id}`,
+    });
+  }
+
+  const data = result.unwrap();
+  const league = data.league;
+
+  return MetadataHelper.generate({
+    title: league.name,
+    description: league.description || `Join ${league.name} on GridPilot. Professional iRacing league with automated results, standings, and obsessive attention to detail.`,
+    path: `/leagues/${id}`,
+  });
+}
+
 export default async function Page({ params }: Props) {
   const { id } = await params;
   // Execute the PageQuery
@@ -36,6 +61,7 @@ export default async function Page({ params }: Props) {
   }
   
   const data = result.unwrap();
+  const league = data.league;
   
   // Build ViewData using the builder
   // Note: This would need additional data (owner, scoring config, etc.) in real implementation
@@ -47,8 +73,19 @@ export default async function Page({ params }: Props) {
     races: [],
     sponsors: [],
   });
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'SportsOrganization',
+    name: league.name,
+    description: league.description,
+    url: `https://gridpilot.com/leagues/${league.id}`,
+  };
   
   return (
-    <LeagueOverviewTemplate viewData={viewData} />
+    <>
+      <JsonLd data={jsonLd} />
+      <LeagueOverviewTemplate viewData={viewData} />
+    </>
   );
 }

apps/website/app/leagues/page.tsx

@@ -1,6 +1,14 @@
 import { notFound } from 'next/navigation';
 import { LeaguesPageClient } from './LeaguesPageClient';
 import { LeaguesPageQuery } from '@/lib/page-queries/LeaguesPageQuery';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'iRacing Leagues',
+  description: 'Find and join the most professional iRacing leagues on GridPilot. Automated results, professional race control, and obsessive attention to detail for every series.',
+  path: '/leagues',
+});
 
 export default async function Page() {
   // Execute the PageQuery

apps/website/app/page.tsx

@@ -3,6 +3,15 @@ import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
 import { HomePageQuery } from '@/lib/page-queries/HomePageQuery';
 import { notFound, redirect } from 'next/navigation';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+import { JsonLd } from '@/ui/JsonLd';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'Professional iRacing League Management Platform',
+  description: 'Experience the pinnacle of sim racing organization. GridPilot provides obsessive detail in race management, automated standings, and professional-grade tools for serious iRacing leagues.',
+  path: '/',
+});
 
 export default async function Page() {
   if (await HomePageQuery.shouldRedirectToDashboard()) {
@@ -17,6 +26,24 @@ export default async function Page() {
   if (!data) {
     notFound();
   }
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'GridPilot',
+    url: 'https://gridpilot.com',
+    description: 'Professional iRacing League Management Platform',
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: 'https://gridpilot.com/search?q={search_term_string}',
+      'query-input': 'required name=search_term_string',
+    },
+  };
   
-  return <HomePageClient viewData={data} />;
+  return (
+    <>
+      <JsonLd data={jsonLd} />
+      <HomePageClient viewData={data} />
+    </>
+  );
 }

apps/website/app/races/[id]/page.tsx

@@ -2,6 +2,8 @@ import { notFound } from 'next/navigation';
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
 import { RaceDetailPageQuery } from '@/lib/page-queries/races/RaceDetailPageQuery';
 import { RaceDetailPageClient } from '@/client-wrapper/RaceDetailPageClient';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
 
 interface RaceDetailPageProps {
   params: Promise<{
@@ -9,6 +11,30 @@ interface RaceDetailPageProps {
   }>;
 }
 
+export async function generateMetadata({ params }: RaceDetailPageProps): Promise<Metadata> {
+  const { id: raceId } = await params;
+  const result = await RaceDetailPageQuery.execute({ raceId, driverId: '' });
+
+  if (result.isErr()) {
+    return MetadataHelper.generate({
+      title: 'Race Not Found',
+      description: 'The requested race details could not be found on GridPilot.',
+      path: `/races/${raceId}`,
+    });
+  }
+
+  const viewData = result.unwrap();
+  const race = viewData.race;
+  const leagueName = viewData.league?.name;
+  const title = leagueName ? `${race.track} - ${leagueName}` : `${race.track} - ${race.car}`;
+
+  return MetadataHelper.generate({
+    title: `${title} | Race Results`,
+    description: `Detailed race results, standings, and session reports for the ${race.car} race at ${race.track}${leagueName ? ` in ${leagueName}` : ''} on GridPilot. Professional iRacing event coverage with obsessive detail.`,
+    path: `/races/${raceId}`,
+  });
+}
+
 export default async function RaceDetailPage({ params }: RaceDetailPageProps) {
   const { id: raceId } = await params;
   

apps/website/app/races/page.tsx

@@ -1,6 +1,14 @@
 import { notFound } from 'next/navigation';
 import { RacesPageQuery } from '@/lib/page-queries/races/RacesPageQuery';
 import { RacesPageClient } from '@/client-wrapper/RacesPageClient';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'Upcoming & Recent Races',
+  description: 'Stay updated with the latest sim racing action on GridPilot. View upcoming events, live race results, and detailed session reports from professional iRacing leagues.',
+  path: '/races',
+});
 
 export default async function Page() {
   const query = new RacesPageQuery();

apps/website/app/teams/[id]/page.tsx

@@ -1,6 +1,32 @@
 import { notFound } from 'next/navigation';
 import { TeamDetailPageQuery } from '@/lib/page-queries/TeamDetailPageQuery';
 import { TeamDetailPageClient } from '@/client-wrapper/TeamDetailPageClient';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+import { JsonLd } from '@/ui/JsonLd';
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id } = await params;
+  const result = await TeamDetailPageQuery.execute(id);
+
+  if (result.isErr()) {
+    return MetadataHelper.generate({
+      title: 'Team Not Found',
+      description: 'The requested team could not be found on GridPilot.',
+      path: `/teams/${id}`,
+    });
+  }
+
+  const viewData = result.unwrap();
+  const team = viewData.team;
+  
+  return MetadataHelper.generate({
+    title: team.name,
+    description: team.description || `Explore ${team.name} on GridPilot. View team roster, race history, and performance statistics in professional iRacing leagues.`,
+    path: `/teams/${id}`,
+    // image: team.logoUrl, // If logoUrl exists in viewData
+  });
+}
 
 export default async function Page({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
@@ -15,5 +41,30 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
     notFound();
   }
 
-  return <TeamDetailPageClient viewData={result.unwrap()} />;
+  const viewData = result.unwrap();
+  const team = viewData.team;
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'SportsTeam',
+    name: team.name,
+    description: team.description,
+    url: `https://gridpilot.com/teams/${team.id}`,
+    member: viewData.memberships.map(m => ({
+      '@type': 'OrganizationRole',
+      member: {
+        '@type': 'Person',
+        name: m.driverName,
+        url: `https://gridpilot.com/drivers/${m.driverId}`,
+      },
+      roleName: m.role,
+    })),
+  };
+
+  return (
+    <>
+      <JsonLd data={jsonLd} />
+      <TeamDetailPageClient viewData={viewData} />
+    </>
+  );
 }

apps/website/app/teams/leaderboard/page.tsx

@@ -1,6 +1,14 @@
 import { notFound } from 'next/navigation';
 import { TeamLeaderboardPageQuery } from '@/lib/page-queries/TeamLeaderboardPageQuery';
 import { TeamLeaderboardPageWrapper } from '@/client-wrapper/TeamLeaderboardPageWrapper';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'Team Leaderboard',
+  description: 'The definitive ranking of sim racing teams on GridPilot. Compare team performance, championship points, and overall standing in the professional iRacing community.',
+  path: '/teams/leaderboard',
+});
 
 export default async function TeamLeaderboardPage() {
   const query = new TeamLeaderboardPageQuery();

apps/website/app/teams/page.tsx

@@ -1,6 +1,14 @@
 import { notFound } from 'next/navigation';
 import { TeamsPageQuery } from '@/lib/page-queries/TeamsPageQuery';
 import { TeamsPageClient } from '@/client-wrapper/TeamsPageClient';
+import { Metadata } from 'next';
+import { MetadataHelper } from '@/lib/seo/MetadataHelper';
+
+export const metadata: Metadata = MetadataHelper.generate({
+  title: 'Sim Racing Teams',
+  description: 'Discover the most competitive sim racing teams on GridPilot. Track team performance, rosters, and achievements across the professional iRacing landscape.',
+  path: '/teams',
+});
 
 export default async function Page() {
   const query = new TeamsPageQuery();

apps/website/client-wrapper/TeamLeaderboardPageWrapper.tsx

@@ -34,12 +34,31 @@ export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<Team
     router.push('/teams');
   };
 
+  // Apply filtering and sorting
+  const filteredAndSortedTeams = viewData.teams
+    .filter((team) => {
+      const matchesSearch = team.name.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesLevel = filterLevel === 'all' || team.performanceLevel === filterLevel;
+      return matchesSearch && matchesLevel;
+    })
+    .sort((a, b) => {
+      if (sortBy === 'rating') return (b.rating || 0) - (a.rating || 0);
+      if (sortBy === 'wins') return b.totalWins - a.totalWins;
+      if (sortBy === 'winRate') {
+        const rateA = a.totalRaces > 0 ? a.totalWins / a.totalRaces : 0;
+        const rateB = b.totalRaces > 0 ? b.totalWins / b.totalRaces : 0;
+        return rateB - rateA;
+      }
+      if (sortBy === 'races') return b.totalRaces - a.totalRaces;
+      return 0;
+    });
+
   const templateViewData = {
     teams: viewData.teams,
     searchQuery,
     filterLevel,
     sortBy,
-    filteredAndSortedTeams: viewData.teams,
+    filteredAndSortedTeams,
   };
 
   return (

apps/website/components/drivers/DriverGrid.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+import { Grid } from '@/ui/Grid';
+
+interface DriverGridProps {
+  children: ReactNode;
+}
+
+/**
+ * DriverGrid - A semantic layout for displaying driver cards.
+ */
+export function DriverGrid({ children }: DriverGridProps) {
+  return (
+    <Grid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} gap={4}>
+      {children}
+    </Grid>
+  );
+}

apps/website/components/home/Hero.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Button } from '@/ui/Button';
-import { Section } from '@/ui/Section';
-import { ButtonGroup } from '@/ui/ButtonGroup';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
+import { LandingHero } from '@/ui/LandingHero';
 
 /**
  * Hero - Refined with Dieter Rams principles.
@@ -15,51 +9,12 @@ import { Box } from '@/ui/Box';
  */
 export function Hero() {
   return (
-    <Section variant="default" py={32}>
-      <Box maxWidth="54rem">
-        <Box marginBottom={24}>
-          <Text 
-            variant="primary" 
-            weight="bold" 
-            uppercase 
-            size="xs" 
-            leading="none"
-            block
-            letterSpacing="0.2em"
-            marginBottom={10}
-          >
-            Sim Racing Infrastructure
-          </Text>
-          
-          <Heading level={1} weight="bold" size="4xl">
-            Professional League Management.<br />
-            Engineered for Control.
-          </Heading>
-        </Box>
-        
-        <Box marginBottom={24}>
-          <Text size="xl" variant="med" leading="relaxed" block maxWidth="42rem">
-            GridPilot eliminates the administrative overhead of running iRacing leagues. 
-            No spreadsheets. No manual points. No protest chaos. 
-            Just pure competition, structured for growth.
-          </Text>
-        </Box>
-
-        <ButtonGroup gap={10}>
-          <Button
-            variant="primary"
-            size="lg"
-          >
-            Create Your League
-          </Button>
-          <Button
-            variant="secondary"
-            size="lg"
-          >
-            View Demo
-          </Button>
-        </ButtonGroup>
-      </Box>
-    </Section>
+    <LandingHero
+      subtitle="Sim Racing Infrastructure"
+      title="Professional League Management. Engineered for Control."
+      description="GridPilot eliminates the administrative overhead of running iRacing leagues. No spreadsheets. No manual points. No protest chaos. Just pure competition, structured for growth."
+      primaryAction={{ label: 'Create Your League', href: '#' }}
+      secondaryAction={{ label: 'View Demo', href: '#' }}
+    />
   );
 }

apps/website/components/home/LeagueIdentityPreview.tsx

@@ -12,11 +12,22 @@ import { Box } from '@/ui/Box';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';
 
+interface LeagueIdentityPreviewProps {
+  league?: {
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
 /**
  * LeagueIdentityPreview - Radically redesigned for "Modern Precision" and "Dieter Rams" style.
  * Focuses on the professional identity and deep customization options for admins.
  */
-export function LeagueIdentityPreview() {
+export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
+  const leagueName = league?.name || 'Apex Racing League';
+  const subdomain = league ? `${league.name.toLowerCase().replace(/\s+/g, '')}.gridpilot.racing` : 'apex.gridpilot.racing';
+
   return (
     <Section variant="default" py={32}>
       <Box>
@@ -48,7 +59,7 @@ export function LeagueIdentityPreview() {
                       <Globe size={20} className="text-[var(--ui-color-text-low)]" />
                       <Stack gap={1}>
                         <Text weight="bold">Custom Subdomains</Text>
-                        <Text size="xs" variant="low">yourleague.gridpilot.racing</Text>
+                        <Text size="xs" variant="low">{subdomain}</Text>
                       </Stack>
                     </Group>
                   </Panel>
@@ -77,8 +88,8 @@ export function LeagueIdentityPreview() {
                         <Trophy size={20} className="text-[var(--ui-color-text-low)]" />
                       </Box>
                       <Stack gap={0}>
-                        <Text weight="bold" size="sm">Apex Racing League</Text>
-                        <Text size="xs" variant="low">apex.gridpilot.racing</Text>
+                        <Text weight="bold" size="sm">{leagueName}</Text>
+                        <Text size="xs" variant="low">{subdomain}</Text>
                       </Stack>
                     </Group>
                   </Panel>

apps/website/components/home/StewardingPreview.tsx

@@ -13,11 +13,30 @@ import { Grid } from '@/ui/Grid';
 import { Box } from '@/ui/Box';
 import { Gavel, Clock, User, MessageSquare } from 'lucide-react';
 
+interface StewardingPreviewProps {
+  race?: {
+    id: string;
+    track: string;
+    car: string;
+    formattedDate: string;
+  };
+  team?: {
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
 /**
  * StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
  * Thorough down to the last detail.
  */
-export function StewardingPreview() {
+export function StewardingPreview({ race, team }: StewardingPreviewProps) {
+  const incidentId = race ? `${race.id.slice(0, 3).toUpperCase()}-WG` : '402-WG';
+  const trackName = race?.track || 'Watkins Glen - Cup';
+  const carName = race?.car || 'Porsche 911 GT3 R';
+  const teamName = team?.name || 'Alex Miller';
+
   return (
     <Section variant="muted" py={32}>
       <Box>
@@ -36,9 +55,9 @@ export function StewardingPreview() {
                 <Group gap={2}>
                   <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">Incident Report</Text>
                   <Text variant="low" size="xs">•</Text>
-                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: 402-WG</Text>
+                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: {incidentId}</Text>
                 </Group>
-                <Heading level={3} weight="bold">Turn 1 Contact: Miller vs Chen</Heading>
+                <Heading level={3} weight="bold">Turn 1 Contact: {teamName} vs David Chen</Heading>
               </Stack>
               <StatusBadge variant="warning">UNDER REVIEW</StatusBadge>
             </Group>
@@ -50,8 +69,8 @@ export function StewardingPreview() {
                     <User size={14} className="text-[var(--ui-color-intent-primary)]" />
                     <Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
                   </Group>
-                  <Text weight="bold">Alex Miller</Text>
-                  <Text size="sm" variant="low">#42 - Porsche 911 GT3 R</Text>
+                  <Text weight="bold">{teamName}</Text>
+                  <Text size="sm" variant="low">#42 - {carName}</Text>
                 </Stack>
               </Panel>
               <Panel variant="bordered" padding="md">
@@ -71,7 +90,7 @@ export function StewardingPreview() {
                     <Text size="xs" uppercase weight="bold" variant="low">Session Info</Text>
                   </Group>
                   <Text weight="bold">Lap 1, 00:42.150</Text>
-                  <Text size="sm" variant="low">Watkins Glen - Cup</Text>
+                  <Text size="sm" variant="low">{trackName}</Text>
                 </Stack>
               </Panel>
             </Grid>

apps/website/components/home/TelemetryStrip.tsx

@@ -38,7 +38,7 @@ export function TelemetryStrip() {
   ];
 
   return (
-    <Section variant="default" py={16}>
+    <Section variant="default" padding="md">
       <StatsStrip stats={stats} />
     </Section>
   );

apps/website/components/layout/CommandModal.tsx

@@ -2,6 +2,8 @@
 
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
+import { Input } from '@/ui/Input';
+import { Button } from '@/ui/Button';
 import { Search, Command, ArrowRight, X } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
@@ -46,71 +48,81 @@ export function CommandModal({ isOpen, onClose }: CommandModalProps) {
   if (!isOpen) return null;
 
   return createPortal(
-    <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[20vh] px-4">
+    <Box className="fixed inset-0 z-[9999] flex items-start justify-center pt-[20vh] px-4">
       {/* Backdrop */}
-      <div 
+      <Box 
         className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
         onClick={onClose}
       />
       
       {/* Modal Content */}
-      <div className="relative w-full max-w-lg bg-surface-charcoal border border-outline-steel rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
-        <div className="flex items-center border-b border-outline-steel px-4 py-3 gap-3">
+      <Box className="relative w-full max-w-lg bg-surface-charcoal border border-outline-steel rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+        <Box display="flex" alignItems="center" className="border-b border-outline-steel px-4 py-3 gap-3">
           <Search className="text-text-low" size={18} />
-          <input
+          <Input
             autoFocus
-            type="text"
+            variant="ghost"
             placeholder="Type a command or search..."
-            className="flex-1 bg-transparent border-none outline-none text-text-high placeholder:text-text-low/50 text-base h-6"
+            className="flex-1 text-base h-6"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
-          <button onClick={onClose} className="text-text-low hover:text-text-high transition-colors">
-            <span className="sr-only">Close</span>
-            <kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono bg-white/5 rounded border border-white/5">ESC</kbd>
-          </button>
-        </div>
+          <Button variant="ghost" size="sm" onClick={onClose} className="text-text-low hover:text-text-high transition-colors">
+            <Text as="span" className="sr-only">Close</Text>
+            <Text as="kbd" className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono bg-white/5 rounded border border-white/5">ESC</Text>
+          </Button>
+        </Box>
 
-        <div className="p-2">
+        <Box p={2}>
           {results.length > 0 ? (
-            <div className="flex flex-col gap-1">
-              <div className="px-2 py-1.5 text-[10px] font-mono uppercase tracking-wider text-text-low/50 font-bold">
-                Suggestions
-              </div>
+            <Box display="flex" flexDirection="col" gap={1}>
+              <Box paddingX={2} paddingY={1.5}>
+                <Text size="xs" weight="bold" uppercase mono className="tracking-wider text-text-low/50">
+                  Suggestions
+                </Text>
+              </Box>
               {results.map((result, i) => (
-                <button
+                <Button
                   key={i}
+                  variant="ghost"
+                  fullWidth
                   className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-white/5 text-left group transition-colors"
                   onClick={onClose}
                 >
-                  <span className="text-sm text-text-med group-hover:text-text-high font-medium">
+                  <Text size="sm" weight="medium" className="text-text-med group-hover:text-text-high">
                     {result.label}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] font-mono text-text-low bg-white/5 px-1.5 py-0.5 rounded border border-white/5">
+                  </Text>
+                  <Box display="flex" alignItems="center" gap={2}>
+                    <Text as="span" size="xs" mono className="text-text-low bg-white/5 px-1.5 py-0.5 rounded border border-white/5">
                       {result.shortcut}
-                    </span>
+                    </Text>
                     <ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity -translate-x-2 group-hover:translate-x-0" />
-                  </div>
-                </button>
+                  </Box>
+                </Button>
               ))}
-            </div>
+            </Box>
           ) : (
-            <div className="px-4 py-8 text-center text-text-low text-sm">
-              No results found.
-            </div>
+            <Box paddingX={4} paddingY={8} className="text-center">
+              <Text size="sm" variant="low">
+                No results found.
+              </Text>
+            </Box>
           )}
-        </div>
+        </Box>
         
-        <div className="px-4 py-2 bg-white/2 border-t border-white/5 flex items-center justify-between text-[10px] text-text-low">
-          <div className="flex gap-3">
-            <span><strong className="text-text-med">↑↓</strong> to navigate</span>
-            <span><strong className="text-text-med">↵</strong> to select</span>
-          </div>
-          <span>GridPilot Command</span>
-        </div>
-      </div>
-    </div>,
+        <Box paddingX={4} paddingY={2} display="flex" alignItems="center" justifyContent="space-between" className="bg-white/2 border-t border-white/5">
+          <Box display="flex" gap={3}>
+            <Text size="xs" variant="low">
+              <Text as="strong" variant="med">↑↓</Text> to navigate
+            </Text>
+            <Text size="xs" variant="low">
+              <Text as="strong" variant="med">↵</Text> to select
+            </Text>
+          </Box>
+          <Text size="xs" variant="low">GridPilot Command</Text>
+        </Box>
+      </Box>
+    </Box>,
     document.body
   );
 }

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -18,6 +18,8 @@ interface TeamLeaderboardPreviewProps {
     totalWins: number;
     logoUrl: string;
     position: number;
+    rating?: number;
+    performanceLevel: string;
   }[];
   onTeamClick: (id: string) => void;
   onNavigateToTeams: () => void;
@@ -28,12 +30,12 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
 
   return (
     <LeaderboardPreviewShell
-      title="Team Rankings"
+      title="Team Standings"
       subtitle="Top Performing Teams"
       onViewFull={onNavigateToTeams}
       icon={Users}
-      iconColor="var(--neon-purple)"
-      iconBgGradient="linear-gradient(to bottom right, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1))"
+      iconColor="var(--ui-color-intent-primary)"
+      iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
       viewFullLabel="View All"
     >
       <LeaderboardList>
@@ -72,7 +74,7 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
                 border 
                 borderColor="border-charcoal-outline" 
                 overflow="hidden" 
-                groupHoverBorderColor="purple-400/50" 
+                groupHoverBorderColor="primary-blue/50" 
                 transition
               >
                 <Image
@@ -91,31 +93,26 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
                   weight="semibold" 
                   color="text-white" 
                   truncate 
-                  groupHoverTextColor="text-purple-400" 
+                  groupHoverTextColor="text-primary-blue" 
                   transition 
                   block
                 >
                   {team.name}
                 </Text>
                 <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
-                  {team.category && (
-                    <Box display="flex" alignItems="center" gap={1} color="text-purple-400">
-                      <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
-                      <Text size="xs" weight="medium">{team.category}</Text>
-                    </Box>
-                  )}
+                  <Text size="xs" variant="low" uppercase font="mono">{team.performanceLevel}</Text>
                   <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
                   <Box display="flex" alignItems="center" gap={1}>
                     <Icon icon={Users} size={3} color="text-gray-500" />
-                    <Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
+                    <Text size="xs" color="text-gray-500">{team.memberCount}</Text>
                   </Box>
                 </Box>
               </Box>
 
               <Box display="flex" alignItems="center" gap={6}>
                 <Box textAlign="right">
-                  <Text color="text-purple-400" font="mono" weight="bold" block size="sm">{team.memberCount}</Text>
-                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Members</Text>
+                  <Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{team.rating?.toFixed(0) || '1000'}</Text>
+                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
                 </Box>
                 <Box textAlign="right" minWidth="12">
                   <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{team.totalWins}</Text>

apps/website/components/races/RaceFilterModal.tsx

@@ -8,6 +8,7 @@ import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { StatusDot } from '@/ui/StatusDot';
+import { Box } from '@/ui/Box';
 import { Filter, Search } from 'lucide-react';
 
 export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
@@ -77,9 +78,9 @@ export function RaceFilterModal({
                   onClick={() => setTimeFilter(filter)}
                 >
                   {filter === 'live' && (
-                    <Stack mr={2}>
+                    <Box mr={2}>
                       <StatusDot intent="success" size={1.5} pulse />
-                    </Stack>
+                    </Box>
                   )}
                   {filter.charAt(0).toUpperCase() + filter.slice(1)}
                 </Button>

apps/website/components/races/RacesLiveRail.tsx

@@ -1,4 +1,4 @@
-'use thought';
+'use client';
 
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';

apps/website/components/shared/PageHeader.tsx

@@ -1,7 +1,10 @@
 import React, { ReactNode } from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Group } from '@/ui/Group';
+
+import { VerticalBar } from '@/ui/VerticalBar';
 
 interface PageHeaderProps {
   title: string;
@@ -15,34 +18,35 @@ interface PageHeaderProps {
  */
 export function PageHeader({ title, subtitle, action }: PageHeaderProps) {
   return (
-    <Box 
-      marginBottom={12} 
-      display="flex" 
-      flexDirection={{ base: 'col', md: 'row' }} 
-      alignItems={{ base: 'start', md: 'end' }} 
-      justifyContent="between" 
-      gap={6} 
-      borderBottom 
-      borderColor="var(--ui-color-border-muted)" 
-      paddingBottom={8}
+    <Container 
+      size="full" 
+      padding="none" 
+      py={12}
     >
-      <Box display="flex" flexDirection="col" gap={2}>
-        <Box display="flex" alignItems="center" gap={3}>
-          <Box width="4px" height="32px" bg="var(--ui-color-intent-primary)" />
-          <Heading level={1} weight="bold" uppercase>{title}</Heading>
-        </Box>
-        {subtitle && (
-          <Text variant="low" size="lg" uppercase weight="bold" letterSpacing="widest">
-            {subtitle}
-          </Text>
+      <Group 
+        justify="between" 
+        align="end" 
+        wrap 
+        gap={6}
+      >
+        <Group direction="col" gap={2}>
+          <Group align="center" gap={3}>
+            <VerticalBar height="2rem" />
+            <Heading level={1} weight="bold" uppercase>{title}</Heading>
+          </Group>
+          {subtitle && (
+            <Text variant="low" size="lg" uppercase weight="bold" letterSpacing="widest">
+              {subtitle}
+            </Text>
+          )}
+        </Group>
+        
+        {action && (
+          <Group align="center">
+            {action}
+          </Group>
         )}
-      </Box>
-      
-      {action && (
-        <Box display="flex" alignItems="center">
-          {action}
-        </Box>
-      )}
-    </Box>
+      </Group>
+    </Container>
   );
 }

apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx

@@ -1,19 +1,10 @@
 import React from 'react';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { TeamLeaderboardPreview as SemanticTeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
+import type { LeaderboardTeamItem } from '@/lib/view-data/LeaderboardTeamItem';
 
 interface TeamLeaderboardPreviewProps {
-  topTeams: Array<{
-    id: string;
-    name: string;
-    logoUrl?: string;
-    category?: string;
-    memberCount: number;
-    totalWins: number;
-    isRecruiting: boolean;
-    rating?: number;
-    performanceLevel: string;
-  }>;
+  topTeams: LeaderboardTeamItem[];
   onTeamClick: (id: string) => void;
   onViewFullLeaderboard: () => void;
 }
@@ -27,15 +18,17 @@ export function TeamLeaderboardPreview({
 
   return (
     <SemanticTeamLeaderboardPreview
-      teams={topTeams.map((team, index) => ({
+      teams={topTeams.map((team) => ({
         id: team.id,
         name: team.name,
-        tag: '', // Not available in this view data
+        tag: team.tag,
         memberCount: team.memberCount,
         category: team.category,
         totalWins: team.totalWins,
         logoUrl: team.logoUrl || getMediaUrl('team-logo', team.id),
-        position: index + 1
+        position: team.position,
+        rating: team.rating,
+        performanceLevel: team.performanceLevel
       }))}
       onTeamClick={onTeamClick}
       onNavigateToTeams={onViewFullLeaderboard}

apps/website/components/teams/TeamsHeader.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 
 interface TeamsHeaderProps {
   title: string;
@@ -10,24 +11,32 @@ interface TeamsHeaderProps {
 
 export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
   return (
-    <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
-      <div className="space-y-2">
-        <div className="flex items-center gap-3">
-          <div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
+    <Box 
+      marginBottom={12} 
+      display="flex" 
+      flexDirection={{ base: 'col', md: 'row' }} 
+      alignItems={{ md: 'end' }} 
+      justifyContent="space-between" 
+      gap={6} 
+      className="border-b border-[var(--ui-color-border-muted)] pb-8"
+    >
+      <Box className="space-y-2">
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box width={1} height={8} className="bg-[var(--ui-color-intent-primary)]" />
           <Heading level={1} weight="bold" uppercase>{title}</Heading>
-        </div>
+        </Box>
         {subtitle && (
           <Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
             {subtitle}
           </Text>
         )}
-      </div>
+      </Box>
       
       {action && (
-        <div className="flex items-center">
+        <Box display="flex" alignItems="center">
           {action}
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 }

apps/website/lib/builders/view-data/LeaderboardsViewDataBuilder.ts

@@ -1,9 +1,10 @@
 import type { DriverLeaderboardItemDTO } from '@/lib/types/generated/DriverLeaderboardItemDTO';
+import type { TeamListItemDTO } from '@/lib/types/generated/TeamListItemDTO';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 
 export class LeaderboardsViewDataBuilder {
   static build(
-    apiDto: { drivers: { drivers: DriverLeaderboardItemDTO[] }; teams: { teams: [] } }
+    apiDto: { drivers: { drivers: DriverLeaderboardItemDTO[] }; teams: { teams: TeamListItemDTO[] } }
   ): LeaderboardsViewData {
     return {
       drivers: apiDto.drivers.drivers.slice(0, 10).map(driver => ({
@@ -17,7 +18,19 @@ export class LeaderboardsViewDataBuilder {
         avatarUrl: driver.avatarUrl || '',
         position: driver.rank,
       })),
-      teams: [], // Teams leaderboard not implemented
+      teams: apiDto.teams.teams.slice(0, 10).map((team, index) => ({
+        id: team.id,
+        name: team.name,
+        tag: team.tag,
+        memberCount: team.memberCount,
+        category: team.category,
+        totalWins: team.totalWins || 0,
+        logoUrl: team.logoUrl || '',
+        position: index + 1,
+        isRecruiting: team.isRecruiting,
+        performanceLevel: team.performanceLevel || 'N/A',
+        rating: team.rating,
+      })),
     };
   }
 }

apps/website/lib/page-queries/TeamLeaderboardPageQuery.ts

@@ -2,7 +2,7 @@ import { Result } from '@/lib/contracts/Result';
 import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
 import { PresentationError, mapToPresentationError } from '@/lib/contracts/page-queries/PresentationError';
 import { TeamService } from '@/lib/services/teams/TeamService';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 
 export interface TeamLeaderboardPageData {
   teams: TeamSummaryViewModel[];
@@ -18,15 +18,7 @@ export class TeamLeaderboardPageQuery implements PageQuery<TeamLeaderboardPageDa
         return Result.err(mapToPresentationError(result.getError()));
       }
 
-      const teams = result.unwrap().map((t: any) => ({
-        id: t.id,
-        name: t.name,
-        logoUrl: t.logoUrl,
-        memberCount: t.memberCount,
-        totalWins: t.totalWins,
-        totalRaces: t.totalRaces,
-        rating: 1450, // Mocked as in original
-      } as TeamSummaryViewModel));
+      const teams = result.unwrap().map((t: any) => new TeamSummaryViewModel(t));
 
       return Result.ok({ teams });
     } catch (error) {

apps/website/lib/seo/MetadataHelper.ts

@@ -0,0 +1,58 @@
+import { Metadata } from 'next';
+import { getWebsitePublicEnv } from '@/lib/config/env';
+
+interface MetadataOptions {
+  title: string;
+  description: string;
+  path: string;
+  image?: string;
+  type?: 'website' | 'article' | 'profile';
+}
+
+export class MetadataHelper {
+  private static readonly DEFAULT_IMAGE = '/og-image.png';
+  private static readonly SITE_NAME = 'GridPilot';
+
+  static generate({
+    title,
+    description,
+    path,
+    image = this.DEFAULT_IMAGE,
+    type = 'website',
+  }: MetadataOptions): Metadata {
+    const env = getWebsitePublicEnv();
+    const baseUrl = env.NEXT_PUBLIC_SITE_URL || 'https://gridpilot.com';
+    const url = `${baseUrl}${path}`;
+    const fullTitle = `${title} | ${this.SITE_NAME}`;
+
+    return {
+      title: fullTitle,
+      description,
+      alternates: {
+        canonical: url,
+      },
+      openGraph: {
+        title: fullTitle,
+        description,
+        url,
+        siteName: this.SITE_NAME,
+        images: [
+          {
+            url: image.startsWith('http') ? image : `${baseUrl}${image}`,
+            width: 1200,
+            height: 630,
+            alt: title,
+          },
+        ],
+        locale: 'en_US',
+        type,
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: fullTitle,
+        description,
+        images: [image.startsWith('http') ? image : `${baseUrl}${image}`],
+      },
+    };
+  }
+}

apps/website/lib/services/leaderboards/LeaderboardsService.ts

@@ -1,4 +1,5 @@
 import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
+import { TeamsApiClient } from '@/lib/api/teams/TeamsApiClient';
 import { Result } from '@/lib/contracts/Result';
 import { Service, DomainError } from '@/lib/contracts/services/Service';
 import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter';
@@ -15,8 +16,12 @@ export class LeaderboardsService implements Service {
       const logger = new ConsoleLogger();
 
       const driversApiClient = new DriversApiClient(baseUrl, errorReporter, logger);
+      const teamsApiClient = new TeamsApiClient(baseUrl, errorReporter, logger);
 
-      const driverResult = await driversApiClient.getLeaderboard();
+      const [driverResult, teamResult] = await Promise.all([
+        driversApiClient.getLeaderboard(),
+        teamsApiClient.getAll()
+      ]);
 
       if (!driverResult) {
         return Result.err({ type: 'notFound', message: 'No leaderboard data available' });
@@ -24,7 +29,7 @@ export class LeaderboardsService implements Service {
 
       const data: LeaderboardsData = {
         drivers: driverResult,
-        teams: { teams: [] }, // Teams leaderboard not implemented
+        teams: teamResult,
       };
 
       return Result.ok(data);

apps/website/lib/types/LeaderboardsData.ts

@@ -1,6 +1,7 @@
 import type { DriverLeaderboardItemDTO } from '@/lib/types/generated/DriverLeaderboardItemDTO';
+import type { TeamListItemDTO } from '@/lib/types/generated/TeamListItemDTO';
 
 export interface LeaderboardsData {
   drivers: { drivers: DriverLeaderboardItemDTO[] };
-  teams: { teams: [] };
+  teams: { teams: TeamListItemDTO[] };
 }

apps/website/lib/view-data/LeaderboardTeamItem.ts

@@ -7,4 +7,7 @@ export interface LeaderboardTeamItem {
   totalWins: number;
   logoUrl: string;
   position: number;
+  isRecruiting: boolean;
+  performanceLevel: string;
+  rating?: number;
 }

apps/website/templates/DriversTemplate.tsx

@@ -3,9 +3,11 @@
 import { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 import { DriverCard } from '@/components/drivers/DriverCard';
 import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
+import { DriverGrid } from '@/components/drivers/DriverGrid';
 import { PageHeader } from '@/ui/PageHeader';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
 import { Search, Users } from 'lucide-react';
 import { EmptyState } from '@/ui/EmptyState';
 
@@ -28,32 +30,29 @@ export function DriversTemplate({
 }: DriversTemplateProps) {
   return (
     <main>
-      <Box marginBottom={8}>
-        <PageHeader
-          icon={Users}
-          title="Drivers"
-          description="Global driver roster and statistics."
-          action={
-            <Box 
-              as="button" 
-              onClick={onViewLeaderboard}
-              className="px-4 py-2 rounded-md bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-sm font-medium hover:bg-[var(--ui-color-bg-surface-muted)] transition-colors"
-            >
-              Leaderboard
-            </Box>
-          }
-        />
-      </Box>
+      <PageHeader
+        icon={Users}
+        title="Drivers"
+        description="Global driver roster and statistics."
+        action={
+          <Button 
+            variant="secondary" 
+            onClick={onViewLeaderboard}
+          >
+            Leaderboard
+          </Button>
+        }
+      />
 
-      <Box marginBottom={8}>
+      <Container size="full" padding="none" py={8}>
         <DriverStatsHeader
           totalDrivers={viewData.totalDriversLabel}
           activeDrivers={viewData.activeCountLabel}
           totalRaces={viewData.totalRacesLabel}
         />
-      </Box>
+      </Container>
 
-      <Box marginBottom={6} className="w-full">
+      <Container size="full" padding="none" py={6}>
         <Input
           placeholder="Search drivers by name or nationality..."
           value={searchQuery}
@@ -61,10 +60,10 @@ export function DriversTemplate({
           icon={Search}
           variant="search"
         />
-      </Box>
+      </Container>
 
       {filteredDrivers.length > 0 ? (
-        <Box display="grid" gap={4} className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <DriverGrid>
           {filteredDrivers.map(driver => (
             <DriverCard
               key={driver.id}
@@ -72,7 +71,7 @@ export function DriversTemplate({
               onClick={onDriverClick}
             />
           ))}
-        </Box>
+        </DriverGrid>
       ) : (
         <EmptyState
           title="No drivers found"

apps/website/templates/HomeTemplate.tsx

@@ -52,10 +52,15 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
       <ValuePillars />
 
       {/* Stewarding Workflow Preview */}
-      <StewardingPreview />
+      <StewardingPreview 
+        race={viewData.upcomingRaces[0]} 
+        team={viewData.teams[0]}
+      />
 
       {/* League Identity Showcase */}
-      <LeagueIdentityPreview />
+      <LeagueIdentityPreview 
+        league={viewData.topLeagues[0]} 
+      />
 
       {/* Migration Offer */}
       <MigrationSection />

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>
   );
 }

apps/website/templates/LeaguesTemplate.tsx

@@ -7,7 +7,6 @@ import { PageHeader } from '@/ui/PageHeader';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
-import { Grid } from '@/ui/Grid';
 import { Container } from '@/ui/Container';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
@@ -15,8 +14,7 @@ import { Section } from '@/ui/Section';
 import { ControlBar } from '@/ui/ControlBar';
 import { SegmentedControl } from '@/ui/SegmentedControl';
 import { MetricCard } from '@/ui/MetricCard';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
+import { FeatureGrid } from '@/ui/FeatureGrid';
 import {
   Plus,
   Search,
@@ -73,27 +71,27 @@ export function LeaguesTemplate({
   onClearFilters,
 }: LeaguesTemplateProps) {
   return (
-    <Container size="xl" py={8}>
-      <Stack gap={8}>
-        {/* Header Section */}
-        <PageHeader
-          icon={Trophy}
-          title="Leagues"
-          description="Infrastructure for competitive sim racing."
-          action={
-            <Button 
-              onClick={onCreateLeague}
-              variant="primary"
-              size="lg"
-              icon={<Plus size={16} />}
-            >
-              Create League
-            </Button>
-          }
-        />
+    <Section variant="default" padding="lg">
+      {/* Header Section */}
+      <PageHeader
+        icon={Trophy}
+        title="Leagues"
+        description="Infrastructure for competitive sim racing."
+        action={
+          <Button 
+            onClick={onCreateLeague}
+            variant="primary"
+            size="lg"
+            icon={<Plus size={16} />}
+          >
+            Create League
+          </Button>
+        }
+      />
 
-        {/* Stats Overview */}
-        <Grid cols={{ base: 1, md: 3 }} gap={4}>
+      {/* Stats Overview */}
+      <Container size="full" padding="none" py={8}>
+        <FeatureGrid columns={{ base: 1, md: 3 }} gap={4}>
           <MetricCard 
             label="Active Leagues" 
             value={viewData.leagues.length} 
@@ -112,68 +110,67 @@ export function LeaguesTemplate({
             icon={Trophy}
             intent="success"
           />
-        </Grid>
+        </FeatureGrid>
+      </Container>
 
-        {/* Control Bar */}
-        <ControlBar
-          leftContent={
-            <Group gap={4} align="center">
-              <Icon icon={Filter} size={4} intent="low" />
-              <SegmentedControl
-                options={categories.map(c => ({
-                  id: c.id,
-                  label: c.label,
-                  icon: <Icon icon={c.icon} size={3} />
-                }))}
-                activeId={activeCategory}
-                onChange={(id) => onCategoryChange(id as CategoryId)}
-              />
-            </Group>
-          }
-        >
-          <Box width="300px">
-            <Input
-              type="text"
-              placeholder="Search infrastructure..."
-              value={searchQuery}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-              icon={<Search size={16} />}
-              size="sm"
+      {/* Control Bar */}
+      <ControlBar
+        leftContent={
+          <Group gap={4} align="center">
+            <Icon icon={Filter} size={4} intent="low" />
+            <SegmentedControl
+              options={categories.map(c => ({
+                id: c.id,
+                label: c.label,
+                icon: <Icon icon={c.icon} size={3} />
+              }))}
+              activeId={activeCategory}
+              onChange={(id) => onCategoryChange(id as CategoryId)}
             />
-          </Box>
-        </ControlBar>
+          </Group>
+        }
+      >
+        <Input
+          type="text"
+          placeholder="Search infrastructure..."
+          value={searchQuery}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+          icon={<Search size={16} />}
+          size="sm"
+          width="300px"
+        />
+      </ControlBar>
 
-        {/* Results */}
-        <Stack gap={6}>
-          {filteredLeagues.length > 0 ? (
-            <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
-              {filteredLeagues.map((league) => (
-                <LeagueCard
-                  key={league.id}
-                  league={league as unknown as LeagueSummaryViewModel}
-                  onClick={() => onLeagueClick(league.id)}
-                />
-              ))}
-            </Grid>
-          ) : (
-            <Section variant="dark" padding="lg">
-              <Stack align="center" justify="center" gap={4}>
-                <Icon icon={Search} size={12} intent="low" />
-                <Stack align="center" gap={1}>
-                  <Text size="lg" weight="bold">No results found</Text>
-                  <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
-                </Stack>
-                <Button 
-                  variant="secondary"
-                  onClick={onClearFilters}
-                >
-                  Reset Filters
-                </Button>
-              </Stack>
-            </Section>
-          )}
-        </Stack>
-      </Stack>
-    </Container>
+      {/* Results */}
+      <Container size="full" padding="none" py={6}>
+        {filteredLeagues.length > 0 ? (
+          <FeatureGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
+            {filteredLeagues.map((league) => (
+              <LeagueCard
+                key={league.id}
+                league={league as unknown as LeagueSummaryViewModel}
+                onClick={() => onLeagueClick(league.id)}
+              />
+            ))}
+          </FeatureGrid>
+        ) : (
+          <Section variant="dark" padding="lg">
+            <Group direction="col" align="center" justify="center" gap={4}>
+              <Icon icon={Search} size={12} intent="low" />
+              <Group direction="col" align="center" gap={1}>
+                <Text size="lg" weight="bold">No results found</Text>
+                <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
+              </Group>
+              <Button 
+                variant="secondary"
+                onClick={onClearFilters}
+              >
+                Reset Filters
+              </Button>
+            </Group>
+          </Section>
+        )}
+      </Container>
+    </Section>
   );
 }

apps/website/templates/RacesIndexTemplate.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/Stack';
+import { Section } from '@/ui/Section';
 import { RacesLiveRail } from '@/components/races/RacesLiveRail';
 import { RacesCommandBar } from '@/components/races/RacesCommandBar';
 import { NextUpRacePanel } from '@/components/races/NextUpRacePanel';
@@ -10,24 +10,19 @@ import { RacesDayGroup } from '@/components/races/RacesDayGroup';
 import { RacesEmptyState } from '@/components/races/RacesEmptyState';
 import { RaceFilterModal } from '@/components/races/RaceFilterModal';
 import { PageHeader } from '@/components/shared/PageHeader';
-import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
 
 export interface RacesIndexTemplateProps {
   viewData: RacesViewData & {
-    racesByDate: Array<{
-      dateKey: string;
-      dateLabel: string;
-      races: any[];
-    }>;
-    nextUpRace?: any;
+    nextUpRace?: RaceViewData;
   };
   // Filters
   statusFilter: string;
-  setStatusFilter: (filter: any) => void;
+  setStatusFilter: (filter: string) => void;
   leagueFilter: string;
   setLeagueFilter: (filter: string) => void;
   timeFilter: string;
-  setTimeFilter: (filter: any) => void;
+  setTimeFilter: (filter: string) => void;
   // Actions
   onRaceClick: (raceId: string) => void;
   // UI State
@@ -50,20 +45,22 @@ export function RacesIndexTemplate({
   const hasRaces = viewData.racesByDate.length > 0;
 
   return (
-    <Container size="lg">
-      <Stack gap={8} paddingY={12}>
-        <PageHeader 
-          title="Races" 
-          subtitle="Live Sessions & Upcoming Events" 
-        />
+    <Section variant="default" padding="lg">
+      <PageHeader 
+        title="Races" 
+        subtitle="Live Sessions & Upcoming Events" 
+      />
 
-        {/* 1. Status Rail: Live sessions first */}
+      {/* 1. Status Rail: Live sessions first */}
+      <Container size="full" padding="none" py={8}>
         <RacesLiveRail 
           liveRaces={viewData.liveRaces} 
           onRaceClick={onRaceClick} 
         />
+      </Container>
 
-        {/* 2. Command Bar: Fast filters */}
+      {/* 2. Command Bar: Fast filters */}
+      <Container size="full" padding="none" py={4}>
         <RacesCommandBar 
           timeFilter={timeFilter}
           setTimeFilter={setTimeFilter}
@@ -72,47 +69,50 @@ export function RacesIndexTemplate({
           leagues={viewData.leagues}
           onShowMoreFilters={() => setShowFilterModal(true)}
         />
+      </Container>
 
-        {/* 3. Next Up: High signal panel */}
-        {timeFilter === 'upcoming' && viewData.nextUpRace && (
+      {/* 3. Next Up: High signal panel */}
+      {timeFilter === 'upcoming' && viewData.nextUpRace && (
+        <Container size="full" padding="none" py={8}>
           <NextUpRacePanel 
             race={viewData.nextUpRace} 
             onRaceClick={onRaceClick} 
           />
-        )}
+        </Container>
+      )}
 
-        {/* 4. Browse by Day: Grouped schedule */}
-        {hasRaces ? (
-          <Stack gap={8}>
-            {viewData.racesByDate.map((group) => (
+      {/* 4. Browse by Day: Grouped schedule */}
+      {hasRaces ? (
+        <Container size="full" padding="none" py={8}>
+          {viewData.racesByDate.map((group) => (
+            <Container key={group.dateKey} size="full" padding="none" py={4}>
               <RacesDayGroup 
-                key={group.dateKey}
                 dateLabel={group.dateLabel}
                 races={group.races}
                 onRaceClick={onRaceClick}
               />
-            ))}
-          </Stack>
-        ) : (
-          <RacesEmptyState />
-        )}
+            </Container>
+          ))}
+        </Container>
+      ) : (
+        <RacesEmptyState />
+      )}
 
-        <RaceFilterModal
-          isOpen={showFilterModal}
-          onClose={() => setShowFilterModal(false)}
-          statusFilter={statusFilter as any}
-          setStatusFilter={setStatusFilter}
-          leagueFilter={leagueFilter}
-          setLeagueFilter={setLeagueFilter}
-          timeFilter={timeFilter as any}
-          setTimeFilter={setTimeFilter}
-          searchQuery=""
-          setSearchQuery={() => {}}
-          leagues={viewData.leagues}
-          showSearch={true}
-          showTimeFilter={false}
-        />
-      </Stack>
-    </Container>
+      <RaceFilterModal
+        isOpen={showFilterModal}
+        onClose={() => setShowFilterModal(false)}
+        statusFilter={statusFilter as any}
+        setStatusFilter={setStatusFilter}
+        leagueFilter={leagueFilter}
+        setLeagueFilter={setLeagueFilter}
+        timeFilter={timeFilter as any}
+        setTimeFilter={setTimeFilter}
+        searchQuery=""
+        setSearchQuery={() => {}}
+        leagues={viewData.leagues}
+        showSearch={true}
+        showTimeFilter={false}
+      />
+    </Section>
   );
 }

apps/website/templates/RacesTemplate.tsx

@@ -50,7 +50,7 @@ export function RacesTemplate({
 }: RacesTemplateProps) {
   return (
     <Container size="lg">
-      <Stack gap={8}>
+      <Stack gap={8} paddingY={12}>
         <RacePageHeader 
           totalCount={viewData.totalCount}
           scheduledCount={viewData.scheduledCount}
@@ -101,12 +101,12 @@ export function RacesTemplate({
         <RaceFilterModal
           isOpen={showFilterModal}
           onClose={() => setShowFilterModal(false)}
-          statusFilter={statusFilter}
-          setStatusFilter={setStatusFilter}
+          statusFilter={statusFilter as any}
+          setStatusFilter={setStatusFilter as any}
           leagueFilter={leagueFilter}
           setLeagueFilter={setLeagueFilter}
-          timeFilter={timeFilter}
-          setTimeFilter={setTimeFilter}
+          timeFilter={timeFilter as any}
+          setTimeFilter={setTimeFilter as any}
           searchQuery=""
           setSearchQuery={() => {}}
           leagues={viewData.leagues}

apps/website/templates/TeamLeaderboardTemplate.tsx

@@ -11,7 +11,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
 import { Text } from '@/ui/Text';
 import { Panel } from '@/ui/Panel';
 import { Section } from '@/ui/Section';
-import { Award, ChevronLeft } from 'lucide-react';
+import { Select } from '@/ui/Select';
+import { Award, ChevronLeft, Users } from 'lucide-react';
 import React from 'react';
 
 interface TeamLeaderboardTemplateProps {
@@ -26,13 +27,30 @@ interface TeamLeaderboardTemplateProps {
 export function TeamLeaderboardTemplate({
   viewData,
   onSearchChange,
+  filterLevelChange,
+  onSortChange,
   onTeamClick,
   onBackToTeams,
 }: TeamLeaderboardTemplateProps) {
-  const { searchQuery, filteredAndSortedTeams } = viewData;
+  const { searchQuery, filterLevel, sortBy, filteredAndSortedTeams } = viewData;
+
+  const levelOptions = [
+    { value: 'all', label: 'All Levels' },
+    { value: 'pro', label: 'Professional' },
+    { value: 'advanced', label: 'Advanced' },
+    { value: 'intermediate', label: 'Intermediate' },
+    { value: 'beginner', label: 'Beginner' },
+  ];
+
+  const sortOptions = [
+    { value: 'rating', label: 'Rating' },
+    { value: 'wins', label: 'Wins' },
+    { value: 'winRate', label: 'Win Rate' },
+    { value: 'races', label: 'Races' },
+  ];
 
   return (
-    <Container size="lg" py={12}>
+    <Section variant="default" padding="lg">
       <Group direction="column" gap={8} fullWidth>
         {/* Header */}
         <Group direction="row" align="center" justify="between" fullWidth>
@@ -41,28 +59,44 @@ export function TeamLeaderboardTemplate({
               Back
             </Button>
             <Group direction="column">
-              <Heading level={1} weight="bold">Global Standings</Heading>
-              <Text variant="low" size="sm" font="mono" uppercase letterSpacing="widest">Team Performance Index</Text>
+              <Heading level={1} weight="bold">Team Standings</Heading>
+              <Text variant="low" size="sm" font="mono" uppercase letterSpacing="widest">Global Performance Index</Text>
             </Group>
           </Group>
-          <Icon icon={Award} size={8} color="var(--ui-color-intent-warning)" />
+          <Icon icon={Award} size={8} intent="warning" />
         </Group>
 
         <LeaderboardFiltersBar
           searchQuery={searchQuery}
           onSearchChange={onSearchChange}
           placeholder="Search teams..."
-        />
+        >
+          <Group gap={4}>
+            <Select
+              size="sm"
+              value={filterLevel}
+              options={levelOptions}
+              onChange={(e) => filterLevelChange(e.target.value as SkillLevel | 'all')}
+            />
+            <Select
+              size="sm"
+              value={sortBy}
+              options={sortOptions}
+              onChange={(e) => onSortChange(e.target.value as SortBy)}
+            />
+          </Group>
+        </LeaderboardFiltersBar>
 
-        <Panel variant="dark" padding={0}>
+        <Panel variant="dark" padding="none">
           <Table>
             <TableHead>
               <TableRow>
-                <TableHeader w="20">Rank</TableHeader>
-                <TableHeader>Team</TableHeader>
-                <TableHeader textAlign="center">Personnel</TableHeader>
-                <TableHeader textAlign="center">Races</TableHeader>
-                <TableHeader textAlign="right">Rating</TableHeader>
+                <TableCell w="80px">Rank</TableCell>
+                <TableCell>Team</TableCell>
+                <TableCell textAlign="center">Personnel</TableCell>
+                <TableCell textAlign="center">Races</TableCell>
+                <TableCell textAlign="center">Wins</TableCell>
+                <TableCell textAlign="right">Rating</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -80,10 +114,13 @@ export function TeamLeaderboardTemplate({
                     </TableCell>
                     <TableCell>
                       <Group direction="row" align="center" gap={3}>
-                        <Panel variant="muted" padding={2}>
-                          <Text size="xs" weight="bold" color="text-primary-accent">{team.name.substring(0, 2).toUpperCase()}</Text>
+                        <Panel variant="muted" padding="sm">
+                          <Icon icon={Users} size={4} intent="low" />
                         </Panel>
-                        <Text weight="bold" size="sm">{team.name}</Text>
+                        <Group direction="column" gap={0}>
+                          <Text weight="bold" size="sm">{team.name}</Text>
+                          <Text size="xs" variant="low" uppercase font="mono">{team.performanceLevel}</Text>
+                        </Group>
                       </Group>
                     </TableCell>
                     <TableCell textAlign="center">
@@ -92,14 +129,19 @@ export function TeamLeaderboardTemplate({
                     <TableCell textAlign="center">
                       <Text size="xs" variant="low" font="mono">{team.totalRaces}</Text>
                     </TableCell>
+                    <TableCell textAlign="center">
+                      <Text size="xs" variant="low" font="mono">{team.totalWins}</Text>
+                    </TableCell>
                     <TableCell textAlign="right">
-                      <Text font="mono" weight="bold" color="text-primary-accent">1450</Text>
+                      <Text font="mono" weight="bold" variant="primary">
+                        {team.rating?.toFixed(0) || '1000'}
+                      </Text>
                     </TableCell>
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={5} textAlign="center">
+                  <TableCell colSpan={6} textAlign="center">
                     <Section variant="dark" padding="lg">
                       <Group align="center" justify="center" fullWidth>
                         <Text variant="low" font="mono" size="xs" uppercase letterSpacing="widest">
@@ -114,6 +156,6 @@ export function TeamLeaderboardTemplate({
           </Table>
         </Panel>
       </Group>
-    </Container>
+    </Section>
   );
 }

apps/website/templates/TeamsTemplate.tsx

@@ -10,9 +10,7 @@ import { TeamCard } from '@/components/teams/TeamCard';
 import { TeamSearchBar } from '@/components/teams/TeamSearchBar';
 import { EmptyState } from '@/ui/EmptyState';
 import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Section } from '@/ui/Section';
 import { Carousel } from '@/components/shared/Carousel';
 
 interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
@@ -65,22 +63,21 @@ export function TeamsTemplate({
   }, [teams, filteredTeams, searchQuery]);
 
   return (
-    <div className="min-h-screen bg-[var(--ui-color-bg-base)] py-12">
-      <Container size="xl">
-        <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
-        
-        <Box marginBottom={12}>
-          <TeamSearchBar 
-            searchQuery={searchQuery} 
-            onSearchChange={onSearchChange} 
-          />
-        </Box>
+    <Section variant="default" padding="lg">
+      <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
+      
+      <Container size="full" padding="none" py={12}>
+        <TeamSearchBar 
+          searchQuery={searchQuery} 
+          onSearchChange={onSearchChange} 
+        />
+      </Container>
 
-        {clusters.length > 0 ? (
-          <div className="space-y-20">
-            {clusters.map((cluster) => (
+      {clusters.length > 0 ? (
+        <Container size="full" padding="none">
+          {clusters.map((cluster, index) => (
+            <Container key={cluster.title} size="full" padding="none" py={index === 0 ? 0 : 10}>
               <Carousel 
-                key={cluster.title} 
                 title={cluster.title} 
                 count={cluster.teams.length}
               >
@@ -92,23 +89,21 @@ export function TeamsTemplate({
                   />
                 ))}
               </Carousel>
-            ))}
-          </div>
-        ) : (
-          <div className="py-20 border border-dashed border-[var(--ui-color-border-muted)] flex flex-col items-center justify-center text-center">
-            <EmptyState
-              icon={Users}
-              title={searchQuery ? "No matching teams" : "No teams yet"}
-              description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
-              action={{
-                label: 'Create Team',
-                onClick: onCreateTeam,
-                variant: 'primary'
-              }}
-            />
-          </div>
-        )}
-      </Container>
-    </div>
+            </Container>
+          ))}
+        </Container>
+      ) : (
+        <EmptyState
+          icon={Users}
+          title={searchQuery ? "No matching teams" : "No teams yet"}
+          description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
+          action={{
+            label: 'Create Team',
+            onClick: onCreateTeam,
+            variant: 'primary'
+          }}
+        />
+      )}
+    </Section>
   );
 }

apps/website/ui/JsonLd.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface JsonLdProps {
+  data: Record<string, any>;
+}
+
+export function JsonLd({ data }: JsonLdProps) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}

apps/website/ui/Layout.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { Box } from '@/ui/Box';
-import { useSidebar } from '@/components/layout/SidebarContext';
 
 export interface LayoutProps {
   children: ReactNode;
@@ -23,9 +22,9 @@ export const Layout = ({
   sidebar,
   fixedSidebar = true,
   fixedHeader = true,
-  fixedFooter = true
-}: LayoutProps) => {
-  const { isCollapsed } = useSidebar();
+  fixedFooter = true,
+  isCollapsed = false
+}: LayoutProps & { isCollapsed?: boolean }) => {
   const sidebarWidth = isCollapsed ? '20' : '64'; // 5rem vs 16rem
   const sidebarWidthClass = isCollapsed ? 'lg:w-20' : 'lg:w-64';
   const contentMarginClass = isCollapsed ? 'lg:ml-20' : 'lg:ml-64';

apps/website/ui/NavLink.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import Link from 'next/link';
 import { Text } from '@/ui/Text';
+import Link from 'next/link';
 import { LucideIcon, ChevronRight } from 'lucide-react';
 
 interface NavLinkProps {
@@ -11,9 +11,10 @@ interface NavLinkProps {
   isActive?: boolean;
   variant?: 'sidebar' | 'top';
   collapsed?: boolean;
+  LinkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; className?: string }>;
 }
 
-export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false }: NavLinkProps) {
+export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false, LinkComponent = Link as any }: NavLinkProps) {
   const isTop = variant === 'top';
 
   // Radical "Game Menu" Style
@@ -72,11 +73,11 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
   );
 
   return (
-    <Link 
+    <LinkComponent 
       href={href} 
       className={`w-full group block ${!isTop ? '' : ''}`}
     >
       {content}
-    </Link>
+    </LinkComponent>
   );
 }

apps/website/ui/VerticalBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface VerticalBarProps {
+  intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
+  height?: string | number;
+}
+
+/**
+ * VerticalBar - A semantic decorative bar.
+ */
+export function VerticalBar({ intent = 'primary', height = '2rem' }: VerticalBarProps) {
+  const intentClasses = {
+    primary: 'bg-[var(--ui-color-intent-primary)]',
+    secondary: 'bg-[var(--ui-color-intent-secondary)]',
+    success: 'bg-[var(--ui-color-intent-success)]',
+    warning: 'bg-[var(--ui-color-intent-warning)]',
+    critical: 'bg-[var(--ui-color-intent-critical)]',
+  };
+
+  return (
+    <div 
+      className={`w-1 ${intentClasses[intent]}`} 
+      style={{ height: typeof height === 'number' ? `${height * 0.25}rem` : height }} 
+    />
+  );
+}