@digilogiclabs/create-saas-app 2.3.0 → 2.4.0

package/dist/templates/web/marketplace/template/src/app/loading.tsx

@@ -0,0 +1,57 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header skeleton */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <SkeletonText className="h-8 w-48" />
+          <SkeletonText className="h-10 w-64" />
+          <div className="flex gap-2">
+            <SkeletonText className="h-8 w-20" />
+            <SkeletonText className="h-8 w-20" />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Hero skeleton */}
+        <div className="text-center mb-12">
+          <SkeletonText className="h-12 w-80 mx-auto mb-4" />
+          <SkeletonText className="h-6 w-96 mx-auto" />
+        </div>
+
+        {/* Category cards skeleton */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Products skeleton */}
+        <div className="mb-12">
+          <SkeletonText className="h-8 w-48 mb-6" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        </div>
+
+        {/* Loading indicator */}
+        <div className="flex justify-center">
+          <Card className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <div className="w-8 h-8 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
+                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">Loading marketplace...</p>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, GradientBorderCard } from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/app-sdk'
 import { ShoppingCart, Store, Search, Star, ArrowRight, User, LogOut } from 'lucide-react'
 import Link from 'next/link'
@@ -151,16 +151,18 @@ export default function Home() {
         </div>
 
         {/* Become a Vendor CTA */}
-        <Card className="p-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
-          <Store className="w-12 h-12 mx-auto mb-4" />
-          <h2 className="text-2xl font-bold mb-2">Become a Vendor</h2>
-          <p className="mb-6 opacity-90 max-w-md mx-auto">
-            Start selling your products to thousands of customers. Low fees, powerful tools.
-          </p>
-          <Link href="/vendors/apply">
-            <Button variant="secondary" size="lg">Apply Now</Button>
-          </Link>
-        </Card>
+        <GradientBorderCard gradientColors="from-blue-500 via-purple-500 to-blue-500" borderWidth={2}>
+          <div className="text-center">
+            <Store className="w-12 h-12 mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Become a Vendor</h2>
+            <p className="mb-6 text-gray-600 dark:text-gray-300 max-w-md mx-auto">
+              Start selling your products to thousands of customers. Low fees, powerful tools.
+            </p>
+            <Link href="/vendors/apply">
+              <Button size="lg">Apply Now</Button>
+            </Link>
+          </div>
+        </GradientBorderCard>
       </div>
     </main>
   )

package/dist/templates/web/micro-saas/template/package.json

@@ -14,10 +14,10 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
     "@digilogiclabs/app-sdk": "^1.0.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.7",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^4.0.0",
     "clsx": "^2.0.0",
     "class-variance-authority": "^0.7.0",

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

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button onClick={reset} className="flex-1" size="lg">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            <Link href="/" className="flex-1">
+              <Button variant="outline" className="w-full" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div 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">
+        {/* Header skeleton */}
+        <div className="flex justify-end mb-8">
+          <SkeletonText className="h-8 w-24" />
+        </div>
+
+        {/* Hero skeleton */}
+        <div className="text-center mb-16">
+          <SkeletonText className="h-6 w-32 mx-auto mb-6" />
+          <SkeletonText className="h-12 w-64 mx-auto mb-6" />
+          <SkeletonText className="h-6 w-96 mx-auto mb-8" />
+        </div>
+
+        {/* Feature cards skeleton */}
+        <div className="grid md:grid-cols-3 gap-6 mb-16">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* CTA skeleton */}
+        <Card className="p-8">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="relative">
+              <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-700 rounded-full animate-spin"></div>
+              <div className="absolute top-0 left-0 w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300">Loading...</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -17,8 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",

package/dist/templates/web/ui-auth-ai/template/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "next": "^15.0.0",
     "react": "^19.0.0",

package/dist/templates/web/ui-auth-payments/template/package.json

@@ -17,8 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "@digilogiclabs/saas-factory-payments": "^1.2.8",
     "stripe": "^14.0.0",

package/dist/templates/web/ui-auth-payments-ai/template/package.json

@@ -17,8 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "@digilogiclabs/saas-factory-payments": "^1.2.8",
     "@digilogiclabs/saas-factory-ai": "^4.0.4",

package/dist/templates/web/ui-auth-payments-ai-rag/template/package.json

@@ -22,7 +22,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "@digilogiclabs/saas-factory-payments": "^1.2.3",
     "@digilogiclabs/saas-factory-ai": "^4.0.2",

package/dist/templates/web/ui-auth-payments-audio/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "@digilogiclabs/saas-factory-payments": "^1.2.3",
     "stripe": "^14.0.0",

package/dist/templates/web/ui-auth-payments-video/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "@digilogiclabs/saas-factory-payments": "^1.2.3",
     "stripe": "^14.0.0",

package/dist/templates/web/ui-only/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

package/dist/templates/web/ui-package-test/template/package.json

@@ -14,7 +14,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Create modern SaaS applications with DLL Platform - tier-aware scaffolding with platform-core and app-sdk",
   "main": "dist/cli/index.js",
   "bin": {

package/src/templates/mobile/base/template/package.json

@@ -22,7 +22,7 @@
     "react-native-screens": "~3.22.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-gesture-handler": "~2.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     "firebase": "^10.0.0",

package/src/templates/mobile/ui-auth-payments/template/package.json

@@ -35,7 +35,7 @@
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     

package/src/templates/mobile/ui-auth-payments-ai/template/package.json

@@ -35,7 +35,7 @@
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     "@digilogiclabs/saas-factory-ai": "^4.0.2",

package/src/templates/mobile/ui-auth-payments-ai-rag/template/package.json

@@ -38,7 +38,7 @@
     "react-native-gesture-handler": "~2.14.0",
     "react-native-reanimated": "~3.6.2",
     
-    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.5",
     "@digilogiclabs/saas-factory-payments": "^1.2.7",
     "@digilogiclabs/saas-factory-ai": "^4.0.2",

package/src/templates/web/ai-platform/template/package.json

@@ -16,12 +16,12 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
     "@digilogiclabs/app-sdk": "^1.0.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.7",
     "@digilogiclabs/saas-factory-payments": "^1.2.9",
     "@digilogiclabs/saas-factory-ai": "^1.0.0",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "ai": "^3.4.0",
     "@ai-sdk/openai": "^0.0.70",
     "@ai-sdk/anthropic": "^0.0.57",

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

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full bg-white/5 border-white/10 backdrop-blur-sm">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-400 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-300">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-black/30 rounded text-xs font-mono text-gray-400 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong className="text-gray-300">Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong className="text-gray-300">Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong className="text-gray-300">Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button onClick={reset} className="flex-1 bg-purple-600 hover:bg-purple-700" size="lg">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            <Link href="/" className="flex-1">
+              <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { Card, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      {/* Header skeleton */}
+      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm px-4 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <SkeletonText className="h-8 w-48 bg-white/10" />
+          <div className="flex gap-6">
+            <SkeletonText className="h-4 w-16 bg-white/10" />
+            <SkeletonText className="h-4 w-20 bg-white/10" />
+            <SkeletonText className="h-4 w-12 bg-white/10" />
+          </div>
+          <div className="flex gap-2">
+            <SkeletonText className="h-8 w-20 bg-white/10" />
+            <SkeletonText className="h-8 w-24 bg-white/10" />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-16">
+        {/* Hero skeleton */}
+        <div className="text-center mb-20">
+          <SkeletonText className="h-6 w-40 mx-auto mb-6 bg-purple-500/20" />
+          <SkeletonText className="h-16 w-80 mx-auto mb-6 bg-white/10" />
+          <SkeletonText className="h-6 w-96 mx-auto mb-8 bg-white/10" />
+        </div>
+
+        {/* Feature cards skeleton */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Card key={i} className="p-6 bg-white/5 border-white/10">
+              <div className="animate-pulse">
+                <SkeletonText className="h-12 w-12 mb-4 bg-white/10 rounded-lg" />
+                <SkeletonText className="h-5 w-24 mb-2 bg-white/10" />
+                <SkeletonText className="h-4 w-full bg-white/10" />
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {/* Models skeleton */}
+        <div className="mb-20">
+          <SkeletonText className="h-8 w-48 mb-8 bg-white/10" />
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i} className="p-4 bg-white/5 border-white/10">
+                <div className="animate-pulse">
+                  <SkeletonText className="h-5 w-20 mb-2 bg-white/10" />
+                  <SkeletonText className="h-4 w-16 bg-white/10" />
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Loading indicator */}
+        <div className="flex justify-center">
+          <div className="flex items-center gap-3 text-gray-400">
+            <div className="relative">
+              <div className="w-8 h-8 border-4 border-white/10 rounded-full"></div>
+              <div className="absolute top-0 left-0 w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <p className="text-sm">Loading AI platform...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+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 Link from 'next/link'
@@ -140,13 +140,15 @@ export default function Home() {
         {/* Features */}
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
           {FEATURES.map((feature) => (
-            <Card key={feature.title} className="p-6 bg-white/5 border-white/10 backdrop-blur-sm hover:bg-white/10 transition">
-              <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>
-            </Card>
+            <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>
 
@@ -185,18 +187,20 @@ export default function Home() {
         </div>
 
         {/* CTA */}
-        <Card className="p-12 bg-gradient-to-r from-purple-600 to-pink-600 border-0 text-center">
-          <h2 className="text-3xl font-bold text-white mb-4">Ready to Build?</h2>
-          <p className="text-white/80 mb-8 max-w-md mx-auto">
-            Start building AI-powered applications today. Free tier available.
-          </p>
-          <Link href="/signup">
-            <Button size="lg" variant="secondary">
-              Get Started Free
-              <ArrowRight className="w-5 h-5 ml-2" />
-            </Button>
-          </Link>
-        </Card>
+        <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.
+            </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>
   )

package/src/templates/web/base/template/package.json

@@ -17,8 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "@digilogiclabs/saas-factory-payments": "^1.2.8",
     "tailwindcss": "^3.3.0",

package/src/templates/web/iot-dashboard/template/package.json

@@ -16,10 +16,10 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
     "@digilogiclabs/app-sdk": "^1.0.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.7",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^4.0.0",
     "clsx": "^2.0.0",
     "class-variance-authority": "^0.7.0",