100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|