@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,395 @@
+'use client'
+
+import { 
+  Button, 
+  Card, 
+  VideoPlayer,
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  PullToRefresh,
+  ProgressiveImage,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Video, Wifi, WifiOff, Play, Pause } 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 projectName = "{{titleCaseName}}"
+  const projectDescription = "{{description}}"
+  
+  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 }
+  }
+  
+  const heroConfig = {
+    badge: {
+      text: "🎥 Professional Video Platform",
+      variant: "secondary" as const,
+      icon: CheckCircle
+    },
+    title: {
+      text: `Welcome to ${projectName}`,
+      highlight: projectName,
+      size: "xl" as const
+    },
+    description: `${projectDescription}. Watch high-quality videos with adaptive streaming, gesture controls, and seamless playback on any device.`
+  }
+
+  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="slide" direction="up" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="cache-first"
+        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 video streaming */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-background to-secondary/15 dark:from-primary/25 dark:via-background dark:to-secondary/25" />
+            <div className="absolute inset-0 bg-gradient-to-tl from-accent/10 via-transparent to-secondary/10 dark:from-accent/15 dark:via-transparent dark:to-secondary/15" />
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center_top,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent dark:from-primary/30 dark:via-transparent dark:to-transparent" />
+            {/* Animated video-themed particles */}
+            <div className="absolute inset-0 opacity-20 dark:opacity-10">
+              <div className="absolute top-1/4 right-1/4 w-72 h-72 bg-primary/60 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/80"></div>
+              <div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-secondary/60 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/80"></div>
+              <div className="absolute top-1/2 left-1/5 w-64 h-64 bg-accent/60 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/80"></div>
+            </div>
+            {/* Video player overlay effect */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/3 to-background/10" />
+            <div className="relative z-10">
+            <MobileContainer className="py-16">
+        {/* Auth Status Bar */}
+        <div className="flex justify-end mb-8">
+          {loading ? (
+            <div className="text-sm text-gray-600">Loading...</div>
+          ) : user ? (
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+                <User className="w-4 h-4" />
+                Welcome, {user.email}
+              </div>
+              <Button variant="outline" size="sm" onClick={handleSignOut}>
+                <LogOut className="w-4 h-4 mr-2" />
+                Sign Out
+              </Button>
+            </div>
+          ) : (
+            <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 Network Status */}
+        <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
+          <div className="flex items-center gap-2 text-sm">
+            {isOnline ? (
+              <div className="flex items-center gap-2 text-green-600">
+                <Wifi className="w-4 h-4" />
+                <span>Online</span>
+                {networkInfo?.effectiveType && (
+                  <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
+                    {networkInfo.effectiveType.toUpperCase()}
+                  </span>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-red-600">
+                <WifiOff className="w-4 h-4" />
+                <span>Offline - Cached videos available</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <MobileHero
+          badge={heroConfig.badge}
+          title={heroConfig.title}
+          description={heroConfig.description}
+          actions={[
+            {
+              label: "Start Watching",
+              href: "/checkout",
+              icon: Play,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More",
+              variant: "outline",
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-16"
+        />
+
+        {/* Video Player Showcase */}
+        <NetworkAwareContent
+          showOnSlow={
+            <div className="max-w-4xl mx-auto mb-16">
+              <Card className="p-6">
+                <div className="text-center mb-6">
+                  <div className="mx-auto w-12 h-12 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
+                    <Video className="h-6 w-6 text-red-600 dark:text-red-400" />
+                  </div>
+                  <h2 className="text-xl font-bold mb-2">Mobile Video Player</h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Optimized for slower connections - automatically serves lower quality
+                  </p>
+                </div>
+                <VideoPlayer
+                  playlist={[
+                    {
+                      id: '1',
+                      title: 'Getting Started Guide',
+                      description: 'Learn the basics in this quick tutorial',
+                      duration: 300,
+                      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                      thumbnail: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMyMCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIxODAiIGZpbGw9IiM0Qjc2ODgiLz48Y2lyY2xlIGN4PSIxNjAiIGN5PSI5MCIgcj0iMzAiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxwYXRoIGQ9Ik0xNDUgNzVWMTA1TDE3NSA5MEwxNDUgNzVaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==',
+                      qualities: [
+                        { label: '360p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }
+                      ]
+                    }
+                  ]}
+                  mobileOptimized={true}
+                  touchFriendly={true}
+                  autoQuality="low"
+                  className="max-w-lg mx-auto"
+                />
+              </Card>
+            </div>
+          }
+          showOnOffline={
+            <div className="max-w-4xl mx-auto mb-16">
+              <Card className="p-6 bg-yellow-50 border-yellow-200">
+                <div className="text-center">
+                  <WifiOff className="mx-auto w-12 h-12 text-yellow-600 mb-4" />
+                  <h2 className="text-xl font-bold mb-2">Offline Mode</h2>
+                  <p className="text-gray-600">Videos are cached for offline viewing when connection is restored.</p>
+                </div>
+              </Card>
+            </div>
+          }
+        >
+          <SwipeableCard
+            leftActions={[
+              { 
+                id: 'previous', 
+                label: 'Previous', 
+                onAction: () => console.log('Previous video'),
+                color: 'blue',
+                icon: ArrowRight
+              },
+              { 
+                id: 'quality', 
+                label: 'Quality', 
+                onAction: () => console.log('Toggle quality'),
+                color: 'purple'
+              }
+            ]}
+            rightActions={[
+              { 
+                id: 'next', 
+                label: 'Next', 
+                onAction: () => console.log('Next video'),
+                color: 'green',
+                icon: ArrowRight
+              },
+              { 
+                id: 'fullscreen', 
+                label: 'Fullscreen', 
+                onAction: () => console.log('Toggle fullscreen'),
+                color: 'orange'
+              }
+            ]}
+            threshold={60}
+            hapticFeedback={true}
+            showActionLabels={true}
+            className="max-w-4xl mx-auto mb-16"
+          >
+            <Card className="p-8">
+              <div className="text-center mb-8">
+                <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
+                  <Video className="h-8 w-8 text-red-600 dark:text-red-400" />
+                </div>
+                <h2 className="text-3xl font-bold mb-4">Touch-Optimized Video Player</h2>
+                <p className="text-gray-600 dark:text-gray-300 mb-2">
+                  Experience our mobile-first video player with gesture controls, adaptive quality, and offline caching
+                </p>
+                <p className="text-sm text-gray-500">
+                  Swipe for controls • Double tap for fullscreen • Pull to refresh playlist
+                </p>
+              </div>
+              <VideoPlayer
+                playlist={[
+                  {
+                    id: '1',
+                    title: 'Getting Started Guide',
+                    description: 'Learn the basics in this comprehensive tutorial',
+                    duration: 300,
+                    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                    thumbnail: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjM2MCIgdmlld0JveD0iMCAwIDY0MCAzNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IiM0Qjc2ODgiLz48Y2lyY2xlIGN4PSIzMjAiIGN5PSIxODAiIHI9IjUwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMjkwIDE1MFYyMTBMMzUwIDE4MEwyOTAgMTUwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+                    qualities: [
+                      { label: '360p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
+                      { label: '480p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
+                      { label: '720p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }
+                    ]
+                  },
+                  {
+                    id: '2',
+                    title: 'Advanced Features',
+                    description: 'Explore powerful features and customization options',
+                    duration: 240,
+                    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+                    thumbnail: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjM2MCIgdmlld0JveD0iMCAwIDY0MCAzNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IiNFRjQ0NDQiLz48Y2lyY2xlIGN4PSIzMjAiIGN5PSIxODAiIHI9IjUwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMjkwIDE1MFYyMTBMMzUwIDE4MEwyOTAgMTUwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+                    qualities: [
+                      { label: '360p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' },
+                      { label: '480p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' },
+                      { label: '720p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' }
+                    ]
+                  },
+                  {
+                    id: '3',
+                    title: 'Best Practices',
+                    description: 'Tips and tricks for getting the most out of the platform',
+                    duration: 180,
+                    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                    thumbnail: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjM2MCIgdmlld0JveD0iMCAwIDY0MCAzNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IiMwNjkyQzUiLz48Y2lyY2xlIGN4PSIzMjAiIGN5PSIxODAiIHI9IjUwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMjkwIDE1MFYyMTBMMzUwIDE4MEwyOTAgMTUwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+                    qualities: [
+                      { label: '360p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
+                      { label: '720p', url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }
+                    ]
+                  }
+                ]}
+                mobileOptimized={true}
+                touchFriendly={true}
+                hapticFeedback={true}
+                gestureControls={true}
+                networkAware={true}
+                offlineSupport={true}
+                autoQuality="adaptive"
+                className="max-w-4xl mx-auto"
+              />
+            </Card>
+          </SwipeableCard>
+        </NetworkAwareContent>
+
+        {/* Component Showcase */}
+        <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="mb-16">
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+              <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Mobile Video UI</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Touch-optimized Video Player with gesture controls from @digilogiclabs/saas-factory-ui v0.13.3
+            </p>
+          </Card>
+
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+              <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Cross-Device Auth</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Secure authentication across all devices with @digilogiclabs/saas-factory-auth v1.0.0
+            </p>
+          </Card>
+
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+              <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Performance First</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Network-aware video streaming with adaptive quality and caching
+            </p>
+          </Card>
+
+          <Card className="text-center p-6">
+            <div className="mx-auto w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mb-4">
+              <svg className="h-6 w-6 text-orange-600 dark: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">Mobile Payments</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Touch-optimized subscription flows with @digilogiclabs/saas-factory-payments v1.0.0
+            </p>
+          </Card>
+        </ResponsiveGrid>
+
+        {/* Button Variants Showcase */}
+        <Card className="max-w-4xl mx-auto p-8">
+          <div className="text-center mb-6">
+            <h2 className="text-2xl font-bold mb-2">Full SaaS Package Integration</h2>
+            <p className="text-gray-600 dark:text-gray-300">
+              Complete integration of UI, Auth, and Payments packages
+            </p>
+          </div>
+          <div className="flex flex-wrap justify-center gap-4 mb-6">
+            <Button>Default Button</Button>
+            <Button variant="secondary">Secondary Button</Button>
+            <Button variant="outline">Outline Button</Button>
+            <Button disabled>Disabled Button</Button>
+          </div>
+          <div className="text-center">
+            <p className="text-sm text-gray-500">
+              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.3 + auth v1.0.0 + payments
+            </p>
+          </div>
+        </Card>
+            </MobileContainer>
+          </main>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
+  )
+}