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