@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

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

@@ -1,109 +1,9 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/app-sdk';
-import { useRouter } from 'next/navigation';
-
-export default function LoginPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const { signIn, signInWithOAuth, loading, error, user } = useAuth();
-  const router = useRouter();
-
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/');
-    }
-  }, [user, router]);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      await signIn(email, password);
-      router.push('/');
-    } catch (err) {
-      console.error('Login error:', err);
-    }
-  };
-
-  const handleGoogleLogin = async () => {
-    try {
-      await signInWithOAuth('google');
-    } catch (err) {
-      console.error('Google login error:', err);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <div>Loading...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <Card className="w-full max-w-md p-8">
-        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
-        
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        <form onSubmit={handleLogin} className="space-y-4">
-          <div>
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
-              required
-              disabled={loading}
-            />
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter your password"
-              required
-              disabled={loading}
-            />
-          </div>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing In...' : 'Sign In'}
-          </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleLogin}
-            disabled={loading}
-          >
-            Sign in with Google
-          </Button>
-        </form>
-
-        <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600">
-            Don&apos;t have an account?{' '}
-            <a href="/signup" className="text-blue-600 hover:underline">
-              Sign up
-            </a>
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
-}
-
+import { LoginForm } from '@/components/client/login-form'
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <LoginForm />
+    </div>
+  )
+}

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

@@ -1,392 +1,132 @@
-'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/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: "🎥 Professional Video Platform",
-      variant: "secondary" as const,
-      icon: <CheckCircle className="w-4 h-4" />
-    },
-    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>
-        <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={6} 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>
-            </div>
-          </main>
-        </PullToRefresh>
-      </OfflineWrapper>
-    </PageTransition>
-  )
-}
+import { ArrowRight, Shield, CreditCard, CheckCircle, Video, Play, Film, Upload, MonitorPlay, Tv } from 'lucide-react'
+
+import Link from 'next/link'
+
+const FEATURES = [
+  {
+    icon: Video,
+    title: 'Video Streaming',
+    description: 'Adaptive bitrate streaming with HLS. Built-in video player with full controls.',
+    color: 'text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30',
+  },
+  {
+    icon: Upload,
+    title: 'Upload & Transcode',
+    description: 'Video upload with automatic transcoding, thumbnail generation, and metadata.',
+    color: 'text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-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-view, and creator monetization.',
+    color: 'text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30',
+  },
+  {
+    icon: MonitorPlay,
+    title: 'Course Platform',
+    description: 'Chapter-based content, progress tracking, and completion certificates.',
+    color: 'text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30',
+  },
+  {
+    icon: Tv,
+    title: 'Live Streaming',
+    description: 'WebRTC-ready architecture for live video broadcasts and interactive rooms.',
+    color: 'text-pink-600 dark:text-pink-400 bg-pink-100 dark:bg-pink-900/30',
+  },
+]
+
+export default function Home() {
+  return (
+    <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">
+          <Film className="mr-1.5 h-3.5 w-3.5" />
+          Video SaaS Starter
+        </div>
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl mb-4">
+          Build your video{' '}
+          <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 video streaming, course platforms, and video SaaS.
+          Auth, payments, transcoding, 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>
+
+      {/* Video 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="aspect-video bg-foreground/5 relative flex items-center justify-center">
+            <button className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/90 text-primary-foreground shadow-lg hover:bg-primary transition-colors">
+              <Play className="h-7 w-7 ml-1" />
+            </button>
+            <div className="absolute bottom-4 left-4 right-4">
+              <div className="h-1 rounded-full bg-muted overflow-hidden">
+                <div className="h-full w-1/3 rounded-full bg-primary" />
+              </div>
+              <div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
+                <span>2:15</span>
+                <span>6:30</span>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 border-t border-border">
+            <h3 className="font-semibold text-card-foreground">Getting Started with Your Video Platform</h3>
+            <p className="text-sm text-muted-foreground mt-1">Learn how to set up and customize your video app</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 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 Video</h2>
+          <p className="text-muted-foreground">Build any video platform — courses, streaming, VOD, or live broadcasts.</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>
+          ))}
+        </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 video platform?</h2>
+          <p className="text-muted-foreground mb-6 max-w-lg mx-auto">
+            Everything you need to launch — auth, payments, and video 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>
+  )
+}