@digilogiclabs/create-saas-app 1.5.3 → 1.6.0

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

@@ -40,3 +40,149 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Mobile-first optimizations */
+@media (max-width: 768px) {
+  .mobile-optimized {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Better touch targets */
+  button, 
+  a, 
+  input, 
+  select, 
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Smooth scrolling for mobile */
+  html {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Animated moving banner */
+@keyframes marquee {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 15s linear infinite;
+}
+
+/* Network-aware styles */
+@media (prefers-reduced-data: reduce) {
+  .high-bandwidth-content {
+    display: none;
+  }
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  .animate-marquee {
+    animation: none;
+  }
+}
+
+/* Hamburger menu animations */
+.hamburger-line {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+}
+
+.hamburger-open .hamburger-line:nth-child(1) {
+  transform: rotate(45deg) translate(6px, 6px);
+}
+
+.hamburger-open .hamburger-line:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger-open .hamburger-line:nth-child(3) {
+  transform: rotate(-45deg) translate(6px, -6px);
+}
+
+/* Custom animations for mobile interactions */
+@keyframes haptic-feedback {
+  0% { transform: scale(1); }
+  50% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+.haptic-feedback {
+  animation: haptic-feedback 0.1s ease-in-out;
+}
+
+/* Video-specific optimizations */
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+}
+
+.video-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+/* Offline indicator styles */
+.offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #f59e0b;
+  color: white;
+  text-align: center;
+  padding: 8px;
+  font-size: 14px;
+  z-index: 9999;
+}
+
+/* Loading states */
+.loading-skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Progressive image loading */
+.progressive-image {
+  filter: blur(5px);
+  transition: filter 0.3s;
+}
+
+.progressive-image.loaded {
+  filter: blur(0);
+}

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

@@ -1,12 +1,31 @@
 'use client'
 
-import { Button, Card, VideoPlayer } from '@digilogiclabs/saas-factory-ui'
-import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Video } from 'lucide-react'
+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 handleSignOut = async () => {
     try {
@@ -16,9 +35,29 @@ export default function Home() {
     }
   }
 
+  const handleRefresh = async () => {
+    setIsRefreshing(true)
+    // Simulate refresh
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsRefreshing(false)
+  }
+
   return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div className="container mx-auto px-4 py-16">
+    <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 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+            <MobileContainer className="py-16">
         {/* Auth Status Bar */}
         <div className="flex justify-end mb-8">
           {loading ? (
@@ -46,85 +85,217 @@ export default function Home() {
           )}
         </div>
 
-        {/* Hero Section */}
-        <div className="text-center mb-16">
-          <div className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 mb-6">
-            <CheckCircle className="w-4 h-4 mr-2" />
-            Video Player App - UI Package v0.11.1 + Auth v1.0.0 + Payments Integrated Successfully
-          </div>
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
-            Welcome to{' '}
-            <span className="text-blue-600 dark:text-blue-400">{{titleCaseName}}</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-            {{description}}. This video streaming app template uses SaaS Factory UI package v0.11.1 with video player components, authentication v1.0.0 and payments integration.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link href="/checkout">
-              <Button size="lg" className="text-lg px-8">
-                View Pricing
-                <ArrowRight className="ml-2 h-5 w-5" />
-              </Button>
-            </Link>
-            <Button variant="outline" size="lg" className="text-lg px-8">
-              Learn More
-            </Button>
+        {/* 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={{
+            text: "Video Player App - UI Package v0.13.0 + Auth v1.0.0 + Payments Integrated Successfully",
+            variant: "secondary",
+            icon: CheckCircle
+          }}
+          title={{
+            text: "Welcome to {{titleCaseName}}",
+            highlight: "{{titleCaseName}}",
+            size: "xl"
+          }}
+          description="{{description}}. This mobile-first video streaming app template uses SaaS Factory UI package v0.13.0 with touch-optimized video player components, authentication v1.0.0 and payments integration."
+          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 */}
-        <div 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">Video Player Component</h2>
-              <p className="text-gray-600 dark:text-gray-300">
-                Experience our feature-rich video player with playlist support, quality selection, fullscreen mode, and cross-platform compatibility
-              </p>
+        <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: 'Sample Video Content',
+                      description: 'Demo video optimized for mobile',
+                      duration: 300,
+                      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                      thumbnail: 'https://via.placeholder.com/320x180?text=Video+1',
+                      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>
-            <VideoPlayer
-              playlist={[
-                {
-                  id: '1',
-                  title: 'Sample Video Content',
-                  description: 'Demo video showcasing the video player functionality',
-                  duration: 300,
-                  url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-                  thumbnail: 'https://via.placeholder.com/640x360?text=Video+1',
-                  qualities: [
-                    { 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: 'Another Great Video',
-                  description: 'Another sample video for the playlist',
-                  duration: 240,
-                  url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-                  thumbnail: 'https://via.placeholder.com/640x360?text=Video+2',
-                  qualities: [
-                    { 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' }
-                  ]
-                }
-              ]}
-              className="max-w-4xl 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: 'Sample Video Content',
+                    description: 'Demo video showcasing mobile video player functionality',
+                    duration: 300,
+                    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                    thumbnail: 'https://via.placeholder.com/640x360?text=Video+1',
+                    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: 'Another Great Video',
+                    description: 'Mobile-optimized video streaming experience',
+                    duration: 240,
+                    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+                    thumbnail: 'https://via.placeholder.com/640x360?text=Video+2',
+                    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: 'Touch-Friendly Content',
+                    description: 'Optimized for touch devices with gesture controls',
+                    duration: 180,
+                    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                    thumbnail: 'https://via.placeholder.com/640x360?text=Video+3',
+                    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 */}
-        <div className="grid md:grid-cols-4 gap-8 mb-16">
+        <ResponsiveGrid columns={{ base: 1, sm: 2, md: 4 }} 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-xl font-semibold mb-2">Video UI Components</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Video Player, Button, and Card components from @digilogiclabs/saas-factory-ui v0.11.1
+            <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.0
             </p>
           </Card>
 
@@ -132,9 +303,9 @@ export default function Home() {
             <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-xl font-semibold mb-2">Authentication</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Secure user authentication with @digilogiclabs/saas-factory-auth
+            <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>
 
@@ -142,9 +313,9 @@ export default function Home() {
             <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-xl font-semibold mb-2">TypeScript Ready</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Full type safety with enhanced component definitions
+            <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>
 
@@ -154,12 +325,12 @@ export default function Home() {
                 <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-xl font-semibold mb-2">Payments Integration</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Complete payment processing with @digilogiclabs/saas-factory-payments
+            <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>
-        </div>
+        </ResponsiveGrid>
 
         {/* Button Variants Showcase */}
         <Card className="max-w-4xl mx-auto p-8">
@@ -177,11 +348,14 @@ export default function Home() {
           </div>
           <div className="text-center">
             <p className="text-sm text-gray-500">
-              All components from @digilogiclabs/saas-factory-ui v0.11.1 + auth v1.0.0 + payments
+              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.0 + auth v1.0.0 + payments
             </p>
           </div>
         </Card>
-      </div>
-    </main>
+            </MobileContainer>
+          </main>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
   )
 }