55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import {
|
|
Handshake,
|
|
MessageCircle,
|
|
Calendar,
|
|
Trophy,
|
|
} from 'lucide-react';
|
|
|
|
export default function WhyJoinTeamSection() {
|
|
const benefits = [
|
|
{
|
|
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 (
|
|
<div className="mb-12">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-2xl font-bold text-white mb-2">Why Join a Team?</h2>
|
|
<p className="text-gray-400">Racing is better when you have teammates to share the journey</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{benefits.map((benefit) => (
|
|
<div
|
|
key={benefit.title}
|
|
className="p-5 rounded-xl bg-iron-gray/50 border border-charcoal-outline/50 hover:border-purple-500/30 transition-all duration-300"
|
|
>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10 border border-purple-500/20 mb-3">
|
|
<benefit.icon className="w-5 h-5 text-purple-400" />
|
|
</div>
|
|
<h3 className="text-white font-semibold mb-1">{benefit.title}</h3>
|
|
<p className="text-sm text-gray-500">{benefit.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |