website refactor

apps/website/components/onboarding/AvatarStep.tsx

@@ -1,7 +1,6 @@
 import { useRef, ChangeEvent } from 'react';
-import { Camera, Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
+import { Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -93,16 +92,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
   };
 
   return (
-    <Stack gap={6}>
-      <Box>
-        <Heading level={2} icon={<Icon icon={Camera} size={5} color="text-primary-blue" />}>
-          Create Your Racing Avatar
-        </Heading>
-        <Text size="sm" color="text-gray-400" block mt={1}>
-          Upload a photo and we will generate a unique racing avatar for you
-        </Text>
-      </Box>
-
+    <Stack gap={8}>
       {/* Photo Upload */}
       <Box>
         <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
@@ -180,7 +170,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
 
           {/* Preview area */}
           <Stack w="32" alignItems="center" center>
-            <Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden">
+            <Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden" borderColor="border-charcoal-outline">
               {(() => {
                   const selectedAvatarUrl =
                     avatarInfo.selectedAvatarIndex !== null