website refactor

apps/website/components/home/TeamSummaryPanel.tsx

@@ -2,9 +2,12 @@
 
 import { TeamCard } from '@/components/teams/TeamCard';
 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 Team {
   id: string;
@@ -21,26 +24,26 @@ interface TeamSummaryPanelProps {
  * TeamSummaryPanel - Semantic section for teams.
  */
 export function TeamSummaryPanel({ teams }: TeamSummaryPanelProps) {
-  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">
-          TEAMS ON THE GRID
-        </Heading>
-        <Link 
-          href={routes.public.teams}
-          size="xs"
-          weight="bold"
-          letterSpacing="widest"
-          variant="primary"
-          hoverColor="text-white"
-          transition
-        >
-          BROWSE TEAMS →
-        </Link>
-      </Box>
+  const actions = (
+    <Link 
+      href={routes.public.teams}
+      size="xs"
+      weight="bold"
+      letterSpacing="widest"
+      variant="primary"
+    >
+      BROWSE TEAMS →
+    </Link>
+  );
 
-      <Box display="flex" flexDirection="col" gap={4}>
+  return (
+    <Panel 
+      variant="dark" 
+      padding={6} 
+      title="TEAMS ON THE GRID"
+      actions={actions}
+    >
+      <CardStack gap={4}>
         {teams.slice(0, 2).map((team) => (
           <TeamCard
             key={team.id}
@@ -51,7 +54,7 @@ export function TeamSummaryPanel({ teams }: TeamSummaryPanelProps) {
             isRecruiting={true}
           />
         ))}
-      </Box>
-    </Box>
+      </CardStack>
+    </Panel>
   );
 }