@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -4,10 +4,9 @@ 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,
@@ -24,7 +23,7 @@ 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>>({})
@@ -50,7 +49,8 @@ export default function OnboardingPage() {
     router.push('/dashboard')
   }
 
-  if (!user) {
+  // TODO: Add auth check
+  if (false) {
     router.push('/login')
     return null
   }
@@ -59,9 +59,9 @@ export default function OnboardingPage() {
   const StepIcon = stepIcons[currentStep]
 
   return (
-    <PageTransition type="slide" direction="up" duration={300}>
+    <div>
       <main className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5">
-        <MobileContainer className="py-8">
+        <div className="max-w-4xl mx-auto px-4">
           {/* Header */}
           <div className="flex items-center justify-between mb-8">
             <div className="flex items-center gap-4">
@@ -70,7 +70,7 @@ export default function OnboardingPage() {
               </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>
+                <p className="text-muted-foreground">Let&apos;s get you set up</p>
               </div>
             </div>
           </div>
@@ -79,7 +79,7 @@ export default function OnboardingPage() {
           <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 className={`h-2 flex-1 rounded-full ${index <= currentStep ? 'bg-primary' : 'bg-muted'}`} />
               </div>
             ))}
           </div>
@@ -96,7 +96,7 @@ export default function OnboardingPage() {
                   {currentStep === 3 && 'Choose Your Plan'}
                   {currentStep === 4 && 'All Set!'}
                 </h2>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
+                <p className="text-sm text-muted-foreground">
                   {currentStep === 0 && 'Tell us about yourself'}
                   {currentStep === 1 && 'Customize your AI experience'}
                   {currentStep === 2 && 'Set up your team and collaboration'}
@@ -172,7 +172,7 @@ export default function OnboardingPage() {
               <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>
+                  <p className="text-xs text-muted-foreground 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">
@@ -192,7 +192,7 @@ export default function OnboardingPage() {
                     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>
+                  <p className="text-xs text-muted-foreground mt-1">Lower values are more conservative, higher values are more creative</p>
                 </div>
               </div>
             )}
@@ -224,7 +224,7 @@ export default function OnboardingPage() {
                     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>
+                  <p className="text-xs text-muted-foreground mt-1">Invite your team members to collaborate (optional)</p>
                 </div>
               </div>
             )}
@@ -240,7 +240,7 @@ export default function OnboardingPage() {
                   ].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'}`}
+                      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-border'}`}
                     >
                       <input
                         type="radio"
@@ -272,7 +272,7 @@ export default function OnboardingPage() {
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-2">Welcome to {'{{projectName}}'}!</h3>
-                  <p className="text-gray-600 dark:text-gray-300">
+                  <p className="text-muted-foreground">
                     Your account has been set up successfully. You&apos;re ready to start using AI to supercharge your productivity.
                   </p>
                 </div>
@@ -280,17 +280,17 @@ export default function OnboardingPage() {
                   <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 className="text-muted-foreground">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 className="text-muted-foreground">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 className="text-muted-foreground">Personalized experience ready</div>
                   </div>
                 </div>
               </div>
@@ -318,8 +318,8 @@ export default function OnboardingPage() {
               )}
             </div>
           </Card>
-        </MobileContainer>
+        </div>
       </main>
-    </PageTransition>
+    </div>
   )
 }