website refactor

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>
   );
 }