@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/ecommerce/nuxt/pages/product/[id].vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  description: string;
+}
+
+interface CartItem extends Product {
+  quantity: number;
+}
+
+const route = useRoute();
+const productId = Number(route.params.id);
+
+const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', description: 'Premium wireless headphones with noise cancellation.' },
+  { id: 2, name: 'Running Shoes', price: 129.99, image: '👟', category: 'Sports', description: 'Lightweight running shoes for daily training.' },
+  { id: 3, name: 'Coffee Maker', price: 49.99, image: '☕', category: 'Home', description: 'Programmable coffee maker with thermal carafe.' },
+  { id: 4, name: 'Backpack', price: 59.99, image: '🎒', category: 'Accessories', description: 'Water-resistant laptop backpack.' },
+  { id: 5, name: 'Smartwatch', price: 199.99, image: '⌚', category: 'Electronics', description: 'Fitness tracking smartwatch.' },
+  { id: 6, name: 'Desk Lamp', price: 34.99, image: '💡', category: 'Home', description: 'LED desk lamp with adjustable brightness.' },
+  { id: 7, name: 'Yoga Mat', price: 29.99, image: '🧘', category: 'Sports', description: 'Non-slip yoga mat with carrying strap.' },
+  { id: 8, name: 'Sunglasses', price: 89.99, image: '🕶️', category: 'Accessories', description: 'Polarized sunglasses with UV protection.' },
+];
+
+const product = products.find(p => p.id === productId);
+const quantity = ref(1);
+const added = ref(false);
+
+const cart = useState<CartItem[]>('cart');
+
+function addToCart() {
+  if (!product) return;
+  const existing = cart.value.find(item => item.id === product.id);
+  if (existing) {
+    existing.quantity += quantity.value;
+  } else {
+    cart.value.push({ ...product, quantity: quantity.value });
+  }
+  added.value = true;
+  setTimeout(() => { added.value = false; }, 2000);
+}
+</script>
+
+<template>
+  <div v-if="product" class="product-detail">
+    <NuxtLink to="/" class="back-link">← Back to Shop</NuxtLink>
+
+    <div class="product-layout">
+      <div class="product-image">
+        <span class="image-emoji">{{ product.image }}</span>
+      </div>
+
+      <div class="product-info">
+        <span class="product-category">{{ product.category }}</span>
+        <h1 class="product-name">{{ product.name }}</h1>
+        <p class="product-price">${{ product.price.toFixed(2) }}</p>
+        <p class="product-desc">{{ product.description }}</p>
+
+        <div class="add-to-cart-section">
+          <div class="quantity-control">
+            <button @click="quantity = Math.max(1, quantity - 1)">-</button>
+            <span>{{ quantity }}</span>
+            <button @click="quantity++">+</button>
+          </div>
+          <button class="add-btn" @click="addToCart">
+            {{ added ? '✓ Added!' : 'Add to Cart' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="not-found">
+    <h2>Product not found</h2>
+    <NuxtLink to="/" class="back-link">← Back to Shop</NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.back-link {
+  display: inline-block;
+  color: #4f46e5;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.product-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+.product-image {
+  background: white;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.image-emoji {
+  font-size: 8rem;
+}
+
+.product-category {
+  display: inline-block;
+  background: #eef2ff;
+  color: #4f46e5;
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.75rem;
+}
+
+.product-name {
+  font-size: 2rem;
+  color: #111827;
+  margin-bottom: 0.75rem;
+}
+
+.product-price {
+  font-size: 1.75rem;
+  color: #4f46e5;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.product-desc {
+  color: #6b7280;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+.add-to-cart-section {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.quantity-control {
+  display: flex;
+  align-items: center;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.quantity-control button {
+  background: #f3f4f6;
+  border: none;
+  padding: 0.5rem 1rem;
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+
+.quantity-control button:hover {
+  background: #e5e7eb;
+}
+
+.quantity-control span {
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  min-width: 3rem;
+  text-align: center;
+}
+
+.add-btn {
+  background: #4f46e5;
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.add-btn:hover {
+  background: #4338ca;
+}
+
+.not-found {
+  text-align: center;
+  padding: 4rem 0;
+}
+
+.not-found h2 {
+  color: #111827;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+  .product-layout {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+}
+</style>

package/templates/overlays/ecommerce/react/src/App.css

@@ -2,81 +2,93 @@
 
 /* Header */
 .store-header { background: white; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 10; }
-.header-content { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
-.store-logo { font-size: 1.5rem; color: #4f46e5; margin: 0; }
-.store-nav { display: flex; gap: 1.5rem; }
-.store-nav a { text-decoration: none; color: #6b7280; font-weight: 500; transition: color 0.2s; }
-.store-nav a:hover, .store-nav a.active { color: #4f46e5; }
-.header-actions { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
-.search-input { padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; width: 200px; }
-.cart-btn { background: #4f46e5; color: white; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; }
+.header-content { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
+.store-logo { font-size: 1.5rem; font-weight: 700; color: #4f46e5; text-decoration: none; }
+.store-nav { display: flex; gap: 1.5rem; align-items: center; }
+.nav-link { text-decoration: none; color: #6b7280; font-weight: 500; transition: color 0.2s; position: relative; }
+.nav-link:hover, .nav-link.active { color: #4f46e5; }
+.cart-badge { background: #4f46e5; color: white; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 9999px; margin-left: 0.35rem; vertical-align: super; }
 
 /* Main */
 .main { flex: 1; max-width: 1200px; margin: 0 auto; padding: 2rem; width: 100%; }
 
-/* Product Section */
-.product-section h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; }
+/* Section Header */
+.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
+.section-header h2 { font-size: 1.75rem; font-weight: 700; color: #111827; margin: 0; }
+.search-input { padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; width: 220px; }
+
+/* Product Grid */
 .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
-.product-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all 0.2s; background: white; }
+.product-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all 0.2s; background: white; display: flex; flex-direction: column; }
 .product-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.product-link { text-decoration: none; color: inherit; }
 .product-image { font-size: 4rem; text-align: center; padding: 2rem; background: #f9fafb; }
-.product-info { padding: 1.25rem; }
+.product-info { padding: 1rem 1.25rem 0.5rem; }
 .product-category { font-size: 0.75rem; color: #4f46e5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-.product-info h3 { font-size: 1.1rem; margin: 0.25rem 0; }
-.product-info p { color: #6b7280; font-size: 0.9rem; margin-bottom: 1rem; }
-.product-footer { display: flex; justify-content: space-between; align-items: center; }
+.product-info h3 { font-size: 1.1rem; margin: 0.25rem 0; color: #111827; }
+.product-info p { color: #6b7280; font-size: 0.85rem; margin-bottom: 0; }
+.product-actions { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; margin-top: auto; }
 .product-price { font-size: 1.25rem; font-weight: 700; color: #111827; }
 .add-to-cart { background: #4f46e5; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.85rem; }
 .add-to-cart:hover { background: #4338ca; }
+.no-results { color: #6b7280; font-size: 1rem; grid-column: 1 / -1; text-align: center; padding: 2rem 0; }
+
+/* Product Detail */
+.product-detail { max-width: 900px; margin: 0 auto; }
+.back-link { color: #4f46e5; text-decoration: none; font-weight: 500; display: inline-block; margin-bottom: 1.5rem; }
+.back-link:hover { text-decoration: underline; }
+.detail-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
+.detail-image { font-size: 8rem; text-align: center; padding: 3rem; background: #f9fafb; border-radius: 12px; }
+.detail-info h1 { font-size: 1.75rem; font-weight: 700; color: #111827; margin: 0.25rem 0 1rem; }
+.detail-description { color: #374151; font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
+.detail-price { font-size: 2rem; font-weight: 700; color: #111827; display: block; margin-bottom: 1.5rem; }
+.detail-btn { padding: 0.75rem 2rem; font-size: 1rem; border-radius: 8px; }
+.not-found { text-align: center; padding: 4rem 0; }
+.not-found h2 { color: #374151; margin-bottom: 1rem; }
 
-/* Cart */
-.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50; }
-.cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; background: white; box-shadow: -4px 0 25px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
-.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
-.cart-header h2 { margin: 0; font-size: 1.25rem; }
-.cart-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #6b7280; }
-.cart-empty { text-align: center; padding: 3rem; color: #9ca3af; }
-.cart-items { flex: 1; overflow-y: auto; padding: 1rem; }
-.cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f3f4f6; }
-.cart-item-image { font-size: 2rem; }
-.cart-item-info h4 { margin: 0; font-size: 0.95rem; }
-.cart-item-info p { color: #6b7280; font-size: 0.85rem; margin: 0; }
-.cart-item-remove { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 0.8rem; margin-left: auto; }
-.cart-footer { padding: 1.5rem; border-top: 1px solid #e5e7eb; }
-.cart-total { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 1.1rem; }
-.checkout-btn { width: 100%; background: #4f46e5; color: white; border: none; padding: 0.75rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
+/* Cart Page */
+.cart-page h2 { font-size: 1.75rem; font-weight: 700; color: #111827; margin-bottom: 1.5rem; }
+.cart-empty { text-align: center; padding: 3rem; color: #6b7280; }
+.cart-empty p { font-size: 1.25rem; margin-bottom: 1rem; }
+.continue-link { color: #4f46e5; text-decoration: none; font-weight: 500; }
+.continue-link:hover { text-decoration: underline; }
+.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; }
+.cart-items-list { display: flex; flex-direction: column; gap: 0; }
+.cart-row { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #e5e7eb; }
+.cart-row-image { font-size: 2.5rem; }
+.cart-row-info { flex: 1; }
+.cart-row-info a { text-decoration: none; color: inherit; }
+.cart-row-info h4 { margin: 0; font-size: 1rem; color: #111827; }
+.cart-row-info p { color: #6b7280; font-size: 0.85rem; margin: 0.25rem 0 0; }
+.cart-row-price { font-weight: 700; color: #111827; font-size: 1rem; min-width: 70px; text-align: right; }
+.cart-row-remove { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 0.85rem; font-weight: 500; }
+.cart-row-remove:hover { text-decoration: underline; }
+.cart-summary { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; height: fit-content; }
+.cart-summary h3 { font-size: 1.1rem; color: #111827; margin: 0 0 1rem; }
+.summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; color: #374151; font-size: 0.95rem; }
+.summary-row.total { border-top: 1px solid #e5e7eb; margin-top: 0.5rem; padding-top: 1rem; font-size: 1.1rem; }
+.checkout-btn { width: 100%; background: #4f46e5; color: white; border: none; padding: 0.75rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 1rem; }
 .checkout-btn:hover { background: #4338ca; }
 
 /* Footer */
 .store-footer { background: #111827; color: #d1d5db; padding: 3rem 2rem 1.5rem; margin-top: auto; }
-.store-footer .footer-content { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 3rem; flex-wrap: wrap; }
-.store-footer .footer-brand h3 { color: white; font-size: 1.25rem; margin-bottom: 0.5rem; }
-.store-footer .footer-links { display: flex; gap: 3rem; }
-.store-footer .footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
-.store-footer .footer-col h4 { color: white; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 0.25rem; }
-.store-footer .footer-col a { color: #9ca3af; text-decoration: none; font-size: 0.9rem; }
-.store-footer .footer-col a:hover { color: white; }
-.store-footer .footer-bottom { border-top: 1px solid #374151; margin-top: 2rem; padding-top: 1rem; text-align: center; max-width: 1200px; margin-left: auto; margin-right: auto; }
-.store-footer .footer-bottom p { font-size: 0.8rem; color: #6b7280; }
+.footer-content { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 3rem; flex-wrap: wrap; }
+.footer-brand h3 { color: white; font-size: 1.25rem; margin-bottom: 0.5rem; }
+.footer-links { display: flex; gap: 3rem; }
+.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
+.footer-col h4 { color: white; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 0.25rem; }
+.footer-col a { color: #9ca3af; text-decoration: none; font-size: 0.9rem; }
+.footer-col a:hover { color: white; }
+.footer-bottom { border-top: 1px solid #374151; margin-top: 2rem; padding-top: 1rem; text-align: center; max-width: 1200px; margin-left: auto; margin-right: auto; }
+.footer-bottom p { font-size: 0.8rem; color: #6b7280; }
 
 @media (max-width: 768px) {
-  .header-content { flex-direction: column; align-items: flex-start; }
-  .header-actions { margin-left: 0; width: 100%; }
-  .search-input { flex: 1; }
-  .cart-panel { width: 100%; }
-}
-
-@media (prefers-color-scheme: dark) {
-  .store-header { background: #1f2937; border-color: #374151; }
-  .product-card { background: #1f2937; border-color: #374151; }
-  .product-image { background: #111827; }
-  .product-info h3 { color: white; }
-  .product-price { color: white; }
-  .product-section h2 { color: white; }
-  .search-input { background: #374151; border-color: #4b5563; color: white; }
-  .cart-panel { background: #1f2937; }
-  .cart-header { border-color: #374151; }
-  .cart-item { border-color: #374151; }
-  .cart-footer { border-color: #374151; }
-  .cart-item-info h4 { color: white; }
+  .header-content { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
+  .section-header { flex-direction: column; align-items: flex-start; }
+  .search-input { width: 100%; }
+  .detail-content { grid-template-columns: 1fr; gap: 1.5rem; }
+  .detail-image { font-size: 5rem; padding: 2rem; }
+  .cart-layout { grid-template-columns: 1fr; }
+  .footer-content { flex-direction: column; gap: 1.5rem; }
+  .footer-links { flex-direction: column; gap: 1.5rem; }
 }

package/templates/overlays/ecommerce/react/src/App.tsx

@@ -1,40 +1,17 @@
 import { useState } from 'react';
-import { Header } from './components/Header';
-import { ProductGrid } from './components/ProductGrid';
-import { Cart } from './components/Cart';
-import { Footer } from './components/Footer';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Layout } from './components/Layout';
+import { Home } from './pages/Home';
+import { ProductDetail } from './pages/ProductDetail';
+import { Cart } from './pages/Cart';
+import { Product, CartItem } from './data/products';
 import './App.css';
 
-export interface Product {
-  id: number;
-  name: string;
-  price: number;
-  image: string;
-  category: string;
-  description: string;
-}
-
-export interface CartItem extends Product {
-  quantity: number;
-}
-
-const products: Product[] = [
-  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', description: 'Premium sound quality with noise cancellation.' },
-  { id: 2, name: 'Smart Watch', price: 199.99, image: '⌚', category: 'Electronics', description: 'Track your fitness and stay connected.' },
-  { id: 3, name: 'Laptop Stand', price: 49.99, image: '💻', category: 'Accessories', description: 'Ergonomic aluminum stand for better posture.' },
-  { id: 4, name: 'Mechanical Keyboard', price: 129.99, image: '⌨️', category: 'Electronics', description: 'Tactile switches with RGB backlighting.' },
-  { id: 5, name: 'USB-C Hub', price: 39.99, image: '🔌', category: 'Accessories', description: '7-in-1 hub with 4K HDMI output.' },
-  { id: 6, name: 'Webcam HD', price: 69.99, image: '📷', category: 'Electronics', description: '1080p webcam with built-in microphone.' },
-  { id: 7, name: 'Desk Lamp', price: 34.99, image: '💡', category: 'Home', description: 'LED desk lamp with adjustable brightness.' },
-  { id: 8, name: 'Mouse Pad XL', price: 19.99, image: '🖱️', category: 'Accessories', description: 'Extended mouse pad with stitched edges.' },
-];
-
 function App() {
-  const [cartItems, setCartItems] = useState<CartItem[]>([]);
-  const [isCartOpen, setIsCartOpen] = useState(false);
+  const [cart, setCart] = useState<CartItem[]>([]);
 
   const addToCart = (product: Product) => {
-    setCartItems((prev) => {
+    setCart((prev) => {
       const existing = prev.find((item) => item.id === product.id);
       if (existing) {
         return prev.map((item) =>
@@ -46,22 +23,19 @@ function App() {
   };
 
   const removeFromCart = (id: number) => {
-    setCartItems((prev) => prev.filter((item) => item.id !== id));
+    setCart((prev) => prev.filter((item) => item.id !== id));
   };
 
-  const cartCount = cartItems.reduce((sum, item) => sum + item.quantity, 0);
-
   return (
-    <div className="ecommerce">
-      <Header cartCount={cartCount} onCartClick={() => setIsCartOpen(!isCartOpen)} />
-      <main className="main">
-        <ProductGrid products={products} onAddToCart={addToCart} />
-      </main>
-      {isCartOpen && (
-        <Cart items={cartItems} onRemove={removeFromCart} onClose={() => setIsCartOpen(false)} />
-      )}
-      <Footer />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route element={<Layout cart={cart} />}>
+          <Route path="/" element={<Home addToCart={addToCart} />} />
+          <Route path="/product/:id" element={<ProductDetail addToCart={addToCart} />} />
+          <Route path="/cart" element={<Cart cart={cart} removeFromCart={removeFromCart} />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

package/templates/overlays/ecommerce/react/src/components/Footer.tsx

@@ -3,7 +3,7 @@ export function Footer() {
     <footer className="store-footer">
       <div className="footer-content">
         <div className="footer-brand">
-          <h3>{{projectName}}</h3>
+          <h3>🛍️ {'{{projectName}}'}</h3>
           <p>Your one-stop shop for quality products.</p>
         </div>
         <div className="footer-links">
@@ -22,7 +22,7 @@ export function Footer() {
         </div>
       </div>
       <div className="footer-bottom">
-        <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+        <p>&copy; {new Date().getFullYear()} {'{{projectName}}'}. All rights reserved.</p>
       </div>
     </footer>
   );

package/templates/overlays/ecommerce/react/src/components/Header.tsx

@@ -1,25 +1,26 @@
+import { NavLink } from 'react-router-dom';
+import { CartItem } from '../data/products';
+
 interface HeaderProps {
-  cartCount: number;
-  onCartClick: () => void;
+  cart: CartItem[];
 }
 
-export function Header({ cartCount, onCartClick }: HeaderProps) {
+export function Header({ cart }: HeaderProps) {
+  const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
+
   return (
     <header className="store-header">
       <div className="header-content">
-        <h1 className="store-logo">{{projectName}}</h1>
+        <NavLink to="/" className="store-logo">🛍️ {'{{projectName}}'}</NavLink>
         <nav className="store-nav">
-          <a href="#" className="active">All Products</a>
-          <a href="#">Electronics</a>
-          <a href="#">Accessories</a>
-          <a href="#">Home</a>
+          <NavLink to="/" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'} end>
+            Home
+          </NavLink>
+          <NavLink to="/cart" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            🛒 Cart
+            {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
+          </NavLink>
         </nav>
-        <div className="header-actions">
-          <input type="text" className="search-input" placeholder="Search products..." />
-          <button className="cart-btn" onClick={onCartClick}>
-            Cart ({cartCount})
-          </button>
-        </div>
       </div>
     </header>
   );

package/templates/overlays/ecommerce/react/src/components/Layout.tsx

@@ -0,0 +1,20 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { CartItem } from '../data/products';
+
+interface LayoutProps {
+  cart: CartItem[];
+}
+
+export function Layout({ cart }: LayoutProps) {
+  return (
+    <div className="ecommerce">
+      <Header cart={cart} />
+      <main className="main">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}

package/templates/overlays/ecommerce/react/src/components/ProductCard.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import { Product } from '../data/products';
+
+interface ProductCardProps {
+  product: Product;
+  onAddToCart: (product: Product) => void;
+}
+
+export function ProductCard({ product, onAddToCart }: ProductCardProps) {
+  return (
+    <div className="product-card">
+      <Link to={`/product/${product.id}`} className="product-link">
+        <div className="product-image">{product.image}</div>
+        <div className="product-info">
+          <span className="product-category">{product.category}</span>
+          <h3>{product.name}</h3>
+          <p>{product.description}</p>
+        </div>
+      </Link>
+      <div className="product-actions">
+        <span className="product-price">${product.price.toFixed(2)}</span>
+        <button className="add-to-cart" onClick={() => onAddToCart(product)}>
+          Add to Cart
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/overlays/ecommerce/react/src/data/products.ts

@@ -0,0 +1,23 @@
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  description: string;
+}
+
+export interface CartItem extends Product {
+  quantity: number;
+}
+
+export const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', description: 'Premium wireless headphones with noise cancellation and 30-hour battery life.' },
+  { id: 2, name: 'Running Shoes', price: 129.99, image: '👟', category: 'Sports', description: 'Lightweight running shoes with responsive cushioning for everyday runs.' },
+  { id: 3, name: 'Leather Backpack', price: 89.99, image: '🎒', category: 'Accessories', description: 'Handcrafted leather backpack with padded laptop compartment.' },
+  { id: 4, name: 'Smart Watch', price: 199.99, image: '⌚', category: 'Electronics', description: 'Feature-rich smartwatch with health tracking and GPS navigation.' },
+  { id: 5, name: 'Coffee Maker', price: 59.99, image: '☕', category: 'Home', description: 'Programmable coffee maker with thermal carafe and auto-brew timer.' },
+  { id: 6, name: 'Yoga Mat', price: 34.99, image: '🧘', category: 'Sports', description: 'Non-slip yoga mat with alignment markers and carrying strap.' },
+  { id: 7, name: 'Sunglasses', price: 149.99, image: '🕶️', category: 'Accessories', description: 'Polarized sunglasses with UV400 protection and titanium frame.' },
+  { id: 8, name: 'Desk Lamp', price: 44.99, image: '💡', category: 'Home', description: 'Adjustable LED desk lamp with touch dimmer and USB charging port.' },
+];

package/templates/overlays/ecommerce/react/src/pages/Cart.tsx

@@ -0,0 +1,51 @@
+import { Link } from 'react-router-dom';
+import { CartItem } from '../data/products';
+
+interface CartProps {
+  cart: CartItem[];
+  removeFromCart: (id: number) => void;
+}
+
+export function Cart({ cart, removeFromCart }: CartProps) {
+  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  if (cart.length === 0) {
+    return (
+      <div className="cart-page">
+        <h2>Shopping Cart</h2>
+        <div className="cart-empty">
+          <p>🛒 Your cart is empty</p>
+          <Link to="/" className="continue-link">Continue Shopping</Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="cart-page">
+      <h2>Shopping Cart ({cart.length} items)</h2>
+      <div className="cart-layout">
+        <div className="cart-items-list">
+          {cart.map((item) => (
+            <div key={item.id} className="cart-row">
+              <span className="cart-row-image">{item.image}</span>
+              <div className="cart-row-info">
+                <Link to={`/product/${item.id}`}><h4>{item.name}</h4></Link>
+                <p>Qty: {item.quantity}</p>
+              </div>
+              <span className="cart-row-price">${(item.price * item.quantity).toFixed(2)}</span>
+              <button className="cart-row-remove" onClick={() => removeFromCart(item.id)}>Remove</button>
+            </div>
+          ))}
+        </div>
+        <div className="cart-summary">
+          <h3>Order Summary</h3>
+          <div className="summary-row"><span>Subtotal</span><span>${total.toFixed(2)}</span></div>
+          <div className="summary-row"><span>Shipping</span><span>Free</span></div>
+          <div className="summary-row total"><span>Total</span><strong>${total.toFixed(2)}</strong></div>
+          <button className="checkout-btn">Checkout</button>
+        </div>
+      </div>
+    </div>
+  );
+}