website refactor

apps/website/ui/WhyJoinTeamSection.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+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 { BenefitCard } from '@/ui/BenefitCard';
+
+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) => (
+          <BenefitCard
+            key={benefit.title}
+            icon={benefit.icon}
+            title={benefit.title}
+            description={benefit.description}
+          />
+        ))}
+      </Grid>
+    </Box>
+  );
+}