website refactor

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { FileText, Gamepad2, Check } from 'lucide-react';
 import { Input } from '@/ui/Input';
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -47,18 +46,18 @@ export function LeagueBasicsSection({
   return (
     <Stack gap={8}>
       {/* Emotional header for the step */}
-      <Box textAlign="center" pb={2}>
-        <Box mb={2}>
+      <Stack textAlign="center" pb={2}>
+        <Stack mb={2}>
           <Heading level={3}>
             Every great championship starts with a name
           </Heading>
-        </Box>
-        <Box maxWidth="lg" mx="auto">
+        </Stack>
+        <Stack maxWidth="lg" mx="auto">
           <Text size="sm" color="text-gray-400">
             This is where legends begin. Give your league an identity that drivers will remember.
           </Text>
-        </Box>
-      </Box>
+        </Stack>
+      </Stack>
 
       {/* League name */}
       <Stack gap={3}>
@@ -130,11 +129,11 @@ export function LeagueBasicsSection({
       />
 
       <Surface variant="muted" rounded="lg" border padding={4}>
-        <Box mb={3}>
+        <Stack mb={3}>
           <Text size="xs" color="text-gray-400">
             <Text weight="medium" color="text-gray-300">Great descriptions include:</Text>
           </Text>
-        </Box>
+        </Stack>
         <Grid cols={3} gap={3}>
           {[
             'Racing style & pace',