website refactor

apps/website/components/onboarding/OnboardingWizard.tsx

@@ -1,9 +1,15 @@
 import { useState, FormEvent } from 'react';
 import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
 import { StepIndicator } from '@/ui/StepIndicator';
-import { PersonalInfoStep, PersonalInfo } from './PersonalInfoStep';
+import { PersonalInfoStep, PersonalInfo } from '@/ui/onboarding/PersonalInfoStep';
 import { AvatarStep, AvatarInfo } from './AvatarStep';
+import { OnboardingHeader } from '@/ui/onboarding/OnboardingHeader';
+import { OnboardingHelpText } from '@/ui/onboarding/OnboardingHelpText';
+import { OnboardingError } from '@/ui/onboarding/OnboardingError';
+import { OnboardingNavigation } from '@/ui/onboarding/OnboardingNavigation';
+import { OnboardingContainer } from '@/ui/onboarding/OnboardingContainer';
+import { OnboardingCardAccent } from '@/ui/onboarding/OnboardingCardAccent';
+import { OnboardingForm } from '@/ui/onboarding/OnboardingForm';
 
 type OnboardingStep = 1 | 2;
 
@@ -173,28 +179,19 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
   const loading = false; // This would be managed by the parent component
 
   return (
-    <div className="max-w-3xl mx-auto px-4 py-10">
-      {/* Header */}
-      <div className="text-center mb-8">
-        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
-          <span className="text-2xl">🏁</span>
-        </div>
-        <h1 className="text-4xl font-bold mb-2">Welcome to GridPilot</h1>
-        <p className="text-gray-400">
-          Let us set up your racing profile
-        </p>
-      </div>
+    <OnboardingContainer>
+      <OnboardingHeader
+        title="Welcome to GridPilot"
+        subtitle="Let us set up your racing profile"
+        emoji="🏁"
+      />
 
-      {/* Progress Indicator */}
       <StepIndicator currentStep={step} />
 
-      {/* Form Card */}
       <Card className="relative overflow-hidden">
-        {/* Background accent */}
-        <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+        <OnboardingCardAccent />
 
-        <form onSubmit={handleSubmit} className="relative">
-          {/* Step 1: Personal Information */}
+        <OnboardingForm onSubmit={handleSubmit}>
           {step === 1 && (
             <PersonalInfoStep
               personalInfo={personalInfo}
@@ -204,7 +201,6 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
             />
           )}
 
-          {/* Step 2: Avatar Generation */}
           {step === 2 && (
             <AvatarStep
               avatarInfo={avatarInfo}
@@ -215,66 +211,19 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
             />
           )}
 
-          {/* Error Message */}
-          {errors.submit && (
-            <div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/30">
-              <span className="text-red-400 flex-shrink-0 mt-0.5">⚠</span>
-              <p className="text-sm text-red-400">{errors.submit}</p>
-            </div>
-          )}
+          {errors.submit && <OnboardingError message={errors.submit} />}
 
-          {/* Navigation Buttons */}
-          <div className="mt-8 flex items-center justify-between">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={handleBack}
-              disabled={step === 1 || loading}
-              className="flex items-center gap-2"
-            >
-              <span>←</span>
-              Back
-            </Button>
-
-            {step < 2 ? (
-              <Button
-                type="button"
-                variant="primary"
-                onClick={handleNext}
-                disabled={loading}
-                className="flex items-center gap-2"
-              >
-                Continue
-                <span>→</span>
-              </Button>
-            ) : (
-              <Button
-                type="submit"
-                variant="primary"
-                disabled={loading || avatarInfo.selectedAvatarIndex === null}
-                className="flex items-center gap-2"
-              >
-                {loading ? (
-                  <>
-                    <span className="animate-spin">⟳</span>
-                    Creating Profile...
-                  </>
-                ) : (
-                  <>
-                    <span>✓</span>
-                    Complete Setup
-                  </>
-                )}
-              </Button>
-            )}
-          </div>
-        </form>
+          <OnboardingNavigation
+            onBack={handleBack}
+            onNext={step < 2 ? handleNext : undefined}
+            isLastStep={step === 2}
+            canSubmit={avatarInfo.selectedAvatarIndex !== null}
+            loading={loading}
+          />
+        </OnboardingForm>
       </Card>
 
-      {/* Help Text */}
-      <p className="text-center text-xs text-gray-500 mt-6">
-        Your avatar will be AI-generated based on your photo and chosen suit color
-      </p>
-    </div>
+      <OnboardingHelpText />
+    </OnboardingContainer>
   );
 }