@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -6,14 +6,14 @@ import {
   Card,
   Input,
   Label,
-  MobileContainer,
-  PageTransition,
+  
+  
   Tabs,
   TabsList,
   TabsTrigger,
   TabsContent
 } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
+
 import { useRouter } from 'next/navigation'
 import {
   User,
@@ -28,12 +28,13 @@ import {
 import Link from 'next/link'
 
 export default function SettingsPage() {
-  const { user } = useAuth()
+  
   const router = useRouter()
   const [activeTab, setActiveTab] = useState('profile')
   const [isLoading, setIsLoading] = useState(false)
 
-  if (!user) {
+  // TODO: Add auth check
+  if (false) {
     router.push('/login')
     return null
   }
@@ -48,9 +49,9 @@ export default function SettingsPage() {
   }
 
   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">
@@ -59,7 +60,7 @@ export default function SettingsPage() {
               </Link>
               <div>
                 <h1 className="text-2xl font-bold">Settings</h1>
-                <p className="text-gray-600 dark:text-gray-300">Manage your account and preferences</p>
+                <p className="text-muted-foreground">Manage your account and preferences</p>
               </div>
             </div>
           </div>
@@ -98,7 +99,7 @@ export default function SettingsPage() {
                 <form onSubmit={(e) => handleSaveSettings(e, 'profile')} className="space-y-6">
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Personal Information</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Update your basic profile information</p>
+                    <p className="text-sm text-muted-foreground mb-4">Update your basic profile information</p>
                     <div className="space-y-4">
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
@@ -112,8 +113,8 @@ export default function SettingsPage() {
                       </div>
                       <div>
                         <Label htmlFor="email">Email Address</Label>
-                        <Input id="email" name="email" type="email" placeholder="Enter your email" defaultValue={user.email || ''} required />
-                        <p className="text-xs text-gray-500 mt-1">Changing your email will require verification</p>
+                        <Input id="email" name="email" type="email" placeholder="Enter your email" defaultValue="" required />
+                        <p className="text-xs text-muted-foreground mt-1">Changing your email will require verification</p>
                       </div>
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
@@ -134,7 +135,7 @@ export default function SettingsPage() {
 
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Contact Information</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">How we can reach you</p>
+                    <p className="text-sm text-muted-foreground mb-4">How we can reach you</p>
                     <div className="space-y-4">
                       <div>
                         <Label htmlFor="phone">Phone Number</Label>
@@ -170,7 +171,7 @@ export default function SettingsPage() {
                 <form onSubmit={(e) => handleSaveSettings(e, 'security')} className="space-y-6">
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Password &amp; Authentication</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Manage your login credentials</p>
+                    <p className="text-sm text-muted-foreground mb-4">Manage your login credentials</p>
                     <div className="space-y-4">
                       <div>
                         <Label htmlFor="currentPassword">Current Password</Label>
@@ -179,7 +180,7 @@ export default function SettingsPage() {
                       <div>
                         <Label htmlFor="newPassword">New Password</Label>
                         <Input id="newPassword" name="newPassword" type="password" placeholder="Enter a new password" />
-                        <p className="text-xs text-gray-500 mt-1">Password must be at least 8 characters with uppercase, lowercase, and number</p>
+                        <p className="text-xs text-muted-foreground mt-1">Password must be at least 8 characters with uppercase, lowercase, and number</p>
                       </div>
                       <div>
                         <Label htmlFor="confirmNewPassword">Confirm New Password</Label>
@@ -190,7 +191,7 @@ export default function SettingsPage() {
 
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Two-Factor Authentication</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Add an extra layer of security</p>
+                    <p className="text-sm text-muted-foreground mb-4">Add an extra layer of security</p>
                     <div className="space-y-3">
                       <label className="flex items-center gap-2">
                         <input type="checkbox" name="enableTwoFactor" className="rounded" />
@@ -215,12 +216,12 @@ export default function SettingsPage() {
 
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Login Sessions</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Manage your active sessions</p>
+                    <p className="text-sm text-muted-foreground mb-4">Manage your active sessions</p>
                     <div className="p-4 border rounded-lg mb-4">
                       <div className="flex justify-between items-start">
                         <div>
                           <div className="font-medium">Current Session</div>
-                          <div className="text-sm text-gray-600 dark:text-gray-300">
+                          <div className="text-sm text-muted-foreground">
                             Chrome on Mac &bull; Active now
                           </div>
                         </div>
@@ -246,7 +247,7 @@ export default function SettingsPage() {
                 <form onSubmit={(e) => handleSaveSettings(e, 'ai')} className="space-y-6">
                   <div>
                     <h3 className="text-lg font-semibold mb-1">AI Model Preferences</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Configure your preferred AI models and behavior</p>
+                    <p className="text-sm text-muted-foreground mb-4">Configure your preferred AI models and behavior</p>
                     <div className="space-y-4">
                       <div>
                         <Label htmlFor="defaultTextModel">Default Text Model</Label>
@@ -260,7 +261,7 @@ export default function SettingsPage() {
                       <div>
                         <Label htmlFor="creativityLevel">Creativity Level</Label>
                         <input type="range" id="creativityLevel" name="creativityLevel" min={0} max={100} defaultValue={70} 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>
                         <Label htmlFor="responseLength">Default Response Length</Label>
@@ -276,12 +277,12 @@ export default function SettingsPage() {
 
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Usage &amp; Limits</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Manage your AI usage preferences</p>
+                    <p className="text-sm text-muted-foreground mb-4">Manage your AI usage preferences</p>
                     <div className="space-y-4">
                       <div>
                         <Label htmlFor="monthlyLimit">Monthly Request Limit</Label>
                         <Input id="monthlyLimit" name="monthlyLimit" type="number" min={0} defaultValue={0} placeholder="Enter limit (0 for unlimited)" />
-                        <p className="text-xs text-gray-500 mt-1">Set a limit to control your usage and costs</p>
+                        <p className="text-xs text-muted-foreground mt-1">Set a limit to control your usage and costs</p>
                       </div>
                       <label className="flex items-center gap-2">
                         <input type="checkbox" name="lowUsageAlerts" defaultChecked className="rounded" />
@@ -304,7 +305,7 @@ export default function SettingsPage() {
                 <form onSubmit={(e) => handleSaveSettings(e, 'notifications')} className="space-y-6">
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Email Notifications</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Choose what emails you want to receive</p>
+                    <p className="text-sm text-muted-foreground mb-4">Choose what emails you want to receive</p>
                     <div className="space-y-3">
                       {[
                         { value: 'account', label: 'Account & Security Updates', checked: true },
@@ -332,7 +333,7 @@ export default function SettingsPage() {
 
                   <div>
                     <h3 className="text-lg font-semibold mb-1">Push Notifications</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Browser and mobile push notifications</p>
+                    <p className="text-sm text-muted-foreground mb-4">Browser and mobile push notifications</p>
                     <div className="space-y-3">
                       <label className="flex items-center gap-2">
                         <input type="checkbox" name="pushNotifications" defaultChecked className="rounded" />
@@ -365,7 +366,7 @@ export default function SettingsPage() {
 
               {/* Appearance placeholder */}
               <TabsContent value="appearance" className="p-6">
-                <div className="text-center py-12 text-gray-500">
+                <div className="text-center py-12 text-muted-foreground">
                   <Palette className="w-12 h-12 mx-auto mb-4 opacity-50" />
                   <h3 className="text-lg font-semibold mb-2">Appearance Settings</h3>
                   <p>Theme and display preferences coming soon.</p>
@@ -374,7 +375,7 @@ export default function SettingsPage() {
 
               {/* Team placeholder */}
               <TabsContent value="team" className="p-6">
-                <div className="text-center py-12 text-gray-500">
+                <div className="text-center py-12 text-muted-foreground">
                   <Users className="w-12 h-12 mx-auto mb-4 opacity-50" />
                   <h3 className="text-lg font-semibold mb-2">Team Settings</h3>
                   <p>Team management and collaboration settings coming soon.</p>
@@ -382,8 +383,8 @@ export default function SettingsPage() {
               </TabsContent>
             </Tabs>
           </Card>
-        </MobileContainer>
+        </div>
       </main>
-    </PageTransition>
+    </div>
   )
 }

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

@@ -1,14 +1,7 @@
 'use client'
 
-import { 
-  Card, 
-  Button,
-  PageTransition,
-  MobileContainer,
-  ResponsiveGrid,
-  useAnimationTokens,
-  useGlassmorphism
-} from '@digilogiclabs/saas-factory-ui'
+
+// UI components from saas-factory-ui available: Button, Card, Input, Label, etc.
 import { 
   ArrowLeft,
   CheckCircle,
@@ -51,9 +44,6 @@ interface ServiceConfig {
 }
 
 export default function SetupPage() {
-  const animations = useAnimationTokens()
-  const glass = useGlassmorphism()
-  
   // Static glassmorphism classes to avoid template literal corruption
   const glassCard = "bg-white/10 backdrop-blur-lg border border-white/20"
   const glassCardRounded = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl"
@@ -141,7 +131,7 @@ CREATE POLICY "Users can view own conversations" ON ai_conversations FOR ALL USI
     {
       name: "Stripe (Payments)",
       status: 'required',
-      icon: <CreditCard className="w-4 h-4" />,
+      icon: CreditCard,
       description: "Payment processing for subscriptions, one-time payments, and billing management.",
       setupSteps: [
         {
@@ -168,7 +158,6 @@ const payload = await request.text()
 
 try {
   const event = stripe.webhooks.constructEvent(payload, sig, endpointSecret)
-  
   switch (event.type) {
     case 'customer.subscription.created':
     case 'customer.subscription.updated':
@@ -209,7 +198,7 @@ try {
     {
       name: "OpenAI (AI Provider)",
       status: 'required',
-      icon: <Brain className="w-4 h-4" />,
+      icon: Brain,
       description: "Primary AI provider for text generation, chat, and other AI capabilities.",
       setupSteps: [
         {
@@ -330,7 +319,7 @@ const response = await openai.chat.completions.create({
       case 'required': return 'text-red-400'
       case 'optional': return 'text-yellow-400'
       case 'configured': return 'text-green-400'
-      default: return 'text-gray-400'
+      default: return 'text-muted-foreground'
     }
   }
 
@@ -344,20 +333,20 @@ const response = await openai.chat.completions.create({
   }
 
   return (
-    <PageTransition type="slide" direction="up" duration={300}>
+    <div>
       <main className={`min-h-screen ${glassBackground} relative overflow-hidden`}>
         <div className="absolute inset-0 bg-gradient-to-tr from-purple-500/10 to-blue-500/10 opacity-30" />
         <div className="relative z-10">
-          <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">
-                <Link href="/" className={`${glassCard} p-2 rounded-xl ${animations.hover.scale}`}>
+                <Link href="/" className={`${glassCard} p-2 rounded-xl hover:scale-[1.02] transition-transform`}>
                   <ArrowLeft className="w-5 h-5" />
                 </Link>
                 <div>
                   <h1 className="text-2xl font-bold">Setup Guide</h1>
-                  <p className="text-gray-600 dark:text-gray-300">{templateName}</p>
+                  <p className="text-muted-foreground">{templateName}</p>
                 </div>
               </div>
               <div className={`${glassCard} px-4 py-2 rounded-xl`}>
@@ -373,7 +362,7 @@ const response = await openai.chat.completions.create({
                 </div>
                 <div>
                   <h2 className="text-xl font-semibold">{templateName}</h2>
-                  <p className="text-gray-600 dark:text-gray-300">{templateDescription}</p>
+                  <p className="text-muted-foreground">{templateDescription}</p>
                 </div>
               </div>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
@@ -421,7 +410,7 @@ const response = await openai.chat.completions.create({
                 </div>
                 <div className="flex items-center gap-3">
                   <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>5. Run <code className="px-2 py-1 bg-gray-800 rounded text-green-400">npm run dev</code> to start developing</span>
+                  <span>5. Run <code className="px-2 py-1 bg-card rounded text-green-400">npm run dev</code> to start developing</span>
                 </div>
               </div>
             </div>
@@ -429,13 +418,13 @@ const response = await openai.chat.completions.create({
             {/* Environment Variables */}
             <div className={`${glassCardRounded} p-6 mb-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                <Key className="w-5 h-5 text-blue-400" />
+                <Key className="w-5 h-5 text-primary" />
                 Environment Variables
               </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
-                Copy these to your <code className="px-2 py-1 bg-gray-800 rounded">.env.local</code> file:
+              <p className="text-sm text-muted-foreground mb-4">
+                Copy these to your <code className="px-2 py-1 bg-card rounded">.env.local</code> file:
               </p>
-              <div className="bg-gray-900 rounded-xl p-4 overflow-x-auto">
+              <div className="bg-background rounded-xl p-4 overflow-x-auto">
                 <pre className="text-sm text-green-400">
 {allEnvVars.map(envVar => (
 `${envVar.name}=${envVar.example}${envVar.required ? ' # Required' : ' # Optional'}`
@@ -446,7 +435,7 @@ const response = await openai.chat.completions.create({
                     allEnvVars.map(envVar => `${envVar.name}=${envVar.example}`).join('\n'),
                     'all-env-vars'
                   )}
-                  className="mt-3 flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors"
+                  className="mt-3 flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
                 >
                   <Copy className="w-4 h-4" />
                   {copiedVar === 'all-env-vars' ? 'Copied!' : 'Copy all environment variables'}
@@ -457,7 +446,7 @@ const response = await openai.chat.completions.create({
             {/* Services Configuration */}
             <div className="space-y-6">
               <h3 className="text-lg font-semibold flex items-center gap-2">
-                <Settings className="w-5 h-5 text-gray-400" />
+                <Settings className="w-5 h-5 text-muted-foreground" />
                 Service Configuration
               </h3>
               
@@ -469,7 +458,7 @@ const response = await openai.chat.completions.create({
                   <div key={service.name} className={`${glassCardRounded} p-6`}>
                     <div className="flex items-start justify-between mb-4">
                       <div className="flex items-center gap-3">
-                        <div className={`w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center`}>
+                        <div className={`w-10 h-10 rounded-xl bg-card flex items-center justify-center`}>
                           <ServiceIcon className="w-5 h-5 text-white" />
                         </div>
                         <div>
@@ -477,7 +466,7 @@ const response = await openai.chat.completions.create({
                             {service.name}
                             <StatusIcon className={`w-4 h-4 ${getStatusColor(service.status)}`} />
                           </h4>
-                          <p className="text-sm text-gray-600 dark:text-gray-300">{service.description}</p>
+                          <p className="text-sm text-muted-foreground">{service.description}</p>
                         </div>
                       </div>
                       <span className={`px-3 py-1 rounded-full text-xs font-medium ${
@@ -495,28 +484,28 @@ const response = await openai.chat.completions.create({
                       <div className="space-y-3">
                         {service.setupSteps.map((step, stepIndex) => (
                           <div key={stepIndex} className="flex gap-3">
-                            <div className="w-6 h-6 rounded-full bg-blue-500 text-white text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
                               {stepIndex + 1}
                             </div>
                             <div className="flex-1">
                               <h6 className="font-medium">{step.title}</h6>
-                              <p className="text-sm text-gray-600 dark:text-gray-300">{step.description}</p>
+                              <p className="text-sm text-muted-foreground">{step.description}</p>
                               {step.link && (
                                 <a 
                                   href={step.link}
                                   target="_blank"
                                   rel="noopener noreferrer"
-                                  className="inline-flex items-center gap-1 text-sm text-blue-400 hover:text-blue-300 mt-1"
+                                  className="inline-flex items-center gap-1 text-sm text-primary hover:text-primary/80 mt-1"
                                 >
                                   Open Dashboard <ExternalLink className="w-3 h-3" />
                                 </a>
                               )}
                               {step.code && (
                                 <details className="mt-2">
-                                  <summary className="text-sm text-blue-400 cursor-pointer hover:text-blue-300">
+                                  <summary className="text-sm text-primary cursor-pointer hover:text-primary/80">
                                     Show code example
                                   </summary>
-                                  <pre className="bg-gray-900 rounded-lg p-3 mt-2 text-xs overflow-x-auto">
+                                  <pre className="bg-background rounded-lg p-3 mt-2 text-xs overflow-x-auto">
                                     <code className="text-green-400">{step.code}</code>
                                   </pre>
                                 </details>
@@ -532,25 +521,25 @@ const response = await openai.chat.completions.create({
                       <h5 className="font-semibold mb-3">Environment Variables:</h5>
                       <div className="space-y-2">
                         {service.envVars.map((envVar, envIndex) => (
-                          <div key={envIndex} className="bg-gray-800/50 rounded-lg p-3">
+                          <div key={envIndex} className="bg-card/50 rounded-lg p-3">
                             <div className="flex items-center justify-between mb-1">
-                              <code className="text-blue-400 font-mono text-sm">{envVar.name}</code>
+                              <code className="text-primary font-mono text-sm">{envVar.name}</code>
                               <div className="flex items-center gap-2">
                                 <span className={`px-2 py-1 rounded text-xs ${
-                                  envVar.required ? 'bg-red-500/20 text-red-400' : 'bg-gray-500/20 text-gray-400'
+                                  envVar.required ? 'bg-red-500/20 text-red-400' : 'bg-muted-foreground/20 text-muted-foreground'
                                 }`}>
                                   {envVar.required ? 'Required' : 'Optional'}
                                 </span>
                                 <button
                                   onClick={() => copyToClipboard(`${envVar.name}=${envVar.example}`, envVar.name)}
-                                  className="p-1 hover:bg-gray-700 rounded transition-colors"
+                                  className="p-1 hover:bg-muted rounded transition-colors"
                                 >
                                   <Copy className="w-3 h-3" />
                                 </button>
                               </div>
                             </div>
-                            <p className="text-xs text-gray-400 mb-2">{envVar.description}</p>
-                            <code className="text-xs text-gray-500 font-mono">{envVar.example}</code>
+                            <p className="text-xs text-muted-foreground mb-2">{envVar.description}</p>
+                            <code className="text-xs text-muted-foreground font-mono">{envVar.example}</code>
                             {copiedVar === envVar.name && (
                               <span className="text-xs text-green-400 ml-2">Copied!</span>
                             )}
@@ -569,25 +558,25 @@ const response = await openai.chat.completions.create({
                 <Zap className="w-5 h-5 text-yellow-400" />
                 Next Steps
               </h3>
-              <p className="text-gray-600 dark:text-gray-300 mb-6">
+              <p className="text-muted-foreground mb-6">
                 Once you've configured your services, set up your development workflow and deploy your application.
               </p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link 
                   href="/dev-setup"
-                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl hover:scale-[1.02] transition-transform block`}
                 >
                   <Code2 className="w-8 h-8 text-purple-400 mb-2" />
                   <h4 className="font-medium">Development & Deployment</h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">Claude AI setup and hosting guides</p>
+                  <p className="text-sm text-muted-foreground">Claude AI setup and hosting guides</p>
                 </Link>
                 <Link 
                   href="/"
-                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl hover:scale-[1.02] transition-transform block`}
                 >
-                  <Zap className="w-8 h-8 text-blue-400 mb-2" />
+                  <Zap className="w-8 h-8 text-primary mb-2" />
                   <h4 className="font-medium">Start Building</h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">Go to your application and start coding</p>
+                  <p className="text-sm text-muted-foreground">Go to your application and start coding</p>
                 </Link>
               </div>
             </div>
@@ -601,45 +590,41 @@ const response = await openai.chat.completions.create({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <a 
                   href="https://docs.digilogiclabs.com" 
-                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl hover:scale-[1.02] transition-transform block`}
                 >
-                  <FileText className="w-8 h-8 text-blue-400 mb-2" />
+                  <FileText className="w-8 h-8 text-primary mb-2" />
                   <h4 className="font-medium">Documentation</h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">Complete guides and API reference</p>
+                  <p className="text-sm text-muted-foreground">Complete guides and API reference</p>
                 </a>
                 <a 
                   href="https://github.com/digilogiclabs/examples" 
-                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl hover:scale-[1.02] transition-transform block`}
                 >
                   <Code2 className="w-8 h-8 text-purple-400 mb-2" />
                   <h4 className="font-medium">Examples</h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">Sample projects and code snippets</p>
+                  <p className="text-sm text-muted-foreground">Sample projects and code snippets</p>
                 </a>
               </div>
             </div>
 
             {/* Support */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8 text-center`}>
+            <div className={`rounded-xl border border-border bg-card rounded-2xl p-6 mt-8 text-center`}>
               <h3 className="text-lg font-semibold mb-4">Need Help?</h3>
-              <p className="text-gray-600 dark:text-gray-300 mb-4">
+              <p className="text-muted-foreground mb-4">
                 Our community and support team are here to help you get started.
               </p>
               <div className="flex justify-center gap-4">
-                <Button variant="outline" size="sm" asChild>
-                  <a href="https://discord.gg/digilogiclabs" target="_blank" rel="noopener noreferrer">
-                    Join Discord
-                  </a>
-                </Button>
-                <Button size="sm" asChild>
-                  <a href="https://docs.digilogiclabs.com/support" target="_blank" rel="noopener noreferrer">
-                    Get Support
-                  </a>
-                </Button>
+                <a href="https://discord.gg/digilogiclabs" target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent transition-colors">
+                  Join Discord
+                </a>
+                <a href="https://docs.digilogiclabs.com/support" target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+                  Get Support
+                </a>
               </div>
             </div>
-          </MobileContainer>
+          </div>
         </div>
       </main>
-    </PageTransition>
+    </div>
   )
 }

package/dist/templates/web/ui-auth-payments-ai/template/src/components/client/auth-status.tsx

@@ -1,52 +1,37 @@
-'use client'
-
-import { Button } from '@digilogiclabs/saas-factory-ui'
-import { LogOut, User } from 'lucide-react'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import Link from 'next/link'
-
-export function AuthStatus() {
-  const { user, signOut, loading } = useAuth()
-
-  const handleSignOut = async () => {
-    try {
-      await signOut()
-    } catch (err) {
-      console.error('Sign out error:', err)
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className="text-sm text-gray-600 dark:text-gray-300">
-        Loading...
-      </div>
-    )
-  }
-
-  if (user) {
-    return (
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
-          <User className="w-4 h-4" />
-          Welcome, {user.email}
-        </div>
-        <Button variant="outline" size="sm" onClick={handleSignOut}>
-          <LogOut className="w-4 h-4 mr-2" />
-          Sign Out
-        </Button>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex gap-2">
-      <Link href="/login">
-        <Button variant="outline" size="sm">Sign In</Button>
-      </Link>
-      <Link href="/signup">
-        <Button size="sm">Sign Up</Button>
-      </Link>
-    </div>
-  )
-}
+'use client'
+
+import { Button } from '@digilogiclabs/saas-factory-ui'
+import { LogOut, User } from 'lucide-react'
+import Link from 'next/link'
+
+export function AuthStatus() {
+  // TODO: Replace with your auth hook or server session check
+  const user = null as { email?: string } | null
+
+  if (!user) {
+    return (
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm">
+          <Link href="/login">Sign In</Link>
+        </Button>
+        <Button size="sm">
+          <Link href="/signup">Sign Up</Link>
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <User className="h-4 w-4" />
+        <span>{user.email}</span>
+      </div>
+      <Button variant="ghost" size="sm">
+        <Link href="/api/auth/signout">
+          <LogOut className="h-4 w-4" />
+        </Link>
+      </Button>
+    </div>
+  )
+}