website refactor

apps/website/ui/StepIndicator.tsx

@@ -0,0 +1,65 @@
+import { User, Camera, Check } from 'lucide-react';
+
+interface Step {
+  id: number;
+  label: string;
+  icon: React.ElementType;
+}
+
+interface StepIndicatorProps {
+  currentStep: number;
+  steps?: Step[];
+}
+
+const DEFAULT_STEPS: Step[] = [
+  { id: 1, label: 'Personal', icon: User },
+  { id: 2, label: 'Avatar', icon: Camera },
+];
+
+export function StepIndicator({ currentStep, steps = DEFAULT_STEPS }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-8">
+      {steps.map((step, index) => {
+        const Icon = step.icon;
+        const isCompleted = step.id < currentStep;
+        const isCurrent = step.id === currentStep;
+
+        return (
+          <div key={step.id} className="flex items-center">
+            <div className="flex flex-col items-center">
+              <div
+                className={`flex h-12 w-12 items-center justify-center rounded-full transition-all duration-300 ${
+                  isCurrent
+                    ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/30'
+                    : isCompleted
+                    ? 'bg-performance-green text-white'
+                    : 'bg-iron-gray border border-charcoal-outline text-gray-500'
+                }`}
+              >
+                {isCompleted ? (
+                  <Check className="w-5 h-5" />
+                ) : (
+                  <Icon className="w-5 h-5" />
+                )}
+              </div>
+              <span
+                className={`mt-2 text-xs font-medium ${
+                  isCurrent ? 'text-white' : isCompleted ? 'text-performance-green' : 'text-gray-500'
+                }`}
+              >
+                {step.label}
+              </span>
+            </div>
+            {index < steps.length - 1 && (
+              <div
+                className={`w-16 h-0.5 mx-4 mt-[-20px] ${
+                  isCompleted ? 'bg-performance-green' : 'bg-charcoal-outline'
+                }`}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}