website refactor

apps/website/components/teams/WhyJoinTeamSection.tsx

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