create-ecom-app 1.0.0

package/templates/ecommerce/components/Footer.tsx

@@ -0,0 +1,100 @@
+import Link from 'next/link';
+import { Zap, Instagram, Twitter, Youtube, Github } from 'lucide-react';
+
+const SOCIAL = [
+  { icon: Instagram, href: '#', label: 'Instagram' },
+  { icon: Twitter, href: '#', label: 'Twitter' },
+  { icon: Youtube, href: '#', label: 'YouTube' },
+];
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-gray-300 mt-20">
+      <div className="container-main py-14">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10">
+          {/* Brand */}
+          <div className="col-span-1 sm:col-span-2 md:col-span-1">
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
+                <Zap className="w-4 h-4 text-gray-900" />
+              </div>
+              <span className="text-xl font-black text-white tracking-tight">GenZ Shop</span>
+            </div>
+            <p className="text-sm text-gray-400 leading-relaxed mb-5">
+              Shop Different. Shop Smarter. Curated fashion and lifestyle for the next generation.
+            </p>
+            <div className="flex gap-3">
+              {SOCIAL.map(({ icon: Icon, href, label }) => (
+                <a
+                  key={label}
+                  href={href}
+                  aria-label={label}
+                  className="w-9 h-9 bg-gray-800 rounded-xl flex items-center justify-center text-gray-400 hover:bg-gray-700 hover:text-white transition-all"
+                >
+                  <Icon className="w-4 h-4" />
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Shop */}
+          <div>
+            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Shop</h4>
+            <ul className="space-y-2.5">
+              {[
+                { label: 'All Products', href: '/products' },
+                { label: 'New Arrivals', href: '/products' },
+                { label: 'Best Sellers', href: '/products' },
+                { label: 'Sale', href: '/products' },
+              ].map(({ label, href }) => (
+                <li key={label}>
+                  <Link href={href} className="text-sm text-gray-400 hover:text-white transition-colors">{label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Account */}
+          <div>
+            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Account</h4>
+            <ul className="space-y-2.5">
+              {[
+                { label: 'Login', href: '/login' },
+                { label: 'Register', href: '/register' },
+                { label: 'My Profile', href: '/profile' },
+                { label: 'My Orders', href: '/profile?tab=orders' },
+                { label: 'Wishlist', href: '/wishlist' },
+              ].map(({ label, href }) => (
+                <li key={label}>
+                  <Link href={href} className="text-sm text-gray-400 hover:text-white transition-colors">{label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div>
+            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Company</h4>
+            <ul className="space-y-2.5">
+              {[
+                { label: 'About Us', href: '/about' },
+                { label: 'Contact', href: '/contact' },
+                { label: 'Privacy Policy', href: '#' },
+                { label: 'Terms of Service', href: '#' },
+              ].map(({ label, href }) => (
+                <li key={label}>
+                  <Link href={href} className="text-sm text-gray-400 hover:text-white transition-colors">{label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-800 mt-12 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-sm text-gray-500">© 2024 GenZ Shop. All rights reserved.</p>
+          <p className="text-sm text-gray-600">Built with Next.js + Tailwind CSS</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/ecommerce/components/Header.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ShoppingCart, Heart, User, Menu, X, LogOut, ChevronDown, Zap } from 'lucide-react';
+import { useCartStore } from '@/store/useCartStore';
+import { useWishlistStore } from '@/store/useWishlistStore';
+import { useAuthStore } from '@/store/useAuthStore';
+import { useRouter, usePathname } from 'next/navigation';
+
+const NAV_LINKS = [
+  { href: '/', label: 'Home' },
+  { href: '/products', label: 'Products' },
+  { href: '/about', label: 'About' },
+  { href: '/contact', label: 'Contact' },
+];
+
+export default function Header() {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const cartCount = useCartStore((s) => s.itemCount)();
+  const wishlistCount = useWishlistStore((s) => s.itemCount)();
+  const { user, isAuthenticated, logout } = useAuthStore();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleLogout = () => {
+    logout();
+    setUserMenuOpen(false);
+    router.push('/');
+  };
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 shadow-sm">
+        <div className="container-main">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo */}
+            <Link href="/" className="flex items-center gap-2 group">
+              <div className="w-8 h-8 bg-gray-900 rounded-lg flex items-center justify-center group-hover:bg-gray-700 transition-colors">
+                <Zap className="w-4 h-4 text-white" />
+              </div>
+              <span className="text-xl font-black text-gray-900 tracking-tight">GenZ Shop</span>
+            </Link>
+
+            {/* Desktop Nav */}
+            <nav className="hidden md:flex items-center gap-1">
+              {NAV_LINKS.map(({ href, label }) => {
+                const isActive = pathname === href || (href !== '/' && pathname.startsWith(href));
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    className="relative px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
+                  >
+                    {label}
+                    {isActive && (
+                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-900 rounded-full" />
+                    )}
+                  </Link>
+                );
+              })}
+            </nav>
+
+            {/* Right Icons */}
+            <div className="flex items-center gap-1">
+              <Link href="/wishlist" className="relative p-2.5 text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-xl transition-all" aria-label="Wishlist">
+                <Heart className="w-5 h-5" />
+                <AnimatePresence>
+                  {wishlistCount > 0 && (
+                    <motion.span key="wb" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="absolute -top-0.5 -right-0.5 badge">
+                      {wishlistCount}
+                    </motion.span>
+                  )}
+                </AnimatePresence>
+              </Link>
+
+              <Link href="/cart" className="relative p-2.5 text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-xl transition-all" aria-label="Cart">
+                <ShoppingCart className="w-5 h-5" />
+                <AnimatePresence>
+                  {cartCount > 0 && (
+                    <motion.span key="cb" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="absolute -top-0.5 -right-0.5 badge">
+                      {cartCount}
+                    </motion.span>
+                  )}
+                </AnimatePresence>
+              </Link>
+
+              {isAuthenticated && user ? (
+                <div className="relative">
+                  <button onClick={() => setUserMenuOpen(!userMenuOpen)} className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl transition-all">
+                    <div className="w-7 h-7 bg-gray-900 rounded-full flex items-center justify-center">
+                      <span className="text-white text-xs font-bold">{user.name.charAt(0).toUpperCase()}</span>
+                    </div>
+                    <span className="hidden sm:block text-sm font-medium">{user.name.split(' ')[0]}</span>
+                    <ChevronDown className={`w-3.5 h-3.5 transition-transform ${userMenuOpen ? 'rotate-180' : ''}`} />
+                  </button>
+                  <AnimatePresence>
+                    {userMenuOpen && (
+                      <motion.div
+                        initial={{ opacity: 0, y: -8, scale: 0.95 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -8, scale: 0.95 }}
+                        transition={{ duration: 0.15 }}
+                        className="absolute right-0 mt-1 w-48 bg-white border border-gray-100 rounded-2xl shadow-xl overflow-hidden z-50"
+                      >
+                        <div className="px-4 py-3 border-b border-gray-100">
+                          <p className="text-sm font-semibold text-gray-900">{user.name}</p>
+                          <p className="text-xs text-gray-400 truncate">{user.email}</p>
+                        </div>
+                        <Link href="/profile" onClick={() => setUserMenuOpen(false)} className="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
+                          <User className="w-4 h-4" /> My Profile
+                        </Link>
+                        <button onClick={handleLogout} className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-colors">
+                          <LogOut className="w-4 h-4" /> Logout
+                        </button>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              ) : (
+                <Link href="/login" className="hidden sm:block btn-primary text-sm py-2">Login</Link>
+              )}
+
+              <button className="md:hidden p-2.5 text-gray-500 hover:bg-gray-50 rounded-xl" onClick={() => setDrawerOpen(true)} aria-label="Open menu">
+                <Menu className="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Mobile Drawer */}
+      <AnimatePresence>
+        {drawerOpen && (
+          <>
+            <motion.div key="overlay" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/40 z-50 md:hidden" onClick={() => setDrawerOpen(false)} />
+            <motion.div
+              key="drawer"
+              initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }}
+              transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+              className="fixed right-0 top-0 h-full w-72 bg-white z-50 shadow-2xl flex flex-col md:hidden"
+            >
+              <div className="flex items-center justify-between p-5 border-b border-gray-100">
+                <div className="flex items-center gap-2">
+                  <div className="w-7 h-7 bg-gray-900 rounded-lg flex items-center justify-center">
+                    <Zap className="w-3.5 h-3.5 text-white" />
+                  </div>
+                  <span className="font-black text-gray-900">GenZ Shop</span>
+                </div>
+                <button onClick={() => setDrawerOpen(false)} className="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-100 rounded-lg">
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              <nav className="flex flex-col p-5 gap-1 flex-1">
+                {NAV_LINKS.map(({ href, label }, i) => (
+                  <motion.div key={href} initial={{ x: 20, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: i * 0.05 }}>
+                    <Link href={href} onClick={() => setDrawerOpen(false)} className={`block px-4 py-3 rounded-xl text-sm font-medium transition-colors ${pathname === href ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-50'}`}>
+                      {label}
+                    </Link>
+                  </motion.div>
+                ))}
+              </nav>
+              <div className="p-5 border-t border-gray-100">
+                {isAuthenticated && user ? (
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-3 px-4 py-3 bg-gray-50 rounded-xl">
+                      <div className="w-9 h-9 bg-gray-900 rounded-full flex items-center justify-center">
+                        <span className="text-white text-sm font-bold">{user.name.charAt(0).toUpperCase()}</span>
+                      </div>
+                      <div>
+                        <p className="text-sm font-semibold text-gray-900">{user.name}</p>
+                        <p className="text-xs text-gray-400">{user.email}</p>
+                      </div>
+                    </div>
+                    <Link href="/profile" onClick={() => setDrawerOpen(false)} className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+                      <User className="w-4 h-4" /> My Profile
+                    </Link>
+                    <button onClick={handleLogout} className="w-full flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm text-red-500 hover:bg-red-50 transition-colors">
+                      <LogOut className="w-4 h-4" /> Logout
+                    </button>
+                  </div>
+                ) : (
+                  <Link href="/login" onClick={() => setDrawerOpen(false)} className="btn-primary w-full text-center block">Login</Link>
+                )}
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/templates/ecommerce/components/ProductCard.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { ShoppingCart, Heart, Star } from 'lucide-react';
+import { useCartStore } from '@/store/useCartStore';
+import { useWishlistStore } from '@/store/useWishlistStore';
+import type { Product } from '@/types';
+import { formatPrice, getDiscount } from '@/lib/utils';
+import { useState } from 'react';
+
+interface ProductCardProps {
+  product: Product;
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+  const addItem = useCartStore((s) => s.addItem);
+  const { toggle, isWishlisted } = useWishlistStore();
+  const wishlisted = isWishlisted(product.id);
+  const [added, setAdded] = useState(false);
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!product.inStock) return;
+    addItem(product);
+    setAdded(true);
+    setTimeout(() => setAdded(false), 1500);
+  };
+
+  const handleWishlist = (e: React.MouseEvent) => {
+    e.preventDefault();
+    toggle(product);
+  };
+
+  const discount = product.originalPrice
+    ? getDiscount(product.originalPrice, product.price)
+    : null;
+
+  return (
+    <motion.div
+      whileHover={{ y: -4 }}
+      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+    >
+      <Link href={`/product/${product.id}`} className="group block">
+        <div className="card overflow-hidden">
+          {/* Image Container */}
+          <div className="relative aspect-square overflow-hidden bg-gray-100">
+            <Image
+              src={product.image}
+              alt={product.name}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-500"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+            />
+
+            {/* Hover overlay with quick-add */}
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 flex items-end justify-center pb-4">
+              <motion.button
+                onClick={handleAddToCart}
+                disabled={!product.inStock}
+                initial={{ opacity: 0, y: 10 }}
+                whileHover={{ scale: 1.02 }}
+                className={`opacity-0 group-hover:opacity-100 transition-all duration-300 px-5 py-2 rounded-full text-sm font-semibold shadow-lg flex items-center gap-2
+                  ${added
+                    ? 'bg-green-500 text-white'
+                    : product.inStock
+                      ? 'bg-white text-gray-900 hover:bg-gray-100'
+                      : 'bg-gray-200 text-gray-500 cursor-not-allowed'
+                  }`}
+              >
+                <ShoppingCart className="w-4 h-4" />
+                {added ? 'Added!' : 'Quick Add'}
+              </motion.button>
+            </div>
+
+            {/* Discount badge */}
+            {discount && (
+              <div className="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
+                -{discount}%
+              </div>
+            )}
+
+            {/* Out of stock */}
+            {!product.inStock && (
+              <div className="absolute inset-0 bg-white/60 flex items-center justify-center">
+                <span className="bg-gray-800 text-white text-xs font-semibold px-3 py-1.5 rounded-full">
+                  Out of Stock
+                </span>
+              </div>
+            )}
+
+            {/* Wishlist button */}
+            <motion.button
+              onClick={handleWishlist}
+              whileHover={{ scale: 1.15 }}
+              whileTap={{ scale: 0.9 }}
+              className="absolute top-3 right-3 w-9 h-9 bg-white rounded-full shadow-md flex items-center justify-center"
+              aria-label={wishlisted ? 'Remove from wishlist' : 'Add to wishlist'}
+            >
+              <Heart
+                className={`w-4 h-4 transition-colors ${wishlisted ? 'text-red-500 fill-red-500' : 'text-gray-400'}`}
+              />
+            </motion.button>
+          </div>
+
+          {/* Content */}
+          <div className="p-4">
+            <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">{product.category}</p>
+            <h3 className="font-semibold text-gray-900 text-sm mb-2 line-clamp-2 group-hover:text-gray-700 transition-colors">
+              {product.name}
+            </h3>
+
+            {/* Rating */}
+            <div className="flex items-center gap-1 mb-3">
+              <div className="flex">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <Star
+                    key={star}
+                    className={`w-3 h-3 ${star <= Math.floor(product.rating) ? 'text-amber-400 fill-amber-400' : 'text-gray-200 fill-gray-200'}`}
+                  />
+                ))}
+              </div>
+              <span className="text-xs text-gray-400">({product.reviewCount})</span>
+            </div>
+
+            {/* Price + Cart Button */}
+            <div className="flex items-center justify-between gap-2">
+              <div>
+                <span className="font-bold text-gray-900">{formatPrice(product.price)}</span>
+                {product.originalPrice && (
+                  <span className="text-xs text-gray-400 line-through ml-1.5">
+                    {formatPrice(product.originalPrice)}
+                  </span>
+                )}
+              </div>
+              <motion.button
+                onClick={handleAddToCart}
+                disabled={!product.inStock}
+                whileTap={{ scale: 0.92 }}
+                className={`flex-shrink-0 p-2 rounded-lg transition-colors duration-200
+                  ${added
+                    ? 'bg-green-500 text-white'
+                    : product.inStock
+                      ? 'bg-gray-900 text-white hover:bg-gray-700'
+                      : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                  }`}
+                aria-label="Add to cart"
+              >
+                <ShoppingCart className="w-4 h-4" />
+              </motion.button>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}

package/templates/ecommerce/components/SearchBar.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export default function SearchBar({
+  value,
+  onChange,
+  placeholder = 'Search products...',
+}: SearchBarProps) {
+  return (
+    <div className="relative">
+      <div className="absolute inset-y-0 left-3.5 flex items-center pointer-events-none">
+        <Search className="w-4 h-4 text-gray-400" />
+      </div>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="input pl-10 pr-10"
+        id="product-search"
+        aria-label="Search products"
+      />
+      {value && (
+        <button
+          onClick={() => onChange('')}
+          className="absolute inset-y-0 right-3 flex items-center text-gray-400 hover:text-gray-700 transition-colors"
+          aria-label="Clear search"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+}