npm - @digilogiclabs/create-saas-app - Versions diffs - 2.11.0 → 2.12.1 - Mend

@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (413) hide show

package/src/templates/web/ui-auth-payments-audio/template/src/app/layout.tsx CHANGED Viewed

@@ -1,38 +1,40 @@
-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">
-            <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
-              Skip to content
-            </a>
-            <Header />
-            <main id="main-content" className="flex-1">
-              {children}
-            </main>
-            <Footer />
-          </div>
-        </AppProviders>
-      </body>
-    </html>
-  )
-}
+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 { MockBanner } from '@/components/mock-banner'
+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>
+          <MockBanner />
+          <div className="min-h-screen flex flex-col">
+            <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+              Skip to content
+            </a>
+            <Header />
+            <main id="main-content" className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

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

@@ -1,402 +1,139 @@
-'use client'
+import { ArrowRight, Shield, CreditCard, CheckCircle, Music, Headphones, Mic, Radio, ListMusic } from 'lucide-react'
-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)
-  }
+const FEATURES = [
+  {
+    icon: Music,
+    title: 'Audio Streaming',
+    description: 'Built-in audio player with waveform visualization and playlist management.',
+    color: 'text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-900/30',
+  },
+  {
+    icon: Headphones,
+    title: 'Podcast Ready',
+    description: 'RSS feed generation, episode management, and subscriber analytics.',
+    color: 'text-pink-600 dark:text-pink-400 bg-pink-100 dark:bg-pink-900/30',
+  },
+  {
+    icon: Shield,
+    title: 'Secure Auth',
+    description: 'Complete authentication with Supabase — login, signup, and sessions.',
+    color: 'text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-900/30',
+  },
+  {
+    icon: CreditCard,
+    title: 'Stripe Billing',
+    description: 'Subscription tiers, pay-per-download, and creator payouts.',
+    color: 'text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30',
+  },
+  {
+    icon: Mic,
+    title: 'Upload & Process',
+    description: 'Audio upload with transcoding, waveform generation, and metadata extraction.',
+    color: 'text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30',
+  },
+  {
+    icon: Radio,
+    title: 'Live Streaming',
+    description: 'WebRTC-ready architecture for live audio broadcasts and rooms.',
+    color: 'text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30',
+  },
+]
+export default function Home() {
   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>
+    <main className="min-h-screen bg-background">
+      {/* Hero */}
+      <section className="mx-auto max-w-5xl px-4 py-24 text-center">
+        <div className="inline-flex items-center rounded-full border border-border bg-muted px-3 py-1 text-sm text-muted-foreground mb-6">
+          <Headphones className="mr-1.5 h-3.5 w-3.5" />
+          Audio SaaS Starter
         </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"
-                />
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl mb-4">
+          Build your audio{' '}
+          <span className="text-primary">platform</span>
+        </h1>
+        <p className="mx-auto max-w-2xl text-lg text-muted-foreground mb-8">
+          A production-ready starter for music platforms, podcast apps, and audio SaaS.
+          Auth, payments, streaming, and analytics included.
+        </p>
+        <div className="flex items-center justify-center gap-4">
+            <Link href="/signup" className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+              Get Started <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+            <Link href="/login" className="inline-flex items-center justify-center rounded-md border border-input bg-background px-8 py-3 text-sm font-medium text-foreground hover:bg-accent transition-colors">Sign In</Link>
+        </div>
+      </section>
+      {/* Audio Player Preview */}
+      <section className="mx-auto max-w-3xl px-4 pb-16">
+        <div className="rounded-xl border border-border bg-card overflow-hidden shadow-lg">
+          <div className="p-6">
+            <div className="flex items-center gap-4 mb-4">
+              <div className="h-16 w-16 rounded-lg bg-primary/10 flex items-center justify-center">
+                <ListMusic className="h-8 w-8 text-primary" />
               </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>
+                <h3 className="font-semibold text-card-foreground">Now Playing</h3>
+                <p className="text-sm text-muted-foreground">Track Title — Artist Name</p>
               </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"
-              />
+            {/* Waveform placeholder */}
+            <div className="flex items-end gap-0.5 h-12 mb-3">
+              {Array.from({ length: 60 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="flex-1 rounded-full bg-primary/30"
+                  style={{ height: `${20 + Math.sin(i * 0.5) * 30 + Math.random() * 20}%` }}
+                />
+              ))}
             </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 className="flex items-center justify-between text-xs text-muted-foreground">
+              <span>1:23</span>
+              <span>3:45</span>
             </div>
           </div>
         </div>
+      </section>
-        {/* 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>
+      {/* Features */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-foreground mb-2">Everything for Audio</h2>
+          <p className="text-muted-foreground">Build any audio platform — podcasts, music, audiobooks, or live streams.</p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature) => (
+            <div key={feature.title} className="rounded-xl border border-border bg-card p-6">
+              <div className={`mb-4 flex h-10 w-10 items-center justify-center rounded-lg ${feature.color}`}>
+                <feature.icon className="h-5 w-5" />
+              </div>
+              <h3 className="text-lg font-semibold text-card-foreground mb-2">{feature.title}</h3>
+              <p className="text-sm text-muted-foreground">{feature.description}</p>
             </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>
+          ))}
+        </div>
+      </section>
+      {/* CTA */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="rounded-xl border border-primary/20 bg-primary/5 p-8 md:p-12 text-center">
+          <h2 className="text-2xl font-bold text-foreground mb-2">Ready to build your audio platform?</h2>
+          <p className="text-muted-foreground mb-6 max-w-lg mx-auto">
+            Everything you need to launch — auth, payments, and audio streaming pre-configured.
+          </p>
+            <Link href="/signup" className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+              Start Building <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+        </div>
+      </section>
+    </main>
   )
 }