82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { Image } from '@/ui/Image';
|
||
import { Box } from '@/ui/Box';
|
||
import { Text } from '@/ui/Text';
|
||
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="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>
|
||
|
||
{/* 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.
|
||
</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">
|
||
© {new Date().getFullYear()} GridPilot
|
||
</Text>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
} |