@digilogiclabs/create-saas-app 1.13.0 → 1.14.1

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

@@ -66,7 +66,20 @@ export default function Home() {
         showOfflineIndicator={true}
         backgroundSync={true}
       >
-        <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+        <main className="min-h-screen relative overflow-hidden bg-background">
+          {/* Theme-aware gradient background for authentication-focused app */}
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-background to-secondary/8 dark:from-primary/15 dark:via-background dark:to-secondary/15" />
+          <div className="absolute inset-0 bg-gradient-to-tl from-accent/4 via-transparent to-primary/4 dark:from-accent/8 dark:via-transparent dark:to-primary/8" />
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-primary/12 via-transparent to-transparent dark:from-primary/20 dark:via-transparent dark:to-transparent" />
+          {/* Animated auth-themed particles */}
+          <div className="absolute inset-0 opacity-20 dark:opacity-12">
+            <div className="absolute top-1/6 left-1/6 w-56 h-56 bg-primary/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/60"></div>
+            <div className="absolute bottom-1/5 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 right-1/6 w-48 h-48 bg-accent/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/60"></div>
+          </div>
+          {/* Minimal depth overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-transparent via-background/1 to-background/3" />
+          <div className="relative z-10">
           <MobileContainer className="py-16">
         {/* Auth Status Bar with Network Info */}
         <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">

package/dist/templates/web/ui-auth-payments/template/src/app/globals.css

@@ -169,3 +169,43 @@
 .progressive-image.loaded {
   filter: blur(0);
 }
+
+/* Additional custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}

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

@@ -84,7 +84,20 @@ export default function Home() {
           hapticOnTrigger={true}
           networkAware={true}
         >
-          <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+          <main className="min-h-screen relative overflow-hidden bg-background">
+            {/* Theme-aware gradient background for SaaS platform */}
+            <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_left,_var(--tw-gradient-stops))] from-secondary/15 via-transparent to-transparent dark:from-secondary/25 dark:via-transparent dark:to-transparent" />
+            {/* Animated business-themed particles */}
+            <div className="absolute inset-0 opacity-25 dark:opacity-15">
+              <div className="absolute top-1/5 right-1/5 w-64 h-64 bg-primary/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/70"></div>
+              <div className="absolute bottom-1/3 left-1/4 w-80 h-80 bg-secondary/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/70"></div>
+              <div className="absolute top-2/3 right-1/3 w-56 h-56 bg-accent/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/70"></div>
+            </div>
+            {/* Subtle depth overlay */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/2 to-background/5" />
+            <div className="relative z-10">
             <MobileContainer className="py-16">
         {/* Network & Auth Status Bar */}
         <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">

package/dist/templates/web/ui-auth-payments-ai/template/src/app/globals.css

@@ -41,3 +41,56 @@
   }
 }
 
+/* Custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+

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

@@ -208,9 +208,19 @@ export default function Home() {
           hapticOnTrigger={true}
           networkAware={true}
         >
-          <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
-            {/* Glassmorphism background overlay */}
-            <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+          <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 */}

package/dist/templates/web/ui-auth-payments-ai/template/src/components/shared/header.tsx

@@ -124,26 +124,33 @@ export function Header() {
         </div>
       )}
 
-      {/* Responsive Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-md border-b">
-        <div className="container mx-auto px-4">
+      {/* Responsive Header with theme-aware gradient */}
+      <header className="bg-background/90 backdrop-blur-md shadow-lg border-b border-border/20 transition-all duration-300 animate-slide-down">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-secondary/10"></div>
+        <div className="container mx-auto px-4 relative">
           <div className="flex justify-between items-center h-16">
-            {/* Logo */}
-            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-              <Music className="w-6 h-6" />
-              {projectName}
+            {/* Logo with animation */}
+            <Link href="/" className="text-2xl font-bold text-foreground flex items-center gap-2 transition-all duration-300 hover:scale-105">
+              <Music className="w-6 h-6 transition-transform duration-300 hover:rotate-12 text-primary" />
+              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent transition-all duration-300">
+                {projectName}
+              </span>
             </Link>
 
             {/* Desktop Navigation */}
             <nav className="hidden md:flex items-center gap-6">
-              {visibleNavItems.map((item) => (
+              {visibleNavItems.map((item, index) => (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                  className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 relative px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-primary/10 hover:to-secondary/10 animate-fade-in-up"
+                  style={{ animationDelay: (index * 100) + 'ms' }}
                 >
-                  <item.icon className="w-4 h-4" />
-                  {item.label}
+                  <item.icon className="w-4 h-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3" />
+                  <span className="relative">
+                    {item.label}
+                    <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full"></span>
+                  </span>
                 </Link>
               ))}
               

package/dist/templates/web/ui-auth-payments-audio/template/src/app/globals.css

@@ -41,3 +41,56 @@
   }
 }
 
+/* Custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+

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

@@ -159,9 +159,19 @@ export default function Home() {
           hapticOnTrigger={true}
           networkAware={true}
         >
-          <main className={"min-h-screen " + glass.background.primary + " relative overflow-hidden"}>
-            {/* Glassmorphism background overlay */}
-            <div className={"absolute inset-0 " + glass.background.accent + " opacity-30"} />
+          <main className="min-h-screen relative overflow-hidden bg-background">
+            {/* Theme-aware gradient background for audio streaming */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-background to-accent/15 dark:from-primary/25 dark:via-background dark:to-accent/25" />
+            <div className="absolute inset-0 bg-gradient-to-tr from-secondary/10 via-transparent to-primary/10 dark:from-secondary/15 dark:via-transparent dark:to-primary/15" />
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-accent/20 via-transparent to-transparent dark:from-accent/30 dark:via-transparent dark:to-transparent" />
+            {/* Animated music-themed particles */}
+            <div className="absolute inset-0 opacity-25 dark:opacity-15">
+              <div className="absolute top-1/3 left-1/6 w-64 h-64 bg-primary/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/70"></div>
+              <div className="absolute top-2/3 right-1/5 w-80 h-80 bg-accent/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-accent/70"></div>
+              <div className="absolute top-1/5 right-1/3 w-56 h-56 bg-secondary/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-secondary/70"></div>
+            </div>
+            {/* Audio wave overlay */}
+            <div className="absolute inset-0 bg-gradient-to-t from-transparent via-primary/5 to-transparent opacity-60" />
             <div className="relative z-10">
             <MobileContainer className="py-8">
         {/* Simple Auth Status */}
@@ -232,7 +242,7 @@ export default function Home() {
           {/* Main Content */}
           <div className="lg:col-span-3 space-y-8">
             {/* Now Playing Card with Enhanced Glassmorphism */}
-            <div className={glass.card + " " + glass.border + " rounded-3xl p-6 mb-8 " + animations.hover.lift + " " + animations.transition.smooth}>
+            <div className={glass.card + " " + glass.border + " rounded-3xl p-6 mb-8 " + animations.hover.lift + " " + animations.transition.smooth}>
               <NowPlayingCard
                 track={currentTrack || demoPlaylist[0]}
                 isPlaying={isPlaying}
@@ -244,7 +254,7 @@ export default function Home() {
 
             {/* Featured Playlists with Staggered Animation */}
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-              <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.short}>
+              <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.short}>
                 <PlaylistCard
                   title="Today's Top Hits"
                   description="The most played songs today"
@@ -254,7 +264,7 @@ export default function Home() {
                   className="bg-transparent border-none"
                 />
               </div>
-              <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.medium}>
+              <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.medium}>
                 <PlaylistCard
                   title="Chill Vibes"
                   description="Relaxing music for focus and creativity"
@@ -264,7 +274,7 @@ export default function Home() {
                   className="bg-transparent border-none"
                 />
               </div>
-              <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.long}>
+              <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.long}>
                 <PlaylistCard
                   title="Electronic Pulse"
                   description="High-energy electronic and dance music"
@@ -277,7 +287,7 @@ export default function Home() {
             </div>
 
             {/* Track List with Glassmorphism */}
-            <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.transition.smooth}>
+            <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.transition.smooth}>
               <TrackList
                 tracks={demoPlaylist}
                 currentTrackId={currentTrack?.id}
@@ -296,7 +306,7 @@ export default function Home() {
 
           {/* Sidebar with Glassmorphism */}
           <div className="lg:col-span-1">
-            <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.lift + " " + animations.transition.smooth}>
+            <div className={glass.card + " " + glass.border + " rounded-2xl overflow-hidden " + animations.hover.lift + " " + animations.transition.smooth}>
               <PlaylistSidebar
                 playlists={[
                   { id: '1', name: 'Liked Songs', trackCount: 47 },
@@ -314,7 +324,7 @@ export default function Home() {
 
         {/* Features Overview with Enhanced Glassmorphism */}
         <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="mb-16">
-          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.short}>
+          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.short}>
             <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-blue-400" />
             </div>
@@ -324,7 +334,7 @@ export default function Home() {
             </p>
           </div>
 
-          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.medium}>
+          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.medium}>
             <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>
@@ -334,7 +344,7 @@ export default function Home() {
             </p>
           </div>
 
-          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.long}>
+          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.long}>
             <div className={"mx-auto w-12 h-12" + " " + glass.accent + " " + "rounded-xl flex items-center justify-center mb-4" + " " + animations.hover.glow}>
               <Rocket className="h-6 w-6 text-purple-400" />
             </div>
@@ -344,7 +354,7 @@ export default function Home() {
             </p>
           </div>
 
-          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.extra}>
+          <div className={glass.card + " " + glass.border + " text-center p-6 rounded-2xl " + animations.hover.scale + " " + animations.transition.smooth + " " + animations.delay.extra}>
             <div className={"mx-auto w-12 h-12" + " " + glass.accent + " " + "rounded-xl flex items-center justify-center mb-4" + " " + animations.hover.glow}>
               <svg className="h-6 w-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />

package/dist/templates/web/ui-auth-payments-audio/template/src/components/shared/header.tsx

@@ -124,26 +124,33 @@ export function Header() {
         </div>
       )}
 
-      {/* Responsive Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-md border-b">
-        <div className="container mx-auto px-4">
+      {/* Responsive Header with theme-aware gradient */}
+      <header className="bg-background/90 backdrop-blur-md shadow-lg border-b border-border/20 transition-all duration-300 animate-slide-down">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-accent/10"></div>
+        <div className="container mx-auto px-4 relative">
           <div className="flex justify-between items-center h-16">
-            {/* Logo */}
-            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-              <Music className="w-6 h-6" />
-              {projectName}
+            {/* Logo with animation */}
+            <Link href="/" className="text-2xl font-bold text-foreground flex items-center gap-2 transition-all duration-300 hover:scale-105">
+              <Music className="w-6 h-6 transition-transform duration-300 hover:rotate-12 text-primary" />
+              <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent transition-all duration-300">
+                {projectName}
+              </span>
             </Link>
 
             {/* Desktop Navigation */}
             <nav className="hidden md:flex items-center gap-6">
-              {visibleNavItems.map((item) => (
+              {visibleNavItems.map((item, index) => (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                  className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 relative px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-primary/10 hover:to-accent/10 animate-fade-in-up"
+                  style={{ animationDelay: (index * 100) + 'ms' }}
                 >
-                  <item.icon className="w-4 h-4" />
-                  {item.label}
+                  <item.icon className="w-4 h-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3" />
+                  <span className="relative">
+                    {item.label}
+                    <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-gradient-to-r from-primary to-accent transition-all duration-300 group-hover:w-full"></span>
+                  </span>
                 </Link>
               ))}
               

package/dist/templates/web/ui-auth-payments-video/template/src/app/globals.css

@@ -186,3 +186,43 @@
 .progressive-image.loaded {
   filter: blur(0);
 }
+
+/* Additional custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}

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

@@ -85,7 +85,20 @@ export default function Home() {
           hapticOnTrigger={true}
           networkAware={true}
         >
-          <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+          <main className="min-h-screen relative overflow-hidden bg-background">
+            {/* Theme-aware gradient background for video streaming */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-background to-secondary/15 dark:from-primary/25 dark:via-background dark:to-secondary/25" />
+            <div className="absolute inset-0 bg-gradient-to-tl from-accent/10 via-transparent to-secondary/10 dark:from-accent/15 dark:via-transparent dark:to-secondary/15" />
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center_top,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent dark:from-primary/30 dark:via-transparent dark:to-transparent" />
+            {/* Animated video-themed particles */}
+            <div className="absolute inset-0 opacity-20 dark:opacity-10">
+              <div className="absolute top-1/4 right-1/4 w-72 h-72 bg-primary/60 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/80"></div>
+              <div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-secondary/60 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/80"></div>
+              <div className="absolute top-1/2 left-1/5 w-64 h-64 bg-accent/60 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/80"></div>
+            </div>
+            {/* Video player overlay effect */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/3 to-background/10" />
+            <div className="relative z-10">
             <MobileContainer className="py-16">
         {/* Auth Status Bar */}
         <div className="flex justify-end mb-8">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "1.13.0",
+  "version": "1.14.1",
   "description": "Create modern SaaS applications with Digi Logic Labs packages",
   "main": "dist/cli/index.js",
   "bin": {

package/src/templates/web/ui-auth/template/src/app/globals.css

@@ -40,3 +40,56 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}

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

@@ -66,7 +66,20 @@ export default function Home() {
         showOfflineIndicator={true}
         backgroundSync={true}
       >
-        <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+        <main className="min-h-screen relative overflow-hidden bg-background">
+          {/* Theme-aware gradient background for authentication-focused app */}
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-background to-secondary/8 dark:from-primary/15 dark:via-background dark:to-secondary/15" />
+          <div className="absolute inset-0 bg-gradient-to-tl from-accent/4 via-transparent to-primary/4 dark:from-accent/8 dark:via-transparent dark:to-primary/8" />
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-primary/12 via-transparent to-transparent dark:from-primary/20 dark:via-transparent dark:to-transparent" />
+          {/* Animated auth-themed particles */}
+          <div className="absolute inset-0 opacity-20 dark:opacity-12">
+            <div className="absolute top-1/6 left-1/6 w-56 h-56 bg-primary/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/60"></div>
+            <div className="absolute bottom-1/5 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 right-1/6 w-48 h-48 bg-accent/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/60"></div>
+          </div>
+          {/* Minimal depth overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-transparent via-background/1 to-background/3" />
+          <div className="relative z-10">
           <MobileContainer className="py-16">
         {/* Auth Status Bar with Network Info */}
         <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">

package/src/templates/web/ui-auth-payments/template/src/app/globals.css

@@ -169,3 +169,43 @@
 .progressive-image.loaded {
   filter: blur(0);
 }
+
+/* Additional custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}