@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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

@@ -1,345 +1,341 @@
-'use client'
-
-import { 
-  Card, 
-  Button,
-  PageTransition,
-  MobileContainer,
-  ResponsiveGrid,
-  useAnimationTokens,
-  useGlassmorphism
-} from '@digilogiclabs/saas-factory-ui'
-import { 
-  ArrowLeft,
-  CheckCircle,
-  AlertCircle,
-  ExternalLink,
-  Copy,
-  Database,
-  CreditCard,
-  Shield,
-  Headphones,
-  Key,
-  Settings,
-  BookOpen,
-  Zap,
-  Code2,
-  FileText,
-  Music
-} from 'lucide-react'
-import Link from 'next/link'
-import { useState } from 'react'
-
-export default function SetupPage() {
-  const animations = useAnimationTokens()
-  const glass = useGlassmorphism()
-  const [copiedVar, setCopiedVar] = useState<string | null>(null)
-
-  const projectName = "{{projectName}}"
-  const templateName = "Audio Platform with Payments"
-  const templateDescription = "UI + Authentication + Payments + Audio Features"
-
-  const envVars = [
-    { name: "NEXT_PUBLIC_SUPABASE_URL", example: "https://your-project.supabase.co", required: true },
-    { name: "NEXT_PUBLIC_SUPABASE_ANON_KEY", example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", required: true },
-    { name: "SUPABASE_SERVICE_ROLE_KEY", example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", required: false },
-    { name: "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY", example: "pk_test_51234567890abcdef...", required: true },
-    { name: "STRIPE_SECRET_KEY", example: "sk_test_51234567890abcdef...", required: true },
-    { name: "STRIPE_WEBHOOK_SECRET", example: "whsec_1234567890abcdef...", required: true },
-    { name: "ELEVENLABS_API_KEY", example: "sk-1234567890abcdef...", required: false },
-    { name: "OPENAI_API_KEY", example: "sk-1234567890abcdef...", required: false }
-  ]
-
-  const copyToClipboard = async (text: string, varName: string) => {
-    await navigator.clipboard.writeText(text)
-    setCopiedVar(varName)
-    setTimeout(() => setCopiedVar(null), 2000)
-  }
-
-  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 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={`${glass.card} ${glass.border} 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={`${glass.card} ${glass.border} px-4 py-2 rounded-xl`}>
-                <span className="text-sm font-medium">{projectName}</span>
-              </div>
-            </div>
-
-            {/* Template Overview */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl 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-green-500 flex items-center justify-center`}>
-                  <Headphones 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">
-                  <Music className="w-6 h-6 text-purple-400 mx-auto mb-2" />
-                  <div className="text-sm font-medium">Audio 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={`${glass.card} ${glass.border} rounded-2xl 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 Supabase for database and authentication</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>2. Configure Stripe for payment processing</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>3. (Optional) Add audio AI providers like ElevenLabs</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-400" />
-                  <span>4. Configure environment variables below</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></span>
-                </div>
-              </div>
-            </div>
-
-            {/* Environment Variables */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl 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">
-{envVars.map(envVar => (
-`${envVar.name}=${envVar.example}${envVar.required ? ' # Required' : ' # Optional'}`
-)).join('\n')}
-                </pre>
-                <button
-                  onClick={() => copyToClipboard(
-                    envVars.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 Overview */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
-              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                <Settings className="w-5 h-5 text-gray-400" />
-                Required Services
-              </h3>
-              <div className="space-y-4">
-                {/* Supabase */}
-                <div className="flex items-center gap-4 p-4 bg-blue-500/10 rounded-xl">
-                  <Database className="w-8 h-8 text-blue-400" />
-                  <div className="flex-1">
-                    <h4 className="font-semibold">Supabase</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">Database and authentication</p>
-                  </div>
-                  <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Required</span>
-                  <a href="https://supabase.com/dashboard" className="text-blue-400 hover:text-blue-300">
-                    <ExternalLink className="w-4 h-4" />
-                  </a>
-                </div>
-
-                {/* Stripe */}
-                <div className="flex items-center gap-4 p-4 bg-green-500/10 rounded-xl">
-                  <CreditCard className="w-8 h-8 text-green-400" />
-                  <div className="flex-1">
-                    <h4 className="font-semibold">Stripe</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">Payment processing</p>
-                  </div>
-                  <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Required</span>
-                  <a href="https://dashboard.stripe.com" className="text-green-400 hover:text-green-300">
-                    <ExternalLink className="w-4 h-4" />
-                  </a>
-                </div>
-
-                {/* Audio Services */}
-                <div className="flex items-center gap-4 p-4 bg-purple-500/10 rounded-xl">
-                  <Headphones className="w-8 h-8 text-purple-400" />
-                  <div className="flex-1">
-                    <h4 className="font-semibold">Audio Services</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">ElevenLabs, OpenAI for audio generation</p>
-                  </div>
-                  <span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs">Optional</span>
-                </div>
-              </div>
-            </div>
-
-            {/* Database Setup */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
-              <h3 className="text-lg font-semibold mb-4">Database Setup</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
-                Run this SQL in your Supabase SQL editor to set up the required tables:
-              </p>
-              <div className="bg-gray-900 rounded-xl p-4 overflow-x-auto">
-                <pre className="text-xs text-green-400">
-{`-- User profiles table
-CREATE TABLE profiles (
-  id UUID REFERENCES auth.users(id) PRIMARY KEY,
-  email TEXT,
-  full_name TEXT,
-  avatar_url TEXT,
-  stripe_customer_id TEXT,
-  subscription_status TEXT DEFAULT 'inactive',
-  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
--- Audio content table
-CREATE TABLE audio_content (
-  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
-  user_id UUID REFERENCES profiles(id),
-  title TEXT NOT NULL,
-  description TEXT,
-  audio_url TEXT,
-  duration INTEGER,
-  file_size BIGINT,
-  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
--- Enable RLS
-ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
-ALTER TABLE audio_content 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 manage own audio content" ON audio_content FOR ALL USING (auth.uid() = user_id);`}
-                </pre>
-                <button
-                  onClick={() => copyToClipboard(`-- User profiles table
-CREATE TABLE profiles (
-  id UUID REFERENCES auth.users(id) PRIMARY KEY,
-  email TEXT,
-  full_name TEXT,
-  avatar_url TEXT,
-  stripe_customer_id TEXT,
-  subscription_status TEXT DEFAULT 'inactive',
-  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
--- Audio content table
-CREATE TABLE audio_content (
-  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
-  user_id UUID REFERENCES profiles(id),
-  title TEXT NOT NULL,
-  description TEXT,
-  audio_url TEXT,
-  duration INTEGER,
-  file_size BIGINT,
-  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
--- Enable RLS
-ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
-ALTER TABLE audio_content 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 manage own audio content" ON audio_content FOR ALL USING (auth.uid() = user_id);`, 'sql-setup')}
-                  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 === 'sql-setup' ? 'Copied!' : 'Copy SQL setup'}
-                </button>
-              </div>
-            </div>
-
-            {/* Additional Resources */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl 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={`${glass.card} ${glass.border} 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={`${glass.card} ${glass.border} 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,
+  
+  
+  
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowLeft,
+  CheckCircle,
+  AlertCircle,
+  ExternalLink,
+  Copy,
+  Database,
+  CreditCard,
+  Shield,
+  Headphones,
+  Key,
+  Settings,
+  BookOpen,
+  Zap,
+  Code2,
+  FileText,
+  Music
+} from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export default function SetupPage() {
+  const [copiedVar, setCopiedVar] = useState<string | null>(null)
+
+  const projectName = "{{projectName}}"
+  const templateName = "Audio Platform with Payments"
+  const templateDescription = "UI + Authentication + Payments + Audio Features"
+
+  const envVars = [
+    { name: "NEXT_PUBLIC_SUPABASE_URL", example: "https://your-project.supabase.co", required: true },
+    { name: "NEXT_PUBLIC_SUPABASE_ANON_KEY", example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", required: true },
+    { name: "SUPABASE_SERVICE_ROLE_KEY", example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", required: false },
+    { name: "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY", example: "pk_test_51234567890abcdef...", required: true },
+    { name: "STRIPE_SECRET_KEY", example: "sk_test_51234567890abcdef...", required: true },
+    { name: "STRIPE_WEBHOOK_SECRET", example: "whsec_1234567890abcdef...", required: true },
+    { name: "ELEVENLABS_API_KEY", example: "sk-1234567890abcdef...", required: false },
+    { name: "OPENAI_API_KEY", example: "sk-1234567890abcdef...", required: false }
+  ]
+
+  const copyToClipboard = async (text: string, varName: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopiedVar(varName)
+    setTimeout(() => setCopiedVar(null), 2000)
+  }
+
+  return (
+    <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">
+          <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={`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">Setup Guide</h1>
+                  <p className="text-muted-foreground">{templateName}</p>
+                </div>
+              </div>
+              <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>
+
+            {/* Template Overview */}
+            <div className={`rounded-xl border border-border bg-card rounded-2xl 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-green-500 flex items-center justify-center`}>
+                  <Headphones className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-semibold">{templateName}</h2>
+                  <p className="text-muted-foreground">{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">
+                  <Music className="w-6 h-6 text-purple-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Audio 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={`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">
+                <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 Supabase for database and authentication</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>2. Configure Stripe for payment processing</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>3. (Optional) Add audio AI providers like ElevenLabs</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>4. Configure environment variables below</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-card rounded text-green-400">npm run dev</code></span>
+                </div>
+              </div>
+            </div>
+
+            {/* Environment Variables */}
+            <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">
+                <Key className="w-5 h-5 text-primary" />
+                Environment Variables
+              </h3>
+              <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-background rounded-xl p-4 overflow-x-auto">
+                <pre className="text-sm text-green-400">
+{envVars.map(envVar => (
+`${envVar.name}=${envVar.example}${envVar.required ? ' # Required' : ' # Optional'}`
+)).join('\n')}
+                </pre>
+                <button
+                  onClick={() => copyToClipboard(
+                    envVars.map(envVar => `${envVar.name}=${envVar.example}`).join('\n'),
+                    'all-env-vars'
+                  )}
+                  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'}
+                </button>
+              </div>
+            </div>
+
+            {/* Services Overview */}
+            <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">
+                <Settings className="w-5 h-5 text-muted-foreground" />
+                Required Services
+              </h3>
+              <div className="space-y-4">
+                {/* Supabase */}
+                <div className="flex items-center gap-4 p-4 bg-primary/10 rounded-xl">
+                  <Database className="w-8 h-8 text-primary" />
+                  <div className="flex-1">
+                    <h4 className="font-semibold">Supabase</h4>
+                    <p className="text-sm text-muted-foreground">Database and authentication</p>
+                  </div>
+                  <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Required</span>
+                  <a href="https://supabase.com/dashboard" className="text-primary hover:text-primary/80">
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                </div>
+
+                {/* Stripe */}
+                <div className="flex items-center gap-4 p-4 bg-green-500/10 rounded-xl">
+                  <CreditCard className="w-8 h-8 text-green-400" />
+                  <div className="flex-1">
+                    <h4 className="font-semibold">Stripe</h4>
+                    <p className="text-sm text-muted-foreground">Payment processing</p>
+                  </div>
+                  <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Required</span>
+                  <a href="https://dashboard.stripe.com" className="text-green-400 hover:text-green-300">
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                </div>
+
+                {/* Audio Services */}
+                <div className="flex items-center gap-4 p-4 bg-purple-500/10 rounded-xl">
+                  <Headphones className="w-8 h-8 text-purple-400" />
+                  <div className="flex-1">
+                    <h4 className="font-semibold">Audio Services</h4>
+                    <p className="text-sm text-muted-foreground">ElevenLabs, OpenAI for audio generation</p>
+                  </div>
+                  <span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs">Optional</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Database Setup */}
+            <div className={`rounded-xl border border-border bg-card rounded-2xl p-6 mb-8`}>
+              <h3 className="text-lg font-semibold mb-4">Database Setup</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Run this SQL in your Supabase SQL editor to set up the required tables:
+              </p>
+              <div className="bg-background rounded-xl p-4 overflow-x-auto">
+                <pre className="text-xs text-green-400">
+{`-- User profiles table
+CREATE TABLE profiles (
+  id UUID REFERENCES auth.users(id) PRIMARY KEY,
+  email TEXT,
+  full_name TEXT,
+  avatar_url TEXT,
+  stripe_customer_id TEXT,
+  subscription_status TEXT DEFAULT 'inactive',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Audio content table
+CREATE TABLE audio_content (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id UUID REFERENCES profiles(id),
+  title TEXT NOT NULL,
+  description TEXT,
+  audio_url TEXT,
+  duration INTEGER,
+  file_size BIGINT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable RLS
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE audio_content 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 manage own audio content" ON audio_content FOR ALL USING (auth.uid() = user_id);`}
+                </pre>
+                <button
+                  onClick={() => copyToClipboard(`-- User profiles table
+CREATE TABLE profiles (
+  id UUID REFERENCES auth.users(id) PRIMARY KEY,
+  email TEXT,
+  full_name TEXT,
+  avatar_url TEXT,
+  stripe_customer_id TEXT,
+  subscription_status TEXT DEFAULT 'inactive',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Audio content table
+CREATE TABLE audio_content (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id UUID REFERENCES profiles(id),
+  title TEXT NOT NULL,
+  description TEXT,
+  audio_url TEXT,
+  duration INTEGER,
+  file_size BIGINT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable RLS
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE audio_content 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 manage own audio content" ON audio_content FOR ALL USING (auth.uid() = user_id);`, 'sql-setup')}
+                  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 === 'sql-setup' ? 'Copied!' : 'Copy SQL setup'}
+                </button>
+              </div>
+            </div>
+
+            {/* Additional Resources */}
+            <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">
+                <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={`rounded-xl border border-border bg-card p-4 rounded-xl hover:scale-[1.02] transition-transform block`}
+                >
+                  <FileText className="w-8 h-8 text-primary mb-2" />
+                  <h4 className="font-medium">Documentation</h4>
+                  <p className="text-sm text-muted-foreground">Complete guides and API reference</p>
+                </a>
+                <a 
+                  href="https://github.com/digilogiclabs/examples" 
+                  className={`rounded-xl border border-border bg-card 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-muted-foreground">Sample projects and code snippets</p>
+                </a>
+              </div>
+            </div>
+
+            {/* Support */}
+            <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-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">
+                  <a href="https://discord.gg/digilogiclabs" target="_blank" rel="noopener noreferrer">
+                    Join Discord
+                  </a>
+                </Button>
+                <Button size="sm">
+                  <a href="https://docs.digilogiclabs.com/support" target="_blank" rel="noopener noreferrer">
+                    Get Support
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
 }