website refactor

apps/website/components/onboarding/OnboardingStepper.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { motion } from 'framer-motion';
+
+interface OnboardingStepperProps {
+  currentStep: number;
+  totalSteps: number;
+  steps: string[];
+}
+
+/**
+ * OnboardingStepper
+ * 
+ * A progress indicator with a "pit limiter" vibe.
+ * Uses a progress line and step labels.
+ */
+export function OnboardingStepper({ currentStep, totalSteps, steps }: OnboardingStepperProps) {
+  const progress = (currentStep / totalSteps) * 100;
+
+  return (
+    <Stack gap={4} w="full">
+      <Box w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
+        <Box
+          as={motion.div}
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+          h="full"
+          bg="bg-primary-blue"
+        />
+      </Box>
+      
+      <Box display="flex" justify="between">
+        {steps.map((label, index) => {
+          const stepNumber = index + 1;
+          const isActive = stepNumber === currentStep;
+          const isCompleted = stepNumber < currentStep;
+          
+          return (
+            <Stack key={label} direction="row" align="center" gap={2}>
+              <Box 
+                w="6" 
+                h="6" 
+                rounded="full" 
+                display="flex" 
+                center 
+                border 
+                borderColor={isActive || isCompleted ? 'border-primary-blue' : 'border-charcoal-outline'}
+                bg={isCompleted ? 'bg-primary-blue' : isActive ? 'bg-primary-blue/20' : 'transparent'}
+                transition
+              >
+                <Text 
+                  size="xs" 
+                  weight="bold" 
+                  color={isCompleted ? 'text-white' : isActive ? 'text-primary-blue' : 'text-gray-500'}
+                >
+                  {stepNumber}
+                </Text>
+              </Box>
+              <Text 
+                size="sm" 
+                weight={isActive ? 'bold' : 'medium'} 
+                color={isActive ? 'text-white' : 'text-gray-500'}
+                uppercase
+                letterSpacing="wider"
+              >
+                {label}
+              </Text>
+            </Stack>
+          );
+        })}
+      </Box>
+    </Stack>
+  );
+}