website refactor

apps/website/templates/layout/GlobalFooterTemplate.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { AppFooter } from '@/ui/AppFooter';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export interface GlobalFooterViewData {}
+
+export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
+  return (
+    <AppFooter>
+      <Box maxWidth="7xl" mx="auto" display="grid" responsiveGridCols={{ base: 1, md: 4 }} gap={12}>
+        <Box colSpan={{ base: 1, md: 2 }}>
+          <Box mb={6} opacity={0.8}>
+            <Image
+              src="/images/logos/wordmark-rectangle-dark.svg"
+              alt="GridPilot"
+              width={140}
+              height={26}
+            />
+          </Box>
+          <Box maxWidth="sm" mb={6}>
+            <Text color="text-gray-500">
+              The professional infrastructure for serious sim racing. 
+              Precision telemetry, automated results, and elite league management.
+            </Text>
+          </Box>
+          <Box display="flex" alignItems="center" gap={4}>
+            <Text size="xs" color="text-gray-600" font="mono" letterSpacing="widest">
+              © 2026 GRIDPILOT
+            </Text>
+          </Box>
+        </Box>
+        
+        <Box>
+          <Box mb={4}>
+            <Text weight="bold" color="text-gray-300" letterSpacing="wider">PLATFORM</Text>
+          </Box>
+          <Stack as="ul" direction="col" gap={2}>
+            <Box as="li">
+              <Box as={Link} href="/leagues" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Leagues
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/teams" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Teams
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/leaderboards" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Leaderboards
+              </Box>
+            </Box>
+          </Stack>
+        </Box>
+        
+        <Box>
+          <Box mb={4}>
+            <Text weight="bold" color="text-gray-300" letterSpacing="wider">SUPPORT</Text>
+          </Box>
+          <Stack as="ul" direction="col" gap={2}>
+            <Box as="li">
+              <Box as={Link} href="/docs" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Documentation
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/status" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                System Status
+              </Box>
+            </Box>
+            <Box as="li">
+              <Box as={Link} href="/contact" color="text-gray-500" hoverTextColor="primary-accent" transition>
+                Contact
+              </Box>
+            </Box>
+          </Stack>
+        </Box>
+      </Box>
+    </AppFooter>
+  );
+}