106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
'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>
|
||
);
|
||
} |