website refactor

apps/website/components/drivers/DriversDirectoryHeader.tsx

@@ -2,19 +2,15 @@
 
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { Section } from '@/ui/Section';
 import { Container } from '@/ui/Container';
-import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
-import { Trophy, Users } from 'lucide-react';
-
-interface DriverStat {
-  label: string;
-  value: string | number;
-  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
-}
+import { MetricCard } from '@/ui/MetricCard';
+import { Trophy, Users, Zap, Flag } from 'lucide-react';
+import { Grid } from '@/ui/Grid';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 
 interface DriversDirectoryHeaderProps {
   totalDriversLabel: string;
@@ -31,53 +27,68 @@ export function DriversDirectoryHeader({
   totalRacesLabel,
   onViewLeaderboard,
 }: DriversDirectoryHeaderProps) {
-  const stats: DriverStat[] = [
-    { label: 'drivers', value: totalDriversLabel, intent: 'primary' },
-    { label: 'active', value: activeDriversLabel, intent: 'success' },
-    { label: 'total wins', value: totalWinsLabel, intent: 'warning' },
-    { label: 'races', value: totalRacesLabel, intent: 'telemetry' },
-  ];
-
   return (
-    <Section variant="dark" padding="md">
+    <Section variant="dark" padding="lg">
       <Container>
-        <Group direction="row" align="center" justify="between" gap={8} fullWidth>
-          <Group direction="column" gap={6}>
-            <Group direction="row" align="center" gap={3}>
-              <Card variant="dark">
+        <Stack direction="col" gap="lg">
+          <Stack direction="row" align="center" justify="between">
+            <Stack direction="col" gap="xs">
+              <Stack direction="row" align="center" gap="md">
                 <Icon icon={Users} size={6} intent="primary" />
-              </Card>
-              <Heading level={1}>Drivers</Heading>
-            </Group>
-            
-            <Text size="lg" variant="low">
-              Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
-            </Text>
+                <Heading level={1} weight="bold">
+                  Driver Directory
+                </Heading>
+              </Stack>
+              <Text size="lg" variant="low">
+                The official registry of GridPilot competitors. Tracking performance, 
+                reliability, and championship progress across all sanctioned events.
+              </Text>
+            </Stack>
 
-            <Group direction="row" gap={6} wrap>
-              {stats.map((stat, index) => (
-                <Group key={index} direction="row" align="center" gap={2}>
-                  <Text size="sm" variant="low">
-                    <Text as="span" weight="semibold" variant="high">{stat.value}</Text> {stat.label}
-                  </Text>
-                </Group>
-              ))}
-            </Group>
-          </Group>
-
-          <Group direction="column" gap={2} align="center">
             <Button
               variant="primary"
               onClick={onViewLeaderboard}
-              icon={<Icon icon={Trophy} size={5} />}
+              icon={<Icon icon={Trophy} size={4} />}
             >
-              View Leaderboard
+              Global Rankings
             </Button>
-            <Text size="xs" variant="low" align="center">
-              See full driver rankings
-            </Text>
-          </Group>
-        </Group>
+          </Stack>
+
+          <Grid cols={4} gap="md">
+            <Box>
+              <MetricCard
+                label="Total Registered"
+                value={totalDriversLabel}
+                icon={Users}
+                intent="primary"
+              />
+            </Box>
+            <Box>
+              <MetricCard
+                label="Active Competitors"
+                value={activeDriversLabel}
+                icon={Zap}
+                intent="success"
+              />
+            </Box>
+            <Box>
+              <MetricCard
+                label="Career Victories"
+                value={totalWinsLabel}
+                icon={Trophy}
+                intent="warning"
+              />
+            </Box>
+            <Box>
+              <MetricCard
+                label="Total Race Starts"
+                value={totalRacesLabel}
+                icon={Flag}
+                intent="telemetry"
+              />
+            </Box>
+          </Grid>
+        </Stack>
       </Container>
     </Section>
   );