@digilogiclabs/create-saas-app 1.12.0 → 1.14.0

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

@@ -36,7 +36,18 @@ import {
   FileText
 } from 'lucide-react'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
-import { AITextGenerator, AIAudioGenerator, AIVideoGenerator, AIChat, AIProvider } from '@digilogiclabs/saas-factory-ai'
+import { 
+  AIProvider,
+  AIChat,
+  AITextGenerator,
+  AIAudioGenerator, 
+  AIVideoGenerator,
+  AISetupStatus,
+  getAIConfigFromEnv,
+  validateAIConfig,
+  type ChatMessage,
+  type QuickStartOptions 
+} from '@digilogiclabs/saas-factory-ai'
 import Link from 'next/link'
 import { useState } from 'react'
 
@@ -49,7 +60,7 @@ export default function Home() {
   
   // Modern design tokens
   const animations = useAnimationTokens()
-  const glass = useGlassmorphism()
+  const glass = useGlassmorphism({ intensity: 'medium', border: true, accent: true })
   
   const projectName = "{{projectName}}"
   const projectDescription = "{{description}}"
@@ -118,75 +129,63 @@ export default function Home() {
     }
   ]
 
-  const renderAITool = () => {
-    const aiConfig = {
-      apiKey: process.env.NEXT_PUBLIC_AI_API_KEY || '',
-      provider: 'openai' as const,
-      model: 'gpt-4'
-    }
+  const aiConfig = getAIConfigFromEnv()
 
+  const renderAITool = () => {
     switch (activeAITool) {
       case 'chat':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6 h-96`}>
-            <AIProvider config={aiConfig}>
-              <AIChat
-                placeholder="Ask me anything..."
-                showTypingIndicator={true}
-                enableFileUpload={true}
-                maxMessages={50}
-                className="h-full"
-              />
-            </AIProvider>
+            <AIChat
+              placeholder="Ask me anything..."
+              showTypingIndicator={true}
+              enableFileUpload={true}
+              maxMessages={50}
+              className="h-full"
+            />
           </div>
         )
       case 'text':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIProvider config={aiConfig}>
-              <AITextGenerator
-                placeholder="Describe what you want to generate..."
-                maxLength={2000}
-                showWordCount={true}
-                templates={[
-                  'Blog post',
-                  'Product description',
-                  'Email',
-                  'Social media post',
-                  'Technical documentation'
-                ]}
-                className="min-h-64"
-              />
-            </AIProvider>
+            <AITextGenerator
+              placeholder="Describe what you want to generate..."
+              maxLength={2000}
+              showWordCount={true}
+              templates={[
+                'Blog post',
+                'Product description',
+                'Email',
+                'Social media post',
+                'Technical documentation'
+              ]}
+              className="min-h-64"
+            />
           </div>
         )
       case 'audio':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIProvider config={aiConfig}>
-              <AIAudioGenerator
-                placeholder="Describe the audio you want to create..."
-                supportedFormats={['mp3', 'wav', 'ogg']}
-                maxDuration={300}
-                showWaveform={true}
-                className="min-h-64"
-              />
-            </AIProvider>
+            <AIAudioGenerator
+              placeholder="Describe the audio you want to create..."
+              supportedFormats={['mp3', 'wav', 'ogg']}
+              maxDuration={300}
+              showWaveform={true}
+              className="min-h-64"
+            />
           </div>
         )
       case 'video':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIProvider config={aiConfig}>
-              <AIVideoGenerator
-                placeholder="Describe the video you want to create..."
-                supportedFormats={['mp4', 'webm']}
-                maxDuration={60}
-                resolution="1080p"
-                showPreview={true}
-                className="min-h-64"
-              />
-            </AIProvider>
+            <AIVideoGenerator
+              placeholder="Describe the video you want to create..."
+              supportedFormats={['mp4', 'webm']}
+              maxDuration={60}
+              resolution="1080p"
+              showPreview={true}
+              className="min-h-64"
+            />
           </div>
         )
       default:
@@ -195,12 +194,13 @@ export default function Home() {
   }
 
   return (
-    <PageTransition type="fade" duration={300}>
-      <OfflineWrapper
-        cacheStrategy="stale-while-revalidate"
-        showOfflineIndicator={true}
-        backgroundSync={true}
-      >
+    <AIProvider config={aiConfig}>
+      <PageTransition type="fade" duration={300}>
+        <OfflineWrapper
+          cacheStrategy="stale-while-revalidate"
+          showOfflineIndicator={true}
+          backgroundSync={true}
+        >
         <PullToRefresh 
           onRefresh={handleRefresh}
           threshold={80}
@@ -208,11 +208,24 @@ 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 */}
+                <AISetupStatus className="mb-6" />
+                
                 {/* Simple Auth Status */}
                 {user && (
                   <div className="flex justify-end mb-8">
@@ -286,7 +299,7 @@ export default function Home() {
                           `}
                         >
                           <div className={`mx-auto w-12 h-12 rounded-xl flex items-center justify-center mb-3 ${
-                            isActive ? 'bg-white/20' : `${glass.accent}`
+                            isActive ? 'bg-white/20' : glass.accent
                           }`}>
                             <Icon className={`h-6 w-6 ${isActive ? 'text-white' : `text-${tool.color}-400`}`} />
                           </div>
@@ -376,5 +389,6 @@ export default function Home() {
         </PullToRefresh>
       </OfflineWrapper>
     </PageTransition>
+    </AIProvider>
   )
 }

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

@@ -53,6 +53,11 @@ interface ServiceConfig {
 export default function SetupPage() {
   const animations = useAnimationTokens()
   const glass = useGlassmorphism()
+  
+  // Static glassmorphism classes to avoid template literal corruption
+  const glassCard = "bg-white/10 backdrop-blur-lg border border-white/20"
+  const glassCardRounded = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl"
+  const glassBackground = "bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20"
   const [copiedVar, setCopiedVar] = useState<string | null>(null)
 
   const projectName = "{{projectName}}"
@@ -340,14 +345,14 @@ const response = await openai.chat.completions.create({
 
   return (
     <PageTransition type="slide" direction="up" duration={300}>
-      <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
-        <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+      <main className={`min-h-screen ${glassBackground} relative overflow-hidden`}>
+        <div className="absolute inset-0 bg-gradient-to-tr from-purple-500/10 to-blue-500/10 opacity-30" />
         <div className="relative z-10">
           <MobileContainer className="py-8">
             {/* Header */}
             <div className="flex items-center justify-between mb-8">
               <div className="flex items-center gap-4">
-                <Link href="/" className={`${glass.card} ${glass.border} p-2 rounded-xl ${animations.hover.scale}`}>
+                <Link href="/" className={`${glassCard} p-2 rounded-xl ${animations.hover.scale}`}>
                   <ArrowLeft className="w-5 h-5" />
                 </Link>
                 <div>
@@ -355,13 +360,13 @@ const response = await openai.chat.completions.create({
                   <p className="text-gray-600 dark:text-gray-300">{templateName}</p>
                 </div>
               </div>
-              <div className={`${glass.card} ${glass.border} px-4 py-2 rounded-xl`}>
+              <div className={`${glassCard} px-4 py-2 rounded-xl`}>
                 <span className="text-sm font-medium">{projectName}</span>
               </div>
             </div>
 
             {/* Template Overview */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+            <div className={`${glassCardRounded} p-6 mb-8`}>
               <div className="flex items-center gap-4 mb-4">
                 <div className={`w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center`}>
                   <Zap className="w-6 h-6 text-white" />
@@ -392,7 +397,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Quick Start */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+            <div className={`${glassCardRounded} p-6 mb-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <Zap className="w-5 h-5 text-yellow-400" />
                 Quick Start
@@ -422,7 +427,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Environment Variables */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+            <div className={`${glassCardRounded} p-6 mb-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <Key className="w-5 h-5 text-blue-400" />
                 Environment Variables
@@ -461,7 +466,7 @@ const response = await openai.chat.completions.create({
                 const ServiceIcon = service.icon
                 
                 return (
-                  <div key={service.name} className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
+                  <div key={service.name} className={`${glassCardRounded} p-6`}>
                     <div className="flex items-start justify-between mb-4">
                       <div className="flex items-center gap-3">
                         <div className={`w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center`}>
@@ -559,7 +564,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Next Steps */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8`}>
+            <div className={`${glassCardRounded} p-6 mt-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <Zap className="w-5 h-5 text-yellow-400" />
                 Next Steps
@@ -570,7 +575,7 @@ const response = await openai.chat.completions.create({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link 
                   href="/dev-setup"
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <Code2 className="w-8 h-8 text-purple-400 mb-2" />
                   <h4 className="font-medium">Development & Deployment</h4>
@@ -578,7 +583,7 @@ const response = await openai.chat.completions.create({
                 </Link>
                 <Link 
                   href="/"
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <Zap className="w-8 h-8 text-blue-400 mb-2" />
                   <h4 className="font-medium">Start Building</h4>
@@ -588,7 +593,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Additional Resources */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8`}>
+            <div className={`${glassCardRounded} p-6 mt-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <BookOpen className="w-5 h-5 text-green-400" />
                 Additional Resources
@@ -596,7 +601,7 @@ const response = await openai.chat.completions.create({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <a 
                   href="https://docs.digilogiclabs.com" 
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <FileText className="w-8 h-8 text-blue-400 mb-2" />
                   <h4 className="font-medium">Documentation</h4>
@@ -604,7 +609,7 @@ const response = await openai.chat.completions.create({
                 </a>
                 <a 
                   href="https://github.com/digilogiclabs/examples" 
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <Code2 className="w-8 h-8 text-purple-400 mb-2" />
                   <h4 className="font-medium">Examples</h4>

package/src/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/src/templates/web/ui-auth-payments-ai/template/src/lib/supabase/server.ts

@@ -0,0 +1,72 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextRequest, NextResponse } from 'next/server'
+
+export function createSupabaseServerClient(request: NextRequest) {
+  let response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return request.cookies.get(name)?.value
+        },
+        set(name: string, value: string, options: any) {
+          request.cookies.set({
+            name,
+            value,
+            ...options,
+          })
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          })
+          response.cookies.set({
+            name,
+            value,
+            ...options,
+          })
+        },
+        remove(name: string, options: any) {
+          request.cookies.set({
+            name,
+            value: '',
+            ...options,
+          })
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          })
+          response.cookies.set({
+            name,
+            value: '',
+            ...options,
+          })
+        },
+      },
+    }
+  )
+
+  return { supabase, response }
+}
+
+export function createSupabaseServerComponentClient() {
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return require('next/headers').cookies().get(name)?.value
+        },
+      },
+    }
+  )
+}

package/src/templates/web/ui-auth-payments-audio/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-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/src/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" />