website refactor

apps/website/components/landing/LandingHero.tsx

@@ -1,10 +1,9 @@
 import { useRef } from 'react';
 import { useParallax } from '@/hooks/useScrollProgress';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Glow } from '@/ui/Glow';
 
@@ -15,7 +14,7 @@ export function LandingHero() {
   const bgParallax = useParallax(sectionRef, 0.2);
 
   return (
-    <Box 
+    <Stack 
       as="section" 
       ref={sectionRef} 
       position="relative" 
@@ -26,7 +25,7 @@ export function LandingHero() {
       className="border-b border-border-gray"
     >
       {/* Background image layer with parallax */}
-      <Box
+      <Stack
         position="absolute"
         inset="0"
         backgroundImage="url(/images/header.jpeg)"
@@ -37,13 +36,13 @@ export function LandingHero() {
       />
       
       {/* Robust gradient overlay */}
-      <Box 
+      <Stack 
         position="absolute" 
         inset="0" 
         bg="linear-gradient(to bottom, #0C0D0F 0%, transparent 50%, #0C0D0F 100%)"
       />
       
-      <Box 
+      <Stack 
         position="absolute" 
         inset="0" 
         bg="radial-gradient(circle at center, transparent 0%, #0C0D0F 100%)"
@@ -55,11 +54,11 @@ export function LandingHero() {
       <Container size="lg" position="relative" zIndex={10}>
         <Stack gap={{ base: 8, md: 12 }}>
           <Stack gap={6} maxWidth="3xl">
-            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={2} bg="primary-accent/5" py={1}>
+            <Stack borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={2} bg="primary-accent/5" py={1}>
               <Text size="xs" weight="bold" color="text-primary-accent" uppercase letterSpacing="0.3em">
                 Precision Racing Infrastructure
               </Text>
-            </Box>
+            </Stack>
             <Heading
               level={1}
               fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
@@ -75,7 +74,7 @@ export function LandingHero() {
             </Text>
           </Stack>
 
-          <Box display="flex" flexDirection={{ base: 'column', sm: 'row' }} gap={4}>
+          <Stack display="flex" flexDirection={{ base: 'column', sm: 'row' }} gap={4}>
             <Button
               as="a"
               href={discordUrl}
@@ -101,10 +100,10 @@ export function LandingHero() {
             >
               Explore Leagues
             </Button>
-          </Box>
+          </Stack>
 
           {/* Problem list - more professional */}
-          <Box 
+          <Stack 
             display="grid" 
             gridCols={{ base: 1, sm: 2, lg: 4 }} 
             gap={8} 
@@ -122,20 +121,20 @@ export function LandingHero() {
               { label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'green' }
             ].map((item) => (
               <Stack key={item.label} gap={3} group cursor="default">
-                <Box display="flex" alignItems="center" gap={3}>
-                  <Box w="1" h="3" bg={item.color === 'primary' ? 'primary-accent' : item.color === 'aqua' ? 'telemetry-aqua' : item.color === 'amber' ? 'warning-amber' : 'success-green'} />
+                <Stack display="flex" alignItems="center" gap={3}>
+                  <Stack w="1" h="3" bg={item.color === 'primary' ? 'primary-accent' : item.color === 'aqua' ? 'telemetry-aqua' : item.color === 'amber' ? 'warning-amber' : 'success-green'} />
                   <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="0.2em" groupHoverTextColor="white" transition>
                     {item.label}
                   </Text>
-                </Box>
+                </Stack>
                 <Text size="sm" color="text-gray-500" groupHoverTextColor="gray-300" transition leading="relaxed">
                   {item.text}
                 </Text>
               </Stack>
             ))}
-          </Box>
+          </Stack>
         </Stack>
       </Container>
-    </Box>
+    </Stack>
   );
 }