website refactor

apps/website/components/landing/DiscoverySection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { LeagueCard } from '@/components/leagues/LeagueCard';
 import { TeamCard } from '@/components/teams/TeamCard';
@@ -20,22 +19,22 @@ interface DiscoverySectionProps {
 
 export function DiscoverySection({ viewData }: DiscoverySectionProps) {
   return (
-    <Box py={{ base: 20, md: 32 }} bg="graphite-black" borderBottom borderColor="border-gray/50">
+    <Stack py={{ base: 20, md: 32 }} bg="graphite-black" borderBottom borderColor="border-gray/50">
       <Container size="lg">
         <Stack gap={16}>
-          <Box maxWidth="2xl">
-            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4}>
+          <Stack maxWidth="2xl">
+            <Stack borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4}>
               <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
                 Live Ecosystem
               </Text>
-            </Box>
+            </Stack>
             <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '4xl' }} className="tracking-tight">
               Discover the Grid
             </Heading>
             <Text size="lg" color="text-gray-400" block mt={6} leading="relaxed">
               Explore leagues, teams, and races that make up the GridPilot ecosystem.
             </Text>
-          </Box>
+          </Stack>
 
           <Grid cols={1} lgCols={3} gap={12}>
             {/* Top leagues */}
@@ -95,11 +94,11 @@ export function DiscoverySection({ viewData }: DiscoverySectionProps) {
                 </Link>
               </Stack>
               {viewData.upcomingRaces.length === 0 ? (
-                <Box p={12} border borderStyle="dashed" borderColor="border-gray/30" rounded="none" center bg="panel-gray/10">
+                <Stack p={12} border borderStyle="dashed" borderColor="border-gray/30" rounded="none" center bg="panel-gray/10">
                   <Text size="sm" color="text-gray-600" font="mono" uppercase letterSpacing="widest">
                     No races scheduled.
                   </Text>
-                </Box>
+                </Stack>
               ) : (
                 <Stack gap={3}>
                   {viewData.upcomingRaces.map(race => (
@@ -118,6 +117,6 @@ export function DiscoverySection({ viewData }: DiscoverySectionProps) {
           </Grid>
         </Stack>
       </Container>
-    </Box>
+    </Stack>
   );
 }