website refactor
This commit is contained in:
@@ -1,182 +0,0 @@
|
||||
|
||||
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Glow } from '@/ui/Glow';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { DiscordIcon } from '@/ui/icons/DiscordIcon';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
|
||||
|
||||
export function DiscordCTA() {
|
||||
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
|
||||
|
||||
return (
|
||||
<Box
|
||||
as="section"
|
||||
bg="graphite-black"
|
||||
position="relative"
|
||||
py={{ base: 20, md: 32 }}
|
||||
borderBottom
|
||||
borderColor="border-gray/50"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Glow color="primary" size="xl" position="center" opacity={0.05} />
|
||||
|
||||
<Container size="lg" position="relative" zIndex={10}>
|
||||
<Surface
|
||||
variant="default"
|
||||
padding={12}
|
||||
border
|
||||
rounded="none"
|
||||
position="relative"
|
||||
className="overflow-hidden bg-panel-gray/40"
|
||||
>
|
||||
{/* Discord brand accent */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
height="1"
|
||||
bg="primary-accent"
|
||||
/>
|
||||
|
||||
<Stack align="center" gap={12} center>
|
||||
{/* Header */}
|
||||
<Stack align="center" gap={6}>
|
||||
<Box
|
||||
display="flex"
|
||||
center
|
||||
rounded="none"
|
||||
w={{ base: "16", md: "20" }}
|
||||
h={{ base: "16", md: "20" }}
|
||||
bg="primary-accent/10"
|
||||
border
|
||||
borderColor="primary-accent/30"
|
||||
className="relative"
|
||||
>
|
||||
<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 gap={4} align="center">
|
||||
<Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} className="tracking-tight">
|
||||
Join the Grid on Discord
|
||||
</Heading>
|
||||
<Box
|
||||
w="16"
|
||||
h="1"
|
||||
bg="primary-accent"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Personal message */}
|
||||
<Box maxWidth="2xl" mx="auto" textAlign="center">
|
||||
<Stack gap={6}>
|
||||
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
|
||||
GridPilot is a <span className="text-white font-bold">solo developer project</span> built for the community.
|
||||
</Text>
|
||||
<Text size="base" color="text-gray-400" weight="normal" leading="relaxed">
|
||||
We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Benefits grid */}
|
||||
<Box
|
||||
maxWidth="4xl"
|
||||
mx="auto"
|
||||
fullWidth
|
||||
>
|
||||
<Grid cols={1} mdCols={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>
|
||||
</Box>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Stack gap={6} pt={4} align="center">
|
||||
<Button
|
||||
as="a"
|
||||
href={discordUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="px-16 py-4"
|
||||
icon={<DiscordIcon size={24} />}
|
||||
>
|
||||
Join Discord
|
||||
</Button>
|
||||
|
||||
<Box 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>
|
||||
</Surface>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
|
||||
return (
|
||||
<Surface
|
||||
variant="muted"
|
||||
border
|
||||
padding={6}
|
||||
rounded="none"
|
||||
display="flex"
|
||||
gap={5}
|
||||
className="items-start hover:border-primary-accent/30 transition-all bg-panel-gray/20 group"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
center
|
||||
rounded="none"
|
||||
flexShrink={0}
|
||||
w="10"
|
||||
h="10"
|
||||
bg="primary-accent/5"
|
||||
border
|
||||
borderColor="border-gray/50"
|
||||
className="group-hover:border-primary-accent/30 transition-colors"
|
||||
>
|
||||
<Icon icon={icon} size={5} color="text-primary-accent" />
|
||||
</Box>
|
||||
<Stack gap={2}>
|
||||
<Text size="base" weight="bold" color="text-white" className="tracking-wide">{title}</Text>
|
||||
<Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
|
||||
</Stack>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user