@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

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

@@ -1,350 +1,350 @@
-'use client'
-
-import { 
-  Button, 
-  Card,
-  PageTransition,
-  MobileContainer,
-  MobileHero,
-  ResponsiveGrid,
-  NetworkAwareContent,
-  OfflineWrapper,
-  SwipeableCard,
-  PullToRefresh,
-  LazyImage,
-  useNetworkInfo,
-  useOfflineState
-} from '@digilogiclabs/saas-factory-ui'
-import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Wifi, WifiOff, CreditCard, Smartphone } 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 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: "🚀 Complete SaaS Solution",
-      variant: "secondary" as const,
-      icon: CheckCircle
-    },
-    title: {
-      text: `Welcome to ${projectName}`,
-      highlight: projectName,
-      size: "xl" as const
-    },
-    description: `${projectDescription}. Everything you need to launch your SaaS business with secure authentication, seamless payments, and beautiful mobile-first design.`
-  }
-
-  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 SaaS platform */}
-            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-secondary/10 dark:from-primary/20 dark:via-background dark:to-secondary/20" />
-            <div className="absolute inset-0 bg-gradient-to-tr from-accent/5 via-transparent to-primary/5 dark:from-accent/10 dark:via-transparent dark:to-primary/10" />
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-secondary/15 via-transparent to-transparent dark:from-secondary/25 dark:via-transparent dark:to-transparent" />
-            {/* Animated business-themed particles */}
-            <div className="absolute inset-0 opacity-25 dark:opacity-15">
-              <div className="absolute top-1/5 right-1/5 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 bottom-1/3 left-1/4 w-80 h-80 bg-secondary/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/70"></div>
-              <div className="absolute top-2/3 right-1/3 w-56 h-56 bg-accent/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/70"></div>
-            </div>
-            {/* Subtle depth overlay */}
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/2 to-background/5" />
-            <div className="relative z-10">
-            <MobileContainer className="py-16">
-        {/* Network & Auth Status Bar */}
-        <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 Mode</span>
-              </div>
-            )}
-          </div>
-
-          {loading ? (
-            <div className="text-sm text-gray-600">Loading auth...</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 */}
-        <MobileHero
-          badge={heroConfig.badge}
-          title={heroConfig.title}
-          description={heroConfig.description}
-          actions={[
-            {
-              label: "View Pricing",
-              href: "/checkout",
-              icon: CreditCard,
-              variant: "default",
-              size: "lg"
-            },
-            {
-              label: "Learn More",
-              variant: "outline",
-              size: "lg"
-            }
-          ]}
-          className="text-center mb-16"
-        />
-
-        {/* Component Showcase */}
-        <NetworkAwareContent
-          showOnSlow={
-            <ResponsiveGrid columns={gridConfig.columns_1_2} gap="lg" className="mb-16">
-              <SwipeableCard
-                rightActions={[
-                  { 
-                    id: 'explore', 
-                    label: 'Explore', 
-                    onAction: () => console.log('Exploring mobile features'),
-                    color: 'blue'
-                  }
-                ]}
-                threshold={60}
-                hapticFeedback={true}
-                showActionLabels={true}
-              >
-                <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">
-                    <Smartphone className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">Mobile-First UI</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
-                    Touch-optimized components from @digilogiclabs/saas-factory-ui v0.13.3
-                  </p>
-                </Card>
-              </SwipeableCard>
-              
-              <SwipeableCard
-                rightActions={[
-                  { 
-                    id: 'payments', 
-                    label: 'Try Payments', 
-                    onAction: () => window.location.href = '/checkout',
-                    color: 'green'
-                  }
-                ]}
-                threshold={60}
-                hapticFeedback={true}
-                showActionLabels={true}
-              >
-                <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">
-                    <CreditCard className="h-6 w-6 text-orange-600 dark:text-orange-400" />
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">Touch Payments</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
-                    Mobile-optimized payment flows with swipe gestures
-                  </p>
-                </Card>
-              </SwipeableCard>
-            </ResponsiveGrid>
-          }
-        >
-          <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="mb-16">
-            <SwipeableCard
-              rightActions={[
-                { 
-                  id: 'demo-ui', 
-                  label: 'Try Demo', 
-                  onAction: () => console.log('Demo UI components'),
-                  color: 'blue'
-                }
-              ]}
-              threshold={60}
-              hapticFeedback={true}
-              showActionLabels={true}
-            >
-              <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 UI Components</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
-                  Touch-optimized buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.3
-                </p>
-              </Card>
-            </SwipeableCard>
-
-            <SwipeableCard
-              rightActions={[
-                { 
-                  id: 'auth-demo', 
-                  label: 'Auth Demo', 
-                  onAction: () => window.location.href = '/login',
-                  color: 'green'
-                }
-              ]}
-              threshold={60}
-              hapticFeedback={true}
-              showActionLabels={true}
-            >
-              <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>
-            </SwipeableCard>
-
-            <SwipeableCard
-              rightActions={[
-                { 
-                  id: 'performance', 
-                  label: 'See Performance', 
-                  onAction: () => console.log('Performance demo'),
-                  color: 'purple'
-                }
-              ]}
-              threshold={60}
-              hapticFeedback={true}
-              showActionLabels={true}
-            >
-              <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 components with offline support and lazy loading
-                </p>
-              </Card>
-            </SwipeableCard>
-
-            <SwipeableCard
-              rightActions={[
-                { 
-                  id: 'checkout', 
-                  label: 'View Checkout', 
-                  onAction: () => window.location.href = '/checkout',
-                  color: 'orange'
-                }
-              ]}
-              threshold={60}
-              hapticFeedback={true}
-              showActionLabels={true}
-            >
-              <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">
-                  <CreditCard className="h-6 w-6 text-orange-600 dark:text-orange-400" />
-                </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 payment processing with @digilogiclabs/saas-factory-payments v1.0.0
-                </p>
-              </Card>
-            </SwipeableCard>
-          </ResponsiveGrid>
-        </NetworkAwareContent>
-
-        {/* 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 v1.0.0
-            </p>
-          </div>
-        </Card>
-            </MobileContainer>
-            </div>
-          </main>
-        </PullToRefresh>
-      </OfflineWrapper>
-    </PageTransition>
-  )
-}
+'use client'
+
+import { 
+  Button, 
+  Card,
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  PullToRefresh,
+  LazyImage,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Wifi, WifiOff, CreditCard, Smartphone } 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 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: "🚀 Complete SaaS Solution",
+      variant: "secondary" as const,
+      icon: <CheckCircle className="w-4 h-4" />
+    },
+    title: {
+      text: `Welcome to ${projectName}`,
+      highlight: projectName,
+      size: "xl" as const
+    },
+    description: `${projectDescription}. Everything you need to launch your SaaS business with secure authentication, seamless payments, and beautiful mobile-first design.`
+  }
+
+  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 SaaS platform */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-secondary/10 dark:from-primary/20 dark:via-background dark:to-secondary/20" />
+            <div className="absolute inset-0 bg-gradient-to-tr from-accent/5 via-transparent to-primary/5 dark:from-accent/10 dark:via-transparent dark:to-primary/10" />
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-secondary/15 via-transparent to-transparent dark:from-secondary/25 dark:via-transparent dark:to-transparent" />
+            {/* Animated business-themed particles */}
+            <div className="absolute inset-0 opacity-25 dark:opacity-15">
+              <div className="absolute top-1/5 right-1/5 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 bottom-1/3 left-1/4 w-80 h-80 bg-secondary/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/70"></div>
+              <div className="absolute top-2/3 right-1/3 w-56 h-56 bg-accent/50 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/70"></div>
+            </div>
+            {/* Subtle depth overlay */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/2 to-background/5" />
+            <div className="relative z-10">
+            <MobileContainer className="py-16">
+        {/* Network & Auth Status Bar */}
+        <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 Mode</span>
+              </div>
+            )}
+          </div>
+
+          {loading ? (
+            <div className="text-sm text-gray-600">Loading auth...</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 */}
+        <MobileHero
+          badge={heroConfig.badge}
+          title={heroConfig.title}
+          description={heroConfig.description}
+          actions={[
+            {
+              label: "View Pricing",
+              href: "/checkout",
+              icon: <CreditCard className="w-4 h-4" />,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More",
+              variant: "outline",
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-16"
+        />
+
+        {/* Component Showcase */}
+        <NetworkAwareContent
+          showOnSlow={
+            <ResponsiveGrid columns={gridConfig.columns_1_2} gap={6} className="mb-16">
+              <SwipeableCard
+                rightActions={[
+                  { 
+                    id: 'explore', 
+                    label: 'Explore', 
+                    onAction: () => console.log('Exploring mobile features'),
+                    color: 'blue'
+                  }
+                ]}
+                threshold={60}
+                hapticFeedback={true}
+                showActionLabels={true}
+              >
+                <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">
+                    <Smartphone className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">Mobile-First UI</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Touch-optimized components from @digilogiclabs/saas-factory-ui v0.13.3
+                  </p>
+                </Card>
+              </SwipeableCard>
+              
+              <SwipeableCard
+                rightActions={[
+                  { 
+                    id: 'payments', 
+                    label: 'Try Payments', 
+                    onAction: () => window.location.href = '/checkout',
+                    color: 'green'
+                  }
+                ]}
+                threshold={60}
+                hapticFeedback={true}
+                showActionLabels={true}
+              >
+                <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">
+                    <CreditCard className="h-6 w-6 text-orange-600 dark:text-orange-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">Touch Payments</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Mobile-optimized payment flows with swipe gestures
+                  </p>
+                </Card>
+              </SwipeableCard>
+            </ResponsiveGrid>
+          }
+        >
+          <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap={6} className="mb-16">
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'demo-ui', 
+                  label: 'Try Demo', 
+                  onAction: () => console.log('Demo UI components'),
+                  color: 'blue'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <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 UI Components</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Touch-optimized buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.3
+                </p>
+              </Card>
+            </SwipeableCard>
+
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'auth-demo', 
+                  label: 'Auth Demo', 
+                  onAction: () => window.location.href = '/login',
+                  color: 'green'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <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>
+            </SwipeableCard>
+
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'performance', 
+                  label: 'See Performance', 
+                  onAction: () => console.log('Performance demo'),
+                  color: 'purple'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <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 components with offline support and lazy loading
+                </p>
+              </Card>
+            </SwipeableCard>
+
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'checkout', 
+                  label: 'View Checkout', 
+                  onAction: () => window.location.href = '/checkout',
+                  color: 'orange'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <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">
+                  <CreditCard className="h-6 w-6 text-orange-600 dark:text-orange-400" />
+                </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 payment processing with @digilogiclabs/saas-factory-payments v1.0.0
+                </p>
+              </Card>
+            </SwipeableCard>
+          </ResponsiveGrid>
+        </NetworkAwareContent>
+
+        {/* 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 v1.0.0
+            </p>
+          </div>
+        </Card>
+            </MobileContainer>
+            </div>
+          </main>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
+  )
+}