wip

apps/website/components/auth/AuthWorkflowMockup.tsx

@@ -8,14 +8,18 @@ import {
   Settings,
   Trophy,
   Car,
-  Users,
-  Shield,
-  CheckCircle2
+  CheckCircle2,
+  LucideIcon
 } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
 
 interface WorkflowStep {
   id: number;
-  icon: typeof UserPlus;
+  icon: LucideIcon;
   title: string;
   description: string;
   color: string;
@@ -59,7 +63,7 @@ const WORKFLOW_STEPS: WorkflowStep[] = [
   },
 ];
 
-export default function AuthWorkflowMockup() {
+export function AuthWorkflowMockup() {
   const shouldReduceMotion = useReducedMotion();
   const [isMounted, setIsMounted] = useState(false);
   const [activeStep, setActiveStep] = useState(0);
@@ -80,40 +84,40 @@ export default function AuthWorkflowMockup() {
 
   if (!isMounted) {
     return (
-      <div className="relative w-full">
-        <div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-6">
-          <div className="flex justify-between gap-2">
+      <Box position="relative" fullWidth>
+        <Surface variant="muted" rounded="2xl" border padding={6}>
+          <Stack direction="row" justify="between" gap={2}>
             {WORKFLOW_STEPS.map((step) => (
-              <div key={step.id} className="flex flex-col items-center text-center flex-1">
-                <div className="w-10 h-10 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center mb-2">
-                  <step.icon className={`w-4 h-4 ${step.color}`} />
-                </div>
-                <h4 className="text-xs font-medium text-white">{step.title}</h4>
-              </div>
+              <Stack key={step.id} align="center" center>
+                <Box width={10} height={10} rounded="lg" backgroundColor="iron-gray" border borderColor="charcoal-outline" display="flex" center mb={2}>
+                  <Icon icon={step.icon} size={4} className={step.color} />
+                </Box>
+                <Text size="xs" weight="medium" color="text-white">{step.title}</Text>
+              </Stack>
             ))}
-          </div>
-        </div>
-      </div>
+          </Stack>
+        </Surface>
+      </Box>
     );
   }
 
   return (
-    <div className="relative w-full">
-      <div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-4 sm:p-6 overflow-hidden">
+    <Box position="relative" fullWidth>
+      <Surface variant="muted" rounded="2xl" border padding={6} className="overflow-hidden">
         {/* Connection Lines */}
-        <div className="absolute top-[3.5rem] left-[8%] right-[8%] hidden sm:block">
-          <div className="h-0.5 bg-charcoal-outline relative">
+        <Box position="absolute" top="3.5rem" left="8%" right="8%" className="hidden sm:block">
+          <Box height={0.5} backgroundColor="charcoal-outline" position="relative">
             <motion.div
               className="absolute h-full bg-gradient-to-r from-primary-blue to-performance-green"
               initial={{ width: '0%' }}
               animate={{ width: `${(activeStep / (WORKFLOW_STEPS.length - 1)) * 100}%` }}
               transition={{ duration: 0.5, ease: 'easeInOut' }}
             />
-          </div>
-        </div>
+          </Box>
+        </Box>
 
         {/* Steps */}
-        <div className="flex justify-between gap-2 relative">
+        <Stack direction="row" justify="between" gap={2} position="relative">
           {WORKFLOW_STEPS.map((step, index) => {
             const isActive = index === activeStep;
             const isCompleted = index < activeStep;
@@ -141,20 +145,20 @@ export default function AuthWorkflowMockup() {
                   } : {}}
                 >
                   {isCompleted ? (
-                    <CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-performance-green" />
+                    <Icon icon={CheckCircle2} size={5} color="text-performance-green" />
                   ) : (
-                    <StepIcon className={`w-4 h-4 sm:w-5 sm:h-5 ${isActive ? step.color : 'text-gray-500'}`} />
+                    <Icon icon={StepIcon} size={5} className={isActive ? step.color : 'text-gray-500'} />
                   )}
                 </motion.div>
-                <h4 className={`text-xs font-medium transition-colors hidden sm:block ${
+                <Text size="xs" weight="medium" className={`transition-colors hidden sm:block ${
                   isActive ? 'text-white' : 'text-gray-400'
                 }`}>
                   {step.title}
-                </h4>
+                </Text>
               </motion.div>
             );
           })}
-        </div>
+        </Stack>
 
         {/* Active Step Preview - Mobile */}
         <AnimatePresence mode="wait">
@@ -166,17 +170,17 @@ export default function AuthWorkflowMockup() {
             transition={{ duration: 0.2 }}
             className="mt-4 pt-4 border-t border-charcoal-outline sm:hidden"
           >
-            <div className="text-center">
-              <p className="text-xs text-gray-400 mb-1">
+            <Box textAlign="center">
+              <Text size="xs" color="text-gray-400" block mb={1}>
                 Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep]?.title || ''}
-              </p>
-              <p className="text-xs text-gray-500">
+              </Text>
+              <Text size="xs" color="text-gray-500" block>
                 {WORKFLOW_STEPS[activeStep]?.description || ''}
-              </p>
-            </div>
+              </Text>
+            </Box>
           </motion.div>
         </AnimatePresence>
-      </div>
-    </div>
+      </Surface>
+    </Box>
   );
-}
+}

apps/website/components/auth/RoleCard.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { LucideIcon } from 'lucide-react';
-
-interface RoleCardProps {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-  features: string[];
-  color: string;
-  selected?: boolean;
-  onClick?: () => void;
-}
-
-export default function RoleCard({
-  icon: Icon,
-  title,
-  description,
-  features,
-  color,
-  selected = false,
-  onClick,
-}: RoleCardProps) {
-  return (
-    <motion.button
-      onClick={onClick}
-      whileHover={{ scale: 1.02 }}
-      whileTap={{ scale: 0.98 }}
-      className={`w-full text-left p-4 rounded-xl border transition-all duration-200 ${
-        selected
-          ? `border-${color} bg-${color}/10 shadow-[0_0_20px_rgba(25,140,255,0.2)]`
-          : 'border-charcoal-outline bg-iron-gray/50 hover:border-gray-600 hover:bg-iron-gray'
-      }`}
-    >
-      <div className="flex items-start gap-3">
-        <div
-          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
-            selected ? `bg-${color}/20` : 'bg-deep-graphite'
-          }`}
-        >
-          <Icon className={`w-5 h-5 ${selected ? `text-${color}` : 'text-gray-400'}`} />
-        </div>
-        <div className="flex-1 min-w-0">
-          <h3
-            className={`font-semibold transition-colors ${
-              selected ? 'text-white' : 'text-gray-200'
-            }`}
-          >
-            {title}
-          </h3>
-          <p className="text-xs text-gray-500 mt-0.5">{description}</p>
-        </div>
-        <div
-          className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${
-            selected ? 'border-primary-blue bg-primary-blue' : 'border-gray-600'
-          }`}
-        >
-          {selected && (
-            <motion.div
-              initial={{ scale: 0 }}
-              animate={{ scale: 1 }}
-              className="w-2 h-2 rounded-full bg-white"
-            />
-          )}
-        </div>
-      </div>
-      <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
-        <ul className="space-y-1">
-          {features.map((feature, index) => (
-            <li key={index} className="text-xs text-gray-400 flex items-center gap-2">
-              <span
-                className={`w-1 h-1 rounded-full ${selected ? 'bg-primary-blue' : 'bg-gray-600'}`}
-              />
-              {feature}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </motion.button>
-  );
-}

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>
   );
-}
+}