extract components from website

apps/website/components/teams/WhyJoinTeamSection.tsx

@@ -0,0 +1,55 @@
+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>
+  );
+}