@digilogiclabs/create-saas-app 2.9.0 → 2.10.0

package/src/templates/web/marketplace/template/src/app/page.tsx

@@ -1,169 +1,370 @@
-'use client'
-
-import { Button, Card, GradientBorderCard } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { ShoppingCart, Store, Search, Star, ArrowRight, User, LogOut } from 'lucide-react'
-import Link from 'next/link'
-import { useState } from 'react'
-
-const FEATURED_PRODUCTS = [
-  { id: 1, name: 'Premium Widget', price: 49.99, vendor: 'TechCo', rating: 4.8, image: '/placeholder.jpg' },
-  { id: 2, name: 'Pro Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, image: '/placeholder.jpg' },
-  { id: 3, name: 'Designer Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, image: '/placeholder.jpg' },
-  { id: 4, name: 'Analytics Suite', price: 199.99, vendor: 'DataCorp', rating: 4.6, image: '/placeholder.jpg' },
-]
-
-const CATEGORIES = [
-  { name: 'Software', count: 234, icon: '💻' },
-  { name: 'Templates', count: 156, icon: '📄' },
-  { name: 'Services', count: 89, icon: '🔧' },
-  { name: 'Courses', count: 67, icon: '📚' },
-]
-
-export default function Home() {
-  const { user, signOut, loading } = useAuth()
-  const [searchQuery, setSearchQuery] = useState('')
-
-  const projectName = "{{titleCaseName}}"
-
-  const handleSignOut = async () => {
-    try {
-      await signOut()
-    } catch (err) {
-      console.error('Sign out error:', err)
-    }
-  }
-
-  return (
-    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Header */}
-      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-              {projectName}
-            </Link>
-
-            {/* Search */}
-            <div className="flex-1 max-w-xl mx-8">
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-                <input
-                  type="text"
-                  placeholder="Search products..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-                />
-              </div>
-            </div>
-
-            {/* Actions */}
-            <div className="flex items-center gap-4">
-              <Link href="/cart">
-                <Button variant="outline" size="sm">
-                  <ShoppingCart className="w-4 h-4 mr-2" />
-                  Cart
-                </Button>
-              </Link>
-              {loading ? (
-                <div className="text-sm text-gray-600">Loading...</div>
-              ) : user ? (
-                <div className="flex items-center gap-2">
-                  <Link href="/dashboard">
-                    <Button variant="outline" size="sm">
-                      <User className="w-4 h-4 mr-2" />
-                      Dashboard
-                    </Button>
-                  </Link>
-                  <Button variant="ghost" size="sm" onClick={handleSignOut}>
-                    <LogOut className="w-4 h-4" />
-                  </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">Get Started</Button>
-                  </Link>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        {/* Hero */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-            Your Digital Marketplace
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Discover amazing products from verified vendors. Buy and sell with confidence.
-          </p>
-        </div>
-
-        {/* Categories */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
-          {CATEGORIES.map((category) => (
-            <Card key={category.name} className="p-6 text-center hover:shadow-lg transition-shadow cursor-pointer">
-              <div className="text-4xl mb-3">{category.icon}</div>
-              <h3 className="font-semibold text-gray-900 dark:text-white">{category.name}</h3>
-              <p className="text-sm text-gray-500">{category.count} items</p>
-            </Card>
-          ))}
-        </div>
-
-        {/* Featured Products */}
-        <div className="mb-12">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Featured Products</h2>
-            <Link href="/products">
-              <Button variant="ghost">
-                View All
-                <ArrowRight className="w-4 h-4 ml-2" />
-              </Button>
-            </Link>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {FEATURED_PRODUCTS.map((product) => (
-              <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
-                <div className="aspect-square bg-gray-100 dark:bg-gray-700" />
-                <div className="p-4">
-                  <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{product.name}</h3>
-                  <p className="text-sm text-gray-500 mb-2">by {product.vendor}</p>
-                  <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-blue-600">${product.price}</span>
-                    <div className="flex items-center text-yellow-500">
-                      <Star className="w-4 h-4 fill-current" />
-                      <span className="text-sm ml-1">{product.rating}</span>
-                    </div>
-                  </div>
-                  <Button className="w-full mt-3" size="sm">Add to Cart</Button>
-                </div>
-              </Card>
-            ))}
-          </div>
-        </div>
-
-        {/* Become a Vendor CTA */}
-        <GradientBorderCard gradientColors="from-blue-500 via-purple-500 to-blue-500" borderWidth={2}>
-          <div className="text-center">
-            <Store className="w-12 h-12 mx-auto mb-4 text-blue-600 dark:text-blue-400" />
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Become a Vendor</h2>
-            <p className="mb-6 text-gray-600 dark:text-gray-300 max-w-md mx-auto">
-              Start selling your products to thousands of customers. Low fees, powerful tools.
-            </p>
-            <Link href="/vendors/apply">
-              <Button size="lg">Apply Now</Button>
-            </Link>
-          </div>
-        </GradientBorderCard>
-      </div>
-    </main>
-  )
-}
+'use client'
+
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Search, Star, Store, ShoppingCart, Code, FileText, Wrench, GraduationCap, Sun, Moon, ShoppingBag } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+const CATEGORIES = [
+  {
+    name: 'Software',
+    description: 'Apps, plugins & tools',
+    count: 234,
+    icon: Code,
+    color: 'text-blue-500 group-hover:text-blue-400',
+    bg: 'bg-blue-500/10 group-hover:bg-blue-500/20',
+    border: 'group-hover:border-blue-500/30',
+  },
+  {
+    name: 'Templates',
+    description: 'Themes, kits & starters',
+    count: 156,
+    icon: FileText,
+    color: 'text-violet-500 group-hover:text-violet-400',
+    bg: 'bg-violet-500/10 group-hover:bg-violet-500/20',
+    border: 'group-hover:border-violet-500/30',
+  },
+  {
+    name: 'Services',
+    description: 'Freelance & consulting',
+    count: 89,
+    icon: Wrench,
+    color: 'text-amber-500 group-hover:text-amber-400',
+    bg: 'bg-amber-500/10 group-hover:bg-amber-500/20',
+    border: 'group-hover:border-amber-500/30',
+  },
+  {
+    name: 'Courses',
+    description: 'Learn new skills',
+    count: 67,
+    icon: GraduationCap,
+    color: 'text-emerald-500 group-hover:text-emerald-400',
+    bg: 'bg-emerald-500/10 group-hover:bg-emerald-500/20',
+    border: 'group-hover:border-emerald-500/30',
+  },
+]
+
+const FEATURED_PRODUCTS = [
+  {
+    id: 1,
+    name: 'Premium UI Kit',
+    price: 49.99,
+    vendor: 'DesignCraft',
+    rating: 4.8,
+    reviews: 124,
+    tag: 'Best Seller',
+  },
+  {
+    id: 2,
+    name: 'DevOps Toolkit Pro',
+    price: 129.99,
+    vendor: 'CloudForge',
+    rating: 4.9,
+    reviews: 87,
+    tag: 'New',
+  },
+  {
+    id: 3,
+    name: 'Icon Library Plus',
+    price: 29.99,
+    vendor: 'PixelWorks',
+    rating: 4.7,
+    reviews: 203,
+    tag: 'Popular',
+  },
+  {
+    id: 4,
+    name: 'Analytics Dashboard',
+    price: 199.99,
+    vendor: 'DataViz Co',
+    rating: 4.6,
+    reviews: 56,
+    tag: 'Featured',
+  },
+]
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return <div className="w-9 h-9" />
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="inline-flex items-center justify-center w-9 h-9 rounded-md border border-border bg-background hover:bg-accent hover:text-accent-foreground active:scale-95 transition-all duration-200 cursor-pointer"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+    </button>
+  )
+}
+
+function StarRating({ rating, reviews }: { rating: number; reviews: number }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="flex items-center">
+        {[...Array(5)].map((_, i) => (
+          <Star
+            key={i}
+            className={`w-3.5 h-3.5 ${
+              i < Math.floor(rating)
+                ? 'text-amber-500 fill-amber-500'
+                : i < rating
+                  ? 'text-amber-500 fill-amber-500/50'
+                  : 'text-muted-foreground/30'
+            }`}
+          />
+        ))}
+      </div>
+      <span className="text-xs text-muted-foreground">({reviews})</span>
+    </div>
+  )
+}
+
+export default function Home() {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  return (
+    <main id="main-content" className="min-h-screen bg-background text-foreground">
+      {/* Nav */}
+      <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-lg">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 active:scale-[0.97] transition-all duration-200 flex-shrink-0">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+              <Store className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-lg hidden sm:inline">{'{{titleCaseName}}'}</span>
+          </Link>
+
+          {/* Search */}
+          <div className="flex-1 max-w-md mx-2 sm:mx-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-9 pr-4 py-2 text-sm rounded-lg border border-border bg-muted/50 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50 transition-all duration-200"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <ThemeToggle />
+            <Link href="/login">
+              <Button variant="ghost" size="sm" className="hover:bg-accent active:scale-95 transition-all duration-200 cursor-pointer">Sign In</Button>
+            </Link>
+            <Link href="/signup">
+              <Button size="sm" className="bg-gradient-to-r from-brand-from to-brand-to text-white hover:brightness-110 active:scale-95 transition-all duration-200 cursor-pointer shadow-sm hover:shadow-md">Get Started</Button>
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent" />
+        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 pt-16 sm:pt-24 pb-16 text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-border bg-muted text-muted-foreground text-sm font-medium mb-8 hover:bg-accent hover:border-primary/20 transition-colors duration-200 cursor-default">
+            <ShoppingBag className="w-3.5 h-3.5 text-primary" />
+            Multi-Vendor Digital Marketplace
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
+            Discover, Buy &amp; Sell
+            <br />
+            <span className="text-primary">
+              Digital Products
+            </span>
+          </h1>
+          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed">
+            A curated marketplace connecting creators with customers.
+            Find premium software, templates, services, and courses from verified vendors.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/signup">
+              <Button size="lg" className="w-full sm:w-auto text-base px-8 h-12 hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-md hover:shadow-lg">
+                Start Shopping
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+            <Link href="/vendors/apply">
+              <Button variant="outline" size="lg" className="w-full sm:w-auto text-base px-8 h-12 hover:bg-accent hover:border-primary/30 active:scale-[0.97] transition-all duration-200 cursor-pointer">
+                Become a Vendor
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Categories */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+        <div className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">Browse by Category</h2>
+          <p className="text-muted-foreground text-lg max-w-xl mx-auto">
+            Explore thousands of digital products across popular categories.
+          </p>
+        </div>
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+          {CATEGORIES.map((category) => (
+            <Card key={category.name} className={`group cursor-default hover:shadow-xl hover:-translate-y-1 ${category.border} transition-all duration-300`}>
+              <CardContent className="p-6 sm:p-8 text-center">
+                <div className={`w-14 h-14 ${category.bg} rounded-xl flex items-center justify-center mx-auto mb-4 transition-colors duration-300`}>
+                  <category.icon className={`w-7 h-7 ${category.color} transition-colors duration-300`} />
+                </div>
+                <h3 className="text-lg font-semibold mb-1 group-hover:text-primary transition-colors duration-200">{category.name}</h3>
+                <p className="text-sm text-muted-foreground mb-2">{category.description}</p>
+                <span className="text-xs font-medium text-primary">{category.count} products</span>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Featured Products */}
+      <section className="bg-muted/50">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+          <div className="flex items-center justify-between mb-12">
+            <div>
+              <h2 className="text-3xl sm:text-4xl font-bold mb-2">Featured Products</h2>
+              <p className="text-muted-foreground text-lg">Hand-picked by our team, loved by our community.</p>
+            </div>
+            <Link href="/products" className="hidden sm:inline-flex">
+              <Button variant="ghost" className="hover:bg-accent active:scale-[0.97] transition-all duration-200 cursor-pointer">
+                View All
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {FEATURED_PRODUCTS.map((product) => (
+              <Card key={product.id} className="group cursor-default hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden">
+                <CardContent className="p-0">
+                  {/* Image placeholder */}
+                  <div className="relative aspect-[4/3] bg-gradient-to-br from-primary/10 via-muted to-accent overflow-hidden">
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="w-16 h-16 rounded-2xl bg-background/60 backdrop-blur-sm flex items-center justify-center border border-border/50 group-hover:scale-110 transition-transform duration-300">
+                        <ShoppingBag className="w-8 h-8 text-primary/40" />
+                      </div>
+                    </div>
+                    <div className="absolute top-3 left-3">
+                      <span className="px-2.5 py-1 rounded-full bg-primary text-primary-foreground text-xs font-semibold shadow-sm">
+                        {product.tag}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="p-5">
+                    <div className="flex items-start justify-between gap-2 mb-2">
+                      <div>
+                        <h3 className="font-semibold group-hover:text-primary transition-colors duration-200">
+                          {product.name}
+                        </h3>
+                        <p className="text-sm text-muted-foreground">by {product.vendor}</p>
+                      </div>
+                    </div>
+
+                    <StarRating rating={product.rating} reviews={product.reviews} />
+
+                    <div className="flex items-center justify-between mt-4 pt-4 border-t border-border">
+                      <span className="text-xl font-bold text-primary">${product.price}</span>
+                      <Button size="sm" className="bg-gradient-to-r from-brand-from to-brand-to text-white hover:brightness-110 active:scale-95 transition-all duration-200 cursor-pointer shadow-sm hover:shadow-md">
+                        <ShoppingCart className="w-3.5 h-3.5 mr-1.5" />
+                        Add to Cart
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          <div className="mt-8 text-center sm:hidden">
+            <Link href="/products">
+              <Button variant="outline" className="hover:bg-accent active:scale-[0.97] transition-all duration-200 cursor-pointer">
+                View All Products
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Vendor CTA */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24">
+        <div className="overflow-hidden rounded-2xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to text-white p-8 sm:p-12 hover:shadow-2xl hover:shadow-primary/20 transition-shadow duration-500">
+          <div className="grid lg:grid-cols-2 gap-8 items-center">
+            <div>
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">Start Selling Today</h2>
+              <p className="text-white/80 text-lg mb-6 leading-relaxed">
+                Join thousands of vendors earning revenue on our platform.
+                Low fees, powerful analytics, and a growing customer base ready to discover your products.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-3">
+                <Link href="/vendors/apply">
+                  <Button variant="secondary" size="lg" className="w-full sm:w-auto px-8 h-12 text-base font-semibold hover:brightness-110 active:scale-[0.97] transition-all duration-200 cursor-pointer shadow-lg hover:shadow-xl">
+                    Apply as Vendor
+                    <ArrowRight className="w-4 h-4 ml-2" />
+                  </Button>
+                </Link>
+                <Link href="/vendors/learn-more">
+                  <Button variant="ghost" size="lg" className="w-full sm:w-auto px-8 h-12 text-base text-white hover:bg-white/10 active:scale-[0.97] transition-all duration-200 cursor-pointer">
+                    Learn More
+                  </Button>
+                </Link>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              {[
+                { label: 'Active Vendors', value: '2,400+' },
+                { label: 'Products Listed', value: '12,000+' },
+                { label: 'Happy Customers', value: '85,000+' },
+                { label: 'Avg. Vendor Revenue', value: '$3.2k/mo' },
+              ].map((stat) => (
+                <div key={stat.label} className="rounded-xl bg-white/10 backdrop-blur-sm p-4 text-center hover:bg-white/15 transition-colors duration-200">
+                  <div className="text-2xl sm:text-3xl font-bold mb-1">{stat.value}</div>
+                  <div className="text-sm text-white/70">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
+            <Link href="/" className="flex items-center gap-2 hover:opacity-80 active:scale-[0.97] transition-all duration-200">
+              <div className="w-6 h-6 rounded bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+                <Store className="w-3 h-3 text-white" />
+              </div>
+              <span className="text-sm font-medium">{'{{titleCaseName}}'}</span>
+            </Link>
+            <nav className="flex items-center gap-6">
+              <Link href="/products" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Products
+              </Link>
+              <Link href="/vendors" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Vendors
+              </Link>
+              <Link href="/contact" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Contact
+              </Link>
+              <Link href="/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Sign In
+              </Link>
+            </nav>
+          </div>
+          <div className="mt-6 pt-6 border-t border-border text-center">
+            <p className="text-xs text-muted-foreground">
+              Built with DLL Platform. Ship fast, own everything.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </main>
+  )
+}