@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

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

@@ -1,394 +1,140 @@
-'use client'
-
-import { 
-  Button, 
-  Card, 
-  PageTransition,
-  MobileContainer,
-  MobileHero,
-  ResponsiveGrid,
-  NetworkAwareContent,
-  OfflineWrapper,
-  SwipeableCard,
-  PullToRefresh,
-  useNetworkInfo,
-  useOfflineState,
-  useAnimationTokens,
-  useGlassmorphism
-} from '@digilogiclabs/saas-factory-ui'
-import { 
-  ArrowRight, 
-  Zap, 
-  Shield, 
-  Rocket, 
-  CheckCircle, 
-  LogOut, 
-  User, 
-  MessageSquare, 
-  Mic, 
-  Video, 
-  Image as ImageIcon,
-  Brain,
-  Sparkles,
-  Wand2,
-  Headphones,
-  Monitor,
-  FileText
-} from 'lucide-react'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { 
-  AIProvider,
-  AIChat,
-  AITextGenerator,
-  AIAudioGenerator, 
-  AIVideoGenerator,
-  AISetupStatus,
-  getAIConfigFromEnv,
-  validateAIConfig,
-  type ChatMessage,
-  type QuickStartOptions 
-} from '@digilogiclabs/saas-factory-ai'
-import Link from 'next/link'
-import { useState } from 'react'
-
-export default function Home() {
-  const { user, signOut, loading } = useAuth()
-  const networkInfo = useNetworkInfo()
-  const isOnline = useOfflineState()
-  const [isRefreshing, setIsRefreshing] = useState(false)
-  const [activeAITool, setActiveAITool] = useState<'text' | 'audio' | 'video' | 'chat'>('chat')
-  
-  // Modern design tokens
-  const animations = useAnimationTokens()
-  const glass = useGlassmorphism({ intensity: 'medium', border: true, accent: true })
-  
-  const projectName = "{{projectName}}"
-  const projectDescription = "{{description}}"
-  
-  const heroConfig = {
-    badge: {
-      text: "🤖 AI-Powered Platform",
-      variant: "secondary" as const,
-      icon: Brain
-    },
-    title: {
-      text: "Welcome to " + projectName,
-      highlight: projectName,
-      size: "xl" as const
-    },
-    description: projectDescription + ". Harness the power of AI for text generation, audio creation, video production, and intelligent conversations."
-  }
-
-  const handleSignOut = async () => {
-    try {
-      await signOut()
-    } catch (err) {
-      console.error('Sign out error:', err)
-    }
-  }
-
-  const handleRefresh = async () => {
-    setIsRefreshing(true)
-    // Simulate refresh
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    setIsRefreshing(false)
-  }
-
-  const aiTools = [
-    {
-      id: 'chat' as const,
-      title: 'AI Chat',
-      description: 'Intelligent conversations and assistance',
-      icon: MessageSquare,
-      color: 'blue',
-      gradient: 'from-blue-500 to-cyan-500'
-    },
-    {
-      id: 'text' as const,
-      title: 'Text Generation',
-      description: 'Create content, articles, and copy',
-      icon: FileText,
-      color: 'purple',
-      gradient: 'from-purple-500 to-pink-500'
-    },
-    {
-      id: 'audio' as const,
-      title: 'Audio Generation',
-      description: 'Generate music, voices, and sound effects',
-      icon: Headphones,
-      color: 'green',
-      gradient: 'from-green-500 to-emerald-500'
-    },
-    {
-      id: 'video' as const,
-      title: 'Video Generation',
-      description: 'Create videos, animations, and visual content',
-      icon: Monitor,
-      color: 'orange',
-      gradient: 'from-orange-500 to-red-500'
-    }
-  ]
-
-  const aiConfig = getAIConfigFromEnv()
-
-  const renderAITool = () => {
-    switch (activeAITool) {
-      case 'chat':
-        return (
-          <div className={`${glass.card} ${glass.border} rounded-2xl p-6 h-96`}>
-            <AIChat
-              placeholder="Ask me anything..."
-              showTypingIndicator={true}
-              enableFileUpload={true}
-              maxMessages={50}
-              className="h-full"
-            />
-          </div>
-        )
-      case 'text':
-        return (
-          <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AITextGenerator
-              placeholder="Describe what you want to generate..."
-              maxLength={2000}
-              showWordCount={true}
-              templates={[
-                'Blog post',
-                'Product description',
-                'Email',
-                'Social media post',
-                'Technical documentation'
-              ]}
-              className="min-h-64"
-            />
-          </div>
-        )
-      case 'audio':
-        return (
-          <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIAudioGenerator
-              placeholder="Describe the audio you want to create..."
-              supportedFormats={['mp3', 'wav', 'ogg']}
-              maxDuration={300}
-              showWaveform={true}
-              className="min-h-64"
-            />
-          </div>
-        )
-      case 'video':
-        return (
-          <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIVideoGenerator
-              placeholder="Describe the video you want to create..."
-              supportedFormats={['mp4', 'webm']}
-              maxDuration={60}
-              resolution="1080p"
-              showPreview={true}
-              className="min-h-64"
-            />
-          </div>
-        )
-      default:
-        return null
-    }
-  }
-
-  return (
-    <AIProvider config={aiConfig}>
-      <PageTransition type="fade" duration={300}>
-        <OfflineWrapper
-          cacheStrategy="stale-while-revalidate"
-          showOfflineIndicator={true}
-          backgroundSync={true}
-        >
-        <PullToRefresh 
-          onRefresh={handleRefresh}
-          threshold={80}
-          loadingIndicator="spinner"
-          hapticOnTrigger={true}
-          networkAware={true}
-        >
-          <main className="min-h-screen relative overflow-hidden bg-background">
-            {/* Theme-aware gradient background */}
-            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-secondary/10 dark:from-primary/20 dark:via-background dark:to-secondary/20" />
-            <div className="absolute inset-0 bg-gradient-to-tr from-accent/5 via-transparent to-primary/5 dark:from-accent/10 dark:via-transparent dark:to-primary/10" />
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/15 via-transparent to-transparent dark:from-primary/25 dark:via-transparent dark:to-transparent" />
-            {/* Animated background particles - theme aware */}
-            <div className="absolute inset-0 opacity-30 dark:opacity-20">
-              <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-primary/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/60"></div>
-              <div className="absolute top-3/4 right-1/4 w-72 h-72 bg-secondary/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/60"></div>
-              <div className="absolute top-1/2 left-1/2 w-72 h-72 bg-accent/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/60"></div>
-            </div>
-            {/* Subtle overlay for depth */}
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/5 to-background/20" />
-            <div className="relative z-10">
-              <MobileContainer className="py-8">
-                {/* AI Configuration Status */}
-                <AISetupStatus className="mb-6" />
-                
-                {/* Simple Auth Status */}
-                {user && (
-                  <div className="flex justify-end mb-8">
-                    <div className="flex items-center gap-4">
-                      <span className="text-sm text-gray-600 dark:text-gray-300">
-                        Welcome, {user.email?.split('@')[0]}
-                      </span>
-                      <Button variant="outline" size="sm" onClick={handleSignOut}>
-                        <LogOut className="w-4 h-4 mr-2" />
-                        Sign Out
-                      </Button>
-                    </div>
-                  </div>
-                )}
-                
-                {!user && !loading && (
-                  <div className="flex justify-end mb-8">
-                    <div className="flex gap-2">
-                      <Link href="/login">
-                        <Button variant="outline" size="sm">Sign In</Button>
-                      </Link>
-                      <Link href="/signup">
-                        <Button size="sm">Sign Up</Button>
-                      </Link>
-                    </div>
-                  </div>
-                )}
-
-                {/* Hero Section */}
-                <MobileHero
-                  badge={heroConfig.badge}
-                  title={heroConfig.title}
-                  description={heroConfig.description}
-                  actions={[
-                    {
-                      label: "View Pricing",
-                      href: "/checkout",
-                      icon: ArrowRight,
-                      variant: "default",
-                      size: "lg"
-                    },
-                    {
-                      label: "Learn More",
-                      variant: "outline",
-                      size: "lg"
-                    }
-                  ]}
-                  className="text-center mb-12"
-                />
-
-                {/* AI Tool Selector */}
-                <div className="mb-8">
-                  <h2 className="text-2xl font-bold text-center mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-                    Choose Your AI Tool
-                  </h2>
-                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-                    {aiTools.map((tool) => {
-                      const Icon = tool.icon
-                      const isActive = activeAITool === tool.id
-                      return (
-                        <button
-                          key={tool.id}
-                          onClick={() => setActiveAITool(tool.id)}
-                          className={`
-                            ${glass.card} ${glass.border} 
-                            rounded-2xl p-4 text-center transition-all duration-300
-                            ${isActive 
-                              ? `bg-gradient-to-r ${tool.gradient} text-white shadow-lg scale-105` 
-                              : `${animations.hover.scale} hover:shadow-lg`
-                            }
-                          `}
-                        >
-                          <div className={`mx-auto w-12 h-12 rounded-xl flex items-center justify-center mb-3 ${
-                            isActive ? 'bg-white/20' : glass.accent
-                          }`}>
-                            <Icon className={`h-6 w-6 ${isActive ? 'text-white' : `text-${tool.color}-400`}`} />
-                          </div>
-                          <h3 className="font-semibold text-sm mb-1">{tool.title}</h3>
-                          <p className={`text-xs ${isActive ? 'text-white/80' : 'text-gray-600 dark:text-gray-300'}`}>
-                            {tool.description}
-                          </p>
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-
-                {/* AI Tool Interface */}
-                <div className="mb-12">
-                  {renderAITool()}
-                </div>
-
-                {/* Features Overview */}
-                <ResponsiveGrid columns={{ base: 1, sm: 2, md: 4 }} gap={6} className="mb-16">
-                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
-                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
-                      <Brain className="h-6 w-6 text-purple-400" />
-                    </div>
-                    <h3 className="text-lg font-semibold mb-2">Advanced AI Models</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">
-                      Powered by the latest AI technology for superior results
-                    </p>
-                  </div>
-
-                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
-                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
-                      <Zap className="h-6 w-6 text-yellow-400" />
-                    </div>
-                    <h3 className="text-lg font-semibold mb-2">Lightning Fast</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">
-                      Generate content in seconds with optimized processing
-                    </p>
-                  </div>
-
-                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
-                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
-                      <Shield className="h-6 w-6 text-green-400" />
-                    </div>
-                    <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">
-                      Your data and creations are always protected and private
-                    </p>
-                  </div>
-
-                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
-                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
-                      <Sparkles className="h-6 w-6 text-pink-400" />
-                    </div>
-                    <h3 className="text-lg font-semibold mb-2">Creative Freedom</h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">
-                      Unlimited possibilities for your creative projects
-                    </p>
-                  </div>
-                </ResponsiveGrid>
-
-                {/* Usage Stats */}
-                <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-16`}>
-                  <h2 className="text-xl font-bold text-center mb-6">Your AI Usage</h2>
-                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-                    <div className="text-center">
-                      <div className="text-3xl font-bold text-purple-400 mb-2">1,247</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Text Generated</div>
-                    </div>
-                    <div className="text-center">
-                      <div className="text-3xl font-bold text-green-400 mb-2">23</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Audio Created</div>
-                    </div>
-                    <div className="text-center">
-                      <div className="text-3xl font-bold text-orange-400 mb-2">8</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Videos Made</div>
-                    </div>
-                    <div className="text-center">
-                      <div className="text-3xl font-bold text-blue-400 mb-2">5.2k</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">Chat Messages</div>
-                    </div>
-                  </div>
-                </div>
-              </MobileContainer>
-            </div>
-          </main>
-        </PullToRefresh>
-      </OfflineWrapper>
-    </PageTransition>
-    </AIProvider>
-  )
-}
+import { ArrowRight, Zap, Shield, CreditCard, CheckCircle, Brain, Sparkles, MessageSquare } from 'lucide-react'
+
+import Link from 'next/link'
+
+const FEATURES = [
+  {
+    icon: Brain,
+    title: 'AI-Powered',
+    description: 'Integrated AI with OpenAI, Anthropic, and more. Chat, embeddings, and tool calling ready.',
+    color: 'text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-900/30',
+  },
+  {
+    icon: Shield,
+    title: 'Secure Auth',
+    description: 'Complete authentication with Supabase — login, signup, OAuth, and sessions.',
+    color: 'text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-900/30',
+  },
+  {
+    icon: CreditCard,
+    title: 'Stripe Billing',
+    description: 'Usage-based and subscription billing with Stripe. Webhooks and portal included.',
+    color: 'text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30',
+  },
+  {
+    icon: Sparkles,
+    title: 'Streaming Responses',
+    description: 'Real-time AI streaming with SSE. Token-by-token responses for great UX.',
+    color: 'text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30',
+  },
+  {
+    icon: MessageSquare,
+    title: 'Chat Interface',
+    description: 'Pre-built chat UI with message history, markdown rendering, and code blocks.',
+    color: 'text-pink-600 dark:text-pink-400 bg-pink-100 dark:bg-pink-900/30',
+  },
+  {
+    icon: Zap,
+    title: 'Production Ready',
+    description: 'Rate limiting, error handling, and observability built in from day one.',
+    color: 'text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30',
+  },
+]
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-background">
+      {/* Hero */}
+      <section className="mx-auto max-w-5xl px-4 py-24 text-center">
+        <div className="inline-flex items-center rounded-full border border-border bg-muted px-3 py-1 text-sm text-muted-foreground mb-6">
+          <Brain className="mr-1.5 h-3.5 w-3.5" />
+          AI + Auth + Payments
+        </div>
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl mb-4">
+          Build AI apps{' '}
+          <span className="text-primary">in minutes</span>
+        </h1>
+        <p className="mx-auto max-w-2xl text-lg text-muted-foreground mb-8">
+          A full-stack AI SaaS starter with authentication, Stripe billing,
+          and multi-provider AI integration. Ship your AI product today.
+        </p>
+        <div className="flex items-center justify-center gap-4">
+          
+            <Link href="/signup" className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+              Start Building <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          
+          
+            <Link href="/ai" className="inline-flex items-center justify-center rounded-md border border-input bg-background px-8 py-3 text-sm font-medium text-foreground hover:bg-accent transition-colors">Try the AI Demo</Link>
+          
+        </div>
+      </section>
+
+      {/* AI Demo Preview */}
+      <section className="mx-auto max-w-3xl px-4 pb-16">
+        <div className="rounded-xl border border-border bg-card overflow-hidden shadow-lg">
+          <div className="flex items-center gap-2 border-b border-border bg-muted/50 px-4 py-2">
+            <div className="h-3 w-3 rounded-full bg-destructive/50" />
+            <div className="h-3 w-3 rounded-full bg-accent/50" />
+            <div className="h-3 w-3 rounded-full bg-primary/50" />
+            <span className="ml-2 text-xs text-muted-foreground">AI Chat</span>
+          </div>
+          <div className="p-6 space-y-4">
+            <div className="flex gap-3">
+              <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0">
+                <span className="text-xs font-medium text-muted-foreground">You</span>
+              </div>
+              <div className="rounded-lg bg-muted px-4 py-2 text-sm text-foreground">
+                How do I add authentication to my Next.js app?
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+                <Sparkles className="h-4 w-4 text-primary" />
+              </div>
+              <div className="rounded-lg border border-border px-4 py-2 text-sm text-foreground">
+                I can help with that! This template already includes Supabase auth.
+                Check <code className="text-primary">src/lib/supabase/</code> for the client setup,
+                and <code className="text-primary">src/middleware.ts</code> for route protection.
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-foreground mb-2">Everything You Need</h2>
+          <p className="text-muted-foreground">Build production AI apps without reinventing the wheel.</p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature) => (
+            <div key={feature.title} className="rounded-xl border border-border bg-card p-6">
+              <div className={`mb-4 flex h-10 w-10 items-center justify-center rounded-lg ${feature.color}`}>
+                <feature.icon className="h-5 w-5" />
+              </div>
+              <h3 className="text-lg font-semibold text-card-foreground mb-2">{feature.title}</h3>
+              <p className="text-sm text-muted-foreground">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="rounded-xl border border-primary/20 bg-primary/5 p-8 md:p-12 text-center">
+          <h2 className="text-2xl font-bold text-foreground mb-2">Ready to build with AI?</h2>
+          <p className="text-muted-foreground mb-6 max-w-lg mx-auto">
+            Get started in minutes. Authentication, payments, and AI are pre-configured.
+          </p>
+          
+            <Link href="/signup" className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+              Create Your Account <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          
+        </div>
+      </section>
+    </main>
+  )
+}