website refactor

apps/website/components/home/RecentRacesPanel.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { UpcomingRaceItem } from '@/ui/UpcomingRaceItem';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
+
+interface Race {
+  id: string;
+  track: string;
+  car: string;
+  formattedDate: string;
+}
+
+interface RecentRacesPanelProps {
+  races: Race[];
+}
+
+/**
+ * RecentRacesPanel - Semantic section for upcoming/recent races.
+ */
+export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          UPCOMING RACES
+        </Heading>
+        <Link 
+          href={routes.public.races}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          FULL SCHEDULE →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={3}>
+        {races.length === 0 ? (
+          <Box py={12} border borderStyle="dashed" borderColor="border-gray/30" bg="graphite-black/50" display="flex" alignItems="center" justifyContent="center">
+            <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
+              No races scheduled
+            </Text>
+          </Box>
+        ) : (
+          races.slice(0, 3).map((race) => (
+            <UpcomingRaceItem
+              key={race.id}
+              track={race.track}
+              car={race.car}
+              formattedDate={race.formattedDate}
+              formattedTime="20:00 GMT"
+              isMyLeague={false}
+            />
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}