website refactor

apps/website/components/auth/AuthCard.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { SectionHeader } from '@/ui/SectionHeader';
 import React from 'react';
 
 interface AuthCardProps {
@@ -18,31 +18,15 @@ interface AuthCardProps {
  */
 export function AuthCard({ children, title, description }: AuthCardProps) {
   return (
-    <Card bg="surface-charcoal" borderColor="outline-steel" rounded="lg" position="relative" overflow="hidden">
-      {/* Subtle top accent line */}
-      <Stack 
-        position="absolute" 
-        top="0" 
-        left="0" 
-        w="full" 
-        h="1px" 
-        bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)" 
-      >{null}</Stack>
-      
-      <Stack p={{ base: 6, md: 8 }}>
-        <Stack as="header" mb={8} align="center">
-          <Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block textAlign="center">
-            {title}
-          </Text>
-          {description && (
-            <Text size="sm" color="text-med" block textAlign="center">
-              {description}
-            </Text>
-          )}
-        </Stack>
-        
+    <Card variant="dark">
+      <SectionHeader
+        title={title}
+        description={description}
+        variant="minimal"
+      />
+      <div>
         {children}
-      </Stack>
+      </div>
     </Card>
   );
 }