@digilogiclabs/create-saas-app 1.10.7 → 1.12.0

package/src/templates/web/ui-auth-payments-ai/template/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})

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

@@ -52,11 +52,13 @@ export default function Home() {
   const projectName = "{{projectName}}"
   const projectDescription = "{{description}}"
   
-  // Safe CSS class combinations to avoid template literal issues
-  const glassCard = [glass.card, glass.border].filter(Boolean).join(' ')
-  const glassCardRounded = [glass.card, glass.border, 'rounded-2xl'].filter(Boolean).join(' ')
-  const glassCardWithHover = [glass.card, glass.border, 'rounded-2xl', animations.hover.scale, animations.transition.smooth].filter(Boolean).join(' ')
-  const glassAccentIcon = [glass.accent, 'rounded-xl', 'flex', 'items-center', 'justify-center', animations.hover.glow].filter(Boolean).join(' ')
+  // 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 glassCardWithHover = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl hover:scale-105 transition-all duration-300"
+  const glassAccentIcon = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl flex items-center justify-center hover:shadow-lg hover:shadow-purple-500/25 transition-all duration-300"
+  const glassBackground = "bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20"
+  const glassBackgroundAccent = "bg-gradient-to-br from-purple-500/10 via-blue-500/10 to-teal-500/10"
   
   const gridConfig = {
     columns_1_2: { base: 1, md: 2 },
@@ -121,11 +123,11 @@ export default function Home() {
       icon: CheckCircle
     },
     title: {
-      text: `Welcome to ${projectName}`,
+      text: "Welcome to " + projectName,
       highlight: projectName,
       size: "xl" as const
     },
-    description: `${projectDescription}. Stream your favorite music with crystal-clear quality, offline downloads, and seamless playback across all your devices.`
+    description: projectDescription + ".  Stream your favorite music with crystal-clear quality, offline downloads, and seamless playback across all your devices."
   }
 
   const handleSignOut = async () => {
@@ -157,9 +159,9 @@ export default function Home() {
           hapticOnTrigger={true}
           networkAware={true}
         >
-          <main className={"min-h-screen" + " " + glass.background.primary + " " + "relative overflow-hidden"}>
+          <main className={"min-h-screen " + glass.background.primary + " relative overflow-hidden"}>
             {/* Glassmorphism background overlay */}
-            <div className={"absolute inset-0" + " " + glass.background.accent + " " + "opacity-30"} />
+            <div className={"absolute inset-0 " + glass.background.accent + " opacity-30"} />
             <div className="relative z-10">
             <MobileContainer className="py-8">
         {/* Simple Auth Status */}
@@ -214,7 +216,7 @@ export default function Home() {
 
         {/* Search Bar with Glassmorphism */}
         <div className="max-w-2xl mx-auto mb-12">
-          <div className={glass.card + " " + glass.border + " " + "p-1 rounded-2xl" + " " + animations.hover.lift}>
+          <div className={glass.card + " " + glass.border + " p-1 rounded-2xl " + animations.hover.lift}>
             <AudioSearch
               placeholder="Search for tracks, artists, or albums..."
               onSearch={(query) => console.log('Searching:', query)}
@@ -230,7 +232,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}
@@ -242,7 +244,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"
@@ -252,7 +254,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"
@@ -262,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.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"
@@ -275,7 +277,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}
@@ -294,7 +296,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 },
@@ -312,7 +314,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>
@@ -322,7 +324,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>
@@ -332,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.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>
@@ -342,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.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/src/templates/web/ui-auth-payments-audio/template/src/app/page.tsx.backup

@@ -0,0 +1,391 @@
+'use client'
+
+import { 
+  Button, 
+  Card, 
+  AudioPlayer,
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  PullToRefresh,
+  useNetworkInfo,
+  useOfflineState,
+  FixedAudioBar,
+  PlaylistCard,
+  TrackList,
+  WaveformVisualizer,
+  AudioControls,
+  VolumeSlider,
+  ProgressBar,
+  ShuffleButton,
+  RepeatButton,
+  LikeButton,
+  ShareButton,
+  PlaylistSidebar,
+  AudioSearch,
+  NowPlayingCard,
+  useAnimationTokens,
+  useGlassmorphism
+} from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Music, Wifi, WifiOff } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+  const networkInfo = useNetworkInfo()
+  const isOnline = useOfflineState()
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [currentTrack, setCurrentTrack] = useState(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [showPlaylistSidebar, setShowPlaylistSidebar] = useState(false)
+  
+  // Modern design tokens - Commenting out to fix mustache template processing
+  // const animations = useAnimationTokens()
+  // const glass = useGlassmorphism()
+  
+  const projectName = "{{projectName}}"
+  const projectDescription = "{{description}}"
+  
+  // 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 glassCardWithHover = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl hover:scale-105 transition-all duration-300"
+  const glassAccentIcon = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl flex items-center justify-center hover:shadow-lg hover:shadow-purple-500/25 transition-all duration-300"
+  
+  const gridConfig = {
+    columns_1_2: { base: 1, md: 2 },
+    columns_1_3: { base: 1, md: 3 },
+    columns_1_sm2: { base: 1, sm: 2 },
+    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
+    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
+    columns_2: { base: 2 },
+    columns_2_md3: { base: 2, md: 3 },
+    columns_2_2: { base: 2 },
+    columns_2_md4: { base: 2, md: 4 }
+  }
+  
+  // Demo playlist data
+  const demoPlaylist = [
+    {
+      id: '1',
+      title: 'Midnight Echoes',
+      artist: 'Luna Rivers',
+      album: 'Digital Dreams',
+      duration: 180,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM4QjVDRjYiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: false
+    },
+    {
+      id: '2',
+      title: 'Neon Nights',
+      artist: 'The Frequency',
+      album: 'Electric Pulse',
+      duration: 210,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNFRjQ0NDQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: true
+    },
+    {
+      id: '3',
+      title: 'Ocean Waves',
+      artist: 'Ambient Flow',
+      album: 'Nature Sounds',
+      duration: 195,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMwNjkyQzUiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: false
+    },
+    {
+      id: '4',
+      title: 'City Lights',
+      artist: 'Urban Echo',
+      album: 'Metropolitan',
+      duration: 225,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNGNTk3MDAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: true
+    }
+  ]
+
+  const heroConfig = {
+    badge: {
+      text: "🎵 Premium Audio Experience",
+      variant: "secondary" as const,
+      icon: CheckCircle
+    },
+    title: {
+      text: `Welcome to ${projectName}`,
+      highlight: projectName,
+      size: "xl" as const
+    },
+    description: `${projectDescription}. Stream your favorite music with crystal-clear quality, offline downloads, and seamless playback across all your devices.`
+  }
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true)
+    // Simulate refresh
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsRefreshing(false)
+  }
+
+  return (
+    <PageTransition type="fade" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+        backgroundSync={true}
+      >
+        <PullToRefresh 
+          onRefresh={handleRefresh}
+          threshold={80}
+          loadingIndicator="spinner"
+          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"} />
+            <div className="relative z-10">
+            <MobileContainer className="py-8">
+        {/* Simple Auth Status */}
+        {user && (
+          <div className="flex justify-end mb-8">
+            <div className="flex items-center gap-4">
+              <span className="text-sm text-gray-600 dark:text-gray-300">
+                Welcome, {user.email?.split('@')[0]}
+              </span>
+              <Button variant="outline" size="sm" onClick={handleSignOut}>
+                <LogOut className="w-4 h-4 mr-2" />
+                Sign Out
+              </Button>
+            </div>
+          </div>
+        )}
+        
+        {!user && !loading && (
+          <div className="flex justify-end mb-8">
+            <div className="flex gap-2">
+              <Link href="/login">
+                <Button variant="outline" size="sm">Sign In</Button>
+              </Link>
+              <Link href="/signup">
+                <Button size="sm">Sign Up</Button>
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {/* Hero Section with Search */}
+        <MobileHero
+          badge={heroConfig.badge}
+          title={heroConfig.title}
+          description={heroConfig.description}
+          actions={[
+            {
+              label: "View Pricing",
+              href: "/checkout",
+              icon: ArrowRight,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More",
+              variant: "outline",
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-8"
+        />
+
+        {/* Search Bar with Glassmorphism */}
+        <div className="max-w-2xl mx-auto mb-12">
+          <div className={glass.card + " " + glass.border + " " + "p-1 rounded-2xl" + " " + animations.hover.lift}>
+            <AudioSearch
+              placeholder="Search for tracks, artists, or albums..."
+              onSearch={(query) => console.log('Searching:', query)}
+              showTrending={true}
+              recentSearches={['Luna Rivers', 'Ambient Flow', 'Electronic']}
+              className="w-full bg-transparent border-none"
+            />
+          </div>
+        </div>
+
+        {/* Main Content Area */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-20">
+          {/* 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}">
+              <NowPlayingCard
+                track={currentTrack || demoPlaylist[0]}
+                isPlaying={isPlaying}
+                onPlayPause={() => setIsPlaying(!isPlaying)}
+                showWaveform={true}
+                className="bg-transparent"
+              />
+            </div>
+
+            {/* 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}">
+                <PlaylistCard
+                  title="Today's Top Hits"
+                  description="The most played songs today"
+                  trackCount={50}
+                  coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNGRjc4NzgiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
+                  onClick={() => console.log('Opening Top Hits playlist')}
+                  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}">
+                <PlaylistCard
+                  title="Chill Vibes"
+                  description="Relaxing music for focus and creativity"
+                  trackCount={32}
+                  coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM2MEE1RkEiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
+                  onClick={() => console.log('Opening Chill Vibes playlist')}
+                  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}">
+                <PlaylistCard
+                  title="Electronic Pulse"
+                  description="High-energy electronic and dance music"
+                  trackCount={28}
+                  coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM5QzI3QjAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
+                  onClick={() => console.log('Opening Electronic Pulse playlist')}
+                  className="bg-transparent border-none"
+                />
+              </div>
+            </div>
+
+            {/* Track List with Glassmorphism */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}">
+              <TrackList
+                tracks={demoPlaylist}
+                currentTrackId={currentTrack?.id}
+                onTrackSelect={(track) => setCurrentTrack(track)}
+                onTrackPlay={(track) => {
+                  setCurrentTrack(track)
+                  setIsPlaying(true)
+                }}
+                showArtwork={true}
+                showDuration={true}
+                showLikeButton={true}
+                className="mb-8 bg-transparent"
+              />
+            </div>
+          </div>
+
+          {/* 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}">
+              <PlaylistSidebar
+                playlists={[
+                  { id: '1', name: 'Liked Songs', trackCount: 47 },
+                  { id: '2', name: 'Recently Played', trackCount: 23 },
+                  { id: '3', name: 'My Playlist #1', trackCount: 15 },
+                  { id: '4', name: 'Favorites', trackCount: 32 }
+                ]}
+                onPlaylistSelect={(playlist) => console.log('Selected playlist:', playlist)}
+                currentPlaylistId="1"
+                className="sticky top-4 bg-transparent"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 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={"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>
+            <h3 className="text-lg font-semibold mb-2">High-Quality Streaming</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Lossless audio with adaptive bitrate for the best experience
+            </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={"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>
+            <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Your listening habits and data are always protected
+            </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={"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>
+            <h3 className="text-lg font-semibold mb-2">Offline Support</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Download your favorites for offline listening anywhere
+            </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={"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" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Premium Plans</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Flexible subscription options for every music lover
+            </p>
+          </div>
+        </ResponsiveGrid>
+            </MobileContainer>
+            </div>
+          </main>
+        </PullToRefresh>
+      </OfflineWrapper>
+
+      {/* Fixed Audio Player Bar with Enhanced Glassmorphism */}
+      <div className={"fixed bottom-0 left-0 right-0 z-50" + " " + glass.card + " " + glass.border + " " + "border-t backdrop-blur-xl"}>
+        <FixedAudioBar
+          track={currentTrack || demoPlaylist[0]}
+          isPlaying={isPlaying}
+          onPlayPause={() => setIsPlaying(!isPlaying)}
+          onNext={() => {
+            const currentIndex = demoPlaylist.findIndex(track => track.id === (currentTrack?.id || demoPlaylist[0].id))
+            const nextIndex = (currentIndex + 1) % demoPlaylist.length
+            setCurrentTrack(demoPlaylist[nextIndex])
+          }}
+          onPrevious={() => {
+            const currentIndex = demoPlaylist.findIndex(track => track.id === (currentTrack?.id || demoPlaylist[0].id))
+            const prevIndex = (currentIndex - 1 + demoPlaylist.length) % demoPlaylist.length
+            setCurrentTrack(demoPlaylist[prevIndex])
+          }}
+          showWaveform={true}
+          showVolumeControl={true}
+          showTimeProgress={true}
+          showLikeButton={true}
+          showShareButton={true}
+          showShuffleRepeat={true}
+          allowMinimize={true}
+          className="bg-transparent"
+        />
+      </div>
+    </PageTransition>
+  )
+}