website refactor
This commit is contained in:
@@ -2,6 +2,9 @@
|
||||
|
||||
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';
|
||||
@@ -14,21 +17,25 @@ export function DiscordCTA() {
|
||||
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
|
||||
|
||||
return (
|
||||
<Surface
|
||||
<Box
|
||||
as="section"
|
||||
variant="discord"
|
||||
padding={4}
|
||||
bg="graphite-black"
|
||||
position="relative"
|
||||
py={{ base: 4, md: 12, lg: 16 }}
|
||||
py={{ base: 20, md: 32 }}
|
||||
borderBottom
|
||||
borderColor="border-gray/50"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box maxWidth="896px" mx="auto" px={2}>
|
||||
<Glow color="primary" size="xl" position="center" opacity={0.05} />
|
||||
|
||||
<Container size="lg" position="relative" zIndex={10}>
|
||||
<Surface
|
||||
variant="discord-inner"
|
||||
padding={3}
|
||||
variant="default"
|
||||
padding={12}
|
||||
border
|
||||
rounded="xl"
|
||||
rounded="none"
|
||||
position="relative"
|
||||
shadow="discord"
|
||||
className="overflow-hidden bg-panel-gray/40"
|
||||
>
|
||||
{/* Discord brand accent */}
|
||||
<Box
|
||||
@@ -37,120 +44,107 @@ export function DiscordCTA() {
|
||||
left={0}
|
||||
right={0}
|
||||
height="1"
|
||||
backgroundColor="[#5865F2]"
|
||||
opacity={0.6}
|
||||
className="bg-gradient-to-r from-transparent via-[#5865F2]/60 to-transparent"
|
||||
bg="primary-accent"
|
||||
/>
|
||||
|
||||
<Stack align="center" gap={6} center>
|
||||
<Stack align="center" gap={12} center>
|
||||
{/* Header */}
|
||||
<Stack align="center" gap={4}>
|
||||
<Stack align="center" gap={6}>
|
||||
<Box
|
||||
display="flex"
|
||||
center
|
||||
rounded="full"
|
||||
w={{ base: "10", md: "14", lg: "18" }}
|
||||
h={{ base: "10", md: "14", lg: "18" }}
|
||||
backgroundColor="[#5865F2]"
|
||||
opacity={0.2}
|
||||
rounded="none"
|
||||
w={{ base: "16", md: "20" }}
|
||||
h={{ base: "16", md: "20" }}
|
||||
bg="primary-accent/10"
|
||||
border
|
||||
borderColor="[#5865F2]"
|
||||
borderColor="primary-accent/30"
|
||||
className="relative"
|
||||
>
|
||||
<DiscordIcon color="text-[#5865F2]" size={32} />
|
||||
<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={2}>
|
||||
<Text as="h2" size="2xl" weight="semibold" color="text-white">
|
||||
Join us on Discord
|
||||
</Text>
|
||||
<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
|
||||
mx="auto"
|
||||
rounded="full"
|
||||
w={{ base: "16", md: "24", lg: "32" }}
|
||||
h={{ base: "0.5", md: "1" }}
|
||||
backgroundColor="[#5865F2]"
|
||||
className="bg-gradient-to-r from-[#5865F2] to-[#7289DA]"
|
||||
w="16"
|
||||
h="1"
|
||||
bg="primary-accent"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Personal message */}
|
||||
<Box maxWidth="672px" mx="auto">
|
||||
<Stack gap={3}>
|
||||
<Text size="sm" color="text-gray-300" weight="normal" leading="relaxed">
|
||||
GridPilot is a <Text weight="bold" color="text-white">solo developer project</Text>, and I'm building it because I got tired of the chaos in league racing.
|
||||
<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="sm" color="text-gray-400" weight="normal" leading="relaxed">
|
||||
This is <Text weight="bold" color="text-gray-300">early days</Text>, and I need your help. Join the Discord to:
|
||||
<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="2xl"
|
||||
maxWidth="4xl"
|
||||
mx="auto"
|
||||
mt={4}
|
||||
fullWidth
|
||||
>
|
||||
<Grid cols={2} gap={3} className="md:grid-cols-2">
|
||||
<Grid cols={1} mdCols={2} gap={6}>
|
||||
<BenefitItem
|
||||
icon={MessageSquare}
|
||||
title="Share your pain points"
|
||||
description="Tell me what frustrates you about league racing today"
|
||||
description="Tell us what frustrates you about league racing today."
|
||||
/>
|
||||
<BenefitItem
|
||||
icon={Lightbulb}
|
||||
title="Shape the product"
|
||||
description="Your ideas will directly influence what gets built"
|
||||
description="Your ideas directly influence our roadmap."
|
||||
/>
|
||||
<BenefitItem
|
||||
icon={Users}
|
||||
title="Be part of the community"
|
||||
description="Connect with other league racers who get it"
|
||||
title="Connect with racers"
|
||||
description="Join a community of like-minded competitive drivers."
|
||||
/>
|
||||
<BenefitItem
|
||||
icon={Code}
|
||||
title="Get early access"
|
||||
description="Test features first and help iron out the rough edges"
|
||||
title="Early Access"
|
||||
description="Test new features before they go public."
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Stack gap={3} pt={4}>
|
||||
<Stack gap={6} pt={4} align="center">
|
||||
<Button
|
||||
as="a"
|
||||
href={discordUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="discord"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
icon={<DiscordIcon size={28} />}
|
||||
className="px-16 py-4"
|
||||
icon={<DiscordIcon size={24} />}
|
||||
>
|
||||
Join us on Discord
|
||||
Join Discord
|
||||
</Button>
|
||||
|
||||
<Text size="xs" color="text-primary-blue" weight="light">
|
||||
💡 Get a link to our early alpha view in the Discord
|
||||
</Text>
|
||||
|
||||
{!process.env.NEXT_PUBLIC_DISCORD_URL && (
|
||||
<Text size="xs" color="text-gray-500">
|
||||
Note: Configure NEXT_PUBLIC_DISCORD_URL in your environment variables
|
||||
<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>
|
||||
|
||||
{/* Footer note */}
|
||||
<Box maxWidth="xl" mx="auto" pt={4}>
|
||||
<Text size="xs" color="text-gray-500" weight="light" leading="relaxed" align="center" block>
|
||||
This is a community effort. Every voice matters. Let's build something that actually works for league racing.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Surface>
|
||||
</Box>
|
||||
</Surface>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -159,30 +153,29 @@ function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: st
|
||||
<Surface
|
||||
variant="muted"
|
||||
border
|
||||
padding={3}
|
||||
rounded="lg"
|
||||
padding={6}
|
||||
rounded="none"
|
||||
display="flex"
|
||||
gap={3}
|
||||
className="items-start hover:border-[#5865F2]/30 transition-all"
|
||||
gap={5}
|
||||
className="items-start hover:border-primary-accent/30 transition-all bg-panel-gray/20 group"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
center
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
flexShrink={0}
|
||||
w="6"
|
||||
h="6"
|
||||
backgroundColor="[#5865F2]"
|
||||
opacity={0.2}
|
||||
w="10"
|
||||
h="10"
|
||||
bg="primary-accent/5"
|
||||
border
|
||||
borderColor="[#5865F2]"
|
||||
mt={0.5}
|
||||
borderColor="border-gray/50"
|
||||
className="group-hover:border-primary-accent/30 transition-colors"
|
||||
>
|
||||
<Icon icon={icon} size={4} color="text-[#5865F2]" />
|
||||
<Icon icon={icon} size={5} color="text-primary-accent" />
|
||||
</Box>
|
||||
<Stack gap={0.5}>
|
||||
<Text size="xs" weight="medium" color="text-white">{title}</Text>
|
||||
<Text size="xs" color="text-gray-400" leading="relaxed">{description}</Text>
|
||||
<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