website refactor

apps/website/ui/RacePageHeader.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Flag, CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Hero } from '@/ui/Hero';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/Grid';
+import { StatBox } from '@/ui/StatBox';
+
+interface RacePageHeaderProps {
+  totalCount: number;
+  scheduledCount: number;
+  runningCount: number;
+  completedCount: number;
+}
+
+export function RacePageHeader({
+  totalCount,
+  scheduledCount,
+  runningCount,
+  completedCount,
+}: RacePageHeaderProps) {
+  return (
+    <Hero variant="primary">
+      <Stack gap={2}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box p={2} bg="bg-primary-blue/10" rounded="lg">
+            <Icon icon={Flag} size={6} color="rgb(59, 130, 246)" />
+          </Box>
+          <Heading level={1}>Race Calendar</Heading>
+        </Stack>
+        <Text color="text-gray-400" maxWidth="42rem">
+          Track upcoming races, view live events, and explore results across all your leagues.
+        </Text>
+      </Stack>
+
+      {/* Quick Stats */}
+      <Grid cols={2} mdCols={4} gap={4} mt={6}>
+        <StatBox icon={CalendarDays} label="Total" value={totalCount} />
+        <StatBox icon={Clock} label="Scheduled" value={scheduledCount} color="rgb(59, 130, 246)" />
+        <StatBox icon={Zap} label="Live Now" value={runningCount} color="rgb(16, 185, 129)" />
+        <StatBox icon={Trophy} label="Completed" value={completedCount} />
+      </Grid>
+    </Hero>
+  );
+}