website refactor

apps/website/ui/DiscordCTA.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Section } from './Section';
+import { Container } from './Container';
+import { Card } from './Card';
+import { Box } from './Box';
+import { Glow } from './Glow';
+import { Heading } from './Heading';
+import { Text } from './Text';
+import { Button } from './Button';
+import { DiscordIcon } from './icons/DiscordIcon';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface DiscordCTAProps {
+  title: string;
+  description: string;
+  lead: string;
+  benefits: Array<{
+    icon: LucideIcon;
+    title: string;
+    description: string;
+  }>;
+  discordUrl: string;
+}
+
+/**
+ * DiscordCTA - A semantic UI component for the Discord call to action.
+ */
+export function DiscordCTA({
+  title,
+  description,
+  lead,
+  benefits,
+  discordUrl,
+}: DiscordCTAProps) {
+  return (
+    <Section variant="dark" padding="lg">
+      <Glow color="primary" size="xl" position="center" opacity={0.05} />
+      
+      <Container>
+        <Card variant="outline">
+          <Box display="flex" flexDirection="col" alignItems="center" gap={12} padding={8}>
+            {/* Header */}
+            <Box display="flex" flexDirection="col" alignItems="center" gap={6}>
+              <DiscordIcon size={40} />
+              <Heading level={2} weight="bold" align="center">
+                {title}
+              </Heading>
+            </Box>
+
+            {/* Personal message */}
+            <Box display="flex" flexDirection="col" alignItems="center" gap={6} maxWidth="2xl">
+              <Text size="lg" variant="high" weight="medium" align="center">
+                {lead}
+              </Text>
+              <Text size="base" variant="low" align="center">
+                {description}
+              </Text>
+            </Box>
+
+            {/* Benefits grid */}
+            <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6} fullWidth>
+              {benefits.map((benefit, index) => (
+                <Card key={index} variant="dark">
+                  <Box display="flex" flexDirection="col" gap={5} padding={6}>
+                    <Icon icon={benefit.icon} size={5} intent="primary" />
+                    <Box display="flex" flexDirection="col" gap={2}>
+                      <Text size="base" weight="bold" variant="high">{benefit.title}</Text>
+                      <Text size="sm" variant="low">{benefit.description}</Text>
+                    </Box>
+                  </Box>
+                </Card>
+              ))}
+            </Box>
+
+            {/* CTA Button */}
+            <Box display="flex" flexDirection="col" alignItems="center" gap={6}>
+              <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 letterSpacing="widest">
+                Early Alpha Access Available
+              </Text>
+            </Box>
+          </Box>
+        </Card>
+      </Container>
+    </Section>
+  );
+}