website refactor

apps/website/templates/DriversTemplate.tsx

@@ -5,6 +5,8 @@ import { DriverCard } from '@/components/drivers/DriverCard';
 import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
 import { DriverGrid } from '@/components/drivers/DriverGrid';
 import { PageHeader } from '@/ui/PageHeader';
+import { Section } from '@/ui/Section';
+import { Stack } from '@/ui/Stack';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
@@ -30,54 +32,55 @@ export function DriversTemplate({
 }: DriversTemplateProps) {
   return (
     <main>
-      <PageHeader
-        title="Drivers"
-        description="Global driver roster and statistics."
-        action={
-          <Button 
-            variant="secondary" 
-            onClick={onViewLeaderboard}
-          >
-            Leaderboard
-          </Button>
-        }
-      />
-
-      <Container size="full" padding="none" py={8}>
-        <DriverStatsHeader
-          totalDrivers={viewData.totalDriversLabel}
-          activeDrivers={viewData.activeCountLabel}
-          totalRaces={viewData.totalRacesLabel}
+      <Section variant="default" padding="md">
+        <PageHeader
+          title="Drivers"
+          description="Global driver roster and statistics."
+          icon={Users}
+          action={
+            <Button 
+              variant="secondary" 
+              onClick={onViewLeaderboard}
+            >
+              Leaderboard
+            </Button>
+          }
         />
-      </Container>
 
-      <Container size="full" padding="none" py={6}>
-        <Input
-          placeholder="Search drivers by name or nationality..."
-          value={searchQuery}
-          onChange={(e) => onSearchChange(e.target.value)}
-          icon={Search}
-          variant="search"
-        />
-      </Container>
+        <Stack gap={12}>
+          <DriverStatsHeader
+            totalDrivers={viewData.totalDriversLabel}
+            activeDrivers={viewData.activeCountLabel}
+            totalRaces={viewData.totalRacesLabel}
+          />
 
-      {filteredDrivers.length > 0 ? (
-        <DriverGrid>
-          {filteredDrivers.map(driver => (
-            <DriverCard
-              key={driver.id}
-              driver={driver}
-              onClick={onDriverClick}
+          <Input
+            placeholder="Search drivers by name or nationality..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            icon={Search}
+            variant="search"
+          />
+
+          {filteredDrivers.length > 0 ? (
+            <DriverGrid>
+              {filteredDrivers.map(driver => (
+                <DriverCard
+                  key={driver.id}
+                  driver={driver}
+                  onClick={onDriverClick}
+                />
+              ))}
+            </DriverGrid>
+          ) : (
+            <EmptyState
+              title="No drivers found"
+              description={`No drivers match "${searchQuery}"`}
+              icon={Search}
             />
-          ))}
-        </DriverGrid>
-      ) : (
-        <EmptyState
-          title="No drivers found"
-          description={`No drivers match "${searchQuery}"`}
-          icon={Search}
-        />
-      )}
+          )}
+        </Stack>
+      </Section>
     </main>
   );
 }