website refactor

2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
--- a/apps/website/ui/Footer.tsx
+++ b/apps/website/ui/Footer.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import { Image } from '@/ui/Image';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Link } from '@/ui/Link';
+
+const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || 'https://discord.gg/gridpilot';
+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 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))' }}>
+        {/* Racing stripe accent */}
+        <Box
+          display="flex"
+          gap={1}
+          mb={{ base: 2, md: 4, lg: 6 }}
+          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>
+
+        {/* Personal message */}
+        <Box
+          textAlign="center"
+          mb={{ base: 3, md: 6, lg: 8 }}
+        >
+          <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 }}>
+            🏁 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>
+            Just a fellow racer tired of spreadsheets and chaos. GridPilot is my passion project to make league racing actually fun again.
+          </Text>
+        </Box>
+
+        {/* Community links */}
+        <Box
+          display="flex"
+          justifyContent="center"
+          gap={{ base: 4, md: 6, lg: 8 }}
+          mb={{ base: 3, md: 6, lg: 8 }}
+        >
+          <Link
+            href={discordUrl}
+            variant="ghost"
+            size="xs"
+            hoverTextColor="text-neon-aqua"
+            transition
+            px={3}
+            py={2}
+            minHeight="44px"
+            minWidth="44px"
+          >
+            💬 Join 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"
+          >
+            𝕏 Follow on X
+          </Link>
+        </Box>
+
+        {/* Development status */}
+        <Box
+          textAlign="center"
+          pt={{ base: 2, md: 4, lg: 6 }}
+          borderTop
+          borderColor="border-charcoal-outline"
+        >
+          <Text size={{ base: 'xs', lg: 'sm' }} color="text-gray-500" block mb={{ base: 1, md: 2 }}>
+            ⚡ Early development • Feedback welcome
+          </Text>
+          <Text size={{ base: 'xs', md: 'xs' }} color="text-gray-600" block>
+            Questions? Find me on Discord
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}