website refactor

apps/website/ui/OnboardingError.tsx

@@ -1,12 +1,26 @@
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+
 interface OnboardingErrorProps {
   message: string;
 }
 
 export function OnboardingError({ message }: OnboardingErrorProps) {
   return (
-    <div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/30">
-      <span className="text-red-400 flex-shrink-0 mt-0.5">⚠</span>
-      <p className="text-sm text-red-400">{message}</p>
-    </div>
+    <Box 
+      mt={6} 
+      display="flex" 
+      alignItems="start" 
+      gap={3} 
+      p={4} 
+      rounded="xl" 
+      bg="bg-red-500/10" 
+      border 
+      borderColor="border-red-500/30"
+    >
+      <Text color="text-red-400" flexShrink={0} mt={0.5}>⚠</Text>
+      <Text size="sm" color="text-red-400">{message}</Text>
+    </Box>
   );
-}
+}