@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

package/src/templates/web/ui-auth-payments-ai/template/src/app/onboarding/page.tsx

@@ -1,364 +1,325 @@
-'use client'
-
-import React from 'react'
-import { 
-  MultiStepForm,
-  FormField,
-  FormSection,
-  FormProvider,
-  Card,
-  MobileContainer,
-  PageTransition
-} from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
-import { 
-  User, 
-  Brain, 
-  Users, 
-  Target, 
-  CreditCard,
-  CheckCircle,
-  ArrowLeft
-} from 'lucide-react'
-import Link from 'next/link'
-
-export default function OnboardingPage() {
-  const { user } = useAuth()
-  const router = useRouter()
-
-  const handleOnboardingComplete = async (formData: FormData) => {
-    console.log('Onboarding completed:', Object.fromEntries(formData))
-    // Save onboarding data to user profile
-    // Redirect to main app
-    router.push('/dashboard')
-  }
-
-  if (!user) {
-    router.push('/login')
-    return null
-  }
-
-  return (
-    <PageTransition type="slide" direction="up" duration={300}>
-      <main className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5">
-        <MobileContainer className="py-8">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-8">
-            <div className="flex items-center gap-4">
-              <Link href="/" className="p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:scale-105 transition-transform">
-                <ArrowLeft className="w-5 h-5" />
-              </Link>
-              <div>
-                <h1 className="text-2xl font-bold">Welcome to {{projectName}}</h1>
-                <p className="text-gray-600 dark:text-gray-300">Let's get you set up</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Multi-Step Onboarding Form */}
-          <Card className="max-w-4xl mx-auto p-8">
-            <FormProvider>
-              <MultiStepForm
-                onComplete={handleOnboardingComplete}
-                autoSave={true}
-                progressTracking={true}
-                allowSkip={false}
-                steps={[
-                  {
-                    id: 'profile',
-                    title: 'Personal Information',
-                    description: 'Tell us about yourself',
-                    icon: User,
-                    fields: [
-                      {
-                        name: 'fullName',
-                        type: 'text',
-                        label: 'Full Name',
-                        placeholder: 'Enter your full name',
-                        validation: ['required', 'minLength:2'],
-                        defaultValue: user.user_metadata?.full_name || ''
-                      },
-                      {
-                        name: 'company',
-                        type: 'text',
-                        label: 'Company',
-                        placeholder: 'Enter your company name',
-                        validation: ['required']
-                      },
-                      {
-                        name: 'role',
-                        type: 'select',
-                        label: 'Role',
-                        placeholder: 'Select your role',
-                        options: [
-                          { value: 'developer', label: 'Developer' },
-                          { value: 'designer', label: 'Designer' },
-                          { value: 'product-manager', label: 'Product Manager' },
-                          { value: 'entrepreneur', label: 'Entrepreneur' },
-                          { value: 'content-creator', label: 'Content Creator' },
-                          { value: 'student', label: 'Student' },
-                          { value: 'other', label: 'Other' }
-                        ],
-                        validation: ['required']
-                      },
-                      {
-                        name: 'industry',
-                        type: 'select',
-                        label: 'Industry',
-                        placeholder: 'Select your industry',
-                        options: [
-                          { value: 'technology', label: 'Technology' },
-                          { value: 'healthcare', label: 'Healthcare' },
-                          { value: 'finance', label: 'Finance' },
-                          { value: 'education', label: 'Education' },
-                          { value: 'media', label: 'Media & Entertainment' },
-                          { value: 'retail', label: 'Retail' },
-                          { value: 'manufacturing', label: 'Manufacturing' },
-                          { value: 'other', label: 'Other' }
-                        ],
-                        validation: ['required']
-                      }
-                    ]
-                  },
-                  {
-                    id: 'ai-preferences',
-                    title: 'AI Preferences',
-                    description: 'Customize your AI experience',
-                    icon: Brain,
-                    component: (
-                      <div className="space-y-6">
-                        <FormSection title="AI Usage Goals" className="space-y-4">
-                          <FormField
-                            name="usageGoals"
-                            type="multiSelect"
-                            label="What do you plan to use AI for?"
-                            options={[
-                              { value: 'content-creation', label: 'Content Creation' },
-                              { value: 'code-generation', label: 'Code Generation' },
-                              { value: 'data-analysis', label: 'Data Analysis' },
-                              { value: 'customer-support', label: 'Customer Support' },
-                              { value: 'marketing', label: 'Marketing & SEO' },
-                              { value: 'research', label: 'Research & Analysis' },
-                              { value: 'automation', label: 'Workflow Automation' },
-                              { value: 'creative-projects', label: 'Creative Projects' }
-                            ]}
-                            validation={['required']}
-                            helpText="Select all that apply"
-                          />
-                        </FormSection>
-
-                        <FormSection title="Content Preferences" className="space-y-4">
-                          <FormField
-                            name="contentTypes"
-                            type="multiSelect"
-                            label="What types of content do you create?"
-                            options={[
-                              { value: 'text', label: 'Text & Articles' },
-                              { value: 'audio', label: 'Audio & Podcasts' },
-                              { value: 'video', label: 'Video Content' },
-                              { value: 'images', label: 'Images & Graphics' },
-                              { value: 'presentations', label: 'Presentations' },
-                              { value: 'social-media', label: 'Social Media Posts' },
-                              { value: 'documentation', label: 'Documentation' },
-                              { value: 'code', label: 'Code & Technical Content' }
-                            ]}
-                            validation: ['required']
-                          />
-
-                          <FormField
-                            name: 'creativityLevel'
-                            type: 'range'
-                            label: 'Creativity Level'
-                            min: 0
-                            max: 100
-                            defaultValue: 50
-                            helpText: 'Lower values are more conservative, higher values are more creative'
-                            showValue: true
-                          />
-                        </FormSection>
-
-                        <FormSection title="AI Model Preferences" className="space-y-4">
-                          <FormField
-                            name="preferredModels"
-                            type="multiSelect"
-                            label="Preferred AI Models"
-                            options={[
-                              { value: 'gpt-4', label: 'GPT-4 (Text & Chat)' },
-                              { value: 'gpt-4-turbo', label: 'GPT-4 Turbo (Faster)' },
-                              { value: 'claude-3', label: 'Claude 3 (Analysis)' },
-                              { value: 'elevenlabs', label: 'ElevenLabs (Voice)' },
-                              { value: 'whisper', label: 'Whisper (Speech-to-Text)' },
-                              { value: 'dall-e', label: 'DALL-E (Images)' },
-                              { value: 'stable-diffusion', label: 'Stable Diffusion (Images)' }
-                            ]}
-                            helpText="We'll prioritize these models for your requests"
-                          />
-                        </FormSection>
-                      </div>
-                    )
-                  },
-                  {
-                    id: 'team-setup',
-                    title: 'Team Setup',
-                    description: 'Set up your team and collaboration',
-                    icon: Users,
-                    fields: [
-                      {
-                        name: 'teamSize',
-                        type: 'select',
-                        label: 'Team Size',
-                        placeholder: 'Select your team size',
-                        options: [
-                          { value: 'solo', label: 'Just me' },
-                          { value: 'small', label: '2-5 people' },
-                          { value: 'medium', label: '6-20 people' },
-                          { value: 'large', label: '21-100 people' },
-                          { value: 'enterprise', label: '100+ people' }
-                        ],
-                        validation: ['required']
-                      },
-                      {
-                        name: 'inviteMembers',
-                        type: 'textarea',
-                        label: 'Invite Team Members',
-                        placeholder: 'Enter email addresses, one per line',
-                        helpText: 'Invite your team members to collaborate (optional)',
-                        rows: 4
-                      },
-                      {
-                        name: 'workspacePreferences',
-                        type: 'multiSelect',
-                        label: 'Workspace Features',
-                        options: [
-                          { value: 'shared-projects', label: 'Shared Projects' },
-                          { value: 'team-templates', label: 'Team Templates' },
-                          { value: 'usage-analytics', label: 'Usage Analytics' },
-                          { value: 'approval-workflows', label: 'Approval Workflows' },
-                          { value: 'brand-guidelines', label: 'Brand Guidelines' },
-                          { value: 'api-access', label: 'API Access' }
-                        ],
-                        helpText: 'Features you'd like enabled for your team'
-                      }
-                    ]
-                  },
-                  {
-                    id: 'subscription',
-                    title: 'Choose Your Plan',
-                    description: 'Select a plan that fits your needs',
-                    icon: CreditCard,
-                    component: (
-                      <div className="space-y-6">
-                        <FormField
-                          name="selectedPlan"
-                          type="radio"
-                          label="Choose Your Plan"
-                          options={[
-                            {
-                              value: 'starter',
-                              label: 'Starter Plan',
-                              description: 'Perfect for individuals and small projects',
-                              price: '$9/month',
-                              features: [
-                                '1,000 AI requests/month',
-                                'Basic AI models',
-                                'Email support',
-                                '5GB storage'
-                              ]
-                            },
-                            {
-                              value: 'pro',
-                              label: 'Pro Plan',
-                              description: 'Best for growing teams and businesses',
-                              price: '$29/month',
-                              features: [
-                                '10,000 AI requests/month',
-                                'Advanced AI models',
-                                'Priority support',
-                                '50GB storage',
-                                'Team collaboration',
-                                'API access'
-                              ],
-                              recommended: true
-                            },
-                            {
-                              value: 'enterprise',
-                              label: 'Enterprise Plan',
-                              description: 'For large organizations with custom needs',
-                              price: 'Custom pricing',
-                              features: [
-                                'Unlimited AI requests',
-                                'All AI models',
-                                'Dedicated support',
-                                'Unlimited storage',
-                                'Advanced security',
-                                'Custom integrations'
-                              ]
-                            }
-                          ]}
-                          validation={['required']}
-                        />
-
-                        <FormField
-                          name="billingInterval"
-                          type="radio"
-                          label="Billing Interval"
-                          options={[
-                            { value: 'monthly', label: 'Monthly billing' },
-                            { value: 'yearly', label: 'Yearly billing (save 20%)' }
-                          ]}
-                          defaultValue="monthly"
-                          validation={['required']}
-                        />
-                      </div>
-                    )
-                  },
-                  {
-                    id: 'completion',
-                    title: 'All Set!',
-                    description: 'Your account is ready to go',
-                    icon: CheckCircle,
-                    component: (
-                      <div className="text-center space-y-6">
-                        <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto">
-                          <CheckCircle className="w-8 h-8 text-white" />
-                        </div>
-                        <div>
-                          <h3 className="text-xl font-semibold mb-2">Welcome to {{projectName}}!</h3>
-                          <p className="text-gray-600 dark:text-gray-300">
-                            Your account has been set up successfully. You're ready to start using AI to supercharge your productivity.
-                          </p>
-                        </div>
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-                          <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20">
-                            <Brain className="w-6 h-6 text-blue-500 mx-auto mb-2" />
-                            <div className="font-medium">AI Tools Ready</div>
-                            <div className="text-gray-600 dark:text-gray-400">Access all AI capabilities</div>
-                          </div>
-                          <div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20">
-                            <Users className="w-6 h-6 text-green-500 mx-auto mb-2" />
-                            <div className="font-medium">Team Configured</div>
-                            <div className="text-gray-600 dark:text-gray-400">Collaboration features enabled</div>
-                          </div>
-                          <div className="p-4 rounded-lg bg-purple-50 dark:bg-purple-900/20">
-                            <Target className="w-6 h-6 text-purple-500 mx-auto mb-2" />
-                            <div className="font-medium">Goals Set</div>
-                            <div className="text-gray-600 dark:text-gray-400">Personalized experience ready</div>
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  }
-                ]}
-                submitButtonText="Complete Setup"
-                nextButtonText="Continue"
-                previousButtonText="Back"
-                className="space-y-6"
-              />
-            </FormProvider>
-          </Card>
-        </MobileContainer>
-      </main>
-    </PageTransition>
-  )
-}
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Button,
+  Card,
+  MobileContainer,
+  PageTransition
+} from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { useRouter } from 'next/navigation'
+import {
+  User,
+  Brain,
+  Users,
+  Target,
+  CreditCard,
+  CheckCircle,
+  ArrowLeft,
+  ArrowRight
+} from 'lucide-react'
+import Link from 'next/link'
+
+const STEPS = ['profile', 'ai-preferences', 'team-setup', 'subscription', 'completion'] as const
+
+export default function OnboardingPage() {
+  const { user } = useAuth()
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(0)
+  const [formData, setFormData] = useState<Record<string, string>>({})
+
+  const updateField = (name: string, value: string) => {
+    setFormData(prev => ({ ...prev, [name]: value }))
+  }
+
+  const handleNext = () => {
+    if (currentStep < STEPS.length - 1) {
+      setCurrentStep(prev => prev + 1)
+    }
+  }
+
+  const handleBack = () => {
+    if (currentStep > 0) {
+      setCurrentStep(prev => prev - 1)
+    }
+  }
+
+  const handleComplete = () => {
+    console.log('Onboarding completed:', formData)
+    router.push('/dashboard')
+  }
+
+  if (!user) {
+    router.push('/login')
+    return null
+  }
+
+  const stepIcons = [User, Brain, Users, CreditCard, CheckCircle]
+  const StepIcon = stepIcons[currentStep]
+
+  return (
+    <PageTransition type="slide" direction="up" duration={300}>
+      <main className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5">
+        <MobileContainer className="py-8">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-4">
+              <Link href="/" className="p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:scale-105 transition-transform">
+                <ArrowLeft className="w-5 h-5" />
+              </Link>
+              <div>
+                <h1 className="text-2xl font-bold">Welcome to {'{{projectName}}'}</h1>
+                <p className="text-gray-600 dark:text-gray-300">Let&apos;s get you set up</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Progress Bar */}
+          <div className="flex items-center gap-2 mb-8 max-w-4xl mx-auto">
+            {STEPS.map((step, index) => (
+              <div key={step} className="flex-1 flex items-center">
+                <div className={`h-2 flex-1 rounded-full ${index <= currentStep ? 'bg-primary' : 'bg-gray-200 dark:bg-gray-700'}`} />
+              </div>
+            ))}
+          </div>
+
+          {/* Form Steps */}
+          <Card className="max-w-4xl mx-auto p-8">
+            <div className="flex items-center gap-3 mb-6">
+              <StepIcon className="w-6 h-6 text-primary" />
+              <div>
+                <h2 className="text-xl font-semibold">
+                  {currentStep === 0 && 'Personal Information'}
+                  {currentStep === 1 && 'AI Preferences'}
+                  {currentStep === 2 && 'Team Setup'}
+                  {currentStep === 3 && 'Choose Your Plan'}
+                  {currentStep === 4 && 'All Set!'}
+                </h2>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {currentStep === 0 && 'Tell us about yourself'}
+                  {currentStep === 1 && 'Customize your AI experience'}
+                  {currentStep === 2 && 'Set up your team and collaboration'}
+                  {currentStep === 3 && 'Select a plan that fits your needs'}
+                  {currentStep === 4 && 'Your account is ready to go'}
+                </p>
+              </div>
+            </div>
+
+            {/* Step 1: Profile */}
+            {currentStep === 0 && (
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1">Full Name</label>
+                  <input
+                    type="text"
+                    value={formData.fullName || ''}
+                    onChange={(e) => updateField('fullName', e.target.value)}
+                    placeholder="Enter your full name"
+                    className="w-full p-3 border rounded-lg bg-background"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Company</label>
+                  <input
+                    type="text"
+                    value={formData.company || ''}
+                    onChange={(e) => updateField('company', e.target.value)}
+                    placeholder="Enter your company name"
+                    className="w-full p-3 border rounded-lg bg-background"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Role</label>
+                  <select
+                    value={formData.role || ''}
+                    onChange={(e) => updateField('role', e.target.value)}
+                    className="w-full p-3 border rounded-lg bg-background"
+                  >
+                    <option value="">Select your role</option>
+                    <option value="developer">Developer</option>
+                    <option value="designer">Designer</option>
+                    <option value="product-manager">Product Manager</option>
+                    <option value="entrepreneur">Entrepreneur</option>
+                    <option value="content-creator">Content Creator</option>
+                    <option value="student">Student</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Industry</label>
+                  <select
+                    value={formData.industry || ''}
+                    onChange={(e) => updateField('industry', e.target.value)}
+                    className="w-full p-3 border rounded-lg bg-background"
+                  >
+                    <option value="">Select your industry</option>
+                    <option value="technology">Technology</option>
+                    <option value="healthcare">Healthcare</option>
+                    <option value="finance">Finance</option>
+                    <option value="education">Education</option>
+                    <option value="media">Media &amp; Entertainment</option>
+                    <option value="retail">Retail</option>
+                    <option value="manufacturing">Manufacturing</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+              </div>
+            )}
+
+            {/* Step 2: AI Preferences */}
+            {currentStep === 1 && (
+              <div className="space-y-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">What do you plan to use AI for?</label>
+                  <p className="text-xs text-gray-500 mb-2">Select all that apply</p>
+                  <div className="grid grid-cols-2 gap-2">
+                    {['Content Creation', 'Code Generation', 'Data Analysis', 'Customer Support', 'Marketing & SEO', 'Research & Analysis', 'Workflow Automation', 'Creative Projects'].map(goal => (
+                      <label key={goal} className="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-accent/50">
+                        <input type="checkbox" className="rounded" />
+                        <span className="text-sm">{goal}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Creativity Level</label>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={formData.creativityLevel || '50'}
+                    onChange={(e) => updateField('creativityLevel', e.target.value)}
+                    className="w-full"
+                  />
+                  <p className="text-xs text-gray-500 mt-1">Lower values are more conservative, higher values are more creative</p>
+                </div>
+              </div>
+            )}
+
+            {/* Step 3: Team Setup */}
+            {currentStep === 2 && (
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1">Team Size</label>
+                  <select
+                    value={formData.teamSize || ''}
+                    onChange={(e) => updateField('teamSize', e.target.value)}
+                    className="w-full p-3 border rounded-lg bg-background"
+                  >
+                    <option value="">Select your team size</option>
+                    <option value="solo">Just me</option>
+                    <option value="small">2-5 people</option>
+                    <option value="medium">6-20 people</option>
+                    <option value="large">21-100 people</option>
+                    <option value="enterprise">100+ people</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Invite Team Members</label>
+                  <textarea
+                    value={formData.inviteMembers || ''}
+                    onChange={(e) => updateField('inviteMembers', e.target.value)}
+                    placeholder="Enter email addresses, one per line"
+                    rows={4}
+                    className="w-full p-3 border rounded-lg bg-background"
+                  />
+                  <p className="text-xs text-gray-500 mt-1">Invite your team members to collaborate (optional)</p>
+                </div>
+              </div>
+            )}
+
+            {/* Step 4: Subscription */}
+            {currentStep === 3 && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  {[
+                    { id: 'starter', name: 'Starter Plan', price: '$9/month', features: ['1,000 AI requests/month', 'Basic AI models', 'Email support', '5GB storage'] },
+                    { id: 'pro', name: 'Pro Plan', price: '$29/month', features: ['10,000 AI requests/month', 'Advanced AI models', 'Priority support', '50GB storage', 'Team collaboration', 'API access'], recommended: true },
+                    { id: 'enterprise', name: 'Enterprise Plan', price: 'Custom pricing', features: ['Unlimited AI requests', 'All AI models', 'Dedicated support', 'Unlimited storage', 'Advanced security', 'Custom integrations'] },
+                  ].map(plan => (
+                    <label
+                      key={plan.id}
+                      className={`relative block p-4 border-2 rounded-xl cursor-pointer hover:border-primary transition-colors ${formData.selectedPlan === plan.id ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'}`}
+                    >
+                      <input
+                        type="radio"
+                        name="selectedPlan"
+                        value={plan.id}
+                        checked={formData.selectedPlan === plan.id}
+                        onChange={(e) => updateField('selectedPlan', e.target.value)}
+                        className="sr-only"
+                      />
+                      {plan.recommended && (
+                        <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">Recommended</span>
+                      )}
+                      <h3 className="font-semibold">{plan.name}</h3>
+                      <p className="text-2xl font-bold my-2">{plan.price}</p>
+                      <ul className="text-sm space-y-1">
+                        {plan.features.map(f => <li key={f} className="flex items-center gap-1"><CheckCircle className="w-3 h-3 text-green-500" />{f}</li>)}
+                      </ul>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Step 5: Completion */}
+            {currentStep === 4 && (
+              <div className="text-center space-y-6">
+                <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto">
+                  <CheckCircle className="w-8 h-8 text-white" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold mb-2">Welcome to {'{{projectName}}'}!</h3>
+                  <p className="text-gray-600 dark:text-gray-300">
+                    Your account has been set up successfully. You&apos;re ready to start using AI to supercharge your productivity.
+                  </p>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                  <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20">
+                    <Brain className="w-6 h-6 text-blue-500 mx-auto mb-2" />
+                    <div className="font-medium">AI Tools Ready</div>
+                    <div className="text-gray-600 dark:text-gray-400">Access all AI capabilities</div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20">
+                    <Users className="w-6 h-6 text-green-500 mx-auto mb-2" />
+                    <div className="font-medium">Team Configured</div>
+                    <div className="text-gray-600 dark:text-gray-400">Collaboration features enabled</div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-purple-50 dark:bg-purple-900/20">
+                    <Target className="w-6 h-6 text-purple-500 mx-auto mb-2" />
+                    <div className="font-medium">Goals Set</div>
+                    <div className="text-gray-600 dark:text-gray-400">Personalized experience ready</div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Navigation Buttons */}
+            <div className="flex justify-between mt-8">
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={currentStep === 0}
+              >
+                Back
+              </Button>
+              {currentStep < STEPS.length - 1 ? (
+                <Button onClick={handleNext}>
+                  Continue
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              ) : (
+                <Button onClick={handleComplete}>
+                  Complete Setup
+                  <CheckCircle className="w-4 h-4 ml-2" />
+                </Button>
+              )}
+            </div>
+          </Card>
+        </MobileContainer>
+      </main>
+    </PageTransition>
+  )
+}