mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/website/components/home/HomeFooterCTA.tsx
View File

@@ -6,13 +6,13 @@ import { Glow } from '@/ui/Glow';
import { Icon } from '@/ui/Icon';
import { DiscordIcon } from '@/ui/icons/DiscordIcon';
import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Section } from '@/ui/Section';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Container } from '@/ui/Container';
export function HomeFooterCTA() {
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
@@ -22,41 +22,41 @@ export function HomeFooterCTA() {
<Glow color="primary" size="xl" position="center" opacity={0.05} />
<Container>
<Box position="relative" overflow="hidden" bg="panel-gray/40" border borderColor="border-gray" p={{ base: 8, md: 12 }}>
<Card position="relative" overflow="hidden" variant="outline" p={{ base: 8, md: 12 }} className="bg-panel-gray/40">
{/* Discord brand accent */}
<Box position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent" />
<Stack position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent">{null}</Stack>
<Stack align="center" gap={12} center>
{/* Header */}
<Stack align="center" gap={6}>
<Box position="relative" display="flex" alignItems="center" justifyContent="center" w={{ base: 16, md: 20 }} h={{ base: 16, md: 20 }} bg="primary-accent/10" border borderColor="primary-accent/30">
<Stack position="relative" align="center" justify="center" w={{ base: '16', md: '20' }} h={{ base: '16', md: '20' }} bg="primary-accent/10" border borderColor="primary-accent/30">
<DiscordIcon color="text-primary-accent" size={40} />
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
<Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
</Box>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent">{null}</Stack>
<Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent">{null}</Stack>
</Stack>
<Stack gap={4} align="center">
<Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
Join the Grid on Discord
</Heading>
<Box w="16" h="1" bg="primary-accent" />
<Stack w="16" h="1" bg="primary-accent">{null}</Stack>
</Stack>
</Stack>
{/* Personal message */}
<Box maxWidth="2xl" mx="auto" textAlign="center">
<Stack maxWidth="2xl" mx="auto" align="center">
<Stack gap={6}>
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed" textAlign="center">
GridPilot is a <Text as="span" color="text-white" weight="bold">solo developer project</Text> built for the community.
</Text>
<Text size="base" color="text-gray-400" weight="normal" leading="relaxed">
<Text size="base" color="text-gray-400" weight="normal" leading="relaxed" textAlign="center">
We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
</Text>
</Stack>
</Box>
</Stack>
{/* Benefits grid */}
<Box maxWidth="4xl" mx="auto" fullWidth>
<Stack maxWidth="4xl" mx="auto" fullWidth>
<Grid cols={1} mdCols={2} gap={6}>
<BenefitItem
icon={MessageSquare}
@@ -79,7 +79,7 @@ export function HomeFooterCTA() {
description="Test new features before they go public."
/>
</Grid>
</Box>
</Stack>
{/* CTA Button */}
<Stack gap={6} pt={4} align="center">
@@ -98,14 +98,14 @@ export function HomeFooterCTA() {
Join Discord
</Button>
<Box border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
<Stack border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
<Text size="xs" color="text-primary-accent" weight="bold" font="mono" uppercase letterSpacing="widest">
Early Alpha Access Available
</Text>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Card>
</Container>
</Section>
);
@@ -113,14 +113,14 @@ export function HomeFooterCTA() {
function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
return (
<Box display="flex" alignItems="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" hoverBorderColor="primary-accent/30" transition group>
<Box display="flex" alignItems="center" justifyContent="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" groupHoverBorderColor="primary-accent/30" transition>
<Stack direction="row" align="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" className="transition-all hover:border-primary-accent/30 group">
<Stack align="center" justify="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" className="transition-all group-hover:border-primary-accent/30">
<Icon icon={icon} size={5} color="text-primary-accent" />
</Box>
</Stack>
<Stack gap={2}>
<Text size="base" weight="bold" color="text-white" letterSpacing="wide">{title}</Text>
<Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
</Stack>
</Box>
</Stack>
);
}