@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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

@@ -36,10 +36,10 @@ function StatsCard({ title, value, icon: Icon, href }: {
     <Card className="p-6 hover:shadow-lg transition-shadow">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
-          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <p className="text-2xl font-bold text-foreground">{value}</p>
         </div>
-        <Icon className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+        <Icon className="h-8 w-8 text-primary" />
       </div>
     </Card>
   )
@@ -86,8 +86,8 @@ function UserStatsSkeleton() {
       {[...Array(4)].map((_, i) => (
         <Card key={i} className="p-6">
           <div className="animate-pulse">
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
-            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+            <div className="h-4 bg-muted rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-muted rounded w-1/3"></div>
           </div>
         </Card>
       ))}
@@ -101,14 +101,14 @@ export default async function DashboardPage() {
 
   return (
     <DashboardLayout>
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen bg-muted">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}
         <div className="mb-8" data-tour="overview">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+          <h1 className="text-3xl font-bold text-foreground">
             Welcome back, {user.name || user.email}!
           </h1>
-          <p className="text-gray-600 dark:text-gray-300 mt-2">
+          <p className="text-muted-foreground mt-2">
             Here's what's happening with your account today.
           </p>
         </div>
@@ -124,10 +124,10 @@ export default async function DashboardPage() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" data-tour="actions">
           <Card className="p-6">
             <div className="flex items-center mb-4">
-              <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Profile</h3>
+              <User className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Profile</h3>
             </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               Update your personal information and preferences
             </p>
             <Link href="/profile">
@@ -137,10 +137,10 @@ export default async function DashboardPage() {
 
           <Card className="p-6">
             <div className="flex items-center mb-4">
-              <Settings className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Settings</h3>
+              <Settings className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Settings</h3>
             </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               Configure your account settings and security options
             </p>
             <Link href="/settings">
@@ -150,10 +150,10 @@ export default async function DashboardPage() {
 
           <Card className="p-6">
             <div className="flex items-center mb-4">
-              <CreditCard className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Billing</h3>
+              <CreditCard className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold text-foreground">Billing</h3>
             </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               View your subscription and payment information
             </p>
             <Link href="/billing">
@@ -164,28 +164,28 @@ export default async function DashboardPage() {
 
         {/* Recent Activity */}
         <Card className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recent Activity</h3>
+          <h3 className="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
           <div className="space-y-4">
-            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between py-3 border-b border-border">
               <div className="flex items-center">
                 <div className="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
-                <span className="text-gray-900 dark:text-white">Account created</span>
+                <span className="text-foreground">Account created</span>
               </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
+              <span className="text-sm text-muted-foreground">2 days ago</span>
             </div>
-            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between py-3 border-b border-border">
               <div className="flex items-center">
-                <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
-                <span className="text-gray-900 dark:text-white">Profile updated</span>
+                <div className="w-2 h-2 bg-primary rounded-full mr-3"></div>
+                <span className="text-foreground">Profile updated</span>
               </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
+              <span className="text-sm text-muted-foreground">1 week ago</span>
             </div>
             <div className="flex items-center justify-between py-3">
               <div className="flex items-center">
                 <div className="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
-                <span className="text-gray-900 dark:text-white">Subscription started</span>
+                <span className="text-foreground">Subscription started</span>
               </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">2 weeks ago</span>
+              <span className="text-sm text-muted-foreground">2 weeks ago</span>
             </div>
           </div>
         </Card>

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

@@ -3,10 +3,6 @@
 import { 
   Card, 
   Button,
-  PageTransition,
-  MobileContainer,
-  useAnimationTokens,
-  useGlassmorphism
 } from '@digilogiclabs/saas-factory-ui'
 import { 
   ArrowLeft,
@@ -46,8 +42,6 @@ interface DeploymentOption {
 }
 
 export default function DevSetupPage() {
-  const animations = useAnimationTokens()
-  const glass = useGlassmorphism()
   const [copiedItem, setCopiedItem] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<'claude' | 'deployment'>('claude')
 
@@ -55,9 +49,9 @@ export default function DevSetupPage() {
   const templateName = "{{ai.enabled ? 'Full-Stack AI Platform' : 'SaaS Platform'}}"
   const hasAuth = true
   const hasPayments = true
-  const hasAI = "{{ai.enabled}}" === "true"
-  const hasAudio = "{{ai.hasAudio}}" === "true"  
-  const hasVideo = "{{ai.hasVideo}}" === "true"
+  const hasAI = String("{{ai.enabled}}") === "true"
+  const hasAudio = String("{{ai.hasAudio}}") === "true"  
+  const hasVideo = String("{{ai.hasVideo}}") === "true"
 
   const copyToClipboard = async (text: string, itemName: string) => {
     await navigator.clipboard.writeText(text)
@@ -76,7 +70,7 @@ export default function DevSetupPage() {
     {
       name: "@digilogiclabs/saas-factory-ui", 
       description: "Modern UI components with glassmorphism and responsive design",
-      key_exports: ["Button", "Card", "MobileContainer", "PageTransition", "ResponsiveGrid"],
+      key_exports: ["Button", "Card", "CardContent", "CardHeader", "CardTitle", "Input", "Label"],
       docs_link: "https://docs.digilogiclabs.com/packages/ui"
     },
     ...(hasPayments ? [{
@@ -201,14 +195,12 @@ ${hasVideo ? '- **video_content**: Generated video files and metadata' : ''}
 
 ### Authentication Flow
 ${hasAuth ? `\`\`\`typescript
-import { useAuth } from '@digilogiclabs/app-sdk'
+
 
 export function ProtectedComponent() {
   const { user, loading } = useAuth()
-  
   if (loading) return <LoadingSpinner />
   if (!user) return <LoginPrompt />
-  
   return <UserContent user={user} />
 }
 \`\`\`` : 'Authentication not configured for this template'}
@@ -218,35 +210,29 @@ export function ProtectedComponent() {
 import { 
   Card, 
   Button, 
-  PageTransition,
-  useGlassmorphism 
 } from '@digilogiclabs/saas-factory-ui'
 
 export function ExampleComponent() {
-  const glass = useGlassmorphism()
-  
   return (
-    <PageTransition type="fade">
-      <Card className={\`\${glass.card} \${glass.border}\`}>
+    <div>
+      <Card className={\`\rounded-xl bg-card \border border-border\`}>
         <Button variant="default">Action</Button>
       </Card>
-    </PageTransition>
+    </div>
   )
 }
 \`\`\`
 
 ${hasPayments ? `### Payment Integration
 \`\`\`typescript
-import { usePayments } from '@digilogiclabs/app-sdk'
+import { usePayments } from '@/hooks/usePayments'
 
 export function CheckoutPage() {
   const { createCheckoutSession, loading } = usePayments()
-  
   const handlePayment = async (priceId: string) => {
     const { url } = await createCheckoutSession({ priceId })
     window.location.href = url
   }
-  
   return <PaymentForm onSubmit={handlePayment} />
 }
 \`\`\`` : ''}
@@ -261,7 +247,6 @@ export function AIDemo() {
     provider: 'openai',
     model: 'gpt-4'
   }
-  
   return (
     <AIProvider config={aiConfig}>
       <AITextGenerator 
@@ -439,35 +424,35 @@ CMD ["npm", "start"]`
   ]
 
   return (
-    <PageTransition type="slide" direction="up" duration={300}>
-      <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
-        <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+    <div>
+      <main className={`min-h-screen bg-background relative overflow-hidden`}>
+        <div className={`absolute inset-0 bg-muted 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="/setup" className={`${glass.card} ${glass.border} p-2 rounded-xl ${animations.hover.scale}`}>
+                <Link href="/setup" className={`rounded-xl border border-border bg-card p-2 rounded-xl hover:scale-[1.02] transition-transform`}>
                   <ArrowLeft className="w-5 h-5" />
                 </Link>
                 <div>
                   <h1 className="text-2xl font-bold">Development & Deployment</h1>
-                  <p className="text-gray-600 dark:text-gray-300">Claude AI setup and hosting guides</p>
+                  <p className="text-muted-foreground">Claude AI setup and hosting guides</p>
                 </div>
               </div>
-              <div className={`${glass.card} ${glass.border} px-4 py-2 rounded-xl`}>
+              <div className={`rounded-xl border border-border bg-card px-4 py-2 rounded-xl`}>
                 <span className="text-sm font-medium">{projectName}</span>
               </div>
             </div>
 
             {/* Tab Navigation */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-1 mb-8 inline-flex`}>
+            <div className={`rounded-xl border border-border bg-card rounded-2xl p-1 mb-8 inline-flex`}>
               <button
                 onClick={() => setActiveTab('claude')}
                 className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
                   activeTab === 'claude'
                     ? 'bg-purple-500 text-white shadow-lg'
-                    : 'text-gray-600 dark:text-gray-300 hover:bg-white/10'
+                    : 'text-muted-foreground hover:bg-white/10'
                 }`}
               >
                 <Bot className="w-4 h-4 inline mr-2" />
@@ -477,8 +462,8 @@ CMD ["npm", "start"]`
                 onClick={() => setActiveTab('deployment')}
                 className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
                   activeTab === 'deployment'
-                    ? 'bg-blue-500 text-white shadow-lg'
-                    : 'text-gray-600 dark:text-gray-300 hover:bg-white/10'
+                    ? 'bg-primary text-primary-foreground shadow-lg'
+                    : 'text-muted-foreground hover:bg-white/10'
                 }`}
               >
                 <Rocket className="w-4 h-4 inline mr-2" />
@@ -489,14 +474,14 @@ CMD ["npm", "start"]`
             {activeTab === 'claude' && (
               <>
                 {/* Claude AI Development Setup */}
-                <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+                <div className={`rounded-xl border border-border bg-card rounded-2xl p-6 mb-8`}>
                   <div className="flex items-center gap-4 mb-6">
                     <div className={`w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center`}>
                       <Bot className="w-6 h-6 text-white" />
                     </div>
                     <div>
                       <h2 className="text-xl font-semibold">Claude AI Development Setup</h2>
-                      <p className="text-gray-600 dark:text-gray-300">Supercharge your development workflow with AI assistance</p>
+                      <p className="text-muted-foreground">Supercharge your development workflow with AI assistance</p>
                     </div>
                   </div>
 
@@ -504,17 +489,17 @@ CMD ["npm", "start"]`
                     <div className="text-center p-4 rounded-xl bg-purple-500/10">
                       <Terminal className="w-8 h-8 text-purple-400 mx-auto mb-2" />
                       <div className="font-medium">Claude CLI</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Command-line AI assistant</div>
+                      <div className="text-sm text-muted-foreground">Command-line AI assistant</div>
                     </div>
-                    <div className="text-center p-4 rounded-xl bg-blue-500/10">
-                      <FileText className="w-8 h-8 text-blue-400 mx-auto mb-2" />
+                    <div className="text-center p-4 rounded-xl bg-primary/10">
+                      <FileText className="w-8 h-8 text-primary mx-auto mb-2" />
                       <div className="font-medium">Smart Context</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Project-aware assistance</div>
+                      <div className="text-sm text-muted-foreground">Project-aware assistance</div>
                     </div>
                     <div className="text-center p-4 rounded-xl bg-green-500/10">
                       <Zap className="w-8 h-8 text-green-400 mx-auto mb-2" />
                       <div className="font-medium">Auto-Setup</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Generated configuration</div>
+                      <div className="text-sm text-muted-foreground">Generated configuration</div>
                     </div>
                   </div>
 
@@ -526,14 +511,14 @@ CMD ["npm", "start"]`
                       </div>
                       <div className="flex-1">
                         <h3 className="font-semibold mb-2">Install Claude CLI</h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                        <p className="text-sm text-muted-foreground mb-3">
                           Install the Claude CLI to get AI assistance directly in your terminal
                         </p>
-                        <div className="bg-gray-900 rounded-xl p-4">
+                        <div className="bg-background rounded-xl p-4">
                           <pre className="text-green-400 text-sm">npm install -g @anthropic-ai/claude-cli</pre>
                           <button
                             onClick={() => copyToClipboard('npm install -g @anthropic-ai/claude-cli', 'claude-install')}
-                            className="mt-2 flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors"
+                            className="mt-2 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
                           >
                             <Copy className="w-3 h-3" />
                             {copiedItem === 'claude-install' ? 'Copied!' : 'Copy command'}
@@ -549,16 +534,16 @@ CMD ["npm", "start"]`
                       </div>
                       <div className="flex-1">
                         <h3 className="font-semibold mb-2">Create .claude Configuration</h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                        <p className="text-sm text-muted-foreground mb-3">
                           Create a .claude file in your project root with this optimized configuration
                         </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-green-400 text-xs">
 {JSON.stringify(claudeConfig, null, 2)}
                           </pre>
                           <button
                             onClick={() => copyToClipboard(JSON.stringify(claudeConfig, null, 2), 'claude-config')}
-                            className="mt-2 flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors"
+                            className="mt-2 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
                           >
                             <Copy className="w-3 h-3" />
                             {copiedItem === 'claude-config' ? 'Copied!' : 'Copy .claude configuration'}
@@ -574,18 +559,18 @@ CMD ["npm", "start"]`
                       </div>
                       <div className="flex-1">
                         <h3 className="font-semibold mb-2">Create Context Documentation</h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                        <p className="text-sm text-muted-foreground mb-3">
                           Create a context.md file with comprehensive project documentation
                         </p>
                         <details className="mb-3">
-                          <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 context.md content
                           </summary>
-                          <div className="bg-gray-900 rounded-xl p-4 mt-2 overflow-x-auto max-h-64">
+                          <div className="bg-background rounded-xl p-4 mt-2 overflow-x-auto max-h-64">
                             <pre className="text-green-400 text-xs whitespace-pre-wrap">{contextContent}</pre>
                             <button
                               onClick={() => copyToClipboard(contextContent, 'context-content')}
-                              className="mt-2 flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors"
+                              className="mt-2 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
                             >
                               <Copy className="w-3 h-3" />
                               {copiedItem === 'context-content' ? 'Copied!' : 'Copy context.md content'}
@@ -602,20 +587,20 @@ CMD ["npm", "start"]`
                       </div>
                       <div className="flex-1">
                         <h3 className="font-semibold mb-2">Start Using Claude AI</h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                        <p className="text-sm text-muted-foreground mb-3">
                           Common commands to supercharge your development workflow
                         </p>
                         <div className="space-y-3">
-                          <div className="bg-gray-900 rounded-lg p-3">
-                            <div className="text-blue-400 text-sm mb-1">Generate new component:</div>
+                          <div className="bg-background rounded-lg p-3">
+                            <div className="text-primary text-sm mb-1">Generate new component:</div>
                             <code className="text-green-400 text-xs">claude &quot;Create a new user profile component with glassmorphism styling&quot;</code>
                           </div>
-                          <div className="bg-gray-900 rounded-lg p-3">
-                            <div className="text-blue-400 text-sm mb-1">Debug issues:</div>
+                          <div className="bg-background rounded-lg p-3">
+                            <div className="text-primary text-sm mb-1">Debug issues:</div>
                             <code className="text-green-400 text-xs">claude &quot;Help me debug this authentication error&quot;</code>
                           </div>
-                          <div className="bg-gray-900 rounded-lg p-3">
-                            <div className="text-blue-400 text-sm mb-1">Add features:</div>
+                          <div className="bg-background rounded-lg p-3">
+                            <div className="text-primary text-sm mb-1">Add features:</div>
                             <code className="text-green-400 text-xs">claude &quot;Add a dark mode toggle to the header component&quot;</code>
                           </div>
                         </div>
@@ -625,25 +610,25 @@ CMD ["npm", "start"]`
                 </div>
 
                 {/* Package Documentation Quick Reference */}
-                <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+                <div className={`rounded-xl border border-border bg-card rounded-2xl p-6 mb-8`}>
                   <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                    <Book className="w-5 h-5 text-blue-400" />
+                    <Book className="w-5 h-5 text-primary" />
                     Package Documentation Quick Reference
                   </h3>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     {packageDocs.map((pkg, index) => (
-                      <div key={index} className={`${glass.card} ${glass.border} rounded-xl p-4`}>
+                      <div key={index} className={`rounded-xl border border-border bg-card rounded-xl p-4`}>
                         <h4 className="font-semibold text-sm mb-2">{pkg.name}</h4>
-                        <p className="text-xs text-gray-600 dark:text-gray-300 mb-3">{pkg.description}</p>
+                        <p className="text-xs text-muted-foreground mb-3">{pkg.description}</p>
                         <div className="text-xs">
-                          <div className="text-blue-400 mb-1">Key Exports:</div>
-                          <div className="text-gray-500">{pkg.key_exports.join(', ')}</div>
+                          <div className="text-primary mb-1">Key Exports:</div>
+                          <div className="text-muted-foreground">{pkg.key_exports.join(', ')}</div>
                         </div>
                         <a 
                           href={pkg.docs_link} 
                           target="_blank" 
                           rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300 mt-2"
+                          className="inline-flex items-center gap-1 text-xs text-primary hover:text-primary/80 mt-2"
                         >
                           View Docs <ExternalLink className="w-3 h-3" />
                         </a>
@@ -663,10 +648,10 @@ CMD ["npm", "start"]`
                   {deploymentOptions.map((option, index) => {
                     const OptionIcon = option.icon
                     return (
-                      <div key={index} className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
+                      <div key={index} className={`rounded-xl border border-border bg-card rounded-2xl p-6`}>
                         <div className="flex items-start justify-between mb-4">
                           <div className="flex items-center gap-4">
-                            <div className={`w-12 h-12 rounded-xl bg-gray-800 flex items-center justify-center`}>
+                            <div className={`w-12 h-12 rounded-xl bg-card flex items-center justify-center`}>
                               <OptionIcon className="w-6 h-6 text-white" />
                             </div>
                             <div>
@@ -680,8 +665,8 @@ CMD ["npm", "start"]`
                                   {option.complexity}
                                 </span>
                               </h3>
-                              <p className="text-sm text-gray-600 dark:text-gray-300">{option.description}</p>
-                              <div className="text-xs text-blue-400 mt-1">⏱️ {option.timeEstimate}</div>
+                              <p className="text-sm text-muted-foreground">{option.description}</p>
+                              <div className="text-xs text-primary mt-1">⏱️ {option.timeEstimate}</div>
                             </div>
                           </div>
                         </div>
@@ -705,14 +690,14 @@ CMD ["npm", "start"]`
                           <div className="space-y-3">
                             {option.steps.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">
                                   <h5 className="font-medium">{step.title}</h5>
-                                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">{step.description}</p>
+                                  <p className="text-sm text-muted-foreground mb-2">{step.description}</p>
                                   {step.code && (
-                                    <div className="bg-gray-900 rounded-lg p-3 mt-2">
+                                    <div className="bg-background rounded-lg p-3 mt-2">
                                       <pre className="text-green-400 text-xs whitespace-pre-wrap">{step.code}</pre>
                                     </div>
                                   )}
@@ -721,7 +706,7 @@ CMD ["npm", "start"]`
                                       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-2"
+                                      className="inline-flex items-center gap-1 text-sm text-primary hover:text-primary/80 mt-2"
                                     >
                                       Learn More <ExternalLink className="w-3 h-3" />
                                     </a>
@@ -737,7 +722,7 @@ CMD ["npm", "start"]`
                 </div>
 
                 {/* Pre-Deployment Checklist */}
-                <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8`}>
+                <div className={`rounded-xl border border-border bg-card rounded-2xl p-6 mt-8`}>
                   <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                     <CheckCircle className="w-5 h-5 text-green-400" />
                     Pre-Deployment Checklist
@@ -759,11 +744,11 @@ CMD ["npm", "start"]`
                     )}
                     <div className="flex items-center gap-3">
                       <CheckCircle className="w-5 h-5 text-green-400" />
-                      <span>Build succeeds locally: <code className="px-2 py-1 bg-gray-800 rounded">npm run build</code></span>
+                      <span>Build succeeds locally: <code className="px-2 py-1 bg-card rounded">npm run build</code></span>
                     </div>
                     <div className="flex items-center gap-3">
                       <CheckCircle className="w-5 h-5 text-green-400" />
-                      <span>Tests pass: <code className="px-2 py-1 bg-gray-800 rounded">npm run test</code></span>
+                      <span>Tests pass: <code className="px-2 py-1 bg-card rounded">npm run test</code></span>
                     </div>
                     <div className="flex items-center gap-3">
                       <CheckCircle className="w-5 h-5 text-green-400" />
@@ -775,27 +760,27 @@ CMD ["npm", "start"]`
             )}
 
             {/* Support Section */}
-            <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 with development and deployment.
               </p>
               <div className="flex justify-center gap-4">
-                <Button variant="outline" size="sm" asChild>
+                <Button variant="outline" size="sm">
                   <a href="https://discord.gg/digilogiclabs" target="_blank" rel="noopener noreferrer">
                     Join Discord
                   </a>
                 </Button>
-                <Button size="sm" asChild>
+                <Button size="sm">
                   <a href="https://docs.digilogiclabs.com" target="_blank" rel="noopener noreferrer">
                     View Docs
                   </a>
                 </Button>
               </div>
             </div>
-          </MobileContainer>
+          </div>
         </div>
       </main>
-    </PageTransition>
+    </div>
   )
 }

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

@@ -1,38 +1,40 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-import { AppProviders } from '@/components/providers/app-providers'
-import { Header } from '@/components/shared/header'
-import { Footer } from '@/components/shared/footer'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: '{{titleCaseName}}',
-  description: '{{description}}',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <AppProviders>
-          <div className="min-h-screen flex flex-col">
-            <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
-              Skip to content
-            </a>
-            <Header />
-            <main id="main-content" className="flex-1">
-              {children}
-            </main>
-            <Footer />
-          </div>
-        </AppProviders>
-      </body>
-    </html>
-  )
-}
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+import { MockBanner } from '@/components/mock-banner'
+import { Footer } from '@/components/shared/footer'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          <MockBanner />
+          <div className="min-h-screen flex flex-col">
+            <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+              Skip to content
+            </a>
+            <Header />
+            <main id="main-content" className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
+        </AppProviders>
+      </body>
+    </html>
+  )
+}