wip

apps/website/components/auth/UserRolesPreview.tsx

@@ -1,6 +1,11 @@
 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';
+import { Icon } from '@/ui/Icon';
 
 const USER_ROLES = [
   {
@@ -21,50 +26,77 @@ const USER_ROLES = [
     description: 'Manage team and drivers',
     color: 'purple-400',
   },
-];
+] as const;
 
 interface UserRolesPreviewProps {
   variant?: 'full' | 'compact';
 }
 
-export default function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
+export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
   if (variant === 'compact') {
     return (
-      <div className="mt-8 lg:hidden">
-        <p className="text-center text-xs text-gray-500 mb-4">One account for all roles</p>
-        <div className="flex justify-center gap-6">
+      <Box 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) => (
-            <div key={role.title} className="flex flex-col items-center">
-              <div className={`w-8 h-8 rounded-lg bg-${role.color}/20 flex items-center justify-center mb-1`}>
-                <role.icon className={`w-4 h-4 text-${role.color}`} />
-              </div>
-              <span className="text-xs text-gray-500">{role.title}</span>
-            </div>
+            <Stack key={role.title} direction="col" align="center">
+              <Box 
+                width="8" 
+                height="8" 
+                rounded="lg" 
+                bg={`bg-${role.color}/20`} 
+                display="flex" 
+                alignItems="center" 
+                justifyContent="center" 
+                mb={1}
+              >
+                <Icon icon={role.icon} size={4} className={`text-${role.color}`} />
+              </Box>
+              <Text size="xs" color="text-gray-500">{role.title}</Text>
+            </Stack>
           ))}
-        </div>
-      </div>
+        </Stack>
+      </Box>
     );
   }
 
   return (
-    <div className="space-y-3 mb-8">
+    <Stack direction="col" gap={3} mb={8}>
       {USER_ROLES.map((role, index) => (
-        <motion.div
+        <Box
+          as={motion.div}
           key={role.title}
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: index * 0.1 }}
-          className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline"
+          display="flex"
+          alignItems="center"
+          gap={4}
+          p={4}
+          rounded="xl"
+          bg="bg-iron-gray/50"
+          border
+          borderColor="border-charcoal-outline"
         >
-          <div className={`w-10 h-10 rounded-lg bg-${role.color}/20 flex items-center justify-center`}>
-            <role.icon className={`w-5 h-5 text-${role.color}`} />
-          </div>
-          <div>
-            <h4 className="text-white font-medium">{role.title}</h4>
-            <p className="text-sm text-gray-500">{role.description}</p>
-          </div>
-        </motion.div>
+          <Box 
+            width="10" 
+            height="10" 
+            rounded="lg" 
+            bg={`bg-${role.color}/20`} 
+            display="flex" 
+            alignItems="center" 
+            justifyContent="center"
+          >
+            <Icon icon={role.icon} size={5} className={`text-${role.color}`} />
+          </Box>
+          <Box>
+            <Heading level={4}>{role.title}</Heading>
+            <Text size="sm" color="text-gray-500">{role.description}</Text>
+          </Box>
+        </Box>
       ))}
-    </div>
+    </Stack>
   );
-}
+}