website refactor

apps/website/components/auth/UserRolesPreview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Car, Trophy, Users } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -35,46 +34,47 @@ interface UserRolesPreviewProps {
 export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
   if (variant === 'compact') {
     return (
-      <Box mt={8} display={{ base: 'block', lg: 'none' }}>
+      <Stack mt={8} display={{ base: 'block', lg: 'none' }}>
         <Text align="center" size="xs" color="text-gray-500" mb={4} block>
           One account for all roles
         </Text>
         <Stack direction="row" justify="center" gap={6}>
           {USER_ROLES.map((role) => (
             <Stack key={role.title} direction="col" align="center">
-              <Box 
-                width="8" 
-                height="8" 
+              <Stack 
+                w="8" 
+                h="8" 
                 rounded="lg" 
                 bg={`bg-${role.color}/20`} 
-                display="flex" 
-                alignItems="center" 
-                justifyContent="center" 
+                align="center" 
+                justify="center" 
                 mb={1}
               >
                 <Text color={`text-${role.color}`}>
                   <Icon icon={role.icon} size={4} />
                 </Text>
-              </Box>
+              </Stack>
               <Text size="xs" color="text-gray-500">{role.title}</Text>
             </Stack>
           ))}
         </Stack>
-      </Box>
+      </Stack>
     );
   }
 
   return (
     <Stack direction="col" gap={3} mb={8}>
       {USER_ROLES.map((role, index) => (
-        <Box
+        <Stack
           as={motion.div}
           key={role.title}
-          initial={{ opacity: 0, x: -20 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ delay: index * 0.1 }}
-          display="flex"
-          alignItems="center"
+          {...({
+            initial: { opacity: 0, x: -20 },
+            animate: { opacity: 1, x: 0 },
+            transition: { delay: index * 0.1 }
+          } as any)}
+          direction="row"
+          align="center"
           gap={4}
           p={4}
           rounded="xl"
@@ -82,24 +82,23 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
           border
           borderColor="border-charcoal-outline"
         >
-          <Box 
-            width="10" 
-            height="10" 
+          <Stack 
+            w="10" 
+            h="10" 
             rounded="lg" 
             bg={`bg-${role.color}/20`} 
-            display="flex" 
-            alignItems="center" 
-            justifyContent="center"
+            align="center" 
+            justify="center"
           >
             <Text color={`text-${role.color}`}>
               <Icon icon={role.icon} size={5} />
             </Text>
-          </Box>
-          <Box>
+          </Stack>
+          <Stack>
             <Heading level={4}>{role.title}</Heading>
             <Text size="sm" color="text-gray-500">{role.description}</Text>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
       ))}
     </Stack>
   );