@digilogiclabs/create-saas-app 1.12.0 → 1.14.0

package/src/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/src/templates/web/ui-auth-payments-video/template/package.json

@@ -17,9 +17,9 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.2",
-    "@digilogiclabs/saas-factory-auth": "^1.0.0",
-    "@digilogiclabs/saas-factory-payments": "^1.0.0",
+    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-auth": "^1.0.1",
+    "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",

package/src/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/src/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">