website refactor

apps/website/components/home/RecentRacesPanel.tsx

@@ -3,7 +3,8 @@
 import React from 'react';
 import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
+import { Panel } from '@/ui/Panel';
+import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
@@ -24,8 +25,8 @@ interface RecentRacesPanelProps {
  */
 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}>
+    <Panel variant="dark" padding={6}>
+      <Stack direction="row" align="center" justify="between" mb={6}>
         <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
           UPCOMING RACES
         </Heading>
@@ -40,15 +41,17 @@ export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
         >
           FULL SCHEDULE →
         </Link>
-      </Box>
+      </Stack>
 
-      <Box display="flex" flexDirection="col" gap={3}>
+      <Stack 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>
+          <Panel variant="muted" padding={12} border>
+            <Stack center>
+              <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
+                No races scheduled
+              </Text>
+            </Stack>
+          </Panel>
         ) : (
           races.slice(0, 3).map((race) => (
             <UpcomingRaceItem
@@ -61,7 +64,7 @@ export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
             />
           ))
         )}
-      </Box>
-    </Box>
+      </Stack>
+    </Panel>
   );
 }