@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

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

@@ -1,403 +1,402 @@
-'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/app-sdk'
-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>
-  )
-}
+'use client'
+
+import { 
+  Button, 
+  Card, 
+  AudioPlayer,
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  PullToRefresh,
+  useNetworkInfo,
+  useOfflineState,
+  FixedAudioBar,
+  PlaylistCard,
+  TrackList,
+  WaveformPlayer,
+  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/app-sdk'
+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 className="w-4 h-4" />
+    },
+    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={6} 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>
+  )
+}