website refactor

apps/website/components/home/LeagueSummaryPanel.tsx

@@ -2,9 +2,12 @@
 
 import { LeagueCard } from '@/components/leagues/LeagueCard';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
+import { Panel } from '@/ui/Panel';
+import { Box } from '@/ui/Box';
+
+import { CardStack } from '@/ui/CardStack';
 
 interface League {
   id: string;
@@ -20,26 +23,26 @@ interface LeagueSummaryPanelProps {
  * LeagueSummaryPanel - Semantic section for featured leagues.
  */
 export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
-  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">
-          FEATURED LEAGUES
-        </Heading>
-        <Link 
-          href={routes.public.leagues}
-          size="xs"
-          weight="bold"
-          letterSpacing="widest"
-          variant="primary"
-          hoverColor="text-white"
-          transition
-        >
-          VIEW ALL →
-        </Link>
-      </Box>
+  const actions = (
+    <Link 
+      href={routes.public.leagues}
+      size="xs"
+      weight="bold"
+      letterSpacing="widest"
+      variant="primary"
+    >
+      VIEW ALL →
+    </Link>
+  );
 
-      <Box display="flex" flexDirection="col" gap={4}>
+  return (
+    <Panel 
+      variant="dark" 
+      padding={6} 
+      title="FEATURED LEAGUES"
+      actions={actions}
+    >
+      <CardStack gap={4}>
         {leagues.slice(0, 2).map((league) => (
           <LeagueCard
             key={league.id}
@@ -54,7 +57,7 @@ export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
             openSlotsCount={6}
           />
         ))}
-      </Box>
-    </Box>
+      </CardStack>
+    </Panel>
   );
 }