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