website refactor

apps/website/components/auth/AuthWorkflowMockup.tsx

@@ -1,29 +1,14 @@
 'use client';
 
-import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
-import { useEffect, useState } from 'react';
+import React from 'react';
 import { 
   UserPlus, 
   Link as LinkIcon, 
   Settings,
   Trophy,
   Car,
-  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: LucideIcon;
-  title: string;
-  description: string;
-  color: string;
-}
+import { WorkflowMockup, WorkflowStep } from '@/ui/WorkflowMockup';
 
 const WORKFLOW_STEPS: WorkflowStep[] = [
   {
@@ -64,123 +49,5 @@ const WORKFLOW_STEPS: WorkflowStep[] = [
 ];
 
 export function AuthWorkflowMockup() {
-  const shouldReduceMotion = useReducedMotion();
-  const [isMounted, setIsMounted] = useState(false);
-  const [activeStep, setActiveStep] = useState(0);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (!isMounted) return;
-    
-    const interval = setInterval(() => {
-      setActiveStep((prev) => (prev + 1) % WORKFLOW_STEPS.length);
-    }, 3000);
-
-    return () => clearInterval(interval);
-  }, [isMounted]);
-
-  if (!isMounted) {
-    return (
-      <Box position="relative" fullWidth>
-        <Surface variant="muted" rounded="2xl" border padding={6}>
-          <Stack direction="row" justify="between" gap={2}>
-            {WORKFLOW_STEPS.map((step) => (
-              <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>
-            ))}
-          </Stack>
-        </Surface>
-      </Box>
-    );
-  }
-
-  return (
-    <Box position="relative" fullWidth>
-      <Surface variant="muted" rounded="2xl" border padding={6} className="overflow-hidden">
-        {/* Connection Lines */}
-        <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' }}
-            />
-          </Box>
-        </Box>
-
-        {/* Steps */}
-        <Stack direction="row" justify="between" gap={2} position="relative">
-          {WORKFLOW_STEPS.map((step, index) => {
-            const isActive = index === activeStep;
-            const isCompleted = index < activeStep;
-            const StepIcon = step.icon;
-
-            return (
-              <motion.div
-                key={step.id}
-                className="flex flex-col items-center text-center cursor-pointer flex-1"
-                onClick={() => setActiveStep(index)}
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <motion.div
-                  className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg border flex items-center justify-center mb-2 transition-all duration-300 ${
-                    isActive 
-                      ? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]' 
-                      : isCompleted
-                        ? 'bg-performance-green/20 border-performance-green/50'
-                        : 'bg-iron-gray border-charcoal-outline'
-                  }`}
-                  animate={isActive && !shouldReduceMotion ? {
-                    scale: [1, 1.08, 1],
-                    transition: { duration: 1, repeat: Infinity }
-                  } : {}}
-                >
-                  {isCompleted ? (
-                    <Icon icon={CheckCircle2} size={5} color="text-performance-green" />
-                  ) : (
-                    <Icon icon={StepIcon} size={5} className={isActive ? step.color : 'text-gray-500'} />
-                  )}
-                </motion.div>
-                <Text size="xs" weight="medium" className={`transition-colors hidden sm:block ${
-                  isActive ? 'text-white' : 'text-gray-400'
-                }`}>
-                  {step.title}
-                </Text>
-              </motion.div>
-            );
-          })}
-        </Stack>
-
-        {/* Active Step Preview - Mobile */}
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={activeStep}
-            initial={{ opacity: 0, y: 5 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -5 }}
-            transition={{ duration: 0.2 }}
-            className="mt-4 pt-4 border-t border-charcoal-outline sm:hidden"
-          >
-            <Box textAlign="center">
-              <Text size="xs" color="text-gray-400" block mb={1}>
-                Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep]?.title || ''}
-              </Text>
-              <Text size="xs" color="text-gray-500" block>
-                {WORKFLOW_STEPS[activeStep]?.description || ''}
-              </Text>
-            </Box>
-          </motion.div>
-        </AnimatePresence>
-      </Surface>
-    </Box>
-  );
+  return <WorkflowMockup steps={WORKFLOW_STEPS} />;
 }

apps/website/components/auth/UserRolesPreview.tsx

@@ -52,7 +52,9 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
                 justifyContent="center" 
                 mb={1}
               >
-                <Icon icon={role.icon} size={4} className={`text-${role.color}`} />
+                <Text color={`text-${role.color}`}>
+                  <Icon icon={role.icon} size={4} />
+                </Text>
               </Box>
               <Text size="xs" color="text-gray-500">{role.title}</Text>
             </Stack>
@@ -89,7 +91,9 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
             alignItems="center" 
             justifyContent="center"
           >
-            <Icon icon={role.icon} size={5} className={`text-${role.color}`} />
+            <Text color={`text-${role.color}`}>
+              <Icon icon={role.icon} size={5} />
+            </Text>
           </Box>
           <Box>
             <Heading level={4}>{role.title}</Heading>