website refactor

apps/website/components/auth/AuthCard.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface AuthCardProps {
+  children: React.ReactNode;
+  title: string;
+  description?: string;
+}
+
+/**
+ * AuthCard
+ * 
+ * A matte surface container for auth forms with a subtle accent glow.
+ */
+export function AuthCard({ children, title, description }: AuthCardProps) {
+  return (
+    <Box bg="surface-charcoal" border borderColor="outline-steel" rounded="lg" shadow="card" position="relative" overflow="hidden">
+      {/* Subtle top accent line */}
+      <Box 
+        position="absolute" 
+        top="0" 
+        left="0" 
+        w="full" 
+        h="1px" 
+        bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)" 
+      />
+      
+      <Box p={{ base: 6, md: 8 }}>
+        <Box as="header" mb={8} textAlign="center">
+          <Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block>
+            {title}
+          </Text>
+          {description && (
+            <Text size="sm" color="text-med" block>
+              {description}
+            </Text>
+          )}
+        </Box>
+        
+        {children}
+      </Box>
+    </Box>
+  );
+}

apps/website/components/auth/AuthFooterLinks.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+interface AuthFooterLinksProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AuthFooterLinks
+ * 
+ * Semantic container for links at the bottom of auth cards.
+ */
+export function AuthFooterLinks({ children }: AuthFooterLinksProps) {
+  return (
+    <Box as="footer" mt={8} pt={6} borderTop borderStyle="solid" borderColor="outline-steel">
+      <Stack gap={3} align="center" textAlign="center">
+        {children}
+      </Stack>
+    </Box>
+  );
+}

apps/website/components/auth/AuthForm.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+
+interface AuthFormProps {
+  children: React.ReactNode;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+/**
+ * AuthForm
+ * 
+ * Semantic form wrapper for auth flows.
+ */
+export function AuthForm({ children, onSubmit }: AuthFormProps) {
+  return (
+    <Box as="form" onSubmit={onSubmit} noValidate>
+      <Stack gap={6}>
+        {children}
+      </Stack>
+    </Box>
+  );
+}

apps/website/components/auth/AuthProviderButtons.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface AuthProviderButtonsProps {
+  children: React.ReactNode;
+}
+
+/**
+ * AuthProviderButtons
+ * 
+ * Container for social login buttons (Google, Discord, etc.)
+ */
+export function AuthProviderButtons({ children }: AuthProviderButtonsProps) {
+  return (
+    <Box display="grid" gridCols={1} gap={3} mb={6}>
+      {children}
+    </Box>
+  );
+}

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