76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import {
|
|
Handshake,
|
|
MessageCircle,
|
|
Calendar,
|
|
Trophy,
|
|
LucideIcon,
|
|
} from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface Benefit {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export function WhyJoinTeamSection() {
|
|
const benefits: Benefit[] = [
|
|
{
|
|
icon: Handshake,
|
|
title: 'Shared Strategy',
|
|
description: 'Develop setups together, share telemetry, and coordinate pit strategies for endurance races.',
|
|
},
|
|
{
|
|
icon: MessageCircle,
|
|
title: 'Team Communication',
|
|
description: 'Discord integration, voice chat during races, and dedicated team channels.',
|
|
},
|
|
{
|
|
icon: Calendar,
|
|
title: 'Coordinated Schedule',
|
|
description: 'Team calendars, practice sessions, and organized race attendance.',
|
|
},
|
|
{
|
|
icon: Trophy,
|
|
title: 'Team Championships',
|
|
description: 'Compete in team-based leagues and build your collective reputation.',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Box mb={12}>
|
|
<Box textAlign="center" mb={8}>
|
|
<Box mb={2}>
|
|
<Heading level={2}>Why Join a Team?</Heading>
|
|
</Box>
|
|
<Text color="text-gray-400">Racing is better when you have teammates to share the journey</Text>
|
|
</Box>
|
|
|
|
<Grid cols={4} gap={4}>
|
|
{benefits.map((benefit) => (
|
|
<Surface
|
|
key={benefit.title}
|
|
variant="muted"
|
|
rounded="xl"
|
|
border
|
|
padding={5}
|
|
>
|
|
<Box height={10} width={10} display="flex" center rounded="lg" backgroundColor="primary-blue" opacity={0.1} border borderColor="primary-blue" mb={3}>
|
|
<Icon icon={benefit.icon} size={5} color="text-primary-blue" />
|
|
</Box>
|
|
<Box mb={1}>
|
|
<Heading level={3}>{benefit.title}</Heading>
|
|
</Box>
|
|
<Text size="sm" color="text-gray-500">{benefit.description}</Text>
|
|
</Surface>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|