@digilogiclabs/create-saas-app 2.9.0 → 2.10.0

package/dist/templates/web/micro-saas/template/src/app/login/page.tsx

@@ -1,87 +1,101 @@
-'use client'
-
-import { useState } from 'react'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { useRouter } from 'next/navigation'
-import Link from 'next/link'
-
-export default function LoginPage() {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState('')
-  const { signIn, loading } = useAuth()
-  const router = useRouter()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-
-    try {
-      await signIn(email, password)
-      router.push('/dashboard')
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to sign in')
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
-      <Card className="w-full max-w-md p-8">
-        <div className="text-center mb-8">
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Welcome Back</h1>
-          <p className="text-gray-600 dark:text-gray-300 mt-2">Sign in to your account</p>
-        </div>
-
-        {error && (
-          <div className="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg mb-6 text-sm">
-            {error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
-              required
-            />
-          </div>
-
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
-              required
-            />
-          </div>
-
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing in...' : 'Sign In'}
-          </Button>
-        </form>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 dark:text-gray-300 text-sm">
-            Don't have an account?{' '}
-            <Link href="/signup" className="text-blue-600 hover:underline">
-              Sign up
-            </Link>
-          </p>
-        </div>
-      </Card>
-    </div>
-  )
-}
+'use client'
+
+import { useState } from 'react'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Zap } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const { signIn, loading } = useAuth()
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    try {
+      await signIn(email, password)
+      router.push('/dashboard')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to sign in')
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8 hover:opacity-80 transition-opacity">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+            <Zap className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">Micro Saas</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Welcome back</h1>
+              <p className="text-muted-foreground mt-2">Sign in to your account</p>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg mb-6 text-sm" role="alert">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1.5">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Enter your password"
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full h-11 text-base cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200" disabled={loading}>
+                {loading ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Sign up
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/micro-saas/template/src/app/page.tsx

@@ -1,137 +1,227 @@
-'use client'
-
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { ArrowRight, Zap, Shield, Rocket, LogOut, User } from 'lucide-react'
-import Link from 'next/link'
-
-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)
-    }
-  }
-
-  return (
-    <main className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
-      <div className="max-w-4xl mx-auto px-4 py-16">
-        {/* Auth Status */}
-        <div className="flex justify-end mb-8">
-          {loading ? (
-            <div className="text-sm text-gray-600">Loading...</div>
-          ) : user ? (
-            <div className="flex items-center gap-4">
-              <span className="text-sm text-gray-600 dark:text-gray-300 flex items-center gap-2">
-                <User className="w-4 h-4" />
-                {user.email}
-              </span>
-              <Button variant="outline" size="sm" onClick={handleSignOut}>
-                <LogOut className="w-4 h-4 mr-2" />
-                Sign Out
-              </Button>
-            </div>
-          ) : (
-            <div className="flex gap-2">
-              <Link href="/login">
-                <Button variant="outline" size="sm">Sign In</Button>
-              </Link>
-              <Link href="/signup">
-                <Button size="sm">Get Started</Button>
-              </Link>
-            </div>
-          )}
-        </div>
-
-        {/* Hero Section */}
-        <div className="text-center mb-16">
-          <div className="inline-flex items-center px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-sm mb-6">
-            <Zap className="w-4 h-4 mr-2" />
-            Micro SaaS MVP
-          </div>
-          <h1 className="text-5xl font-bold text-gray-900 dark:text-white mb-6">
-            {projectName}
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-            A focused, single-feature SaaS application built for rapid validation.
-            Ship fast, learn faster.
-          </p>
-          {!user && (
-            <div className="flex gap-4 justify-center">
-              <Link href="/signup">
-                <Button size="lg">
-                  Start Free Trial
-                  <ArrowRight className="w-5 h-5 ml-2" />
-                </Button>
-              </Link>
-              <Link href="/login">
-                <Button variant="outline" size="lg">
-                  Sign In
-                </Button>
-              </Link>
-            </div>
-          )}
-          {user && (
-            <Link href="/dashboard">
-              <Button size="lg">
-                Go to Dashboard
-                <ArrowRight className="w-5 h-5 ml-2" />
-              </Button>
-            </Link>
-          )}
-        </div>
-
-        {/* Features */}
-        <div className="grid md:grid-cols-3 gap-6 mb-16">
-          <Card className="p-6 text-center">
-            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <Zap className="w-6 h-6 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Fast Launch</h3>
-            <p className="text-gray-600 dark:text-gray-300 text-sm">
-              Minimal setup, maximum velocity. Built to validate your idea quickly.
-            </p>
-          </Card>
-
-          <Card className="p-6 text-center">
-            <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <Shield className="w-6 h-6 text-green-600 dark:text-green-400" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Secure Auth</h3>
-            <p className="text-gray-600 dark:text-gray-300 text-sm">
-              Production-ready authentication with Supabase or Firebase.
-            </p>
-          </Card>
-
-          <Card className="p-6 text-center">
-            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <Rocket className="w-6 h-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Scale Ready</h3>
-            <p className="text-gray-600 dark:text-gray-300 text-sm">
-              Built on DLL Platform for easy scaling when you're ready.
-            </p>
-          </Card>
-        </div>
-
-        {/* CTA */}
-        <Card className="p-8 text-center bg-gradient-to-r from-blue-600 to-purple-600 text-white">
-          <h2 className="text-2xl font-bold mb-4">Ready to Launch?</h2>
-          <p className="mb-6 opacity-90">
-            Start building your micro SaaS today. No credit card required.
-          </p>
-          <Link href="/signup">
-            <Button variant="secondary" size="lg">
-              Get Started Free
-            </Button>
-          </Link>
-        </Card>
-      </div>
-    </main>
-  )
-}
+'use client'
+
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Zap, Shield, Rocket, Star, Check, Sun, Moon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+const features = [
+  {
+    icon: Zap,
+    title: 'Launch in Days',
+    description: 'Pre-built auth, payments, and infrastructure. Skip the boilerplate and ship your MVP fast.',
+    color: 'text-amber-500 group-hover:text-amber-400',
+    bg: 'bg-amber-500/10 group-hover:bg-amber-500/20',
+    border: 'group-hover:border-amber-500/30',
+  },
+  {
+    icon: Shield,
+    title: 'Production Ready',
+    description: 'Enterprise-grade security, rate limiting, and error handling built in from day one.',
+    color: 'text-emerald-500 group-hover:text-emerald-400',
+    bg: 'bg-emerald-500/10 group-hover:bg-emerald-500/20',
+    border: 'group-hover:border-emerald-500/30',
+  },
+  {
+    icon: Rocket,
+    title: 'Scale When Ready',
+    description: 'Start small, grow big. Self-hosted infrastructure keeps costs low as you scale.',
+    color: 'text-blue-500 group-hover:text-blue-400',
+    bg: 'bg-blue-500/10 group-hover:bg-blue-500/20',
+    border: 'group-hover:border-blue-500/30',
+  },
+]
+
+const benefits = [
+  'Authentication & user management',
+  'Stripe payments & subscriptions',
+  'Email notifications via Resend',
+  'Redis caching & rate limiting',
+  'PostgreSQL with migrations',
+  'Dark mode & responsive UI',
+]
+
+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>
+  )
+}
+
+export default function Home() {
+  return (
+    <main id="main-content" className="min-h-screen bg-background text-foreground">
+      {/* Nav */}
+      <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-lg">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 active:scale-[0.97] transition-all duration-200">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+              <Zap className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-lg">Micro Saas</span>
+          </Link>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <Link href="/login">
+              <Button variant="ghost" size="sm" className="hover:bg-accent active:scale-95 transition-all duration-200 cursor-pointer">Sign In</Button>
+            </Link>
+            <Link href="/signup">
+              <Button size="sm" className="hover:brightness-110 active:scale-95 transition-all duration-200 cursor-pointer shadow-sm hover:shadow-md">Get Started</Button>
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent" />
+        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 pt-16 sm:pt-24 pb-16 text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-border bg-muted text-muted-foreground text-sm font-medium mb-8 hover:bg-accent hover:border-primary/20 transition-colors duration-200 cursor-default">
+            <Star className="w-3.5 h-3.5 text-primary" />
+            Built on DLL Platform
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
+            Ship your SaaS
+            <br />
+            <span className="text-primary">
+              in record time
+            </span>
+          </h1>
+          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed">
+            A focused, single-feature SaaS starter with auth, payments, and
+            infrastructure already wired. Validate fast, iterate faster.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/signup">
+              <Button size="lg" className="w-full sm:w-auto text-base px-8 h-12 hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-md hover:shadow-lg">
+                Start Free Trial
+                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-0.5 transition-transform" />
+              </Button>
+            </Link>
+            <Link href="/login">
+              <Button variant="outline" size="lg" className="w-full sm:w-auto text-base px-8 h-12 hover:bg-accent hover:border-primary/30 active:scale-[0.97] transition-all duration-200 cursor-pointer">
+                Sign In
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+        <div className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">Everything you need to launch</h2>
+          <p className="text-muted-foreground text-lg max-w-xl mx-auto">
+            Stop building infrastructure. Start building your product.
+          </p>
+        </div>
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature) => (
+            <Card key={feature.title} className={`group cursor-default hover:shadow-xl hover:-translate-y-1 ${feature.border} transition-all duration-300`}>
+              <CardContent className="p-6 sm:p-8">
+                <div className={`w-12 h-12 ${feature.bg} rounded-xl flex items-center justify-center mb-5 transition-colors duration-300`}>
+                  <feature.icon className={`w-6 h-6 ${feature.color} transition-colors duration-300`} />
+                </div>
+                <h3 className="text-xl font-semibold mb-3 group-hover:text-primary transition-colors duration-200">{feature.title}</h3>
+                <p className="text-muted-foreground leading-relaxed">
+                  {feature.description}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Benefits */}
+      <section className="bg-muted/50">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
+                Batteries included.
+                <br />
+                <span className="text-muted-foreground">No assembly required.</span>
+              </h2>
+              <p className="text-muted-foreground text-lg mb-8 leading-relaxed">
+                Every feature you&apos;d spend weeks building is already wired up and
+                ready to customize. Focus on what makes your product unique.
+              </p>
+              <Link href="/signup">
+                <Button size="lg" className="px-8 hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-md hover:shadow-lg">
+                  Start Building
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </Link>
+            </div>
+            <div className="grid sm:grid-cols-2 gap-3">
+              {benefits.map((benefit) => (
+                <div
+                  key={benefit}
+                  className="flex items-start gap-3 p-4 rounded-xl bg-background border border-border hover:border-emerald-500/30 hover:shadow-sm hover:-translate-y-0.5 transition-all duration-200 cursor-default"
+                >
+                  <div className="mt-0.5 w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
+                    <Check className="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
+                  </div>
+                  <span className="text-sm font-medium">{benefit}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+        <div className="overflow-hidden rounded-2xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to text-white p-8 sm:p-12 text-center hover:shadow-2xl hover:shadow-primary/20 transition-shadow duration-500">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to ship?</h2>
+          <p className="text-white/80 text-lg mb-8 max-w-lg mx-auto">
+            Join developers building focused SaaS products without the infrastructure overhead.
+          </p>
+          <Link href="/signup">
+            <Button variant="secondary" size="lg" className="px-8 h-12 text-base font-semibold hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-lg hover:shadow-xl">
+              Get Started Free
+            </Button>
+          </Link>
+          <p className="text-white/60 text-sm mt-4">No credit card required</p>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
+            <Link href="/" className="flex items-center gap-2 hover:opacity-80 active:scale-[0.97] transition-all duration-200">
+              <div className="w-6 h-6 rounded bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+                <Zap className="w-3 h-3 text-white" />
+              </div>
+              <span className="text-sm font-medium">Micro Saas</span>
+            </Link>
+            <nav className="flex items-center gap-6">
+              <Link href="/contact" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Contact
+              </Link>
+              <Link href="/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Sign In
+              </Link>
+            </nav>
+          </div>
+          <div className="mt-6 pt-6 border-t border-border text-center">
+            <p className="text-xs text-muted-foreground">
+              Built with DLL Platform. Ship fast, own everything.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </main>
+  )
+}