website refactor

apps/website/components/auth/AuthCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Card } from '@/ui/Card';
-import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 import { SectionHeader } from '@/ui/SectionHeader';
 import React from 'react';
 
@@ -24,9 +24,9 @@ export function AuthCard({ children, title, description }: AuthCardProps) {
         description={description}
         variant="minimal"
       />
-      <div>
+      <Box>
         {children}
-      </div>
+      </Box>
     </Card>
   );
 }

apps/website/components/auth/AuthProviderButtons.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Grid } from '@/ui/Grid';
+import { Box } from '@/ui/Box';
 import React from 'react';
 
 interface AuthProviderButtonsProps {
@@ -14,10 +15,10 @@ interface AuthProviderButtonsProps {
  */
 export function AuthProviderButtons({ children }: AuthProviderButtonsProps) {
   return (
-    <div style={{ marginBottom: '1.5rem' }}>
+    <Box marginBottom={6}>
       <Grid cols={1} gap={3}>
         {children}
       </Grid>
-    </div>
+    </Box>
   );
 }

apps/website/components/auth/UserRolesPreview.tsx

@@ -1,6 +1,10 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { ListItem, ListItemInfo } from '@/ui/ListItem';
 import { motion } from 'framer-motion';
 import { Car, Trophy, Users } from 'lucide-react';
@@ -34,26 +38,34 @@ interface UserRolesPreviewProps {
 export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
   if (variant === 'compact') {
     return (
-      <div style={{ marginTop: '2rem' }}>
+      <Box marginTop={8}>
         <Text align="center" size="xs" variant="low" block marginBottom={4}>
           One account for all roles
         </Text>
-        <div style={{ display: 'flex', justifyContent: 'center', gap: '1.5rem' }}>
+        <Group justify="center" gap={6}>
           {USER_ROLES.map((role) => (
-            <div key={role.title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.25rem' }}>
-              <div style={{ width: '2rem', height: '2rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Stack key={role.title} align="center" gap={1}>
+              <Surface 
+                width="2rem" 
+                height="2rem" 
+                rounded="md" 
+                variant="muted" 
+                display="flex" 
+                alignItems="center" 
+                justifyContent="center"
+              >
                 <Icon icon={role.icon} size={4} intent={role.intent} />
-              </div>
+              </Surface>
               <Text size="xs" variant="low">{role.title}</Text>
-            </div>
+            </Stack>
           ))}
-        </div>
-      </div>
+        </Group>
+      </Box>
     );
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '2rem' }}>
+    <Stack gap={3} marginBottom={8}>
       {USER_ROLES.map((role, index) => (
         <motion.div
           key={role.title}
@@ -62,18 +74,26 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
           transition={{ delay: index * 0.1 }}
         >
           <ListItem>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-              <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Group gap={4}>
+              <Surface 
+                width="2.5rem" 
+                height="2.5rem" 
+                rounded="md" 
+                variant="muted" 
+                display="flex" 
+                alignItems="center" 
+                justifyContent="center"
+              >
                 <Icon icon={role.icon} size={5} intent={role.intent} />
-              </div>
+              </Surface>
               <ListItemInfo
                 title={role.title}
                 description={role.description}
               />
-            </div>
+            </Group>
           </ListItem>
         </motion.div>
       ))}
-    </div>
+    </Stack>
   );
 }