110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button } from '@/ui/Button';
|
|
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 { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
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 || '#';
|
|
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Glow color="primary" size="xl" position="center" opacity={0.05} />
|
|
|
|
<Container>
|
|
<Card variant="outline">
|
|
<Stack align="center" gap={12}>
|
|
{/* Header */}
|
|
<Stack align="center" gap={6}>
|
|
<DiscordIcon size={40} />
|
|
|
|
<Stack gap={4} align="center">
|
|
<Heading level={2} weight="bold" align="center">
|
|
Join the Grid on Discord
|
|
</Heading>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Personal message */}
|
|
<Stack align="center" gap={6}>
|
|
<Text size="lg" variant="high" weight="medium" align="center">
|
|
GridPilot is a <Text as="span" variant="high" weight="bold">solo developer project</Text> built for the community.
|
|
</Text>
|
|
<Text size="base" variant="low" align="center">
|
|
We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
|
|
</Text>
|
|
</Stack>
|
|
|
|
{/* Benefits grid */}
|
|
<Grid cols={{ base: 1, md: 2 }} gap={6}>
|
|
<BenefitItem
|
|
icon={MessageSquare}
|
|
title="Share your pain points"
|
|
description="Tell us what frustrates you about league racing today."
|
|
/>
|
|
<BenefitItem
|
|
icon={Lightbulb}
|
|
title="Shape the product"
|
|
description="Your ideas directly influence our roadmap."
|
|
/>
|
|
<BenefitItem
|
|
icon={Users}
|
|
title="Connect with racers"
|
|
description="Join a community of like-minded competitive drivers."
|
|
/>
|
|
<BenefitItem
|
|
icon={Code}
|
|
title="Early Access"
|
|
description="Test new features before they go public."
|
|
/>
|
|
</Grid>
|
|
|
|
{/* CTA Button */}
|
|
<Stack gap={6} align="center">
|
|
<Button
|
|
as="a"
|
|
href={discordUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
variant="primary"
|
|
size="lg"
|
|
icon={<DiscordIcon size={24} />}
|
|
>
|
|
Join Discord
|
|
</Button>
|
|
|
|
<Text size="xs" variant="primary" weight="bold" font="mono" uppercase>
|
|
Early Alpha Access Available
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
|
|
return (
|
|
<Card variant="dark">
|
|
<Stack align="start" gap={5}>
|
|
<Icon icon={icon} size={5} intent="primary" />
|
|
<Stack gap={2}>
|
|
<Text size="base" weight="bold" variant="high">{title}</Text>
|
|
<Text size="sm" variant="low">{description}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|