@digilogiclabs/create-saas-app 2.9.0 → 2.10.0

package/dist/templates/web/ai-platform/template/src/app/page.tsx

@@ -1,207 +1,301 @@
 'use client'
 
-import { Button, Card, PremiumCard, PremiumCardContent, GradientBorderCard } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { Bot, Sparkles, Zap, MessageSquare, Code, Brain, ArrowRight, User, LogOut } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Bot, Sparkles, MessageSquare, Code, Brain, Zap, ArrowRight, Sun, Moon } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return <div className="w-9 h-9" />
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="inline-flex items-center justify-center w-9 h-9 rounded-md border border-border bg-background hover:bg-accent hover:text-accent-foreground active:scale-95 transition-all duration-200 cursor-pointer"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+    </button>
+  )
+}
+
 const FEATURES = [
   {
     icon: MessageSquare,
     title: 'AI Chat',
-    description: 'Conversational AI with multiple model support',
-    color: 'blue',
+    description: 'Conversational AI powered by multiple frontier models with streaming responses.',
+    iconColor: 'text-violet-500',
+    iconBg: 'bg-violet-500/10',
   },
   {
     icon: Code,
     title: 'Code Generation',
-    description: 'Generate and refactor code with AI assistance',
-    color: 'green',
+    description: 'Generate, refactor, and explain code with context-aware AI assistance.',
+    iconColor: 'text-cyan-500',
+    iconBg: 'bg-cyan-500/10',
   },
   {
-    icon: <Brain className="w-4 h-4" />,
+    icon: Brain,
     title: 'Custom Models',
-    description: 'Fine-tune and deploy your own AI models',
-    color: 'purple',
+    description: 'Fine-tune and deploy your own models with managed infrastructure.',
+    iconColor: 'text-amber-500',
+    iconBg: 'bg-amber-500/10',
   },
   {
     icon: Zap,
     title: 'API Access',
-    description: 'Integrate AI capabilities into your applications',
-    color: 'orange',
+    description: 'Integrate AI capabilities into your apps with a unified REST API.',
+    iconColor: 'text-emerald-500',
+    iconBg: 'bg-emerald-500/10',
   },
 ]
 
 const MODELS = [
-  { name: 'GPT-4o', provider: 'OpenAI', status: 'available' },
-  { name: 'Claude 3.5', provider: 'Anthropic', status: 'available' },
-  { name: 'Gemini Pro', provider: 'Google', status: 'coming_soon' },
-  { name: 'Llama 3', provider: 'Meta', status: 'available' },
+  { name: 'GPT-4o', provider: 'OpenAI', status: 'available' as const },
+  { name: 'Claude 3.5', provider: 'Anthropic', status: 'available' as const },
+  { name: 'Gemini Pro', provider: 'Google', status: 'coming_soon' as const },
+  { name: 'Llama 3', provider: 'Meta', status: 'available' as const },
 ]
 
 export default function Home() {
-  const { user, signOut, loading } = useAuth()
-
-  const projectName = "{{titleCaseName}}"
-
-  const handleSignOut = async () => {
-    try {
-      await signOut()
-    } catch (err) {
-      console.error('Sign out error:', err)
-    }
-  }
+  const projectName = '{{titleCaseName}}'
 
   return (
-    <main className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
-      {/* Header */}
-      <header className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <Link href="/" className="flex items-center gap-2">
-              <Bot className="w-8 h-8 text-purple-400" />
-              <span className="text-2xl font-bold text-white">{projectName}</span>
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Nav */}
+      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <Link href="/" className="flex items-center gap-2.5">
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-brand-from via-brand-via to-brand-to">
+                <Bot className="h-5 w-5 text-white" />
+              </div>
+              <span className="text-lg font-bold tracking-tight">{projectName}</span>
             </Link>
 
-            <nav className="hidden md:flex items-center gap-6">
-              <Link href="/models" className="text-gray-300 hover:text-white transition">
-                Models
-              </Link>
-              <Link href="/playground" className="text-gray-300 hover:text-white transition">
-                Playground
-              </Link>
-              <Link href="/docs" className="text-gray-300 hover:text-white transition">
-                Docs
-              </Link>
+            <nav className="hidden items-center gap-1 md:flex">
+              {['Models', 'Playground', 'Docs'].map((item) => (
+                <Link
+                  key={item}
+                  href={`/${item.toLowerCase()}`}
+                  className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors duration-200"
+                >
+                  {item}
+                </Link>
+              ))}
             </nav>
 
-            <div className="flex items-center gap-4">
-              {loading ? (
-                <div className="text-sm text-gray-400">Loading...</div>
-              ) : user ? (
-                <div className="flex items-center gap-2">
-                  <Link href="/dashboard">
-                    <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
-                      <User className="w-4 h-4 mr-2" />
-                      Dashboard
-                    </Button>
-                  </Link>
-                  <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-gray-400 hover:text-white">
-                    <LogOut className="w-4 h-4" />
-                  </Button>
-                </div>
-              ) : (
-                <div className="flex gap-2">
-                  <Link href="/login">
-                    <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
-                      Sign In
-                    </Button>
-                  </Link>
-                  <Link href="/signup">
-                    <Button size="sm" className="bg-purple-600 hover:bg-purple-700">
-                      Get Started
-                    </Button>
-                  </Link>
-                </div>
-              )}
+            <div className="flex items-center gap-3">
+              <ThemeToggle />
+              <Link href="/login">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-muted-foreground hover:text-foreground active:scale-95 transition-all duration-200 cursor-pointer"
+                >
+                  Sign In
+                </Button>
+              </Link>
+              <Link href="/signup">
+                <Button
+                  size="sm"
+                  className="bg-gradient-to-r from-brand-from via-brand-via to-brand-to text-white hover:brightness-110 shadow-sm hover:shadow-md active:scale-95 transition-all duration-200 cursor-pointer"
+                >
+                  Get Started
+                </Button>
+              </Link>
             </div>
           </div>
         </div>
       </header>
 
-      <div className="max-w-7xl mx-auto px-4 py-16">
+      <main id="main-content">
         {/* Hero */}
-        <div className="text-center mb-20">
-          <div className="inline-flex items-center px-4 py-2 rounded-full bg-purple-500/20 text-purple-300 text-sm mb-6">
-            <Sparkles className="w-4 h-4 mr-2" />
-            AI-Powered Platform
-          </div>
-          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
-            Build with <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">AI</span>
-          </h1>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
-            Access powerful AI models, build intelligent applications, and scale effortlessly.
-          </p>
-          <div className="flex gap-4 justify-center">
-            <Link href="/chat">
-              <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
-                <MessageSquare className="w-5 h-5 mr-2" />
-                Try AI Chat
-              </Button>
-            </Link>
-            <Link href="/playground">
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
-                Open Playground
-              </Button>
-            </Link>
+        <section className="relative overflow-hidden px-4 pt-24 pb-20 sm:px-6 lg:px-8">
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-brand-from/5 via-transparent to-transparent" />
+          <div className="relative mx-auto max-w-4xl text-center">
+            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-muted/50 px-4 py-1.5 text-sm font-medium text-muted-foreground">
+              <Sparkles className="h-4 w-4 text-primary" />
+              AI-Powered Platform
+            </div>
+
+            <h1 className="mb-6 text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
+              Build with{' '}
+              <span className="bg-gradient-to-r from-brand-from via-brand-via to-brand-to bg-clip-text text-transparent">
+                AI
+              </span>
+            </h1>
+
+            <p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground sm:text-xl">
+              Access powerful AI models from leading providers. Build intelligent applications
+              and scale effortlessly with a unified platform.
+            </p>
+
+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+              <Link href="/chat">
+                <Button
+                  size="lg"
+                  className="bg-gradient-to-r from-brand-from via-brand-via to-brand-to text-white hover:brightness-110 shadow-sm hover:shadow-md active:scale-[0.97] transition-all duration-200 cursor-pointer"
+                >
+                  <MessageSquare className="mr-2 h-5 w-5" />
+                  Try AI Chat
+                </Button>
+              </Link>
+              <Link href="/playground">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-border hover:bg-accent hover:text-accent-foreground active:scale-[0.97] transition-all duration-200 cursor-pointer"
+                >
+                  Open Playground
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
           </div>
-        </div>
+        </section>
 
         {/* Features */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
-          {FEATURES.map((feature) => (
-            <PremiumCard key={feature.title} variant="glass" className="bg-white/5 border-white/10 backdrop-blur-sm">
-              <PremiumCardContent className="p-6">
-                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-${feature.color}-500/20`}>
-                  <feature.icon className={`w-6 h-6 text-${feature.color}-400`} />
-                </div>
-                <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
-                <p className="text-gray-400 text-sm">{feature.description}</p>
-              </PremiumCardContent>
-            </PremiumCard>
-          ))}
-        </div>
+        <section className="px-4 py-20 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-7xl">
+            <div className="mb-12 text-center">
+              <h2 className="mb-3 text-3xl font-bold tracking-tight sm:text-4xl">
+                Everything you need to build with AI
+              </h2>
+              <p className="mx-auto max-w-2xl text-muted-foreground">
+                From chat interfaces to custom model deployment, our platform provides the tools
+                to integrate AI into any workflow.
+              </p>
+            </div>
 
-        {/* Available Models */}
-        <div className="mb-20">
-          <div className="flex items-center justify-between mb-8">
-            <div>
-              <h2 className="text-3xl font-bold text-white mb-2">Available Models</h2>
-              <p className="text-gray-400">Access leading AI models from top providers</p>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+              {FEATURES.map((feature) => (
+                <Card
+                  key={feature.title}
+                  className="group cursor-default border-border bg-background hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
+                >
+                  <CardContent className="p-6">
+                    <div className={`mb-4 flex h-12 w-12 items-center justify-center rounded-lg ${feature.iconBg}`}>
+                      <feature.icon className={`h-6 w-6 ${feature.iconColor}`} />
+                    </div>
+                    <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
+                    <p className="text-sm leading-relaxed text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </CardContent>
+                </Card>
+              ))}
             </div>
-            <Link href="/models">
-              <Button variant="ghost" className="text-purple-400 hover:text-purple-300">
-                View All
-                <ArrowRight className="w-4 h-4 ml-2" />
-              </Button>
-            </Link>
           </div>
+        </section>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {MODELS.map((model) => (
-              <Card key={model.name} className="p-4 bg-white/5 border-white/10">
-                <div className="flex items-center justify-between mb-2">
-                  <h3 className="font-semibold text-white">{model.name}</h3>
-                  <span className={`text-xs px-2 py-1 rounded ${
-                    model.status === 'available'
-                      ? 'bg-green-500/20 text-green-400'
-                      : 'bg-yellow-500/20 text-yellow-400'
-                  }`}>
-                    {model.status === 'available' ? 'Available' : 'Coming Soon'}
-                  </span>
-                </div>
-                <p className="text-sm text-gray-400">{model.provider}</p>
-              </Card>
-            ))}
+        {/* Available Models */}
+        <section className="px-4 py-20 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-7xl">
+            <div className="mb-10 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
+              <div>
+                <h2 className="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">
+                  Available Models
+                </h2>
+                <p className="text-muted-foreground">
+                  Access leading AI models from top providers through a single API.
+                </p>
+              </div>
+              <Link href="/models">
+                <Button
+                  variant="ghost"
+                  className="text-primary hover:text-primary hover:bg-accent active:scale-95 transition-all duration-200 cursor-pointer"
+                >
+                  View All Models
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {MODELS.map((model) => (
+                <Card
+                  key={model.name}
+                  className="group cursor-default border-border bg-background hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
+                >
+                  <CardContent className="p-5">
+                    <div className="mb-3 flex items-center justify-between">
+                      <h3 className="text-base font-semibold">{model.name}</h3>
+                      <span
+                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                          model.status === 'available'
+                            ? 'bg-emerald-500/10 text-emerald-500'
+                            : 'bg-amber-500/10 text-amber-500'
+                        }`}
+                      >
+                        {model.status === 'available' ? 'Available' : 'Coming Soon'}
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground">{model.provider}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
           </div>
-        </div>
+        </section>
 
         {/* CTA */}
-        <GradientBorderCard gradientColors="from-purple-500 via-pink-500 to-purple-500" borderWidth={2}>
-          <div className="text-center py-6">
-            <h2 className="text-3xl font-bold text-white mb-4">Ready to Build?</h2>
-            <p className="text-gray-400 mb-8 max-w-md mx-auto">
-              Start building AI-powered applications today. Free tier available.
+        <section className="px-4 py-20 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-7xl">
+            <div className="overflow-hidden rounded-2xl bg-gradient-to-r from-brand-from via-brand-via to-brand-to px-6 py-16 text-center shadow-xl sm:px-16">
+              <h2 className="mb-4 text-3xl font-bold text-white sm:text-4xl">
+                Ready to Build with AI?
+              </h2>
+              <p className="mx-auto mb-8 max-w-xl text-lg text-white/80">
+                Start building AI-powered applications today. Free tier available with generous
+                usage limits.
+              </p>
+              <Link href="/signup">
+                <Button
+                  size="lg"
+                  className="bg-white text-foreground hover:bg-white/90 shadow-md hover:shadow-lg active:scale-[0.97] transition-all duration-200 cursor-pointer"
+                >
+                  Get Started Free
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-border">
+        <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+          <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
+            <div className="flex items-center gap-2.5">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-from via-brand-via to-brand-to">
+                <Bot className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-sm font-semibold">{projectName}</span>
+            </div>
+
+            <nav className="flex items-center gap-6">
+              {['Models', 'Playground', 'Docs', 'Pricing'].map((item) => (
+                <Link
+                  key={item}
+                  href={`/${item.toLowerCase()}`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-200"
+                >
+                  {item}
+                </Link>
+              ))}
+            </nav>
+
+            <p className="text-sm text-muted-foreground">
+              &copy; {new Date().getFullYear()} {projectName}. All rights reserved.
             </p>
-            <Link href="/signup">
-              <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
-                Get Started Free
-                <ArrowRight className="w-5 h-5 ml-2" />
-              </Button>
-            </Link>
           </div>
-        </GradientBorderCard>
-      </div>
-    </main>
+        </div>
+      </footer>
+    </div>
   )
 }

package/dist/templates/web/ai-platform/template/src/components/providers/app-providers.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
+import { DLLProvider } from '@digilogiclabs/app-sdk'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -10,8 +11,10 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      {children}
-      <Toaster />
+      <DLLProvider>
+        {children}
+        <Toaster />
+      </DLLProvider>
     </ThemeProvider>
   )
 }

package/dist/templates/web/ai-platform/template/src/lib/auth-server.ts

@@ -1,33 +1,32 @@
-import { redirect } from 'next/navigation'
-import { createClient } from './supabase/server'
-
-export interface AuthUser {
-  id: string
-  email: string | null
-  name?: string | null
-}
-
-export async function getUser(): Promise<AuthUser | null> {
-  const supabase = await createClient()
-  const { data: { user }, error } = await supabase.auth.getUser()
-
-  if (error || !user) {
-    return null
-  }
-
-  return {
-    id: user.id,
-    email: user.email ?? null,
-    name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
-  }
-}
-
-export async function requireAuth(): Promise<AuthUser> {
-  const user = await getUser()
-
-  if (!user) {
-    redirect('/login')
-  }
-
-  return user
-}
+import { redirect } from 'next/navigation'
+import { getSession, getUser as getSessionUser } from './auth-session'
+
+export interface AuthUser {
+  id: string
+  email: string | null
+  name?: string | null
+}
+
+export async function getUser(): Promise<AuthUser | null> {
+  const user = await getSessionUser()
+
+  if (!user || !user.id) {
+    return null
+  }
+
+  return {
+    id: user.id,
+    email: user.email ?? null,
+    name: user.name ?? null,
+  }
+}
+
+export async function requireAuth(): Promise<AuthUser> {
+  const user = await getUser()
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  return user
+}

package/dist/templates/web/base/template/next.config.js

@@ -1,15 +1,14 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
-  images: {
-    domains: ['localhost'],
-  },
-  env: {
-    CUSTOM_KEY: process.env.CUSTOM_KEY,
-  },
-}
-
-module.exports = nextConfig
-
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig