@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,801 @@
+'use client'
+
+import { 
+  Card, 
+  Button,
+  PageTransition,
+  MobileContainer,
+  useAnimationTokens,
+  useGlassmorphism
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowLeft,
+  CheckCircle,
+  Copy,
+  Terminal,
+  Bot,
+  FileText,
+  Rocket,
+  Cloud,
+  Code2,
+  Book,
+  Zap,
+  Settings,
+  Download,
+  ExternalLink,
+  GitBranch,
+  Database,
+  Globe
+} from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+interface DeploymentOption {
+  name: string
+  icon: any
+  description: string
+  complexity: 'Easy' | 'Medium' | 'Advanced'
+  timeEstimate: string
+  features: string[]
+  steps: Array<{
+    title: string
+    description: string
+    code?: string
+    link?: string
+  }>
+}
+
+export default function DevSetupPage() {
+  const animations = useAnimationTokens()
+  const glass = useGlassmorphism()
+  const [copiedItem, setCopiedItem] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<'claude' | 'deployment'>('claude')
+
+  const projectName = "{{projectName}}"
+  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 copyToClipboard = async (text: string, itemName: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopiedItem(itemName)
+    setTimeout(() => setCopiedItem(null), 2000)
+  }
+
+  // Template-specific package documentation
+  const packageDocs = [
+    ...(hasAuth ? [{
+      name: "@digilogiclabs/saas-factory-auth",
+      description: "Authentication components and hooks with Supabase integration",
+      key_exports: ["useAuth", "AuthProvider", "LoginForm", "SignupForm"],
+      docs_link: "https://docs.digilogiclabs.com/packages/auth"
+    }] : []),
+    {
+      name: "@digilogiclabs/saas-factory-ui", 
+      description: "Modern UI components with glassmorphism and responsive design",
+      key_exports: ["Button", "Card", "MobileContainer", "PageTransition", "ResponsiveGrid"],
+      docs_link: "https://docs.digilogiclabs.com/packages/ui"
+    },
+    ...(hasPayments ? [{
+      name: "@digilogiclabs/saas-factory-payments",
+      description: "Stripe integration for subscriptions and payments",
+      key_exports: ["useStripe", "PaymentForm", "SubscriptionManager", "BillingPortal"],
+      docs_link: "https://docs.digilogiclabs.com/packages/payments"
+    }] : []),
+    ...(hasAI ? [{
+      name: "@digilogiclabs/saas-factory-ai",
+      description: "AI platform with text, audio, and video generation capabilities",
+      key_exports: ["AIProvider", "AITextGenerator", "AIAudioGenerator", "AIVideoGenerator", "AIChat"],
+      docs_link: "https://docs.digilogiclabs.com/packages/ai"
+    }, {
+      name: "@digilogiclabs/saas-factory-ai-types",
+      description: "TypeScript types and interfaces for AI operations",
+      key_exports: ["AIConfig", "TextGenerationRequest", "AudioGenerationRequest", "VideoGenerationRequest"],
+      docs_link: "https://docs.digilogiclabs.com/packages/ai-types"
+    }] : [])
+  ]
+
+  const claudeConfig = {
+    name: projectName,
+    description: `${templateName} built with Digi Logic Labs packages`,
+    include: [
+      "src/**/*",
+      "*.md",
+      "*.json",
+      "*.js",
+      "*.ts",
+      ".env.example"
+    ],
+    exclude: [
+      "node_modules/**/*",
+      ".next/**/*",
+      "dist/**/*",
+      "build/**/*",
+      "*.log"
+    ],
+    instructions: `You are helping develop a ${templateName} using Next.js 15, TypeScript, and Digi Logic Labs packages.
+
+## Project Architecture
+- **Framework**: Next.js 15.3 with App Router
+- **Database**: Supabase (PostgreSQL with real-time features)
+- **Styling**: Tailwind CSS v4 with glassmorphism design system
+${hasAuth ? '- **Authentication**: Supabase Auth with @digilogiclabs/saas-factory-auth' : ''}
+${hasPayments ? '- **Payments**: Stripe integration with @digilogiclabs/saas-factory-payments' : ''}
+${hasAI ? '- **AI Platform**: Multi-modal AI with @digilogiclabs/saas-factory-ai' : ''}
+
+## Key Packages
+${packageDocs.map(pkg => `- **${pkg.name}**: ${pkg.description}`).join('\n')}
+
+## Development Guidelines
+1. Follow Next.js 15 best practices with Server Components by default
+2. Use TypeScript strictly - all components should be typed
+3. Implement proper error boundaries and loading states  
+4. Follow the glassmorphism design system from saas-factory-ui
+5. Use Server Actions for mutations and API routes for complex logic
+${hasAuth ? '6. Always check authentication state with useAuth hook' : ''}
+${hasPayments ? '7. Handle payment states and subscription status properly' : ''}
+${hasAI ? '8. Implement proper AI generation state management and error handling' : ''}
+
+## File Organization
+- Components in /src/components with feature-based folders
+- Server actions in /src/server/actions  
+- API routes in /src/app/api
+- Database queries in /src/server/queries
+- Types in /src/types
+
+## Testing
+- Use Vitest for unit tests
+- Test business logic and error states
+- Mock external services (Supabase, Stripe, AI providers)
+
+Remember to consult the context.md file for detailed package documentation and examples.`
+  }
+
+  const contextContent = `# ${projectName} - Development Context
+
+This project is a ${templateName} built with modern technologies and Digi Logic Labs packages.
+
+## Architecture Overview
+
+### Core Technologies
+- **Next.js 15.3**: App Router, Server Components, Server Actions
+- **TypeScript**: Strict typing throughout
+- **Tailwind CSS v4**: Design tokens, glassmorphism system
+- **Supabase**: Database, authentication, real-time features
+
+### Package Integration
+
+${packageDocs.map(pkg => `
+#### ${pkg.name}
+${pkg.description}
+
+**Key Exports**: ${pkg.key_exports.join(', ')}
+**Documentation**: ${pkg.docs_link}
+`).join('\n')}
+
+## Environment Configuration
+
+Required environment variables:
+\`\`\`bash
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+${hasPayments ? 'NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key\nSTRIPE_SECRET_KEY=your_stripe_secret_key' : ''}
+${hasAI ? 'OPENAI_API_KEY=your_openai_api_key' : ''}
+${hasAudio ? 'ELEVENLABS_API_KEY=your_elevenlabs_api_key' : ''}
+${hasVideo ? 'REPLICATE_API_TOKEN=your_replicate_token' : ''}
+\`\`\`
+
+## Database Schema
+
+Key tables:
+- **profiles**: User profile information
+${hasPayments ? '- **subscriptions**: Stripe subscription management' : ''}
+${hasAI ? '- **ai_conversations**: AI interaction history' : ''}
+${hasAudio ? '- **audio_content**: Generated audio files and metadata' : ''}
+${hasVideo ? '- **video_content**: Generated video files and metadata' : ''}
+
+## Common Patterns
+
+### Authentication Flow
+${hasAuth ? `\`\`\`typescript
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+
+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'}
+
+### UI Components
+\`\`\`typescript
+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}\`}>
+        <Button variant="default">Action</Button>
+      </Card>
+    </PageTransition>
+  )
+}
+\`\`\`
+
+${hasPayments ? `### Payment Integration
+\`\`\`typescript
+import { useStripe, PaymentForm } from '@digilogiclabs/saas-factory-payments'
+
+export function CheckoutPage() {
+  const { createCheckoutSession, loading } = useStripe()
+  
+  const handlePayment = async (priceId: string) => {
+    const { url } = await createCheckoutSession({ priceId })
+    window.location.href = url
+  }
+  
+  return <PaymentForm onSubmit={handlePayment} />
+}
+\`\`\`` : ''}
+
+${hasAI ? `### AI Integration
+\`\`\`typescript
+import { AIProvider, AITextGenerator } from '@digilogiclabs/saas-factory-ai'
+
+export function AIDemo() {
+  const aiConfig = {
+    apiKey: process.env.OPENAI_API_KEY,
+    provider: 'openai',
+    model: 'gpt-4'
+  }
+  
+  return (
+    <AIProvider config={aiConfig}>
+      <AITextGenerator 
+        placeholder="Generate content..."
+        maxLength={2000}
+      />
+    </AIProvider>
+  )
+}
+\`\`\`` : ''}
+
+## Development Workflow
+
+1. **Setup**: Run setup guide at /setup
+2. **Development**: \`npm run dev\` with hot reload
+3. **Testing**: \`npm run test\` with Vitest  
+4. **Building**: \`npm run build\` for production
+5. **Deployment**: See deployment guide at /dev-setup
+
+## Troubleshooting
+
+### Common Issues
+- **Environment Variables**: Check .env.local file exists and variables are correct
+- **Database Connection**: Verify Supabase project settings and RLS policies
+${hasPayments ? '- **Stripe Issues**: Check webhook endpoints and API keys match' : ''}
+${hasAI ? '- **AI Generation Failures**: Verify API keys and rate limits' : ''}
+
+### Debug Commands
+\`\`\`bash
+npm run type-check  # TypeScript validation
+npm run lint        # ESLint validation  
+npm run test        # Run test suite
+\`\`\`
+
+## Resources
+
+- **Package Documentation**: https://docs.digilogiclabs.com
+- **Support Discord**: https://discord.gg/digilogiclabs
+- **Example Projects**: https://github.com/digilogiclabs/examples
+- **Setup Guide**: /setup page in this application
+`
+
+  const deploymentOptions: DeploymentOption[] = [
+    {
+      name: "Vercel (Recommended)",
+      icon: Globe,
+      description: "Zero-configuration deployment with automatic HTTPS, edge functions, and global CDN",
+      complexity: "Easy",
+      timeEstimate: "5 minutes",
+      features: [
+        "Automatic deployments from Git",
+        "Built-in CDN and edge functions", 
+        "Environment variable management",
+        "Preview deployments for PRs",
+        "Custom domains and SSL"
+      ],
+      steps: [
+        {
+          title: "Install Vercel CLI",
+          description: "Install the Vercel CLI globally",
+          code: "npm install -g vercel"
+        },
+        {
+          title: "Deploy to Vercel",
+          description: "Deploy your project with a single command",
+          code: "vercel --prod",
+        },
+        {
+          title: "Configure Environment Variables", 
+          description: "Add your environment variables in the Vercel dashboard",
+          link: "https://vercel.com/docs/environment-variables"
+        },
+        {
+          title: "Set up Custom Domain",
+          description: "Add your custom domain in the Vercel project settings",
+          link: "https://vercel.com/docs/custom-domains"
+        }
+      ]
+    },
+    {
+      name: "Netlify",
+      icon: Cloud,
+      description: "Git-based deployment with form handling, edge functions, and A/B testing",
+      complexity: "Easy", 
+      timeEstimate: "10 minutes",
+      features: [
+        "Drag & drop deployment",
+        "Form handling and serverless functions",
+        "Split testing and analytics",
+        "Identity and authentication",
+        "Large media support"
+      ],
+      steps: [
+        {
+          title: "Build Your Project",
+          description: "Create a production build",
+          code: "npm run build"
+        },
+        {
+          title: "Deploy to Netlify",
+          description: "Drag and drop your dist folder to Netlify or connect your Git repository",
+          link: "https://app.netlify.com/drop"
+        },
+        {
+          title: "Configure Build Settings",
+          description: "Set build command and publish directory",
+          code: "Build command: npm run build\nPublish directory: out"
+        }
+      ]
+    },
+    {
+      name: "Railway",
+      icon: Database,
+      description: "Full-stack deployment with integrated database, metrics, and team collaboration",
+      complexity: "Medium",
+      timeEstimate: "15 minutes", 
+      features: [
+        "Integrated PostgreSQL database",
+        "Automatic HTTPS and custom domains", 
+        "Built-in metrics and logging",
+        "Team collaboration features",
+        "One-click database backups"
+      ],
+      steps: [
+        {
+          title: "Install Railway CLI",
+          description: "Install Railway CLI and login",
+          code: "npm install -g @railway/cli\nrailway login"
+        },
+        {
+          title: "Initialize Project",
+          description: "Initialize Railway in your project",
+          code: "railway init"
+        },
+        {
+          title: "Deploy Application",
+          description: "Deploy your application and database",
+          code: "railway up"
+        }
+      ]
+    },
+    {
+      name: "Docker + Cloud Run",
+      icon: Code2,
+      description: "Containerized deployment on Google Cloud with auto-scaling and pay-per-use pricing", 
+      complexity: "Advanced",
+      timeEstimate: "30 minutes",
+      features: [
+        "Fully containerized application",
+        "Auto-scaling based on traffic",
+        "Pay only for actual usage", 
+        "Global load balancing",
+        "Integrated with Google Cloud services"
+      ],
+      steps: [
+        {
+          title: "Create Dockerfile",
+          description: "Create a Dockerfile for your Next.js application",
+          code: `FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["npm", "start"]`
+        },
+        {
+          title: "Build and Deploy",
+          description: "Build and deploy to Google Cloud Run",
+          code: "gcloud run deploy --source ."
+        }
+      ]
+    }
+  ]
+
+  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="/setup" 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">Development & Deployment</h1>
+                  <p className="text-gray-600 dark:text-gray-300">Claude AI setup and hosting guides</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>
+
+            {/* Tab Navigation */}
+            <div className={`${glass.card} ${glass.border} 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'
+                }`}
+              >
+                <Bot className="w-4 h-4 inline mr-2" />
+                Claude AI Setup
+              </button>
+              <button
+                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'
+                }`}
+              >
+                <Rocket className="w-4 h-4 inline mr-2" />
+                Deployment
+              </button>
+            </div>
+
+            {activeTab === 'claude' && (
+              <>
+                {/* Claude AI Development Setup */}
+                <div className={`${glass.card} ${glass.border} 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>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <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>
+                    <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="font-medium">Smart Context</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-300">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>
+                  </div>
+
+                  <div className="space-y-6">
+                    {/* Step 1: Install Claude CLI */}
+                    <div className="flex gap-4">
+                      <div className="w-8 h-8 rounded-full bg-purple-500 text-white text-sm flex items-center justify-center flex-shrink-0 mt-0.5">
+                        1
+                      </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">
+                          Install the Claude CLI to get AI assistance directly in your terminal
+                        </p>
+                        <div className="bg-gray-900 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"
+                          >
+                            <Copy className="w-3 h-3" />
+                            {copiedItem === 'claude-install' ? 'Copied!' : 'Copy command'}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Step 2: Generate .claude file */}
+                    <div className="flex gap-4">
+                      <div className="w-8 h-8 rounded-full bg-purple-500 text-white text-sm flex items-center justify-center flex-shrink-0 mt-0.5">
+                        2
+                      </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">
+                          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">
+                          <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"
+                          >
+                            <Copy className="w-3 h-3" />
+                            {copiedItem === 'claude-config' ? 'Copied!' : 'Copy .claude configuration'}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Step 3: Create context.md */}
+                    <div className="flex gap-4">
+                      <div className="w-8 h-8 rounded-full bg-purple-500 text-white text-sm flex items-center justify-center flex-shrink-0 mt-0.5">
+                        3
+                      </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">
+                          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">
+                            Show context.md content
+                          </summary>
+                          <div className="bg-gray-900 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"
+                            >
+                              <Copy className="w-3 h-3" />
+                              {copiedItem === 'context-content' ? 'Copied!' : 'Copy context.md content'}
+                            </button>
+                          </div>
+                        </details>
+                      </div>
+                    </div>
+
+                    {/* Step 4: Usage Examples */}
+                    <div className="flex gap-4">
+                      <div className="w-8 h-8 rounded-full bg-purple-500 text-white text-sm flex items-center justify-center flex-shrink-0 mt-0.5">
+                        4
+                      </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">
+                          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>
+                            <code className="text-green-400 text-xs">claude "Create a new user profile component with glassmorphism styling"</code>
+                          </div>
+                          <div className="bg-gray-900 rounded-lg p-3">
+                            <div className="text-blue-400 text-sm mb-1">Debug issues:</div>
+                            <code className="text-green-400 text-xs">claude "Help me debug this authentication error"</code>
+                          </div>
+                          <div className="bg-gray-900 rounded-lg p-3">
+                            <div className="text-blue-400 text-sm mb-1">Add features:</div>
+                            <code className="text-green-400 text-xs">claude "Add a dark mode toggle to the header component"</code>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Package Documentation Quick Reference */}
+                <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">
+                    <Book className="w-5 h-5 text-blue-400" />
+                    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`}>
+                        <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>
+                        <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>
+                        <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"
+                        >
+                          View Docs <ExternalLink className="w-3 h-3" />
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+
+            {activeTab === 'deployment' && (
+              <>
+                {/* Deployment Options */}
+                <div className="space-y-8">
+                  <h2 className="text-xl font-semibold mb-6">Choose Your Deployment Platform</h2>
+                  
+                  {deploymentOptions.map((option, index) => {
+                    const OptionIcon = option.icon
+                    return (
+                      <div key={index} className={`${glass.card} ${glass.border} 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`}>
+                              <OptionIcon className="w-6 h-6 text-white" />
+                            </div>
+                            <div>
+                              <h3 className="text-lg font-semibold flex items-center gap-3">
+                                {option.name}
+                                <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                                  option.complexity === 'Easy' ? 'bg-green-500/20 text-green-400' :
+                                  option.complexity === 'Medium' ? 'bg-yellow-500/20 text-yellow-400' :
+                                  'bg-red-500/20 text-red-400'
+                                }`}>
+                                  {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>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Features */}
+                        <div className="mb-6">
+                          <h4 className="font-semibold mb-3">Features:</h4>
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                            {option.features.map((feature, fIndex) => (
+                              <div key={fIndex} className="flex items-center gap-2 text-sm">
+                                <CheckCircle className="w-4 h-4 text-green-400" />
+                                {feature}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* Deployment Steps */}
+                        <div>
+                          <h4 className="font-semibold mb-3">Deployment Steps:</h4>
+                          <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">
+                                  {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>
+                                  {step.code && (
+                                    <div className="bg-gray-900 rounded-lg p-3 mt-2">
+                                      <pre className="text-green-400 text-xs whitespace-pre-wrap">{step.code}</pre>
+                                    </div>
+                                  )}
+                                  {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-2"
+                                    >
+                                      Learn More <ExternalLink className="w-3 h-3" />
+                                    </a>
+                                  )}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+
+                {/* Pre-Deployment Checklist */}
+                <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">
+                    <CheckCircle className="w-5 h-5 text-green-400" />
+                    Pre-Deployment Checklist
+                  </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>Environment variables configured in production</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <CheckCircle className="w-5 h-5 text-green-400" />
+                      <span>Database tables created and RLS policies enabled</span>
+                    </div>
+                    {hasPayments && (
+                      <div className="flex items-center gap-3">
+                        <CheckCircle className="w-5 h-5 text-green-400" />
+                        <span>Stripe webhooks configured for production</span>
+                      </div>
+                    )}
+                    <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>
+                    </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>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <CheckCircle className="w-5 h-5 text-green-400" />
+                      <span>Domain and SSL certificate ready (if using custom domain)</span>
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+
+            {/* Support Section */}
+            <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 with development and deployment.
+              </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" target="_blank" rel="noopener noreferrer">
+                    View Docs
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </MobileContainer>
+        </div>
+      </main>
+    </PageTransition>
+  )
+}