website refactor

apps/website/components/onboarding/AvatarStep.tsx

@@ -1,7 +1,7 @@
 import { useRef, ChangeEvent } from 'react';
 import { Camera, Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
+import Button from '@/ui/Button';
+import Heading from '@/ui/Heading';
 
 export type RacingSuitColor =
   | 'red'

apps/website/components/onboarding/OnboardingCardAccent.tsx

@@ -0,0 +1,5 @@
+export function OnboardingCardAccent() {
+  return (
+    <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+  );
+}

apps/website/components/onboarding/OnboardingContainer.tsx

@@ -0,0 +1,11 @@
+interface OnboardingContainerProps {
+  children: React.ReactNode;
+}
+
+export function OnboardingContainer({ children }: OnboardingContainerProps) {
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-10">
+      {children}
+    </div>
+  );
+}

apps/website/components/onboarding/OnboardingError.tsx

@@ -0,0 +1,12 @@
+interface OnboardingErrorProps {
+  message: string;
+}
+
+export function OnboardingError({ message }: OnboardingErrorProps) {
+  return (
+    <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">{message}</p>
+    </div>
+  );
+}

apps/website/components/onboarding/OnboardingForm.tsx

@@ -0,0 +1,12 @@
+interface OnboardingFormProps {
+  children: React.ReactNode;
+  onSubmit: (e: React.FormEvent) => void | Promise<void>;
+}
+
+export function OnboardingForm({ children, onSubmit }: OnboardingFormProps) {
+  return (
+    <form onSubmit={onSubmit} className="relative">
+      {children}
+    </form>
+  );
+}

apps/website/components/onboarding/OnboardingHeader.tsx

@@ -0,0 +1,17 @@
+interface OnboardingHeaderProps {
+  title: string;
+  subtitle: string;
+  emoji: string;
+}
+
+export function OnboardingHeader({ title, subtitle, emoji }: OnboardingHeaderProps) {
+  return (
+    <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">{emoji}</span>
+      </div>
+      <h1 className="text-4xl font-bold mb-2">{title}</h1>
+      <p className="text-gray-400">{subtitle}</p>
+    </div>
+  );
+}

apps/website/components/onboarding/OnboardingHelpText.tsx

@@ -0,0 +1,7 @@
+export function OnboardingHelpText() {
+  return (
+    <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>
+  );
+}

apps/website/components/onboarding/OnboardingNavigation.tsx

@@ -0,0 +1,58 @@
+import Button from '@/ui/Button';
+
+interface OnboardingNavigationProps {
+  onBack: () => void;
+  onNext?: () => void;
+  isLastStep: boolean;
+  canSubmit: boolean;
+  loading: boolean;
+}
+
+export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
+  return (
+    <div className="mt-8 flex items-center justify-between">
+      <Button
+        type="button"
+        variant="secondary"
+        onClick={onBack}
+        disabled={loading}
+        className="flex items-center gap-2"
+      >
+        <span>←</span>
+        Back
+      </Button>
+
+      {!isLastStep ? (
+        <Button
+          type="button"
+          variant="primary"
+          onClick={onNext}
+          disabled={loading}
+          className="flex items-center gap-2"
+        >
+          Continue
+          <span>→</span>
+        </Button>
+      ) : (
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={loading || !canSubmit}
+          className="flex items-center gap-2"
+        >
+          {loading ? (
+            <>
+              <span className="animate-spin">⟳</span>
+              Creating Profile...
+            </>
+          ) : (
+            <>
+              <span>✓</span>
+              Complete Setup
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}

apps/website/components/onboarding/OnboardingWizard.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import { useState, FormEvent } from 'react';
-import Card from '@/components/ui/Card';
+import { OnboardingCardAccent } from '@/components/onboarding/OnboardingCardAccent';
+import { OnboardingContainer } from '@/components/onboarding/OnboardingContainer';
+import { OnboardingError } from '@/components/onboarding/OnboardingError';
+import { OnboardingForm } from '@/components/onboarding/OnboardingForm';
+import { OnboardingHeader } from '@/components/onboarding/OnboardingHeader';
+import { OnboardingHelpText } from '@/components/onboarding/OnboardingHelpText';
+import { OnboardingNavigation } from '@/components/onboarding/OnboardingNavigation';
+import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
+import Card from '@/ui/Card';
 import { StepIndicator } from '@/ui/StepIndicator';
-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';
+import { FormEvent, useState } from 'react';
+import { AvatarInfo, AvatarStep } from './AvatarStep';
 
 type OnboardingStep = 1 | 2;
 

apps/website/components/onboarding/PersonalInfoStep.tsx

@@ -0,0 +1,151 @@
+import { User, Clock, ChevronRight } from 'lucide-react';
+import Input from '@/ui/Input';
+import Heading from '@/ui/Heading';
+import CountrySelect from '@/ui/CountrySelect';
+
+export interface PersonalInfo {
+  firstName: string;
+  lastName: string;
+  displayName: string;
+  country: string;
+  timezone: string;
+}
+
+interface FormErrors {
+  [key: string]: string | undefined;
+}
+
+interface PersonalInfoStepProps {
+  personalInfo: PersonalInfo;
+  setPersonalInfo: (info: PersonalInfo) => void;
+  errors: FormErrors;
+  loading: boolean;
+}
+
+const TIMEZONES = [
+  { value: 'America/New_York', label: 'Eastern Time (ET)' },
+  { value: 'America/Chicago', label: 'Central Time (CT)' },
+  { value: 'America/Denver', label: 'Mountain Time (MT)' },
+  { value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
+  { value: 'Europe/London', label: 'Greenwich Mean Time (GMT)' },
+  { value: 'Europe/Berlin', label: 'Central European Time (CET)' },
+  { value: 'Europe/Paris', label: 'Central European Time (CET)' },
+  { value: 'Australia/Sydney', label: 'Australian Eastern Time (AET)' },
+  { value: 'Asia/Tokyo', label: 'Japan Standard Time (JST)' },
+  { value: 'America/Sao_Paulo', label: 'Brasília Time (BRT)' },
+];
+
+export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loading }: PersonalInfoStepProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <Heading level={2} className="text-xl mb-1 flex items-center gap-2">
+          <User className="w-5 h-5 text-primary-blue" />
+          Personal Information
+        </Heading>
+        <p className="text-sm text-gray-400">
+          Tell us a bit about yourself
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
+            First Name *
+          </label>
+          <Input
+            id="firstName"
+            type="text"
+            value={personalInfo.firstName}
+            onChange={(e) =>
+              setPersonalInfo({ ...personalInfo, firstName: e.target.value })
+            }
+            error={!!errors.firstName}
+            errorMessage={errors.firstName}
+            placeholder="John"
+            disabled={loading}
+          />
+        </div>
+
+        <div>
+          <label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
+            Last Name *
+          </label>
+          <Input
+            id="lastName"
+            type="text"
+            value={personalInfo.lastName}
+            onChange={(e) =>
+              setPersonalInfo({ ...personalInfo, lastName: e.target.value })
+            }
+            error={!!errors.lastName}
+            errorMessage={errors.lastName}
+            placeholder="Racer"
+            disabled={loading}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
+          Display Name * <span className="text-gray-500 font-normal">(shown publicly)</span>
+        </label>
+        <Input
+          id="displayName"
+          type="text"
+          value={personalInfo.displayName}
+          onChange={(e) =>
+            setPersonalInfo({ ...personalInfo, displayName: e.target.value })
+          }
+          error={!!errors.displayName}
+          errorMessage={errors.displayName}
+          placeholder="SpeedyRacer42"
+          disabled={loading}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="country" className="block text-sm font-medium text-gray-300 mb-2">
+            Country *
+          </label>
+          <CountrySelect
+            value={personalInfo.country}
+            onChange={(value) =>
+              setPersonalInfo({ ...personalInfo, country: value })
+            }
+            error={!!errors.country}
+            errorMessage={errors.country ?? ''}
+            disabled={loading}
+          />
+        </div>
+
+        <div>
+          <label htmlFor="timezone" className="block text-sm font-medium text-gray-300 mb-2">
+            Timezone
+          </label>
+          <div className="relative">
+            <Clock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 z-10" />
+            <select
+              id="timezone"
+              value={personalInfo.timezone}
+              onChange={(e) =>
+                setPersonalInfo({ ...personalInfo, timezone: e.target.value })
+              }
+              className="block w-full rounded-md border-0 px-4 py-3 pl-10 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm appearance-none cursor-pointer"
+              disabled={loading}
+            >
+              <option value="">Select timezone</option>
+              {TIMEZONES.map((tz) => (
+                <option key={tz.value} value={tz.value}>
+                  {tz.label}
+                </option>
+              ))}
+            </select>
+            <ChevronRight className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 rotate-90" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}