@digilogiclabs/create-saas-app 1.5.3 → 1.6.0

package/src/templates/web/base/template/src/app/page.tsx

@@ -5,97 +5,136 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Badge } from '@/components/ui/badge'
 import { ArrowRight, Zap, Shield, Rocket, LogOut } from 'lucide-react'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { 
+  MobileHero, 
+  LazyImage, 
+  ProgressiveImage, 
+  NetworkAwareContent,
+  PageTransition,
+  ResponsiveGrid,
+  MobileContainer 
+} from '@digilogiclabs/saas-factory-ui'
 import Link from 'next/link'
 
 export default function Home() {
   const { user, signOut } = useAuth()
 
   return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div className="container mx-auto px-4 py-16">
+    <PageTransition type="fade" duration={300}>
+      <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+        <MobileContainer className="py-16">
         {/* Hero Section */}
-        <div className="text-center mb-16">
-          <Badge variant="secondary" className="mb-4">
-            Built with Digi Logic Labs
-          </Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
-            Welcome to{' '}
-            <span className="text-blue-600 dark:text-blue-400">{{titleCaseName}}</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-            {{description}}. Get started by editing{' '}
-            <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm">
-              src/app/page.tsx
-            </code>
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            {!user ? (
-              <>
-                <Button size="lg" className="text-lg px-8" asChild>
-                  <Link href="/signup">
-                    Get Started
-                    <ArrowRight className="ml-2 h-5 w-5" />
-                  </Link>
-                </Button>
-                <Button variant="outline" size="lg" className="text-lg px-8" asChild>
-                  <Link href="/login">Learn More</Link>
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button size="lg" className="text-lg px-8" asChild>
-                  <Link href="/dashboard">
-                    Go to Dashboard
-                    <ArrowRight className="ml-2 h-5 w-5" />
-                  </Link>
-                </Button>
-                <Button variant="outline" size="lg" className="text-lg px-8" onClick={signOut}>
-                  <LogOut className="mr-2 h-5 w-5" />
-                  Sign Out
-                </Button>
-              </>
-            )}
-          </div>
-        </div>
+        <MobileHero
+          badge={{
+            text: "Built with Digi Logic Labs",
+            variant: "secondary"
+          }}
+          title={{
+            text: "Welcome to {{titleCaseName}}",
+            highlight: "{{titleCaseName}}",
+            size: "xl"
+          }}
+          description="{{description}}. Get started by editing src/app/page.tsx"
+          actions={!user ? [
+            {
+              label: "Get Started",
+              href: "/signup",
+              icon: ArrowRight,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More", 
+              href: "/login",
+              variant: "outline",
+              size: "lg"
+            }
+          ] : [
+            {
+              label: "Go to Dashboard",
+              href: "/dashboard", 
+              icon: ArrowRight,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Sign Out",
+              onClick: signOut,
+              icon: LogOut,
+              variant: "outline", 
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-16"
+        />
 
         {/* Features Grid */}
-        <div className="grid md:grid-cols-3 gap-8 mb-16">
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
-                <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-              </div>
-              <CardTitle>Lightning Fast</CardTitle>
-              <CardDescription>
-                Built with Next.js 14 and optimized for performance
-              </CardDescription>
-            </CardHeader>
-          </Card>
+        <NetworkAwareContent
+          showOnSlow={
+            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="md" className="mb-16">
+              <Card className="text-center">
+                <CardHeader>
+                  <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                    <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                  </div>
+                  <CardTitle>Lightning Fast</CardTitle>
+                  <CardDescription>
+                    Built with Next.js 15 and optimized for performance
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+              <Card className="text-center">
+                <CardHeader>
+                  <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                    <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                  </div>
+                  <CardTitle>Secure by Default</CardTitle>
+                  <CardDescription>
+                    {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </ResponsiveGrid>
+          }
+        >
+          <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg" className="mb-16">
+            <Card className="text-center">
+              <CardHeader>
+                <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                  <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                </div>
+                <CardTitle>Lightning Fast</CardTitle>
+                <CardDescription>
+                  Built with Next.js 15 and optimized for performance
+                </CardDescription>
+              </CardHeader>
+            </Card>
 
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
-                <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
-              </div>
-              <CardTitle>Secure by Default</CardTitle>
-              <CardDescription>
-                {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
-              </CardDescription>
-            </CardHeader>
-          </Card>
+            <Card className="text-center">
+              <CardHeader>
+                <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                  <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                </div>
+                <CardTitle>Secure by Default</CardTitle>
+                <CardDescription>
+                  {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
+                </CardDescription>
+              </CardHeader>
+            </Card>
 
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
-                <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-              </div>
-              <CardTitle>Ready to Scale</CardTitle>
-              <CardDescription>
-                Production-ready with TypeScript, Tailwind CSS, and modern tooling
-              </CardDescription>
-            </CardHeader>
-          </Card>
-        </div>
+            <Card className="text-center">
+              <CardHeader>
+                <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                  <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <CardTitle>Ready to Scale</CardTitle>
+                <CardDescription>
+                  Production-ready with TypeScript, Tailwind CSS, and modern tooling
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </ResponsiveGrid>
+        </NetworkAwareContent>
 
         {/* Tech Stack */}
         <Card className="max-w-4xl mx-auto">
@@ -108,7 +147,7 @@ export default function Home() {
           <CardContent>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
               <div className="p-4">
-                <div className="font-semibold">Next.js 14</div>
+                <div className="font-semibold">Next.js 15</div>
                 <div className="text-sm text-gray-600 dark:text-gray-400">React Framework</div>
               </div>
               <div className="p-4">
@@ -126,7 +165,8 @@ export default function Home() {
             </div>
           </CardContent>
         </Card>
-      </div>
-    </main>
+        </MobileContainer>
+      </main>
+    </PageTransition>
   )
 }

package/src/templates/web/base/template/src/app/signup/page.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { SignupForm } from '@digilogiclabs/saas-factory-ui';
+import { 
+  SignupForm,
+  PageTransition,
+  MobileContainer,
+  NetworkAwareContent,
+  OfflineWrapper
+} from '@digilogiclabs/saas-factory-ui';
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth';
 import { createBrowserClient } from '@supabase/ssr';
 import React from 'react';
@@ -28,12 +34,34 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <SignupForm
-        onSubmit={handleSignup}
-        onGoogleSignIn={handleGoogleSignup}
-        authProvider={AuthProvider.SUPABASE}
-      />
-    </div>
+    <PageTransition type="slide" direction="horizontal" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="network-first"
+        showOfflineIndicator={true}
+      >
+        <NetworkAwareContent
+          showOnOffline={
+            <div className="flex items-center justify-center min-h-screen bg-gray-100">
+              <div className="text-center p-6">
+                <h2 className="text-xl font-semibold mb-2">You're offline</h2>
+                <p className="text-gray-600">Please check your connection to sign up.</p>
+              </div>
+            </div>
+          }
+        >
+          <div className="flex items-center justify-center min-h-screen bg-gray-100">
+            <MobileContainer className="w-full max-w-md">
+              <SignupForm
+                onSubmit={handleSignup}
+                onGoogleSignIn={handleGoogleSignup}
+                authProvider={AuthProvider.SUPABASE}
+                mobileOptimized={true}
+                touchFriendly={true}
+              />
+            </MobileContainer>
+          </div>
+        </NetworkAwareContent>
+      </OfflineWrapper>
+    </PageTransition>
   );
 }

package/src/templates/web/base/template/src/components/shared/header.tsx

@@ -5,40 +5,59 @@ import Link from 'next/link';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
 import { Button } from '@/components/ui/button';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
-import { LogOut } from 'lucide-react';
+import { ResponsiveHeader, MobileNavigation } from '@digilogiclabs/saas-factory-ui';
+import { LogOut, Menu, User, Settings } from 'lucide-react';
 
 export function Header() {
   const { user, signOut } = useAuth();
 
+  const navigationItems = [
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: signOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
   return (
-    <header className="bg-white dark:bg-gray-800 shadow-md">
-      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-          {{titleCaseName}}
-        </Link>
-        <nav className="flex items-center gap-4">
-          <ThemeToggle />
-          {user ? (
-            <>
-              <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Dashboard
-              </Link>
-              <Button variant="ghost" size="icon" onClick={signOut}>
-                <LogOut className="h-5 w-5" />
-              </Button>
-            </>
-          ) : (
-            <>
-              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Login
-              </Link>
-              <Button asChild>
-                <Link href="/signup">Sign Up</Link>
-              </Button>
-            </>
-          )}
-        </nav>
-      </div>
-    </header>
+    <ResponsiveHeader
+      logo={{
+        text: '{{titleCaseName}}',
+        href: '/'
+      }}
+      navigationItems={navigationItems}
+      actions={authActions}
+      showThemeToggle={true}
+      user={user}
+      mobileBreakpoint="md"
+      className="bg-white dark:bg-gray-800 shadow-md"
+    />
   );
 }

package/src/templates/web/ui-auth/template/package.json

@@ -1,10 +1,10 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.11.1 + Auth v1.0.0)",
+  "description": "{{description}} (with UI Package v0.13.0 + Auth v1.0.0)",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.11.1",
+    "@digilogiclabs/saas-factory-ui": "^0.13.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",