website refactor

apps/website/components/home/HomeFooterCTA.tsx

@@ -0,0 +1,126 @@
+'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 { 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';
+
+export function HomeFooterCTA() {
+  const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
+
+  return (
+    <Section variant="dark" py={32} borderBottom borderColor="border-gray/50" overflow="hidden" position="relative">
+      <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 }}>
+          {/* Discord brand accent */}
+          <Box position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent" />
+          
+          <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">
+                <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' }} letterSpacing="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 <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">
+                  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"
+                px={16}
+                py={4}
+                h="auto"
+                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>
+        </Box>
+      </Container>
+    </Section>
+  );
+}
+
+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>
+        <Icon icon={icon} size={5} color="text-primary-accent" />
+      </Box>
+      <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>
+  );
+}