@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { RefreshCw, Home, AlertCircle } from 'lucide-react'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="mb-6">
+          <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
+            <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            Something went wrong
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            We apologize for the inconvenience. Please try again or return to the home page.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <Button
+            onClick={reset}
+            className="w-full"
+            variant="default"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Try Again
+          </Button>
+          
+          <Button
+            onClick={() => window.location.href = '/'}
+            variant="outline"
+            className="w-full"
+          >
+            <Home className="w-4 h-4 mr-2" />
+            Go Home
+          </Button>
+        </div>
+
+        {process.env.NODE_ENV === 'development' && (
+          <details className="mt-6 text-left">
+            <summary className="text-sm font-medium text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
+              Error Details (Development)
+            </summary>
+            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded-md overflow-auto">
+              {error.message}
+              {error.stack}
+            </pre>
+          </details>
+        )}
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/dist/index.css';
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @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/dist/templates/web/ui-auth-payments-audio/template/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+import { Footer } from '@/components/shared/footer'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+import { Loader2 } from 'lucide-react'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="flex flex-col items-center">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
+          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+            Loading
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Please wait while we load your content...
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,6 @@
+import { LoginForm } from '@/components/client/login-form'
+
+export default function LoginPage() {
+  return <LoginForm />
+}
+

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

@@ -0,0 +1,403 @@
+'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
+  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 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 },
+    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 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 */}
+        {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>
+  )
+}