@digilogiclabs/create-saas-app 2.3.0 → 2.5.0

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

@@ -1,391 +0,0 @@
-'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}}"
-  
-  // Safe CSS class combinations to avoid template literal issues
-  const glassCard = [glass.card, glass.border].filter(Boolean).join(' ')
-  const glassCardRounded = [glass.card, glass.border, 'rounded-2xl'].filter(Boolean).join(' ')
-  const glassCardWithHover = [glass.card, glass.border, 'rounded-2xl', animations.hover.scale, animations.transition.smooth].filter(Boolean).join(' ')
-  const glassAccentIcon = [glass.accent, 'rounded-xl', 'flex', 'items-center', 'justify-center', animations.hover.glow].filter(Boolean).join(' ')
-  
-  const gridConfig = {
-    columns_1_2: { base: 1, md: 2 },
-    columns_1_3: { base: 1, md: 3 },
-    columns_1_sm2: { base: 1, sm: 2 },
-    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
-    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
-    columns_2: { base: 2 },
-    columns_2_md3: { base: 2, md: 3 },
-    columns_2_2: { base: 2 },
-    columns_2_md4: { base: 2, md: 4 }
-  }
-  
-  // Demo playlist data
-  const demoPlaylist = [
-    {
-      id: '1',
-      title: 'Midnight Echoes',
-      artist: 'Luna Rivers',
-      album: 'Digital Dreams',
-      duration: 180,
-      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM4QjVDRjYiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
-      liked: false
-    },
-    {
-      id: '2',
-      title: 'Neon Nights',
-      artist: 'The Frequency',
-      album: 'Electric Pulse',
-      duration: 210,
-      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNFRjQ0NDQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
-      liked: true
-    },
-    {
-      id: '3',
-      title: 'Ocean Waves',
-      artist: 'Ambient Flow',
-      album: 'Nature Sounds',
-      duration: 195,
-      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMwNjkyQzUiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
-      liked: false
-    },
-    {
-      id: '4',
-      title: 'City Lights',
-      artist: 'Urban Echo',
-      album: 'Metropolitan',
-      duration: 225,
-      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNGNTk3MDAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
-      liked: true
-    }
-  ]
-
-  const heroConfig = {
-    badge: {
-      text: "🎵 Premium Audio Experience",
-      variant: "secondary" as const,
-      icon: CheckCircle
-    },
-    title: {
-      text: `Welcome to ${projectName}`,
-      highlight: projectName,
-      size: "xl" as const
-    },
-    description: `${projectDescription}. Stream your favorite music with crystal-clear quality, offline downloads, and seamless playback across all your devices.`
-  }
-
-  const handleSignOut = async () => {
-    try {
-      await signOut()
-    } catch (err) {
-      console.error('Sign out error:', err)
-    }
-  }
-
-  const handleRefresh = async () => {
-    setIsRefreshing(true)
-    // Simulate refresh
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    setIsRefreshing(false)
-  }
-
-  return (
-    <PageTransition type="fade" duration={300}>
-      <OfflineWrapper
-        cacheStrategy="stale-while-revalidate"
-        showOfflineIndicator={true}
-        backgroundSync={true}
-      >
-        <PullToRefresh 
-          onRefresh={handleRefresh}
-          threshold={80}
-          loadingIndicator="spinner"
-          hapticOnTrigger={true}
-          networkAware={true}
-        >
-          <main className={"min-h-screen" + " " + glass.background.primary + " " + "relative overflow-hidden"}>
-            {/* Glassmorphism background overlay */}
-            <div className={"absolute inset-0" + " " + glass.background.accent + " " + "opacity-30"} />
-            <div className="relative z-10">
-            <MobileContainer className="py-8">
-        {/* Simple Auth Status */}
-        {user && (
-          <div className="flex justify-end mb-8">
-            <div className="flex items-center gap-4">
-              <span className="text-sm text-gray-600 dark:text-gray-300">
-                Welcome, {user.email?.split('@')[0]}
-              </span>
-              <Button variant="outline" size="sm" onClick={handleSignOut}>
-                <LogOut className="w-4 h-4 mr-2" />
-                Sign Out
-              </Button>
-            </div>
-          </div>
-        )}
-        
-        {!user && !loading && (
-          <div className="flex justify-end mb-8">
-            <div className="flex gap-2">
-              <Link href="/login">
-                <Button variant="outline" size="sm">Sign In</Button>
-              </Link>
-              <Link href="/signup">
-                <Button size="sm">Sign Up</Button>
-              </Link>
-            </div>
-          </div>
-        )}
-
-        {/* Hero Section with Search */}
-        <MobileHero
-          badge={heroConfig.badge}
-          title={heroConfig.title}
-          description={heroConfig.description}
-          actions={[
-            {
-              label: "View Pricing",
-              href: "/checkout",
-              icon: ArrowRight,
-              variant: "default",
-              size: "lg"
-            },
-            {
-              label: "Learn More",
-              variant: "outline",
-              size: "lg"
-            }
-          ]}
-          className="text-center mb-8"
-        />
-
-        {/* Search Bar with Glassmorphism */}
-        <div className="max-w-2xl mx-auto mb-12">
-          <div className={glass.card + " " + glass.border + " " + "p-1 rounded-2xl" + " " + animations.hover.lift}>
-            <AudioSearch
-              placeholder="Search for tracks, artists, or albums..."
-              onSearch={(query) => console.log('Searching:', query)}
-              showTrending={true}
-              recentSearches={['Luna Rivers', 'Ambient Flow', 'Electronic']}
-              className="w-full bg-transparent border-none"
-            />
-          </div>
-        </div>
-
-        {/* Main Content Area */}
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-20">
-          {/* Main Content */}
-          <div className="lg:col-span-3 space-y-8">
-            {/* Now Playing Card with Enhanced Glassmorphism */}
-            <div className={`${glass.card} ${glass.border} rounded-3xl p-6 mb-8 ${animations.hover.lift} ${animations.transition.smooth}">
-              <NowPlayingCard
-                track={currentTrack || demoPlaylist[0]}
-                isPlaying={isPlaying}
-                onPlayPause={() => setIsPlaying(!isPlaying)}
-                showWaveform={true}
-                className="bg-transparent"
-              />
-            </div>
-
-            {/* Featured Playlists with Staggered Animation */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
-                <PlaylistCard
-                  title="Today's Top Hits"
-                  description="The most played songs today"
-                  trackCount={50}
-                  coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNGRjc4NzgiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
-                  onClick={() => console.log('Opening Top Hits playlist')}
-                  className="bg-transparent border-none"
-                />
-              </div>
-              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
-                <PlaylistCard
-                  title="Chill Vibes"
-                  description="Relaxing music for focus and creativity"
-                  trackCount={32}
-                  coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM2MEE1RkEiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
-                  onClick={() => console.log('Opening Chill Vibes playlist')}
-                  className="bg-transparent border-none"
-                />
-              </div>
-              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
-                <PlaylistCard
-                  title="Electronic Pulse"
-                  description="High-energy electronic and dance music"
-                  trackCount={28}
-                  coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM5QzI3QjAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
-                  onClick={() => console.log('Opening Electronic Pulse playlist')}
-                  className="bg-transparent border-none"
-                />
-              </div>
-            </div>
-
-            {/* Track List with Glassmorphism */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}">
-              <TrackList
-                tracks={demoPlaylist}
-                currentTrackId={currentTrack?.id}
-                onTrackSelect={(track) => setCurrentTrack(track)}
-                onTrackPlay={(track) => {
-                  setCurrentTrack(track)
-                  setIsPlaying(true)
-                }}
-                showArtwork={true}
-                showDuration={true}
-                showLikeButton={true}
-                className="mb-8 bg-transparent"
-              />
-            </div>
-          </div>
-
-          {/* Sidebar with Glassmorphism */}
-          <div className="lg:col-span-1">
-            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.lift} ${animations.transition.smooth}">
-              <PlaylistSidebar
-                playlists={[
-                  { id: '1', name: 'Liked Songs', trackCount: 47 },
-                  { id: '2', name: 'Recently Played', trackCount: 23 },
-                  { id: '3', name: 'My Playlist #1', trackCount: 15 },
-                  { id: '4', name: 'Favorites', trackCount: 32 }
-                ]}
-                onPlaylistSelect={(playlist) => console.log('Selected playlist:', playlist)}
-                currentPlaylistId="1"
-                className="sticky top-4 bg-transparent"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Features Overview with Enhanced Glassmorphism */}
-        <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="mb-16">
-          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
-            <div className={"mx-auto w-12 h-12" + " " + glass.accent + " " + "rounded-xl flex items-center justify-center mb-4" + " " + animations.hover.glow}>
-              <Zap className="h-6 w-6 text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">High-Quality Streaming</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              Lossless audio with adaptive bitrate for the best experience
-            </p>
-          </div>
-
-          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
-            <div className={"mx-auto w-12 h-12" + " " + glass.accent + " " + "rounded-xl flex items-center justify-center mb-4" + " " + animations.hover.glow}>
-              <Shield className="h-6 w-6 text-green-400" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              Your listening habits and data are always protected
-            </p>
-          </div>
-
-          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
-            <div className={"mx-auto w-12 h-12" + " " + glass.accent + " " + "rounded-xl flex items-center justify-center mb-4" + " " + animations.hover.glow}>
-              <Rocket className="h-6 w-6 text-purple-400" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Offline Support</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              Download your favorites for offline listening anywhere
-            </p>
-          </div>
-
-          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.extra}">
-            <div className={"mx-auto w-12 h-12" + " " + glass.accent + " " + "rounded-xl flex items-center justify-center mb-4" + " " + animations.hover.glow}>
-              <svg className="h-6 w-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-              </svg>
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Premium Plans</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              Flexible subscription options for every music lover
-            </p>
-          </div>
-        </ResponsiveGrid>
-            </MobileContainer>
-            </div>
-          </main>
-        </PullToRefresh>
-      </OfflineWrapper>
-
-      {/* Fixed Audio Player Bar with Enhanced Glassmorphism */}
-      <div className={"fixed bottom-0 left-0 right-0 z-50" + " " + glass.card + " " + glass.border + " " + "border-t backdrop-blur-xl"}>
-        <FixedAudioBar
-          track={currentTrack || demoPlaylist[0]}
-          isPlaying={isPlaying}
-          onPlayPause={() => setIsPlaying(!isPlaying)}
-          onNext={() => {
-            const currentIndex = demoPlaylist.findIndex(track => track.id === (currentTrack?.id || demoPlaylist[0].id))
-            const nextIndex = (currentIndex + 1) % demoPlaylist.length
-            setCurrentTrack(demoPlaylist[nextIndex])
-          }}
-          onPrevious={() => {
-            const currentIndex = demoPlaylist.findIndex(track => track.id === (currentTrack?.id || demoPlaylist[0].id))
-            const prevIndex = (currentIndex - 1 + demoPlaylist.length) % demoPlaylist.length
-            setCurrentTrack(demoPlaylist[prevIndex])
-          }}
-          showWaveform={true}
-          showVolumeControl={true}
-          showTimeProgress={true}
-          showLikeButton={true}
-          showShareButton={true}
-          showShuffleRepeat={true}
-          allowMinimize={true}
-          className="bg-transparent"
-        />
-      </div>
-    </PageTransition>
-  )
-}