@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/ecommerce/angular/src/main.ts

@@ -0,0 +1,10 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes),
+  ],
+}).catch((err: unknown) => console.error(err));

package/templates/overlays/ecommerce/nextjs/src/app/cart/page.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { useCart } from '../components/CartProvider';
+
+export default function CartPage() {
+  const { items, removeFromCart, updateQuantity, clearCart, totalPrice } = useCart();
+
+  if (items.length === 0) {
+    return (
+      <div className="cart-empty">
+        <div className="cart-empty-icon">🛒</div>
+        <h2>Your cart is empty</h2>
+        <p>Looks like you have not added any items to your cart yet.</p>
+        <Link href="/" className="btn btn-primary">Continue Shopping</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="cart-page">
+      <div className="cart-header">
+        <h1>Shopping Cart</h1>
+        <button className="btn btn-outline" onClick={clearCart}>Clear Cart</button>
+      </div>
+
+      <div className="cart-layout">
+        <div className="cart-items">
+          {items.map((item) => (
+            <div key={item.id} className="cart-item">
+              <div className="cart-item-image">{item.image}</div>
+              <div className="cart-item-info">
+                <h3>{item.name}</h3>
+                <p className="cart-item-category">{item.category}</p>
+                <p className="cart-item-price">${item.price.toFixed(2)}</p>
+              </div>
+              <div className="cart-item-actions">
+                <div className="quantity-control">
+                  <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>−</button>
+                  <span>{item.quantity}</span>
+                  <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
+                </div>
+                <p className="cart-item-total">${(item.price * item.quantity).toFixed(2)}</p>
+                <button className="btn-remove" onClick={() => removeFromCart(item.id)}>🗑️</button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="cart-summary">
+          <h2>Order Summary</h2>
+          <div className="summary-row">
+            <span>Subtotal</span>
+            <span>${totalPrice.toFixed(2)}</span>
+          </div>
+          <div className="summary-row">
+            <span>Shipping</span>
+            <span>{totalPrice > 50 ? 'Free' : '$9.99'}</span>
+          </div>
+          <div className="summary-row">
+            <span>Tax</span>
+            <span>${(totalPrice * 0.08).toFixed(2)}</span>
+          </div>
+          <div className="summary-row total">
+            <span>Total</span>
+            <span>${(totalPrice + (totalPrice > 50 ? 0 : 9.99) + totalPrice * 0.08).toFixed(2)}</span>
+          </div>
+          <button className="btn btn-primary btn-lg btn-full">Proceed to Checkout</button>
+          <Link href="/" className="continue-link">← Continue Shopping</Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/overlays/ecommerce/nextjs/src/app/components/CartProvider.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  rating: number;
+  description: string;
+}
+
+export interface CartItem extends Product {
+  quantity: number;
+}
+
+interface CartContextType {
+  items: CartItem[];
+  addToCart: (product: Product) => void;
+  removeFromCart: (id: number) => void;
+  updateQuantity: (id: number, quantity: number) => void;
+  clearCart: () => void;
+  totalItems: number;
+  totalPrice: number;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<CartItem[]>([]);
+
+  const addToCart = (product: Product) => {
+    setItems((prev) => {
+      const existing = prev.find((item) => item.id === product.id);
+      if (existing) {
+        return prev.map((item) =>
+          item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
+        );
+      }
+      return [...prev, { ...product, quantity: 1 }];
+    });
+  };
+
+  const removeFromCart = (id: number) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const updateQuantity = (id: number, quantity: number) => {
+    if (quantity <= 0) {
+      removeFromCart(id);
+      return;
+    }
+    setItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, quantity } : item))
+    );
+  };
+
+  const clearCart = () => setItems([]);
+
+  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
+  const totalPrice = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  return (
+    <CartContext.Provider
+      value={{ items, addToCart, removeFromCart, updateQuantity, clearCart, totalItems, totalPrice }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+}

package/templates/overlays/ecommerce/nextjs/src/app/components/Footer.tsx

@@ -0,0 +1,44 @@
+export function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-container">
+        <div className="footer-grid">
+          <div className="footer-section">
+            <h3>🛍️ {'{{projectName}}'}</h3>
+            <p>Your one-stop shop for quality products at great prices.</p>
+          </div>
+          <div className="footer-section">
+            <h4>Shop</h4>
+            <ul>
+              <li>New Arrivals</li>
+              <li>Best Sellers</li>
+              <li>Sale Items</li>
+              <li>Gift Cards</li>
+            </ul>
+          </div>
+          <div className="footer-section">
+            <h4>Support</h4>
+            <ul>
+              <li>Help Center</li>
+              <li>Shipping Info</li>
+              <li>Returns</li>
+              <li>Contact Us</li>
+            </ul>
+          </div>
+          <div className="footer-section">
+            <h4>Follow Us</h4>
+            <div className="social-links">
+              <span>📘</span>
+              <span>🐦</span>
+              <span>📷</span>
+              <span>📌</span>
+            </div>
+          </div>
+        </div>
+        <div className="footer-bottom">
+          <p>&copy; 2025 {'{{projectName}}'}. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/overlays/ecommerce/nextjs/src/app/components/Header.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Link from 'next/link';
+import { useCart } from './CartProvider';
+
+export function Header() {
+  const { totalItems } = useCart();
+
+  return (
+    <header className="header">
+      <div className="header-container">
+        <Link href="/" className="logo">
+          <span className="logo-icon">🛍️</span>
+          <span>{'{{projectName}}'}</span>
+        </Link>
+        <nav className="nav">
+          <Link href="/" className="nav-link">Home</Link>
+          <Link href="/cart" className="nav-link cart-link">
+            <span>🛒</span>
+            <span>Cart</span>
+            {totalItems > 0 && <span className="cart-badge">{totalItems}</span>}
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/overlays/ecommerce/nextjs/src/app/components/ProductCard.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import { Product } from './CartProvider';
+
+interface ProductCardProps {
+  product: Product;
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  return (
+    <Link href={`/product/${product.id}`} className="product-card">
+      <div className="product-image">{product.image}</div>
+      <div className="product-info">
+        <span className="product-category">{product.category}</span>
+        <h3 className="product-name">{product.name}</h3>
+        <div className="product-rating">
+          {'⭐'.repeat(Math.floor(product.rating))}
+          <span className="rating-text">{product.rating}</span>
+        </div>
+        <p className="product-price">${product.price.toFixed(2)}</p>
+      </div>
+    </Link>
+  );
+}

package/templates/overlays/ecommerce/nextjs/src/app/globals.css

@@ -0,0 +1,144 @@
+/* === E-COMMERCE TEMPLATE STYLES === */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --dark: #111827;
+  --text: #374151;
+  --text-light: #6b7280;
+  --bg: #f9fafb;
+  --white: #ffffff;
+  --border: #e5e7eb;
+  --radius: 12px;
+  --shadow: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
+}
+
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
+a { text-decoration: none; color: inherit; }
+
+/* Header */
+.header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
+.header-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 64px; }
+.logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--dark); }
+.logo-icon { font-size: 1.5rem; }
+.nav { display: flex; align-items: center; gap: 1.5rem; }
+.nav-link { color: var(--text); font-weight: 500; transition: color 0.2s; }
+.nav-link:hover { color: var(--primary); }
+.cart-link { display: flex; align-items: center; gap: 0.35rem; position: relative; }
+.cart-badge { background: var(--primary); color: var(--white); font-size: 0.7rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -8px; right: -10px; }
+
+/* Hero */
+.hero { background: linear-gradient(135deg, var(--primary), #7c3aed); color: var(--white); text-align: center; padding: 4rem 1.5rem; }
+.hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
+.hero p { font-size: 1.15rem; opacity: 0.9; margin-bottom: 2rem; }
+.search-bar { max-width: 500px; margin: 0 auto; display: flex; align-items: center; background: var(--white); border-radius: 50px; padding: 0.5rem 1rem; }
+.search-icon { font-size: 1.2rem; margin-right: 0.5rem; }
+.search-bar input { border: none; outline: none; width: 100%; font-size: 1rem; color: var(--text); background: transparent; }
+
+/* Products Section */
+.products-section { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
+.categories { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
+.category-btn { padding: 0.5rem 1.25rem; border: 2px solid var(--border); border-radius: 50px; background: var(--white); cursor: pointer; font-weight: 500; color: var(--text); transition: all 0.2s; }
+.category-btn:hover, .category-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
+.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
+
+/* Product Card */
+.product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; display: block; }
+.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
+.product-image { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: #f3f4f6; }
+.product-info { padding: 1rem; }
+.product-category { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; }
+.product-name { font-size: 1.05rem; font-weight: 600; color: var(--dark); margin: 0.25rem 0; }
+.product-rating { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
+.rating-text { color: var(--text-light); }
+.product-price { font-size: 1.25rem; font-weight: 700; color: var(--primary); }
+
+/* Product Detail */
+.product-detail { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; }
+.back-link { display: inline-block; color: var(--primary); font-weight: 500; margin-bottom: 1.5rem; }
+.back-link:hover { text-decoration: underline; }
+.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
+.product-detail-image { height: 400px; display: flex; align-items: center; justify-content: center; font-size: 8rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
+.product-detail-info h1 { font-size: 2rem; color: var(--dark); margin: 0.5rem 0; }
+.product-detail-price { font-size: 2rem; font-weight: 700; color: var(--primary); margin: 1rem 0; }
+.product-description { color: var(--text); line-height: 1.7; margin-bottom: 1.5rem; }
+.product-features { margin-top: 2rem; }
+.product-features h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 0.75rem; }
+.product-features li { list-style: none; padding: 0.3rem 0; color: var(--text); }
+
+/* Cart Page */
+.cart-page { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; }
+.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+.cart-header h1 { font-size: 1.75rem; color: var(--dark); }
+.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
+.cart-items { display: flex; flex-direction: column; gap: 1rem; }
+.cart-item { display: flex; align-items: center; gap: 1rem; background: var(--white); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow); }
+.cart-item-image { font-size: 2.5rem; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 8px; }
+.cart-item-info { flex: 1; }
+.cart-item-info h3 { font-size: 1rem; color: var(--dark); }
+.cart-item-category { font-size: 0.8rem; color: var(--text-light); }
+.cart-item-price { font-weight: 600; color: var(--primary); }
+.cart-item-actions { display: flex; align-items: center; gap: 1rem; }
+.quantity-control { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.quantity-control button { width: 32px; height: 32px; border: none; background: var(--bg); cursor: pointer; font-size: 1rem; }
+.quantity-control span { width: 36px; text-align: center; font-weight: 600; }
+.cart-item-total { font-weight: 700; color: var(--dark); min-width: 70px; text-align: right; }
+.btn-remove { background: none; border: none; cursor: pointer; font-size: 1.2rem; }
+
+/* Cart Summary */
+.cart-summary { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 80px; }
+.cart-summary h2 { font-size: 1.25rem; color: var(--dark); margin-bottom: 1rem; }
+.summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; color: var(--text); }
+.summary-row.total { border-top: 2px solid var(--border); margin-top: 0.5rem; padding-top: 1rem; font-size: 1.15rem; font-weight: 700; color: var(--dark); }
+.continue-link { display: block; text-align: center; margin-top: 1rem; color: var(--primary); font-weight: 500; }
+
+/* Cart Empty */
+.cart-empty { text-align: center; padding: 4rem 1.5rem; }
+.cart-empty-icon { font-size: 4rem; margin-bottom: 1rem; }
+.cart-empty h2 { color: var(--dark); margin-bottom: 0.5rem; }
+.cart-empty p { color: var(--text-light); margin-bottom: 1.5rem; }
+
+/* Not Found */
+.not-found { text-align: center; padding: 4rem 1.5rem; }
+.no-results { text-align: center; padding: 3rem; color: var(--text-light); font-size: 1.1rem; }
+
+/* Buttons */
+.btn { display: inline-block; padding: 0.625rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; font-size: 0.95rem; }
+.btn-primary { background: var(--primary); color: var(--white); }
+.btn-primary:hover { background: var(--primary-hover); }
+.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); }
+.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
+.btn-lg { padding: 0.875rem 2rem; font-size: 1.05rem; }
+.btn-full { width: 100%; text-align: center; }
+
+/* Footer */
+.footer { background: var(--dark); color: #d1d5db; padding: 3rem 1.5rem 1.5rem; margin-top: 4rem; }
+.footer-container { max-width: 1200px; margin: 0 auto; }
+.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
+.footer-section h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 0.75rem; }
+.footer-section h4 { color: var(--white); font-size: 1rem; margin-bottom: 0.75rem; }
+.footer-section p { font-size: 0.9rem; line-height: 1.6; }
+.footer-section ul { list-style: none; }
+.footer-section li { padding: 0.25rem 0; font-size: 0.9rem; cursor: pointer; }
+.footer-section li:hover { color: var(--white); }
+.social-links { display: flex; gap: 1rem; font-size: 1.5rem; }
+.footer-bottom { border-top: 1px solid #374151; padding-top: 1.5rem; text-align: center; font-size: 0.85rem; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero h1 { font-size: 1.75rem; }
+  .product-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
+  .product-detail-image { height: 250px; font-size: 5rem; }
+  .cart-layout { grid-template-columns: 1fr; }
+  .cart-item { flex-wrap: wrap; }
+  .cart-item-actions { width: 100%; justify-content: space-between; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+}
+
+@media (max-width: 480px) {
+  .header-container { padding: 0 1rem; }
+  .product-grid { grid-template-columns: 1fr; }
+  .footer-grid { grid-template-columns: 1fr; }
+}

package/templates/overlays/ecommerce/nextjs/src/app/layout.tsx

@@ -0,0 +1,23 @@
+import './globals.css';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { CartProvider } from './components/CartProvider';
+
+export const metadata = {
+  title: '{{projectName}} - Online Store',
+  description: 'Shop the latest products at {{projectName}}',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <CartProvider>
+          <Header />
+          <main>{children}</main>
+          <Footer />
+        </CartProvider>
+      </body>
+    </html>
+  );
+}

package/templates/overlays/ecommerce/nextjs/src/app/page.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { ProductCard } from './components/ProductCard';
+import { Product } from './components/CartProvider';
+
+const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', rating: 4.5, description: 'Premium wireless headphones with noise cancellation and 30-hour battery life. Crystal-clear sound quality for music lovers.' },
+  { id: 2, name: 'Smart Watch', price: 199.99, image: '⌚', category: 'Electronics', rating: 4.7, description: 'Feature-packed smartwatch with health monitoring, GPS tracking, and a vibrant AMOLED display.' },
+  { id: 3, name: 'Running Shoes', price: 129.99, image: '👟', category: 'Sports', rating: 4.3, description: 'Lightweight running shoes with responsive cushioning and breathable mesh upper for maximum comfort.' },
+  { id: 4, name: 'Backpack', price: 59.99, image: '🎒', category: 'Accessories', rating: 4.6, description: 'Durable travel backpack with laptop compartment, water-resistant fabric, and ergonomic design.' },
+  { id: 5, name: 'Coffee Maker', price: 89.99, image: '☕', category: 'Home', rating: 4.4, description: 'Programmable coffee maker with thermal carafe, brew-strength control, and auto-shutoff feature.' },
+  { id: 6, name: 'Desk Lamp', price: 45.99, image: '💡', category: 'Home', rating: 4.2, description: 'Adjustable LED desk lamp with multiple brightness levels, color temperatures, and USB charging port.' },
+  { id: 7, name: 'Yoga Mat', price: 34.99, image: '🧘', category: 'Sports', rating: 4.8, description: 'Non-slip yoga mat with alignment marks, eco-friendly material, and carrying strap included.' },
+  { id: 8, name: 'Sunglasses', price: 149.99, image: '🕶️', category: 'Accessories', rating: 4.1, description: 'Polarized sunglasses with UV400 protection, lightweight titanium frame, and scratch-resistant lenses.' },
+];
+
+const categories = ['All', ...Array.from(new Set(products.map((p) => p.category)))];
+
+export default function HomePage() {
+  const [search, setSearch] = useState('');
+  const [activeCategory, setActiveCategory] = useState('All');
+
+  const filtered = products.filter((p) => {
+    const matchesSearch = p.name.toLowerCase().includes(search.toLowerCase());
+    const matchesCategory = activeCategory === 'All' || p.category === activeCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  return (
+    <div className="home-page">
+      <section className="hero">
+        <h1>Welcome to {'{{projectName}}'}</h1>
+        <p>Discover amazing products at unbeatable prices</p>
+        <div className="search-bar">
+          <span className="search-icon">🔍</span>
+          <input
+            type="text"
+            placeholder="Search products..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+      </section>
+
+      <section className="products-section">
+        <div className="categories">
+          {categories.map((cat) => (
+            <button
+              key={cat}
+              className={`category-btn ${activeCategory === cat ? 'active' : ''}`}
+              onClick={() => setActiveCategory(cat)}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+        <div className="product-grid">
+          {filtered.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+
+        {filtered.length === 0 && (
+          <div className="no-results">
+            <p>😕 No products found. Try a different search.</p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/templates/overlays/ecommerce/nextjs/src/app/product/[id]/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { useCart, Product } from '../../components/CartProvider';
+
+const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', rating: 4.5, description: 'Premium wireless headphones with noise cancellation and 30-hour battery life. Crystal-clear sound quality for music lovers.' },
+  { id: 2, name: 'Smart Watch', price: 199.99, image: '⌚', category: 'Electronics', rating: 4.7, description: 'Feature-packed smartwatch with health monitoring, GPS tracking, and a vibrant AMOLED display.' },
+  { id: 3, name: 'Running Shoes', price: 129.99, image: '👟', category: 'Sports', rating: 4.3, description: 'Lightweight running shoes with responsive cushioning and breathable mesh upper for maximum comfort.' },
+  { id: 4, name: 'Backpack', price: 59.99, image: '🎒', category: 'Accessories', rating: 4.6, description: 'Durable travel backpack with laptop compartment, water-resistant fabric, and ergonomic design.' },
+  { id: 5, name: 'Coffee Maker', price: 89.99, image: '☕', category: 'Home', rating: 4.4, description: 'Programmable coffee maker with thermal carafe, brew-strength control, and auto-shutoff feature.' },
+  { id: 6, name: 'Desk Lamp', price: 45.99, image: '💡', category: 'Home', rating: 4.2, description: 'Adjustable LED desk lamp with multiple brightness levels, color temperatures, and USB charging port.' },
+  { id: 7, name: 'Yoga Mat', price: 34.99, image: '🧘', category: 'Sports', rating: 4.8, description: 'Non-slip yoga mat with alignment marks, eco-friendly material, and carrying strap included.' },
+  { id: 8, name: 'Sunglasses', price: 149.99, image: '🕶️', category: 'Accessories', rating: 4.1, description: 'Polarized sunglasses with UV400 protection, lightweight titanium frame, and scratch-resistant lenses.' },
+];
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const { addToCart } = useCart();
+  const product = products.find((p) => p.id === Number(params.id));
+
+  if (!product) {
+    return (
+      <div className="not-found">
+        <h2>Product Not Found</h2>
+        <p>The product you are looking for does not exist.</p>
+        <Link href="/" className="btn btn-primary">Back to Shop</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="product-detail">
+      <Link href="/" className="back-link">← Back to Shop</Link>
+      <div className="product-detail-grid">
+        <div className="product-detail-image">{product.image}</div>
+        <div className="product-detail-info">
+          <span className="product-category">{product.category}</span>
+          <h1>{product.name}</h1>
+          <div className="product-rating">
+            {'⭐'.repeat(Math.floor(product.rating))}
+            <span className="rating-text">{product.rating} / 5.0</span>
+          </div>
+          <p className="product-detail-price">${product.price.toFixed(2)}</p>
+          <p className="product-description">{product.description}</p>
+          <button className="btn btn-primary btn-lg" onClick={() => addToCart(product)}>
+            🛒 Add to Cart
+          </button>
+          <div className="product-features">
+            <h3>Features</h3>
+            <ul>
+              <li>✅ Free shipping on orders over $50</li>
+              <li>✅ 30-day return policy</li>
+              <li>✅ 1-year warranty</li>
+              <li>✅ Secure checkout</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/overlays/ecommerce/nuxt/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: #374151;
+  background-color: #f9fafb;
+  line-height: 1.6;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+</style>