Auditoría UX Completa StartLoom

// OnboardingFlow.tsx
export function OnboardingFlow() {
  const [step, setStep] = useState(1);
  const [userData, setUserData] = useState({});

  return (
    <OnboardingContainer>
      <ProgressIndicator>
        <Step active={step >= 1} completed={step > 1}>1</Step>
        <Step active={step >= 2} completed={step > 2}>2</Step>
        <Step active={step >= 3} completed={step > 3}>3</Step>
        <Step active={step >= 4} completed={step > 4}>4</Step>
      </ProgressIndicator>

      <AnimatePresence mode="wait">
        {step === 1 && <WelcomeStep onNext={(data) => setStep(2)} />}
        {step === 2 && <PersonalizationStep onNext={(data) => setStep(3)} />}
        {step === 3 && <QuickSetupStep onNext={(data) => setStep(4)} />}
        {step === 4 && <CelebrationStep onComplete={completeOnboarding} />}
      </AnimatePresence>
    </OnboardingContainer>
  );
}