website refactor

apps/website/ui/Footer.tsx

@@ -1,81 +1,54 @@
-import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Container } from './Container';
+import { Text } from './Text';
+import { Link } from './Link';
 
-const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || 'https://discord.gg/gridpilot';
-const xUrl = process.env.NEXT_PUBLIC_X_URL || '#';
-
-export function Footer() {
+export const Footer = () => {
   return (
-    <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="7xl" mx="auto" px={{ base: 6, lg: 8 }} py={{ base: 12, md: 16 }}>
-        {/* Racing stripe accent */}
-        <Box
-          display="flex"
-          gap={2}
-          mb={8}
-          justifyContent="center"
-        >
-          <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 as="footer" bg="var(--ui-color-bg-surface)" borderTop paddingY={12}>
+      <Container size="xl">
+        <Box display="grid" gridCols={{ base: 1, md: 4 }} gap={12}>
+          <Box>
+            <Text weight="bold" variant="high" marginBottom={4}>GridPilot</Text>
+            <Text size="sm" variant="low">
+              The ultimate companion for sim racers. Track your performance, manage your team, and compete in leagues.
+            </Text>
+          </Box>
+          
+          <Box>
+            <Text weight="bold" variant="high" marginBottom={4}>Platform</Text>
+            <Box display="flex" flexDirection="col" gap={2}>
+              <Link href="/leagues" variant="secondary">Leagues</Link>
+              <Link href="/teams" variant="secondary">Teams</Link>
+              <Link href="/leaderboards" variant="secondary">Leaderboards</Link>
+            </Box>
+          </Box>
+          
+          <Box>
+            <Text weight="bold" variant="high" marginBottom={4}>Support</Text>
+            <Box display="flex" flexDirection="col" gap={2}>
+              <Link href="/docs" variant="secondary">Documentation</Link>
+              <Link href="/status" variant="secondary">System Status</Link>
+              <Link href="/contact" variant="secondary">Contact Us</Link>
+            </Box>
+          </Box>
+          
+          <Box>
+            <Text weight="bold" variant="high" marginBottom={4}>Legal</Text>
+            <Box display="flex" flexDirection="col" gap={2}>
+              <Link href="/privacy" variant="secondary">Privacy Policy</Link>
+              <Link href="/terms" variant="secondary">Terms of Service</Link>
+            </Box>
+          </Box>
         </Box>
-
-        {/* Personal message */}
-        <Box
-          textAlign="center"
-          mb={12}
-        >
-          <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="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.
+        
+        <Box borderTop marginTop={12} paddingTop={8} textAlign="center">
+          <Text size="xs" variant="low">
+            © {new Date().getFullYear()} GridPilot. All rights reserved.
           </Text>
         </Box>
-
-        {/* Community links */}
-        <Box
-          display="flex"
-          justifyContent="center"
-          gap={8}
-          mb={12}
-        >
-          <Link
-            href={discordUrl}
-            variant="ghost"
-            size="sm"
-            className="text-gray-400 hover:text-primary-accent transition-colors font-bold uppercase tracking-widest"
-          >
-            💬 Discord
-          </Link>
-          <Link
-            href={xUrl}
-            variant="ghost"
-            size="sm"
-            className="text-gray-400 hover:text-primary-accent transition-colors font-bold uppercase tracking-widest"
-          >
-            𝕏 Twitter
-          </Link>
-        </Box>
-
-        {/* Development status */}
-        <Box
-          textAlign="center"
-          pt={8}
-          borderTop
-          borderColor="border-gray/30"
-        >
-          <Text size="xs" color="text-gray-600" block mb={1} font="mono" uppercase letterSpacing="widest">
-            ⚡ Early development • Feedback welcome
-          </Text>
-          <Text size="xs" color="text-gray-700" block font="mono">
-            &copy; {new Date().getFullYear()} GridPilot
-          </Text>
-        </Box>
-      </Box>
+      </Container>
     </Box>
   );
-}
+};