website refactor

apps/website/components/landing/LandingHero.tsx

@@ -29,11 +29,11 @@ export function LandingHero() {
       <Box
         position="absolute"
         inset="0"
-        bg="url(/images/header.jpeg)"
+        backgroundImage="url(/images/header.jpeg)"
         backgroundSize="cover"
         backgroundPosition="center"
         opacity={0.2}
-        style={{ transform: `translateY(${bgParallax * 0.5}px)` }}
+        transform={`translateY(${bgParallax * 0.5}px)`}
       />
       
       {/* Robust gradient overlay */}
@@ -47,29 +47,30 @@ export function LandingHero() {
         position="absolute" 
         inset="0" 
         bg="radial-gradient(circle at center, transparent 0%, #0C0D0F 100%)"
-        opacity={0.6}
+        opacity={0.8}
       />
       
-      <Glow color="primary" size="xl" position="center" opacity={0.1} />
+      <Glow color="primary" size="xl" position="center" opacity={0.15} />
       
       <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}>
-              <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
+            <Box 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>
             <Heading
               level={1}
-              fontSize={{ base: '3xl', sm: '4xl', md: '5xl', lg: '7xl' }}
+              fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
               weight="bold"
-              className="text-white leading-[1.1] tracking-tight"
+              color="text-white"
+              lineHeight="0.95"
+              letterSpacing="tighter"
             >
-              Modern Motorsport <br />
-              <span className="text-primary-accent">Infrastructure.</span>
+              MODERN MOTORSPORT INFRASTRUCTURE.
             </Heading>
-            <Text size={{ base: 'lg', md: 'xl' }} color="text-gray-400" weight="normal" leading="relaxed" className="max-w-2xl">
+            <Text size={{ base: 'lg', md: 'xl' }} color="text-gray-400" weight="normal" leading="relaxed" maxWidth="2xl" borderLeft borderStyle="solid" borderColor="border-gray" pl={6} opacity={0.3}>
               GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control.
             </Text>
           </Stack>
@@ -80,14 +81,23 @@ export function LandingHero() {
               href={discordUrl}
               variant="primary"
               size="lg"
-              className="px-10 rounded-none uppercase tracking-widest text-xs font-bold"
+              px={12}
+              letterSpacing="0.2em"
+              fontSize="xs"
+              h="14"
             >
               Join the Grid
             </Button>
             <Button
               variant="secondary"
               size="lg"
-              className="px-10 rounded-none border-border-gray hover:border-primary-accent/50 uppercase tracking-widest text-xs font-bold"
+              px={12}
+              borderColor="border-gray"
+              hoverBorderColor="primary-accent/50"
+              letterSpacing="0.2em"
+              fontSize="xs"
+              h="14"
+              bg="transparent"
             >
               Explore Leagues
             </Button>
@@ -99,7 +109,11 @@ export function LandingHero() {
             gridCols={{ base: 1, sm: 2, lg: 4 }} 
             gap={8} 
             mt={12}
-            className="border-t border-border-gray/30 pt-12"
+            borderTop
+            borderStyle="solid"
+            borderColor="border-gray"
+            opacity={0.2}
+            pt={12}
           >
             {[
               { label: 'IDENTITY', text: 'Your racing career in one place', color: 'primary' },
@@ -107,14 +121,14 @@ export function LandingHero() {
               { label: 'PRECISION', text: 'Real-time results and standings', color: 'amber' },
               { label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'green' }
             ].map((item) => (
-              <Stack key={item.label} gap={3} className="group">
-                <Box display="flex" alignItems="center" gap={2}>
-                  <Box w="2" h="2" rounded="full" className={`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" className="uppercase tracking-[0.2em] group-hover:text-white transition-colors">
+              <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'} />
+                  <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="0.2em" groupHoverTextColor="white" transition>
                     {item.label}
                   </Text>
                 </Box>
-                <Text size="sm" color="text-gray-400" className="group-hover:text-gray-200 transition-colors">
+                <Text size="sm" color="text-gray-500" groupHoverTextColor="gray-300" transition leading="relaxed">
                   {item.text}
                 </Text>
               </Stack>