website refactor

apps/website/components/home/RecentRacesPanel.tsx

@@ -5,9 +5,13 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
+import { CardStack } from '@/ui/CardStack';
+
+import { Center } from '@/ui/Center';
+
 interface Race {
   id: string;
   track: string;
@@ -23,33 +27,33 @@ interface RecentRacesPanelProps {
  * RecentRacesPanel - Semantic section for upcoming/recent races.
  */
 export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
-  return (
-    <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>
-        <Link 
-          href={routes.public.races}
-          size="xs"
-          weight="bold"
-          letterSpacing="widest"
-          variant="primary"
-          hoverColor="text-white"
-          transition
-        >
-          FULL SCHEDULE →
-        </Link>
-      </Stack>
+  const actions = (
+    <Link 
+      href={routes.public.races}
+      size="xs"
+      weight="bold"
+      letterSpacing="widest"
+      variant="primary"
+    >
+      FULL SCHEDULE →
+    </Link>
+  );
 
-      <Stack gap={3}>
+  return (
+    <Panel 
+      variant="dark" 
+      padding={6} 
+      title="UPCOMING RACES"
+      actions={actions}
+    >
+      <CardStack gap={3}>
         {races.length === 0 ? (
           <Panel variant="muted" padding={12} border>
-            <Stack center>
-              <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
+            <Center>
+              <Text size="xs" font="mono" uppercase letterSpacing="widest" variant="low">
                 No races scheduled
               </Text>
-            </Stack>
+            </Center>
           </Panel>
         ) : (
           races.slice(0, 3).map((race) => (
@@ -63,7 +67,7 @@ export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
             />
           ))
         )}
-      </Stack>
+      </CardStack>
     </Panel>
   );
 }