website refactor

apps/website/components/auth/AuthLoading.tsx

@@ -1,7 +1,7 @@
 import { LoadingSpinner } from '../../ui/LoadingSpinner';
-import { Box } from '../../ui/primitives/Box';
-import { Stack } from '../../ui/primitives/Stack';
+import { Stack } from '../../ui/Stack';
 import { Text } from '../../ui/Text';
+import { Section } from '../../ui/Section';
 
 interface AuthLoadingProps {
   message?: string;
@@ -9,19 +9,13 @@ interface AuthLoadingProps {
 
 export function AuthLoading({ message = 'Authenticating...' }: AuthLoadingProps) {
   return (
-    <Box 
-      fullWidth 
-      minHeight="100vh" 
-      display="flex" 
-      center 
-      bg="bg-[#0f1115]"
-    >
-      <Stack align="center" gap={4}>
+    <Section variant="dark" padding="none">
+      <Stack align="center" justify="center" gap={4} fullWidth>
         <LoadingSpinner size={10} />
-        <Text color="text-gray-400" weight="medium">
+        <Text variant="low" weight="medium">
           {message}
         </Text>
       </Stack>
-    </Box>
+    </Section>
   );
 }