website refactor

apps/website/components/home/LeagueSummaryPanel.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { LeagueCard } from '@/ui/LeagueCard';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+
+interface League {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface LeagueSummaryPanelProps {
+  leagues: League[];
+}
+
+/**
+ * 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>
+
+      <Box display="flex" flexDirection="col" gap={4}>
+        {leagues.slice(0, 2).map((league) => (
+          <LeagueCard
+            key={league.id}
+            name={league.name}
+            description={league.description}
+            coverUrl="/images/ff1600.jpeg"
+            slotLabel="Drivers"
+            usedSlots={18}
+            maxSlots={24}
+            fillPercentage={75}
+            hasOpenSlots={true}
+            openSlotsCount={6}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}