website refactor

apps/website/components/auth/AuthShell.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface AuthShellProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AuthShell
+ * 
+ * The outermost container for all authentication pages.
+ * Provides the "calm intensity" background and centered layout.
+ */
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" p={4} bg="base-black" position="relative" overflow="hidden">
+      {/* Subtle background glow - top right */}
+      <Box 
+        position="absolute" 
+        top="-10%" 
+        right="-10%" 
+        w="40%" 
+        h="40%" 
+        rounded="full" 
+        bg="rgba(25, 140, 255, 0.05)" 
+        blur="xl" 
+        pointerEvents="none"
+        aria-hidden="true"
+      />
+      {/* Subtle background glow - bottom left */}
+      <Box 
+        position="absolute" 
+        bottom="-10%" 
+        left="-10%" 
+        w="40%" 
+        h="40%" 
+        rounded="full" 
+        bg="rgba(78, 212, 224, 0.05)" 
+        blur="xl" 
+        pointerEvents="none"
+        aria-hidden="true"
+      />
+      
+      <Box w="full" maxWidth="400px" position="relative" zIndex={10} animate="fade-in">
+        {children}
+      </Box>
+    </Box>
+  );
+}