website refactor

apps/website/components/landing/FeatureGrid.tsx

@@ -4,9 +4,8 @@ import { Section } from '@/ui/Section';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { MockupStack } from '@/components/mockups/MockupStack';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { LeagueHomeMockup } from '@/components/mockups/LeagueHomeMockup';
 import { StandingsTableMockup } from '@/components/mockups/StandingsTableMockup';
 import { TeamCompetitionMockup } from '@/components/mockups/TeamCompetitionMockup';
@@ -49,30 +48,30 @@ const features = [
 
 function FeatureCard({ feature, index }: { feature: typeof features[0], index: number }) {
   return (
-    <Box
+    <Stack
       display="flex"
       flexDirection="column"
       gap={6}
       className="p-8 bg-panel-gray/20 border border-border-gray/20 rounded-none hover:border-primary-accent/20 transition-all duration-300 ease-smooth group relative overflow-hidden"
     >
-      <Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/20">
+      <Stack aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/20">
         <MockupStack index={index}>
           <feature.MockupComponent />
         </MockupStack>
-      </Box>
+      </Stack>
       <Stack gap={4}>
-        <Box display="flex" alignItems="center" gap={3}>
-          <Box w="1" h="3" bg="primary-accent" />
+        <Stack display="flex" alignItems="center" gap={3}>
+          <Stack w="1" h="3" bg="primary-accent" />
           <Heading level={3} weight="bold" fontSize="lg" className="tracking-tighter uppercase">
             {feature.title}
           </Heading>
-        </Box>
+        </Stack>
         <Text size="sm" color="text-gray-500" leading="relaxed" weight="normal" className="group-hover:text-gray-400 transition-colors">
           {feature.description}
         </Text>
       </Stack>
       {/* Subtle hover effect */}
-      <Box 
+      <Stack 
         position="absolute" 
         bottom="0" 
         left="0" 
@@ -81,7 +80,7 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
         bg="primary-accent" 
         className="scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" 
       />
-    </Box>
+    </Stack>
   );
 }
 
@@ -90,25 +89,25 @@ export function FeatureGrid() {
     <Section className="bg-graphite-black border-b border-border-gray/20 py-32">
       <Container position="relative" zIndex={10}>
         <Stack gap={16}>
-          <Box maxWidth="2xl">
-            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4} bg="primary-accent/5" py={1}>
+          <Stack maxWidth="2xl">
+            <Stack borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4} bg="primary-accent/5" py={1}>
               <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.3em]">
                 Engineered for Competition
               </Text>
-            </Box>
+            </Stack>
             <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} className="tracking-tighter uppercase leading-none">
               Building for League Racing
             </Heading>
             <Text size="lg" color="text-gray-500" block mt={6} leading="relaxed" className="border-l border-border-gray/20 pl-6">
               Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
             </Text>
-          </Box>
+          </Stack>
           
-          <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
+          <Stack display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
             {features.map((feature, index) => (
               <FeatureCard key={feature.title} feature={feature} index={index} />
             ))}
-          </Box>
+          </Stack>
         </Stack>
       </Container>
     </Section>