website refactor

apps/website/ui/Footer.tsx

@@ -8,41 +8,31 @@ const xUrl = process.env.NEXT_PUBLIC_X_URL || '#';
 
 export function Footer() {
   return (
-    <Box as="footer" position="relative" bg="bg-deep-graphite">
-      <Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, var(--primary-blue), transparent)" />
+    <Box as="footer" position="relative" bg="graphite-black" borderTop borderColor="border-gray/50">
+      <Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, #198CFF, transparent)" opacity={0.3} />
       
-      <Box maxWidth="4xl" mx="auto" px={{ base: 'calc(1.5rem+var(--sal))', lg: 8 }} py={{ base: 2, md: 8, lg: 12 }} pb={{ base: 'calc(0.5rem+var(--sab))', md: 'calc(1.5rem+var(--sab))' }}>
+      <Box maxWidth="7xl" mx="auto" px={{ base: 6, lg: 8 }} py={{ base: 12, md: 16 }}>
         {/* Racing stripe accent */}
         <Box
           display="flex"
-          gap={1}
-          mb={{ base: 2, md: 4, lg: 6 }}
+          gap={2}
+          mb={8}
           justifyContent="center"
         >
-          <Box w={{ base: "12", md: "20", lg: "28" }} h={{ base: "0.5", md: "0.5", lg: "1" }} bg="bg-white" rounded="full" />
-          <Box w={{ base: "12", md: "20", lg: "28" }} h={{ base: "0.5", md: "0.5", lg: "1" }} bg="bg-primary-blue" rounded="full" />
-          <Box w={{ base: "12", md: "20", lg: "28" }} h={{ base: "0.5", md: "0.5", lg: "1" }} bg="bg-white" rounded="full" />
+          <Box w="12" h="1" bg="white" opacity={0.1} />
+          <Box w="12" h="1" bg="primary-accent" />
+          <Box w="12" h="1" bg="white" opacity={0.1} />
         </Box>
 
         {/* Personal message */}
         <Box
           textAlign="center"
-          mb={{ base: 3, md: 6, lg: 8 }}
+          mb={12}
         >
-          <Box mb={2} display="flex" justifyContent="center">
-            <Image
-              src="/images/logos/icon-square-dark.svg"
-              alt="GridPilot"
-              width={40}
-              height={40}
-              fullHeight
-              style={{ width: 'auto' }}
-            />
-          </Box>
-          <Text size={{ base: 'xs', lg: 'sm' }} color="text-gray-300" block mb={{ base: 1, md: 2 }}>
+          <Text size="sm" color="text-gray-300" block mb={2} weight="bold" className="tracking-wide">
             🏁 Built by a sim racer, for sim racers
           </Text>
-          <Text size={{ base: 'xs', md: 'xs' }} color="text-gray-400" weight="light" maxWidth="2xl" mx="auto" block>
+          <Text size="xs" color="text-gray-500" weight="normal" maxWidth="2xl" mx="auto" block leading="relaxed">
             Just a fellow racer tired of spreadsheets and chaos. GridPilot is my passion project to make league racing actually fun again.
           </Text>
         </Box>
@@ -51,50 +41,39 @@ export function Footer() {
         <Box
           display="flex"
           justifyContent="center"
-          gap={{ base: 4, md: 6, lg: 8 }}
-          mb={{ base: 3, md: 6, lg: 8 }}
+          gap={8}
+          mb={12}
         >
           <Link
             href={discordUrl}
             variant="ghost"
-            size="xs"
-            hoverTextColor="text-neon-aqua"
-            transition
-            px={3}
-            py={2}
-            minHeight="44px"
-            minWidth="44px"
+            size="sm"
+            className="text-gray-400 hover:text-primary-accent transition-colors font-bold uppercase tracking-widest"
           >
-            💬 Join Discord
+            💬 Discord
           </Link>
           <Link
             href={xUrl}
             variant="ghost"
-            size="xs"
-            color="text-gray-300"
-            hoverTextColor="text-neon-aqua"
-            transition
-            px={3}
-            py={2}
-            minHeight="44px"
-            minWidth="44px"
+            size="sm"
+            className="text-gray-400 hover:text-primary-accent transition-colors font-bold uppercase tracking-widest"
           >
-            𝕏 Follow on X
+            𝕏 Twitter
           </Link>
         </Box>
 
         {/* Development status */}
         <Box
           textAlign="center"
-          pt={{ base: 2, md: 4, lg: 6 }}
+          pt={8}
           borderTop
-          borderColor="border-charcoal-outline"
+          borderColor="border-gray/30"
         >
-          <Text size={{ base: 'xs', lg: 'sm' }} color="text-gray-500" block mb={{ base: 1, md: 2 }}>
+          <Text size="xs" color="text-gray-600" block mb={1} font="mono" uppercase letterSpacing="widest">
             ⚡ Early development • Feedback welcome
           </Text>
-          <Text size={{ base: 'xs', md: 'xs' }} color="text-gray-600" block>
-            Questions? Find me on Discord
+          <Text size="xs" color="text-gray-700" block font="mono">
+            &copy; {new Date().getFullYear()} GridPilot
           </Text>
         </Box>
       </Box>