website refactor

apps/website/components/onboarding/OnboardingStepPanel.tsx

@@ -0,0 +1,43 @@
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface OnboardingStepPanelProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * OnboardingStepPanel
+ * 
+ * A semantic container for a single onboarding step.
+ * Provides a consistent header and surface.
+ */
+export function OnboardingStepPanel({ title, description, children }: OnboardingStepPanelProps) {
+  return (
+    <Stack gap={6}>
+      <Stack gap={1}>
+        <Text as="h2" size="2xl" weight="bold" color="text-white" letterSpacing="tight">
+          {title}
+        </Text>
+        {description && (
+          <Text size="sm" color="text-gray-400">
+            {description}
+          </Text>
+        )}
+      </Stack>
+
+      <Surface
+        variant="dark"
+        rounded="xl"
+        border
+        padding={8}
+        borderColor="border-charcoal-outline"
+        bg="bg-deep-charcoal/50"
+      >
+        {children}
+      </Surface>
+    </Stack>
+  );
+}