wip

apps/website/components/teams/WhyJoinTeamSection.tsx

@@ -3,10 +3,23 @@ import {
   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';
 
-export default function WhyJoinTeamSection() {
-  const benefits = [
+interface Benefit {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
+
+export function WhyJoinTeamSection() {
+  const benefits: Benefit[] = [
     {
       icon: Handshake,
       title: 'Shared Strategy',
@@ -30,26 +43,33 @@ export default function WhyJoinTeamSection() {
   ];
 
   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>
+    <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>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <Grid cols={4} gap={4}>
         {benefits.map((benefit) => (
-          <div
+          <Surface
             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"
+            variant="muted"
+            rounded="xl"
+            border
+            padding={5}
           >
-            <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>
+            <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>
         ))}
-      </div>
-    </div>
+      </Grid>
+    </Box>
   );
-}
+}