@digilogiclabs/create-saas-app 2.8.1 → 2.9.1

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

@@ -1,645 +1,645 @@
-'use client'
-
-import { 
-  Card, 
-  Button,
-  PageTransition,
-  MobileContainer,
-  ResponsiveGrid,
-  useAnimationTokens,
-  useGlassmorphism
-} from '@digilogiclabs/saas-factory-ui'
-import { 
-  ArrowLeft,
-  CheckCircle,
-  AlertCircle,
-  ExternalLink,
-  Copy,
-  Database,
-  CreditCard,
-  Shield,
-  Brain,
-  Key,
-  Globe,
-  Settings,
-  BookOpen,
-  Zap,
-  Server,
-  Code2,
-  FileText
-} from 'lucide-react'
-import Link from 'next/link'
-import { useState } from 'react'
-
-interface ServiceConfig {
-  name: string
-  status: 'required' | 'optional' | 'configured'
-  icon: any
-  description: string
-  setupSteps: Array<{
-    title: string
-    description: string
-    code?: string
-    link?: string
-  }>
-  envVars: Array<{
-    name: string
-    description: string
-    example: string
-    required: boolean
-  }>
-}
-
-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"
-  const glassBackground = "bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20"
-  const [copiedVar, setCopiedVar] = useState<string | null>(null)
-
-  const projectName = "{{projectName}}"
-  const templateName = "Full-Stack AI Platform"
-  const templateDescription = "UI + Authentication + Payments + AI (Text, Audio, Video, Chat)"
-
-  const services: ServiceConfig[] = [
-    {
-      name: "Supabase (Database & Auth)",
-      status: 'required',
-      icon: Database,
-      description: "PostgreSQL database with built-in authentication, real-time subscriptions, and edge functions.",
-      setupSteps: [
-        {
-          title: "Create Supabase Project",
-          description: "Sign up at supabase.com and create a new project",
-          link: "https://supabase.com/dashboard"
-        },
-        {
-          title: "Get API Keys",
-          description: "Go to Settings → API to find your project URL and anon key"
-        },
-        {
-          title: "Configure Authentication",
-          description: "Enable email/password auth in Authentication → Settings"
-        },
-        {
-          title: "Set up Database Tables",
-          description: "Create tables for user profiles, AI conversations, and usage tracking",
-          code: `-- User profiles table
-CREATE TABLE profiles (
-  id UUID REFERENCES auth.users(id) PRIMARY KEY,
-  email TEXT,
-  full_name TEXT,
-  avatar_url TEXT,
-  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
--- AI conversations table
-CREATE TABLE ai_conversations (
-  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
-  user_id UUID REFERENCES profiles(id),
-  message_type TEXT NOT NULL,
-  user_message TEXT NOT NULL,
-  ai_response TEXT NOT NULL,
-  metadata JSONB,
-  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
--- Enable RLS
-ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
-ALTER TABLE ai_conversations ENABLE ROW LEVEL SECURITY;
-
--- RLS Policies
-CREATE POLICY "Users can view own profile" ON profiles FOR SELECT USING (auth.uid() = id);
-CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id);
-CREATE POLICY "Users can view own conversations" ON ai_conversations FOR ALL USING (auth.uid() = user_id);`
-        }
-      ],
-      envVars: [
-        {
-          name: "NEXT_PUBLIC_SUPABASE_URL",
-          description: "Your Supabase project URL",
-          example: "https://your-project.supabase.co",
-          required: true
-        },
-        {
-          name: "NEXT_PUBLIC_SUPABASE_ANON_KEY",
-          description: "Your Supabase anonymous key",
-          example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-          required: true
-        },
-        {
-          name: "SUPABASE_SERVICE_ROLE_KEY",
-          description: "Service role key for server-side operations (optional)",
-          example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-          required: false
-        }
-      ]
-    },
-    {
-      name: "Stripe (Payments)",
-      status: 'required',
-      icon: CreditCard,
-      description: "Payment processing for subscriptions, one-time payments, and billing management.",
-      setupSteps: [
-        {
-          title: "Create Stripe Account",
-          description: "Sign up at stripe.com and complete account verification",
-          link: "https://dashboard.stripe.com/register"
-        },
-        {
-          title: "Get API Keys",
-          description: "Go to Developers → API keys to find your publishable and secret keys"
-        },
-        {
-          title: "Set up Products & Pricing",
-          description: "Create products and pricing plans in the Stripe dashboard"
-        },
-        {
-          title: "Configure Webhooks",
-          description: "Set up webhooks to handle payment events",
-          code: `// Add to your API route: /api/webhooks/stripe
-const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!
-
-const sig = headers.get('stripe-signature')!
-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':
-    case 'customer.subscription.deleted':
-      // Handle subscription changes
-      break
-    case 'invoice.payment_succeeded':
-      // Handle successful payments
-      break
-  }
-} catch (err) {
-  console.error('Webhook signature verification failed:', err)
-  return new Response('Webhook Error', { status: 400 })
-}`
-        }
-      ],
-      envVars: [
-        {
-          name: "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY",
-          description: "Your Stripe publishable key",
-          example: "pk_test_51234567890abcdef...",
-          required: true
-        },
-        {
-          name: "STRIPE_SECRET_KEY",
-          description: "Your Stripe secret key",
-          example: "sk_test_51234567890abcdef...",
-          required: true
-        },
-        {
-          name: "STRIPE_WEBHOOK_SECRET",
-          description: "Webhook endpoint secret for event verification",
-          example: "whsec_1234567890abcdef...",
-          required: true
-        }
-      ]
-    },
-    {
-      name: "OpenAI (AI Provider)",
-      status: 'required',
-      icon: Brain,
-      description: "Primary AI provider for text generation, chat, and other AI capabilities.",
-      setupSteps: [
-        {
-          title: "Create OpenAI Account",
-          description: "Sign up at platform.openai.com and add billing information",
-          link: "https://platform.openai.com/signup"
-        },
-        {
-          title: "Generate API Key",
-          description: "Go to API Keys section and create a new secret key"
-        },
-        {
-          title: "Set Usage Limits",
-          description: "Configure usage limits and monitoring in your OpenAI dashboard"
-        },
-        {
-          title: "Test Integration",
-          description: "Verify your API key works with a simple test request",
-          code: `// Test your OpenAI API key
-import OpenAI from 'openai'
-
-const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-})
-
-const response = await openai.chat.completions.create({
-  model: "gpt-4",
-  messages: [{ role: "user", content: "Hello, world!" }],
-  max_tokens: 50
-})`
-        }
-      ],
-      envVars: [
-        {
-          name: "OPENAI_API_KEY",
-          description: "Your OpenAI API key",
-          example: "sk-1234567890abcdef...",
-          required: true
-        },
-        {
-          name: "OPENAI_ORG_ID",
-          description: "Your OpenAI organization ID (optional)",
-          example: "org-1234567890abcdef",
-          required: false
-        }
-      ]
-    },
-    {
-      name: "ElevenLabs (Audio AI)",
-      status: 'optional',
-      icon: Server,
-      description: "Advanced voice synthesis and audio generation for high-quality AI voices.",
-      setupSteps: [
-        {
-          title: "Create ElevenLabs Account",
-          description: "Sign up at elevenlabs.io for voice synthesis",
-          link: "https://elevenlabs.io"
-        },
-        {
-          title: "Get API Key",
-          description: "Generate an API key from your profile settings"
-        },
-        {
-          title: "Choose Voice Models",
-          description: "Select or clone voices for your audio generation needs"
-        }
-      ],
-      envVars: [
-        {
-          name: "ELEVENLABS_API_KEY",
-          description: "Your ElevenLabs API key for voice synthesis",
-          example: "sk-1234567890abcdef...",
-          required: false
-        }
-      ]
-    },
-    {
-      name: "Replicate (Video AI)",
-      status: 'optional',
-      icon: Globe,
-      description: "Video generation and processing using various AI models.",
-      setupSteps: [
-        {
-          title: "Create Replicate Account",
-          description: "Sign up at replicate.com for AI video generation",
-          link: "https://replicate.com"
-        },
-        {
-          title: "Get API Token",
-          description: "Generate an API token from your account settings"
-        },
-        {
-          title: "Explore Models",
-          description: "Browse video generation models in the Replicate model library"
-        }
-      ],
-      envVars: [
-        {
-          name: "REPLICATE_API_TOKEN",
-          description: "Your Replicate API token for video generation",
-          example: "r8_1234567890abcdef...",
-          required: false
-        }
-      ]
-    }
-  ]
-
-  const allEnvVars = services.flatMap(service => service.envVars)
-
-  const copyToClipboard = async (text: string, varName: string) => {
-    await navigator.clipboard.writeText(text)
-    setCopiedVar(varName)
-    setTimeout(() => setCopiedVar(null), 2000)
-  }
-
-  const getStatusColor = (status: ServiceConfig['status']) => {
-    switch (status) {
-      case 'required': return 'text-red-400'
-      case 'optional': return 'text-yellow-400'
-      case 'configured': return 'text-green-400'
-      default: return 'text-gray-400'
-    }
-  }
-
-  const getStatusIcon = (status: ServiceConfig['status']) => {
-    switch (status) {
-      case 'required': return AlertCircle
-      case 'optional': return Settings
-      case 'configured': return CheckCircle
-      default: return AlertCircle
-    }
-  }
-
-  return (
-    <PageTransition type="slide" direction="up" duration={300}>
-      <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">
-            {/* 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}`}>
-                  <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>
-                </div>
-              </div>
-              <div className={`${glassCard} px-4 py-2 rounded-xl`}>
-                <span className="text-sm font-medium">{projectName}</span>
-              </div>
-            </div>
-
-            {/* Template Overview */}
-            <div className={`${glassCardRounded} p-6 mb-8`}>
-              <div className="flex items-center gap-4 mb-4">
-                <div className={`w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center`}>
-                  <Zap className="w-6 h-6 text-white" />
-                </div>
-                <div>
-                  <h2 className="text-xl font-semibold">{templateName}</h2>
-                  <p className="text-gray-600 dark:text-gray-300">{templateDescription}</p>
-                </div>
-              </div>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
-                <div className="text-center p-3 rounded-xl bg-blue-500/10">
-                  <Shield className="w-6 h-6 text-blue-400 mx-auto mb-2" />
-                  <div className="text-sm font-medium">Authentication</div>
-                </div>
-                <div className="text-center p-3 rounded-xl bg-green-500/10">
-                  <CreditCard className="w-6 h-6 text-green-400 mx-auto mb-2" />
-                  <div className="text-sm font-medium">Payments</div>
-                </div>
-                <div className="text-center p-3 rounded-xl bg-purple-500/10">
-                  <Brain className="w-6 h-6 text-purple-400 mx-auto mb-2" />
-                  <div className="text-sm font-medium">AI Platform</div>
-                </div>
-                <div className="text-center p-3 rounded-xl bg-orange-500/10">
-                  <Code2 className="w-6 h-6 text-orange-400 mx-auto mb-2" />
-                  <div className="text-sm font-medium">Modern UI</div>
-                </div>
-              </div>
-            </div>
-
-            {/* Quick Start */}
-            <div className={`${glassCardRounded} p-6 mb-8`}>
-              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                <Zap className="w-5 h-5 text-yellow-400" />
-                Quick Start
-              </h3>
-              <div className="space-y-3 text-sm">
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>1. Set up your environment variables (see below)</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>2. Configure Supabase database and authentication</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>3. Set up Stripe for payment processing</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>4. Connect your AI providers (OpenAI, ElevenLabs, Replicate)</span>
-                </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>
-                </div>
-              </div>
-            </div>
-
-            {/* 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" />
-                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>
-              <div className="bg-gray-900 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'}`
-)).join('\n')}
-                </pre>
-                <button
-                  onClick={() => copyToClipboard(
-                    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"
-                >
-                  <Copy className="w-4 h-4" />
-                  {copiedVar === 'all-env-vars' ? 'Copied!' : 'Copy all environment variables'}
-                </button>
-              </div>
-            </div>
-
-            {/* 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" />
-                Service Configuration
-              </h3>
-              
-              {services.map((service, index) => {
-                const StatusIcon = getStatusIcon(service.status)
-                const ServiceIcon = service.icon
-                
-                return (
-                  <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`}>
-                          <ServiceIcon className="w-5 h-5 text-white" />
-                        </div>
-                        <div>
-                          <h4 className="text-lg font-semibold flex items-center gap-2">
-                            {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>
-                        </div>
-                      </div>
-                      <span className={`px-3 py-1 rounded-full text-xs font-medium ${
-                        service.status === 'required' ? 'bg-red-500/20 text-red-400' :
-                        service.status === 'optional' ? 'bg-yellow-500/20 text-yellow-400' :
-                        'bg-green-500/20 text-green-400'
-                      }`}>
-                        {service.status}
-                      </span>
-                    </div>
-
-                    {/* Setup Steps */}
-                    <div className="mb-6">
-                      <h5 className="font-semibold mb-3">Setup Steps:</h5>
-                      <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">
-                              {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>
-                              {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"
-                                >
-                                  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">
-                                    Show code example
-                                  </summary>
-                                  <pre className="bg-gray-900 rounded-lg p-3 mt-2 text-xs overflow-x-auto">
-                                    <code className="text-green-400">{step.code}</code>
-                                  </pre>
-                                </details>
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Environment Variables for this service */}
-                    <div>
-                      <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 className="flex items-center justify-between mb-1">
-                              <code className="text-blue-400 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 ? 'Required' : 'Optional'}
-                                </span>
-                                <button
-                                  onClick={() => copyToClipboard(`${envVar.name}=${envVar.example}`, envVar.name)}
-                                  className="p-1 hover:bg-gray-700 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>
-                            {copiedVar === envVar.name && (
-                              <span className="text-xs text-green-400 ml-2">Copied!</span>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-
-            {/* Next Steps */}
-            <div className={`${glassCardRounded} p-6 mt-8`}>
-              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                <Zap className="w-5 h-5 text-yellow-400" />
-                Next Steps
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300 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`}
-                >
-                  <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>
-                </Link>
-                <Link 
-                  href="/"
-                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
-                >
-                  <Zap className="w-8 h-8 text-blue-400 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>
-                </Link>
-              </div>
-            </div>
-
-            {/* Additional Resources */}
-            <div className={`${glassCardRounded} p-6 mt-8`}>
-              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                <BookOpen className="w-5 h-5 text-green-400" />
-                Additional Resources
-              </h3>
-              <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`}
-                >
-                  <FileText className="w-8 h-8 text-blue-400 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>
-                </a>
-                <a 
-                  href="https://github.com/digilogiclabs/examples" 
-                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} 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>
-                </a>
-              </div>
-            </div>
-
-            {/* Support */}
-            <div className={`${glass.card} ${glass.border} 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">
-                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>
-              </div>
-            </div>
-          </MobileContainer>
-        </div>
-      </main>
-    </PageTransition>
-  )
+'use client'
+
+import { 
+  Card, 
+  Button,
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  useAnimationTokens,
+  useGlassmorphism
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowLeft,
+  CheckCircle,
+  AlertCircle,
+  ExternalLink,
+  Copy,
+  Database,
+  CreditCard,
+  Shield,
+  Brain,
+  Key,
+  Globe,
+  Settings,
+  BookOpen,
+  Zap,
+  Server,
+  Code2,
+  FileText
+} from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+interface ServiceConfig {
+  name: string
+  status: 'required' | 'optional' | 'configured'
+  icon: any
+  description: string
+  setupSteps: Array<{
+    title: string
+    description: string
+    code?: string
+    link?: string
+  }>
+  envVars: Array<{
+    name: string
+    description: string
+    example: string
+    required: boolean
+  }>
+}
+
+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"
+  const glassBackground = "bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20"
+  const [copiedVar, setCopiedVar] = useState<string | null>(null)
+
+  const projectName = "{{projectName}}"
+  const templateName = "Full-Stack AI Platform"
+  const templateDescription = "UI + Authentication + Payments + AI (Text, Audio, Video, Chat)"
+
+  const services: ServiceConfig[] = [
+    {
+      name: "Supabase (Database & Auth)",
+      status: 'required',
+      icon: Database,
+      description: "PostgreSQL database with built-in authentication, real-time subscriptions, and edge functions.",
+      setupSteps: [
+        {
+          title: "Create Supabase Project",
+          description: "Sign up at supabase.com and create a new project",
+          link: "https://supabase.com/dashboard"
+        },
+        {
+          title: "Get API Keys",
+          description: "Go to Settings → API to find your project URL and anon key"
+        },
+        {
+          title: "Configure Authentication",
+          description: "Enable email/password auth in Authentication → Settings"
+        },
+        {
+          title: "Set up Database Tables",
+          description: "Create tables for user profiles, AI conversations, and usage tracking",
+          code: `-- User profiles table
+CREATE TABLE profiles (
+  id UUID REFERENCES auth.users(id) PRIMARY KEY,
+  email TEXT,
+  full_name TEXT,
+  avatar_url TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- AI conversations table
+CREATE TABLE ai_conversations (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id UUID REFERENCES profiles(id),
+  message_type TEXT NOT NULL,
+  user_message TEXT NOT NULL,
+  ai_response TEXT NOT NULL,
+  metadata JSONB,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable RLS
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE ai_conversations ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies
+CREATE POLICY "Users can view own profile" ON profiles FOR SELECT USING (auth.uid() = id);
+CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id);
+CREATE POLICY "Users can view own conversations" ON ai_conversations FOR ALL USING (auth.uid() = user_id);`
+        }
+      ],
+      envVars: [
+        {
+          name: "NEXT_PUBLIC_SUPABASE_URL",
+          description: "Your Supabase project URL",
+          example: "https://your-project.supabase.co",
+          required: true
+        },
+        {
+          name: "NEXT_PUBLIC_SUPABASE_ANON_KEY",
+          description: "Your Supabase anonymous key",
+          example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+          required: true
+        },
+        {
+          name: "SUPABASE_SERVICE_ROLE_KEY",
+          description: "Service role key for server-side operations (optional)",
+          example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+          required: false
+        }
+      ]
+    },
+    {
+      name: "Stripe (Payments)",
+      status: 'required',
+      icon: <CreditCard className="w-4 h-4" />,
+      description: "Payment processing for subscriptions, one-time payments, and billing management.",
+      setupSteps: [
+        {
+          title: "Create Stripe Account",
+          description: "Sign up at stripe.com and complete account verification",
+          link: "https://dashboard.stripe.com/register"
+        },
+        {
+          title: "Get API Keys",
+          description: "Go to Developers → API keys to find your publishable and secret keys"
+        },
+        {
+          title: "Set up Products & Pricing",
+          description: "Create products and pricing plans in the Stripe dashboard"
+        },
+        {
+          title: "Configure Webhooks",
+          description: "Set up webhooks to handle payment events",
+          code: `// Add to your API route: /api/webhooks/stripe
+const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!
+
+const sig = headers.get('stripe-signature')!
+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':
+    case 'customer.subscription.deleted':
+      // Handle subscription changes
+      break
+    case 'invoice.payment_succeeded':
+      // Handle successful payments
+      break
+  }
+} catch (err) {
+  console.error('Webhook signature verification failed:', err)
+  return new Response('Webhook Error', { status: 400 })
+}`
+        }
+      ],
+      envVars: [
+        {
+          name: "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY",
+          description: "Your Stripe publishable key",
+          example: "pk_test_51234567890abcdef...",
+          required: true
+        },
+        {
+          name: "STRIPE_SECRET_KEY",
+          description: "Your Stripe secret key",
+          example: "sk_test_51234567890abcdef...",
+          required: true
+        },
+        {
+          name: "STRIPE_WEBHOOK_SECRET",
+          description: "Webhook endpoint secret for event verification",
+          example: "whsec_1234567890abcdef...",
+          required: true
+        }
+      ]
+    },
+    {
+      name: "OpenAI (AI Provider)",
+      status: 'required',
+      icon: <Brain className="w-4 h-4" />,
+      description: "Primary AI provider for text generation, chat, and other AI capabilities.",
+      setupSteps: [
+        {
+          title: "Create OpenAI Account",
+          description: "Sign up at platform.openai.com and add billing information",
+          link: "https://platform.openai.com/signup"
+        },
+        {
+          title: "Generate API Key",
+          description: "Go to API Keys section and create a new secret key"
+        },
+        {
+          title: "Set Usage Limits",
+          description: "Configure usage limits and monitoring in your OpenAI dashboard"
+        },
+        {
+          title: "Test Integration",
+          description: "Verify your API key works with a simple test request",
+          code: `// Test your OpenAI API key
+import OpenAI from 'openai'
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+
+const response = await openai.chat.completions.create({
+  model: "gpt-4",
+  messages: [{ role: "user", content: "Hello, world!" }],
+  max_tokens: 50
+})`
+        }
+      ],
+      envVars: [
+        {
+          name: "OPENAI_API_KEY",
+          description: "Your OpenAI API key",
+          example: "sk-1234567890abcdef...",
+          required: true
+        },
+        {
+          name: "OPENAI_ORG_ID",
+          description: "Your OpenAI organization ID (optional)",
+          example: "org-1234567890abcdef",
+          required: false
+        }
+      ]
+    },
+    {
+      name: "ElevenLabs (Audio AI)",
+      status: 'optional',
+      icon: Server,
+      description: "Advanced voice synthesis and audio generation for high-quality AI voices.",
+      setupSteps: [
+        {
+          title: "Create ElevenLabs Account",
+          description: "Sign up at elevenlabs.io for voice synthesis",
+          link: "https://elevenlabs.io"
+        },
+        {
+          title: "Get API Key",
+          description: "Generate an API key from your profile settings"
+        },
+        {
+          title: "Choose Voice Models",
+          description: "Select or clone voices for your audio generation needs"
+        }
+      ],
+      envVars: [
+        {
+          name: "ELEVENLABS_API_KEY",
+          description: "Your ElevenLabs API key for voice synthesis",
+          example: "sk-1234567890abcdef...",
+          required: false
+        }
+      ]
+    },
+    {
+      name: "Replicate (Video AI)",
+      status: 'optional',
+      icon: Globe,
+      description: "Video generation and processing using various AI models.",
+      setupSteps: [
+        {
+          title: "Create Replicate Account",
+          description: "Sign up at replicate.com for AI video generation",
+          link: "https://replicate.com"
+        },
+        {
+          title: "Get API Token",
+          description: "Generate an API token from your account settings"
+        },
+        {
+          title: "Explore Models",
+          description: "Browse video generation models in the Replicate model library"
+        }
+      ],
+      envVars: [
+        {
+          name: "REPLICATE_API_TOKEN",
+          description: "Your Replicate API token for video generation",
+          example: "r8_1234567890abcdef...",
+          required: false
+        }
+      ]
+    }
+  ]
+
+  const allEnvVars = services.flatMap(service => service.envVars)
+
+  const copyToClipboard = async (text: string, varName: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopiedVar(varName)
+    setTimeout(() => setCopiedVar(null), 2000)
+  }
+
+  const getStatusColor = (status: ServiceConfig['status']) => {
+    switch (status) {
+      case 'required': return 'text-red-400'
+      case 'optional': return 'text-yellow-400'
+      case 'configured': return 'text-green-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const getStatusIcon = (status: ServiceConfig['status']) => {
+    switch (status) {
+      case 'required': return AlertCircle
+      case 'optional': return Settings
+      case 'configured': return CheckCircle
+      default: return AlertCircle
+    }
+  }
+
+  return (
+    <PageTransition type="slide" direction="up" duration={300}>
+      <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">
+            {/* 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}`}>
+                  <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>
+                </div>
+              </div>
+              <div className={`${glassCard} px-4 py-2 rounded-xl`}>
+                <span className="text-sm font-medium">{projectName}</span>
+              </div>
+            </div>
+
+            {/* Template Overview */}
+            <div className={`${glassCardRounded} p-6 mb-8`}>
+              <div className="flex items-center gap-4 mb-4">
+                <div className={`w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center`}>
+                  <Zap className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-semibold">{templateName}</h2>
+                  <p className="text-gray-600 dark:text-gray-300">{templateDescription}</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
+                <div className="text-center p-3 rounded-xl bg-blue-500/10">
+                  <Shield className="w-6 h-6 text-blue-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Authentication</div>
+                </div>
+                <div className="text-center p-3 rounded-xl bg-green-500/10">
+                  <CreditCard className="w-6 h-6 text-green-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Payments</div>
+                </div>
+                <div className="text-center p-3 rounded-xl bg-purple-500/10">
+                  <Brain className="w-6 h-6 text-purple-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">AI Platform</div>
+                </div>
+                <div className="text-center p-3 rounded-xl bg-orange-500/10">
+                  <Code2 className="w-6 h-6 text-orange-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Modern UI</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Start */}
+            <div className={`${glassCardRounded} p-6 mb-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Zap className="w-5 h-5 text-yellow-400" />
+                Quick Start
+              </h3>
+              <div className="space-y-3 text-sm">
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>1. Set up your environment variables (see below)</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>2. Configure Supabase database and authentication</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>3. Set up Stripe for payment processing</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>4. Connect your AI providers (OpenAI, ElevenLabs, Replicate)</span>
+                </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>
+                </div>
+              </div>
+            </div>
+
+            {/* 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" />
+                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>
+              <div className="bg-gray-900 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'}`
+)).join('\n')}
+                </pre>
+                <button
+                  onClick={() => copyToClipboard(
+                    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"
+                >
+                  <Copy className="w-4 h-4" />
+                  {copiedVar === 'all-env-vars' ? 'Copied!' : 'Copy all environment variables'}
+                </button>
+              </div>
+            </div>
+
+            {/* 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" />
+                Service Configuration
+              </h3>
+              
+              {services.map((service, index) => {
+                const StatusIcon = getStatusIcon(service.status)
+                const ServiceIcon = service.icon
+                
+                return (
+                  <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`}>
+                          <ServiceIcon className="w-5 h-5 text-white" />
+                        </div>
+                        <div>
+                          <h4 className="text-lg font-semibold flex items-center gap-2">
+                            {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>
+                        </div>
+                      </div>
+                      <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+                        service.status === 'required' ? 'bg-red-500/20 text-red-400' :
+                        service.status === 'optional' ? 'bg-yellow-500/20 text-yellow-400' :
+                        'bg-green-500/20 text-green-400'
+                      }`}>
+                        {service.status}
+                      </span>
+                    </div>
+
+                    {/* Setup Steps */}
+                    <div className="mb-6">
+                      <h5 className="font-semibold mb-3">Setup Steps:</h5>
+                      <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">
+                              {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>
+                              {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"
+                                >
+                                  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">
+                                    Show code example
+                                  </summary>
+                                  <pre className="bg-gray-900 rounded-lg p-3 mt-2 text-xs overflow-x-auto">
+                                    <code className="text-green-400">{step.code}</code>
+                                  </pre>
+                                </details>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Environment Variables for this service */}
+                    <div>
+                      <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 className="flex items-center justify-between mb-1">
+                              <code className="text-blue-400 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 ? 'Required' : 'Optional'}
+                                </span>
+                                <button
+                                  onClick={() => copyToClipboard(`${envVar.name}=${envVar.example}`, envVar.name)}
+                                  className="p-1 hover:bg-gray-700 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>
+                            {copiedVar === envVar.name && (
+                              <span className="text-xs text-green-400 ml-2">Copied!</span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            {/* Next Steps */}
+            <div className={`${glassCardRounded} p-6 mt-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Zap className="w-5 h-5 text-yellow-400" />
+                Next Steps
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300 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`}
+                >
+                  <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>
+                </Link>
+                <Link 
+                  href="/"
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
+                >
+                  <Zap className="w-8 h-8 text-blue-400 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>
+                </Link>
+              </div>
+            </div>
+
+            {/* Additional Resources */}
+            <div className={`${glassCardRounded} p-6 mt-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <BookOpen className="w-5 h-5 text-green-400" />
+                Additional Resources
+              </h3>
+              <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`}
+                >
+                  <FileText className="w-8 h-8 text-blue-400 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>
+                </a>
+                <a 
+                  href="https://github.com/digilogiclabs/examples" 
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} 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>
+                </a>
+              </div>
+            </div>
+
+            {/* Support */}
+            <div className={`${glass.card} ${glass.border} 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">
+                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>
+              </div>
+            </div>
+          </MobileContainer>
+        </div>
+      </main>
+    </PageTransition>
+  )
 }