website refactor

apps/website/components/onboarding/OnboardingCardAccent.tsx

@@ -1,5 +1,17 @@
+import { Box } from '@/ui/Box';
+
 export function OnboardingCardAccent() {
   return (
-    <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+    <Box 
+      position="absolute" 
+      top={0} 
+      right={0} 
+      width="10rem" 
+      height="10rem" 
+      style={{ 
+        background: 'linear-gradient(to bottom left, rgba(25, 140, 255, 0.1), transparent)',
+        borderBottomLeftRadius: '9999px'
+      }} 
+    />
   );
 }

apps/website/components/onboarding/OnboardingContainer.tsx

@@ -1,11 +1,16 @@
+import { Container } from '@/ui/Container';
+import { Box } from '@/ui/Box';
+
 interface OnboardingContainerProps {
   children: React.ReactNode;
 }
 
 export function OnboardingContainer({ children }: OnboardingContainerProps) {
   return (
-    <div className="max-w-3xl mx-auto px-4 py-10">
-      {children}
-    </div>
+    <Container size="md">
+      <Box paddingY={10}>
+        {children}
+      </Box>
+    </Container>
   );
 }

apps/website/components/onboarding/OnboardingHeader.tsx

@@ -1,3 +1,8 @@
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+
 interface OnboardingHeaderProps {
   title: string;
   subtitle: string;
@@ -6,12 +11,23 @@ interface OnboardingHeaderProps {
 
 export function OnboardingHeader({ title, subtitle, emoji }: OnboardingHeaderProps) {
   return (
-    <div className="text-center mb-8">
-      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
-        <span className="text-2xl">{emoji}</span>
-      </div>
-      <h1 className="text-4xl font-bold mb-2">{title}</h1>
-      <p className="text-gray-400">{subtitle}</p>
-    </div>
+    <Box textAlign="center" marginBottom={8}>
+      <Surface
+        variant="gradient-blue"
+        rounded="xl"
+        width="4rem"
+        height="4rem"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        marginX="auto"
+        marginBottom={4}
+        border="1px solid var(--ui-color-intent-primary)"
+      >
+        <Text size="2xl">{emoji}</Text>
+      </Surface>
+      <Heading level={1} size="4xl" weight="bold" marginBottom={2}>{title}</Heading>
+      <Text variant="low">{subtitle}</Text>
+    </Box>
   );
 }

apps/website/components/onboarding/OnboardingHelpText.tsx

@@ -1,7 +1,12 @@
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
 export function OnboardingHelpText() {
   return (
-    <p className="text-center text-xs text-gray-500 mt-6">
-      Your avatar will be AI-generated based on your photo and chosen suit color
-    </p>
+    <Box marginTop={6} textAlign="center">
+      <Text size="xs" variant="low">
+        Your avatar will be AI-generated based on your photo and chosen suit color
+      </Text>
+    </Box>
   );
 }