website refactor

apps/website/components/onboarding/OnboardingShell.tsx

@@ -0,0 +1,56 @@
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+
+interface OnboardingShellProps {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  sidebar?: React.ReactNode;
+}
+
+/**
+ * OnboardingShell
+ * 
+ * Semantic layout wrapper for the onboarding flow.
+ * Follows "Precision Racing Minimal" theme with dark surfaces and clean structure.
+ */
+export function OnboardingShell({ children, header, footer, sidebar }: OnboardingShellProps) {
+  return (
+    <Box minH="screen" bg="bg-near-black" color="text-white" display="flex" flexDirection="column">
+      {header && (
+        <Box borderB borderColor="border-charcoal-outline" py={4} bg="bg-deep-charcoal">
+          <Container size="md">
+            {header}
+          </Container>
+        </Box>
+      )}
+      
+      <Box flex={1} display="flex" py={12}>
+        <Container size="md">
+          <Box display="flex" gap={12}>
+            <Box flex={1}>
+              <Stack gap={8}>
+                {children}
+              </Stack>
+            </Box>
+            
+            {sidebar && (
+              <Box w="80" display={{ base: 'none', lg: 'block' }}>
+                {sidebar}
+              </Box>
+            )}
+          </Box>
+        </Container>
+      </Box>
+
+      {footer && (
+        <Box borderT borderColor="border-charcoal-outline" py={6} bg="bg-deep-charcoal">
+          <Container size="md">
+            {footer}
+          </Container>
+        </Box>
+      )}
+    </Box>
+  );
+}