diff --git a/templates/ecommerce/nextjs-monolith/app/cart/page.tsx b/templates/ecommerce/nextjs-monolith/app/cart/page.tsx
new file mode 100644
index 0000000..208a5fc
--- /dev/null
+++ b/templates/ecommerce/nextjs-monolith/app/cart/page.tsx
@@ -0,0 +1,144 @@
+import Link from 'next/link';
+
+export default function CartPage() {
+  const cartItems = [
+    { name: 'Classic White Sneakers', price: 89.99, quantity: 1, color: 'White', size: '10', imageColor: '#f1f5f9' },
+    { name: 'Leather Crossbody Bag', price: 129.99, quantity: 1, color: 'Tan', size: 'One Size', imageColor: '#d4a574' },
+    { name: 'Oversized Wool Coat', price: 249.99, quantity: 1, color: 'Charcoal', size: 'M', imageColor: '#1e293b' },
+  ];
+
+  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+  const tax = subtotal * 0.08;
+  const total = subtotal + tax;
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-6 py-10">
+        <h1 className="text-3xl font-bold text-foreground mb-2">Shopping Cart</h1>
+        <p className="text-text-secondary mb-8">{cartItems.length} items in your cart</p>
+
+        <div className="flex flex-col lg:flex-row gap-8">
+          {/* Cart Items */}
+          <div className="flex-1">
+            <div className="border border-border rounded-theme bg-card p-6">
+              {cartItems.map((item, index) => (
+                <div key={index} className={`flex gap-4 py-6 ${index !== 0 ? 'border-t border-border' : ''}`}>
+                  {/* Image */}
+                  <div
+                    className="w-24 h-24 rounded-theme flex-shrink-0"
+                    style=\{{ backgroundColor: item.imageColor }}
+                  />
+
+                  {/* Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div>
+                        <h3 className="font-medium text-foreground">{item.name}</h3>
+                        <p className="text-sm text-text-secondary mt-1">
+                          {item.color} &middot; Size {item.size}
+                        </p>
+                      </div>
+                      {/* Remove Button */}
+                      <button className="text-text-secondary hover:text-red-500 transition p-1" aria-label="Remove item">
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                      </button>
+                    </div>
+
+                    {/* Quantity & Price */}
+                    <div className="flex items-center justify-between mt-4">
+                      <div className="flex items-center border border-border rounded-theme">
+                        <button className="px-3 py-1.5 text-text-secondary hover:text-foreground transition" aria-label="Decrease quantity">
+                          &minus;
+                        </button>
+                        <span className="px-4 py-1.5 text-sm font-medium text-foreground border-x border-border">
+                          {item.quantity}
+                        </span>
+                        <button className="px-3 py-1.5 text-text-secondary hover:text-foreground transition" aria-label="Increase quantity">
+                          &#43;
+                        </button>
+                      </div>
+                      <span className="font-semibold text-foreground text-lg">
+                        ${(item.price * item.quantity).toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Continue Shopping */}
+            <Link
+              href="/products"
+              className="inline-flex items-center gap-2 mt-6 text-sm font-medium text-primary hover:text-primary-hover transition"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+              Continue Shopping
+            </Link>
+          </div>
+
+          {/* Order Summary */}
+          <div className="w-full lg:w-96">
+            <div className="border border-border rounded-theme bg-card p-6 lg:sticky lg:top-6">
+              <h2 className="text-lg font-semibold text-foreground mb-5">Order Summary</h2>
+
+              <div className="space-y-3 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Subtotal</span>
+                  <span className="font-medium text-foreground">${subtotal.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Shipping</span>
+                  <span className="text-text-secondary">Calculated at checkout</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Estimated Tax</span>
+                  <span className="font-medium text-foreground">${tax.toFixed(2)}</span>
+                </div>
+              </div>
+
+              <div className="border-t border-border mt-5 pt-5">
+                <div className="flex justify-between items-center">
+                  <span className="text-lg font-semibold text-foreground">Total</span>
+                  <span className="text-2xl font-bold text-foreground">${total.toFixed(2)}</span>
+                </div>
+              </div>
+
+              <Link
+                href="/checkout"
+                className="mt-6 block w-full py-3.5 rounded-theme bg-primary text-white font-semibold text-center hover:bg-primary-hover transition shadow-lg shadow-primary/25"
+              >
+                Proceed to Checkout
+              </Link>
+
+              <Link
+                href="/products"
+                className="mt-3 block w-full py-3 rounded-theme border border-border text-foreground font-medium text-center hover:bg-bg-secondary transition"
+              >
+                Continue Shopping
+              </Link>
+
+              {/* Payment Methods */}
+              <div className="mt-6 pt-5 border-t border-border">
+                <p className="text-xs text-text-secondary mb-3">Accepted Payment Methods</p>
+                <div className="flex flex-wrap gap-2">
+                  {['Visa', 'Mastercard', 'Amex', 'PayPal'].map((method) => (
+                    <span
+                      key={method}
+                      className="px-3 py-1.5 text-xs font-medium border border-border rounded-theme bg-bg-secondary text-text-secondary"
+                    >
+                      {method}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/templates/ecommerce/nextjs-monolith/app/checkout/page.tsx b/templates/ecommerce/nextjs-monolith/app/checkout/page.tsx
new file mode 100644
index 0000000..9cd32f8
--- /dev/null
+++ b/templates/ecommerce/nextjs-monolith/app/checkout/page.tsx
@@ -0,0 +1,257 @@
+import Link from 'next/link';
+
+export default function CheckoutPage() {
+  const orderItems = [
+    { name: 'Classic White Sneakers', quantity: 1, price: 89.99, imageColor: '#f1f5f9' },
+    { name: 'Leather Crossbody Bag', quantity: 1, price: 129.99, imageColor: '#d4a574' },
+    { name: 'Oversized Wool Coat', quantity: 1, price: 249.99, imageColor: '#1e293b' },
+  ];
+
+  const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+  const shipping = 9.99;
+  const tax = 12.50;
+  const total = subtotal + shipping + tax;
+
+  const steps = [
+    { label: 'Shipping', active: true, completed: false },
+    { label: 'Payment', active: false, completed: false },
+    { label: 'Review', active: false, completed: false },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-6 py-10">
+        {/* Header */}
+        <div className="mb-8">
+          <Link href="/cart" className="inline-flex items-center gap-2 text-sm text-text-secondary hover:text-primary transition mb-4">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to Cart
+          </Link>
+          <h1 className="text-3xl font-bold text-foreground">Checkout</h1>
+        </div>
+
+        {/* Step Indicator */}
+        <div className="mb-10">
+          <div className="flex items-center justify-center gap-0">
+            {steps.map((step, i) => (
+              <div key={step.label} className="flex items-center">
+                <div className="flex items-center gap-2">
+                  <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
+                    step.active
+                      ? 'bg-primary text-white'
+                      : step.completed
+                        ? 'bg-primary/20 text-primary'
+                        : 'bg-bg-secondary text-text-secondary border border-border'
+                  }`}>
+                    {step.completed ? (
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    ) : (
+                      i + 1
+                    )}
+                  </div>
+                  <span className={`text-sm font-medium ${step.active ? 'text-foreground' : 'text-text-secondary'}`}>
+                    {step.label}
+                  </span>
+                </div>
+                {i < steps.length - 1 && (
+                  <div className="w-16 lg:w-24 h-px bg-border mx-4" />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col lg:flex-row gap-8">
+          {/* Shipping Form */}
+          <div className="flex-1">
+            <div className="border border-border rounded-theme bg-card p-6 lg:p-8">
+              <h2 className="text-xl font-semibold text-foreground mb-6">Shipping Information</h2>
+
+              <div className="space-y-5">
+                {/* Name Row */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-1.5">First Name</label>
+                    <input
+                      type="text"
+                      placeholder="John"
+                      className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-1.5">Last Name</label>
+                    <input
+                      type="text"
+                      placeholder="Doe"
+                      className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    />
+                  </div>
+                </div>
+
+                {/* Email */}
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1.5">Email Address</label>
+                  <input
+                    type="email"
+                    placeholder="john@example.com"
+                    className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                  />
+                </div>
+
+                {/* Address */}
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1.5">Street Address</label>
+                  <input
+                    type="text"
+                    placeholder="123 Main Street, Apt 4B"
+                    className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                  />
+                </div>
+
+                {/* City, State, Zip */}
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-1.5">City</label>
+                    <input
+                      type="text"
+                      placeholder="New York"
+                      className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-1.5">State</label>
+                    <input
+                      type="text"
+                      placeholder="NY"
+                      className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-1.5">ZIP Code</label>
+                    <input
+                      type="text"
+                      placeholder="10001"
+                      className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    />
+                  </div>
+                </div>
+
+                {/* Country */}
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1.5">Country</label>
+                  <select className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                    <option>United States</option>
+                    <option>Canada</option>
+                    <option>United Kingdom</option>
+                    <option>Australia</option>
+                    <option>Germany</option>
+                    <option>France</option>
+                  </select>
+                </div>
+
+                {/* Phone */}
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1.5">
+                    Phone <span className="text-text-secondary font-normal">(optional)</span>
+                  </label>
+                  <input
+                    type="tel"
+                    placeholder="+1 (555) 000-0000"
+                    className="w-full px-4 py-2.5 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                  />
+                </div>
+
+                {/* Save Address */}
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    className="w-4 h-4 rounded border-border text-primary focus:ring-primary"
+                  />
+                  <span className="text-sm text-text-secondary">Save this address for future orders</span>
+                </label>
+              </div>
+
+              {/* Continue Button */}
+              <button className="mt-8 w-full py-3.5 rounded-theme bg-primary text-white font-semibold hover:bg-primary-hover transition shadow-lg shadow-primary/25">
+                Continue to Payment
+              </button>
+            </div>
+          </div>
+
+          {/* Order Summary Sidebar */}
+          <div className="w-full lg:w-96">
+            <div className="border border-border rounded-theme bg-card p-6 lg:sticky lg:top-6">
+              <h2 className="text-lg font-semibold text-foreground mb-5">Order Summary</h2>
+
+              {/* Items */}
+              <div className="space-y-4 mb-5">
+                {orderItems.map((item, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <div
+                      className="w-12 h-12 rounded-theme flex-shrink-0"
+                      style=\{{ backgroundColor: item.imageColor }}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-foreground truncate">{item.name}</p>
+                      <p className="text-xs text-text-secondary">Qty: {item.quantity}</p>
+                    </div>
+                    <span className="text-sm font-medium text-foreground">${item.price.toFixed(2)}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* Promo Code */}
+              <div className="border-t border-border pt-5 mb-5">
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    placeholder="Promo code"
+                    className="flex-1 px-3 py-2 text-sm rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary"
+                  />
+                  <button className="px-4 py-2 text-sm font-medium rounded-theme border border-border text-foreground hover:bg-bg-secondary transition">
+                    Apply
+                  </button>
+                </div>
+              </div>
+
+              {/* Totals */}
+              <div className="border-t border-border pt-5 space-y-3 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Subtotal</span>
+                  <span className="font-medium text-foreground">${subtotal.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Shipping</span>
+                  <span className="font-medium text-foreground">${shipping.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Tax</span>
+                  <span className="font-medium text-foreground">${tax.toFixed(2)}</span>
+                </div>
+              </div>
+
+              <div className="border-t border-border mt-5 pt-5">
+                <div className="flex justify-between items-center">
+                  <span className="text-lg font-semibold text-foreground">Total</span>
+                  <span className="text-2xl font-bold text-foreground">${total.toFixed(2)}</span>
+                </div>
+              </div>
+
+              {/* Security Note */}
+              <div className="mt-5 flex items-center gap-2 text-xs text-text-secondary">
+                <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+                <span>Secure checkout — your data is encrypted</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/templates/ecommerce/nextjs-monolith/app/page.tsx b/templates/ecommerce/nextjs-monolith/app/page.tsx
index 1f7bcc9..9d0297e 100644
--- a/templates/ecommerce/nextjs-monolith/app/page.tsx
+++ b/templates/ecommerce/nextjs-monolith/app/page.tsx
@@ -1,45 +1,184 @@
 import Link from 'next/link';
 
 export default function Home() {
+  const categories = [
+    { name: 'Women', count: 124, color: '#f9a8d4' },
+    { name: 'Men', count: 98, color: '#93c5fd' },
+    { name: 'Accessories', count: 67, color: '#fcd34d' },
+    { name: 'Sale', count: 45, color: '#fca5a5' },
+  ];
+
+  const featuredProducts = [
+    { slug: 'classic-white-sneakers', name: 'Classic White Sneakers', price: '$89.99', originalPrice: null, badge: null, color: '#f1f5f9' },
+    { slug: 'leather-crossbody-bag', name: 'Leather Crossbody Bag', price: '$129.99', originalPrice: '$159.99', badge: 'Sale', color: '#d4a574' },
+    { slug: 'oversized-wool-coat', name: 'Oversized Wool Coat', price: '$249.99', originalPrice: null, badge: 'New', color: '#1e293b' },
+    { slug: 'silk-scarf-collection', name: 'Silk Scarf Collection', price: '$59.99', originalPrice: null, badge: null, color: '#c4b5fd' },
+  ];
+
+  const testimonials = [
+    { name: 'Sarah M.', text: 'Absolutely love the quality. Every piece I have ordered has exceeded my expectations. The attention to detail is remarkable.', rating: 5 },
+    { name: 'James K.', text: 'Fast shipping and the packaging is beautiful. It feels like a luxury experience from start to finish. Will definitely order again.', rating: 5 },
+    { name: 'Emily R.', text: 'Found my new favorite store. The curated selection makes it so easy to find pieces that work together. Customer service is top-notch.', rating: 4 },
+  ];
+
   return (
     <div className="min-h-screen bg-background">
-      {/* Hero Section */}
-      <section className="max-w-7xl mx-auto px-6 py-24 text-center">
-        <h1 className="text-5xl font-bold tracking-tight text-foreground">
-          Welcome to <span className="text-primary">{{projectName}}</span>
-        </h1>
-        <p className="mt-4 text-xl text-text-secondary max-w-2xl mx-auto">
-          Your <strong>{{variant}}</strong> store, powered by Next.js 14 and scaffolded by Opusify CLI.
-        </p>
-        <div className="mt-8 flex gap-4 justify-center">
-          <Link
-            href="/products"
-            className="rounded-theme bg-primary px-8 py-3 text-white font-medium hover:bg-primary-hover transition"
-          >
-            Browse Products
-          </Link>
-          <Link
-            href="/cart"
-            className="rounded-theme border border-border px-8 py-3 font-medium text-foreground hover:bg-bg-secondary transition"
-          >
-            View Cart
-          </Link>
+      {/* Hero Banner */}
+      <section className="relative overflow-hidden bg-bg-secondary">
+        <div className="absolute inset-0 opacity-30" style=\{{ background: 'radial-gradient(ellipse at 70% 50%, var(--primary) 0%, transparent 60%)' }} />
+        <div className="relative max-w-7xl mx-auto px-6 py-24 lg:py-32">
+          <div className="max-w-2xl">
+            <span className="inline-flex px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary mb-6">
+              New Season Collection
+            </span>
+            <h1 className="text-4xl lg:text-6xl font-bold tracking-tight text-foreground leading-tight">
+              Welcome to <span className="text-primary">{{projectName}}</span>
+            </h1>
+            <p className="mt-5 text-lg text-text-secondary leading-relaxed">
+              Discover our curated <strong>{{variant}}</strong> collection — where timeless elegance meets modern design. Elevate your everyday with pieces crafted for those who appreciate quality.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <Link
+                href="/products"
+                className="rounded-theme bg-primary px-8 py-3.5 text-white font-medium hover:bg-primary-hover transition shadow-lg shadow-primary/25"
+              >
+                Shop Now
+              </Link>
+              <Link
+                href="/products"
+                className="rounded-theme border border-border px-8 py-3.5 font-medium text-foreground hover:bg-bg-secondary transition"
+              >
+                View Collections
+              </Link>
+            </div>
+          </div>
         </div>
       </section>
 
-      {/* Featured Section */}
-      <section className="max-w-7xl mx-auto px-6 py-16">
-        <h2 className="text-2xl font-bold text-foreground mb-8">Featured Products</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="border border-border rounded-theme p-6 bg-card hover:shadow-lg transition">
-              <div className="h-48 bg-bg-secondary rounded-theme mb-4" />
-              <h3 className="font-semibold text-foreground">Product {i}</h3>
-              <p className="text-text-secondary mt-1">$29.99</p>
-            </div>
+      {/* Categories */}
+      <section className="max-w-7xl mx-auto px-6 py-20">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-foreground">Shop by Category</h2>
+          <p className="mt-2 text-text-secondary">Find exactly what you are looking for</p>
+        </div>
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
+          {categories.map((cat) => (
+            <Link
+              key={cat.name}
+              href="/products"
+              className="group relative overflow-hidden rounded-theme border border-border bg-card hover:shadow-lg transition-all duration-300"
+            >
+              <div
+                className="aspect-[4/3] transition-transform duration-300 group-hover:scale-105"
+                style=\{{ backgroundColor: cat.color, opacity: 0.7 }}
+              />
+              <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10 group-hover:bg-black/20 transition">
+                <h3 className="text-lg font-bold text-white drop-shadow-md">{cat.name}</h3>
+                <p className="text-sm text-white/80 mt-1 drop-shadow-md">{cat.count} items</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Featured Products */}
+      <section className="max-w-7xl mx-auto px-6 pb-20">
+        <div className="flex items-center justify-between mb-8">
+          <h2 className="text-2xl font-bold text-foreground">Featured Products</h2>
+          <Link href="/products" className="text-sm font-medium text-primary hover:text-primary-hover transition">
+            View All &rarr;
+          </Link>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+          {featuredProducts.map((product) => (
+            <Link
+              key={product.slug}
+              href={`/products/${product.slug}`}
+              className="group block border border-border rounded-theme bg-card overflow-hidden hover:shadow-lg transition-all duration-300"
+            >
+              <div className="relative aspect-square overflow-hidden">
+                <div
+                  className="w-full h-full transition-transform duration-300 group-hover:scale-105"
+                  style=\{{ backgroundColor: product.color }}
+                />
+                {product.badge && (
+                  <span className={`absolute top-3 left-3 px-2.5 py-1 text-xs font-semibold rounded-theme text-white ${product.badge === 'Sale' ? 'bg-red-500' : 'bg-primary'}`}>
+                    {product.badge}
+                  </span>
+                )}
+                <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-all duration-300">
+                  <span className="px-4 py-2 bg-white text-foreground text-sm font-medium rounded-theme opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
+                    Quick View
+                  </span>
+                </div>
+              </div>
+              <div className="p-4">
+                <h3 className="font-medium text-foreground group-hover:text-primary transition text-sm">
+                  {product.name}
+                </h3>
+                <div className="mt-2 flex items-center gap-2">
+                  <span className="font-bold text-foreground">{product.price}</span>
+                  {product.originalPrice && (
+                    <span className="text-sm text-text-secondary line-through">{product.originalPrice}</span>
+                  )}
+                </div>
+              </div>
+            </Link>
           ))}
         </div>
       </section>
+
+      {/* Testimonials */}
+      <section className="bg-bg-secondary border-y border-border">
+        <div className="max-w-7xl mx-auto px-6 py-20">
+          <div className="text-center mb-12">
+            <h2 className="text-2xl font-bold text-foreground">What Our Customers Say</h2>
+            <p className="mt-2 text-text-secondary">Trusted by thousands of happy shoppers</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {testimonials.map((t, i) => (
+              <div key={i} className="bg-card border border-border rounded-theme p-6">
+                {/* Stars */}
+                <div className="flex gap-0.5 mb-4">
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <svg
+                      key={star}
+                      className={`w-4 h-4 ${star <= t.rating ? 'text-yellow-400' : 'text-border'}`}
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                  ))}
+                </div>
+                <p className="text-text-secondary text-sm leading-relaxed italic">
+                  &ldquo;{t.text}&rdquo;
+                </p>
+                <p className="mt-4 text-sm font-semibold text-foreground">{t.name}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Newsletter */}
+      <section className="bg-card">
+        <div className="max-w-7xl mx-auto px-6 py-20 text-center">
+          <h2 className="text-2xl font-bold text-foreground">Join the {{projectName}} Community</h2>
+          <p className="mt-2 text-text-secondary">Get 10% off your first order when you subscribe to our newsletter.</p>
+          <div className="mt-8 flex gap-3 max-w-md mx-auto">
+            <input
+              type="email"
+              placeholder="Enter your email"
+              className="flex-1 px-4 py-3 rounded-theme border border-border bg-background text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+            <button className="px-6 py-3 rounded-theme bg-primary text-white font-medium hover:bg-primary-hover transition">
+              Subscribe
+            </button>
+          </div>
+          <p className="mt-3 text-xs text-text-secondary">No spam, unsubscribe anytime. We respect your privacy.</p>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx b/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx
index 46675ee..118e4fd 100644
--- a/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx
+++ b/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx
@@ -5,33 +5,238 @@ export default function ProductDetailPage({
 }: {
   params: { slug: string };
 }) {
+  const productName = params.slug.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const relatedProducts = [
+    { slug: 'cashmere-sweater', name: 'Cashmere V-Neck Sweater', price: '$179.99', color: '#fef3c7' },
+    { slug: 'tailored-blazer', name: 'Tailored Linen Blazer', price: '$199.99', color: '#e2e8f0' },
+    { slug: 'silk-scarf-collection', name: 'Silk Scarf Collection', price: '$59.99', color: '#c4b5fd' },
+    { slug: 'gold-hoop-earrings', name: 'Gold Hoop Earrings', price: '$39.99', color: '#fde68a' },
+  ];
+
+  const sizes = ['XS', 'S', 'M', 'L', 'XL'];
+  const colors = [
+    { name: 'Black', hex: '#1a1a1a' },
+    { name: 'White', hex: '#ffffff' },
+    { name: 'Navy', hex: '#1e3a5f' },
+    { name: 'Red', hex: '#dc2626' },
+  ];
+
   return (
-    <div className="max-w-4xl mx-auto px-6 py-12">
-      <Link
-        href="/products"
-        className="text-primary hover:underline mb-6 inline-block"
-      >
-        &larr; Back to Products
-      </Link>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mt-6">
-        {/* Product Image Placeholder */}
-        <div className="h-96 bg-bg-secondary rounded-theme" />
-
-        {/* Product Info */}
-        <div>
-          <h1 className="text-3xl font-bold text-foreground capitalize">
-            {params.slug.replace(/-/g, ' ')}
-          </h1>
-          <p className="text-2xl text-primary font-bold mt-4">$99.99</p>
-          <p className="text-text-secondary mt-4 leading-relaxed">
-            This is a placeholder product page for <strong>{params.slug}</strong>.
-            When connected to a CMS or database, this page will display real product data.
-          </p>
-          <button className="mt-8 w-full rounded-theme bg-primary px-6 py-3 text-white font-medium hover:bg-primary-hover transition">
-            Add to Cart
-          </button>
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {/* Breadcrumb */}
+        <nav className="flex items-center gap-2 text-sm text-text-secondary mb-8">
+          <Link href="/" className="hover:text-primary transition">Home</Link>
+          <span>/</span>
+          <Link href="/products" className="hover:text-primary transition">Products</Link>
+          <span>/</span>
+          <span className="text-foreground font-medium">{productName}</span>
+        </nav>
+
+        {/* Product Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Image Gallery */}
+          <div>
+            {/* Main Image */}
+            <div
+              className="aspect-square rounded-theme bg-bg-secondary border border-border"
+              style=\{{ backgroundColor: '#f1f5f9' }}
+            />
+            {/* Thumbnails */}
+            <div className="grid grid-cols-4 gap-3 mt-3">
+              {[0, 1, 2, 3].map((i) => (
+                <div
+                  key={i}
+                  className={`aspect-square rounded-theme border cursor-pointer transition ${
+                    i === 0 ? 'border-primary ring-2 ring-primary/20' : 'border-border hover:border-primary/50'
+                  }`}
+                  style=\{{ backgroundColor: i === 0 ? '#f1f5f9' : i === 1 ? '#e2e8f0' : i === 2 ? '#cbd5e1' : '#94a3b8' }}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">{productName}</h1>
+
+            {/* Rating */}
+            <div className="flex items-center gap-3 mt-3">
+              <div className="flex gap-0.5">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <svg
+                    key={star}
+                    className={`w-4 h-4 ${star <= 4 ? 'text-yellow-400' : 'text-yellow-400/50'}`}
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                ))}
+              </div>
+              <span className="text-sm text-text-secondary">4.5 (128 reviews)</span>
+            </div>
+
+            {/* Price */}
+            <div className="mt-5 flex items-baseline gap-3">
+              <span className="text-3xl font-bold text-foreground">$99.99</span>
+              <span className="text-lg text-text-secondary line-through">$129.99</span>
+              <span className="px-2 py-0.5 text-xs font-semibold bg-red-100 text-red-600 rounded-theme">-23%</span>
+            </div>
+
+            {/* Description */}
+            <p className="mt-5 text-text-secondary leading-relaxed">
+              Crafted from premium materials with meticulous attention to detail. This piece combines timeless design with modern comfort, making it a versatile addition to any wardrobe.
+            </p>
+
+            {/* Color Selector */}
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold text-foreground mb-3">Color: <span className="font-normal text-text-secondary">Black</span></h3>
+              <div className="flex gap-3">
+                {colors.map((c, i) => (
+                  <button
+                    key={c.name}
+                    className={`w-8 h-8 rounded-full border-2 transition ${
+                      i === 0 ? 'border-primary ring-2 ring-primary/20' : 'border-border hover:border-primary/50'
+                    }`}
+                    style=\{{ backgroundColor: c.hex }}
+                    aria-label={c.name}
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Size Selector */}
+            <div className="mt-6">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-semibold text-foreground">Size</h3>
+                <button className="text-xs text-primary hover:text-primary-hover transition">Size Guide</button>
+              </div>
+              <div className="flex gap-2">
+                {sizes.map((size, i) => (
+                  <button
+                    key={size}
+                    className={`px-4 py-2.5 text-sm font-medium rounded-theme border transition ${
+                      i === 2
+                        ? 'border-primary bg-primary text-white'
+                        : 'border-border text-foreground hover:border-primary hover:text-primary'
+                    }`}
+                  >
+                    {size}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Quantity */}
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold text-foreground mb-3">Quantity</h3>
+              <div className="inline-flex items-center border border-border rounded-theme">
+                <button className="px-4 py-2.5 text-text-secondary hover:text-foreground transition" aria-label="Decrease quantity">
+                  &minus;
+                </button>
+                <span className="px-5 py-2.5 font-medium text-foreground border-x border-border">1</span>
+                <button className="px-4 py-2.5 text-text-secondary hover:text-foreground transition" aria-label="Increase quantity">
+                  &#43;
+                </button>
+              </div>
+            </div>
+
+            {/* Add to Cart */}
+            <button className="mt-8 w-full py-4 rounded-theme bg-primary text-white font-semibold text-lg hover:bg-primary-hover transition shadow-lg shadow-primary/25">
+              Add to Cart
+            </button>
+
+            {/* Wishlist */}
+            <button className="mt-3 w-full py-3 rounded-theme border border-border text-foreground font-medium hover:bg-bg-secondary transition flex items-center justify-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+              </svg>
+              Add to Wishlist
+            </button>
+
+            {/* Accordion Sections */}
+            <div className="mt-8 border-t border-border divide-y divide-border">
+              {/* Description */}
+              <details className="group py-4">
+                <summary className="flex items-center justify-between cursor-pointer">
+                  <span className="font-medium text-foreground">Description</span>
+                  <svg className="w-4 h-4 text-text-secondary group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </summary>
+                <p className="mt-3 text-sm text-text-secondary leading-relaxed">
+                  Made from carefully sourced materials, this product features reinforced stitching, premium hardware, and a refined silhouette. The versatile design transitions seamlessly from casual to formal settings. Machine washable for easy care.
+                </p>
+              </details>
+
+              {/* Shipping */}
+              <details className="group py-4">
+                <summary className="flex items-center justify-between cursor-pointer">
+                  <span className="font-medium text-foreground">Shipping Info</span>
+                  <svg className="w-4 h-4 text-text-secondary group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </summary>
+                <div className="mt-3 text-sm text-text-secondary leading-relaxed space-y-2">
+                  <p>Free standard shipping on orders over $100.</p>
+                  <p>Standard delivery: 5–7 business days.</p>
+                  <p>Express delivery: 2–3 business days ($12.99).</p>
+                  <p>International shipping available to select countries.</p>
+                </div>
+              </details>
+
+              {/* Returns */}
+              <details className="group py-4">
+                <summary className="flex items-center justify-between cursor-pointer">
+                  <span className="font-medium text-foreground">Returns</span>
+                  <svg className="w-4 h-4 text-text-secondary group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </summary>
+                <div className="mt-3 text-sm text-text-secondary leading-relaxed space-y-2">
+                  <p>30-day return policy for unworn items with tags attached.</p>
+                  <p>Free returns on all domestic orders.</p>
+                  <p>Exchanges available for different sizes or colors.</p>
+                  <p>Refunds processed within 5–7 business days.</p>
+                </div>
+              </details>
+            </div>
+          </div>
         </div>
+
+        {/* Related Products */}
+        <section className="mt-20 pb-12">
+          <h2 className="text-2xl font-bold text-foreground mb-8">You May Also Like</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+            {relatedProducts.map((product) => (
+              <Link
+                key={product.slug}
+                href={`/products/${product.slug}`}
+                className="group block border border-border rounded-theme bg-card overflow-hidden hover:shadow-lg transition-all duration-300"
+              >
+                <div className="relative aspect-square overflow-hidden">
+                  <div
+                    className="w-full h-full transition-transform duration-300 group-hover:scale-105"
+                    style=\{{ backgroundColor: product.color }}
+                  />
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-all duration-300">
+                    <span className="px-4 py-2 bg-white text-foreground text-sm font-medium rounded-theme opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
+                      Quick View
+                    </span>
+                  </div>
+                </div>
+                <div className="p-4">
+                  <h3 className="font-medium text-foreground group-hover:text-primary transition text-sm">
+                    {product.name}
+                  </h3>
+                  <span className="mt-2 block font-bold text-foreground">{product.price}</span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
       </div>
     </div>
   );
diff --git a/templates/ecommerce/nextjs-monolith/app/products/page.tsx b/templates/ecommerce/nextjs-monolith/app/products/page.tsx
index 8459f68..bc43036 100644
--- a/templates/ecommerce/nextjs-monolith/app/products/page.tsx
+++ b/templates/ecommerce/nextjs-monolith/app/products/page.tsx
@@ -1,30 +1,152 @@
 import Link from 'next/link';
 
-const products = [
-  { slug: 'product-1', name: 'Classic T-Shirt', price: '$29.99' },
-  { slug: 'product-2', name: 'Denim Jacket', price: '$89.99' },
-  { slug: 'product-3', name: 'Running Shoes', price: '$119.99' },
-  { slug: 'product-4', name: 'Leather Bag', price: '$149.99' },
-  { slug: 'product-5', name: 'Sunglasses', price: '$59.99' },
-  { slug: 'product-6', name: 'Watch', price: '$199.99' },
-];
-
 export default function ProductsPage() {
+  const products = [
+    { slug: 'classic-white-sneakers', name: 'Classic White Sneakers', price: '$89.99', originalPrice: null, badge: null, color: '#f1f5f9' },
+    { slug: 'leather-crossbody-bag', name: 'Leather Crossbody Bag', price: '$129.99', originalPrice: '$159.99', badge: 'Sale', color: '#d4a574' },
+    { slug: 'oversized-wool-coat', name: 'Oversized Wool Coat', price: '$249.99', originalPrice: null, badge: 'New', color: '#1e293b' },
+    { slug: 'silk-scarf-collection', name: 'Silk Scarf Collection', price: '$59.99', originalPrice: null, badge: null, color: '#c4b5fd' },
+    { slug: 'cashmere-sweater', name: 'Cashmere V-Neck Sweater', price: '$179.99', originalPrice: '$219.99', badge: 'Sale', color: '#fef3c7' },
+    { slug: 'tailored-blazer', name: 'Tailored Linen Blazer', price: '$199.99', originalPrice: null, badge: 'New', color: '#e2e8f0' },
+    { slug: 'canvas-tote-bag', name: 'Canvas Tote Bag', price: '$49.99', originalPrice: null, badge: null, color: '#d6d3d1' },
+    { slug: 'gold-hoop-earrings', name: 'Gold Hoop Earrings', price: '$39.99', originalPrice: null, badge: null, color: '#fde68a' },
+    { slug: 'leather-chelsea-boots', name: 'Leather Chelsea Boots', price: '$189.99', originalPrice: null, badge: 'New', color: '#292524' },
+    { slug: 'merino-wool-beanie', name: 'Merino Wool Beanie', price: '$34.99', originalPrice: '$44.99', badge: 'Sale', color: '#7c3aed' },
+    { slug: 'linen-wide-leg-pants', name: 'Linen Wide-Leg Pants', price: '$109.99', originalPrice: null, badge: null, color: '#f5f5f4' },
+    { slug: 'structured-leather-belt', name: 'Structured Leather Belt', price: '$69.99', originalPrice: null, badge: null, color: '#78350f' },
+  ];
+
+  const categories = ['Clothing', 'Shoes', 'Bags', 'Accessories', 'Jewelry'];
+  const priceRanges = ['$0 – $50', '$50 – $100', '$100 – $200', '$200+'];
+
   return (
-    <div className="max-w-7xl mx-auto px-6 py-12">
-      <h1 className="text-3xl font-bold text-foreground mb-8">All Products</h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {products.map((product) => (
-          <Link
-            key={product.slug}
-            href={`/products/${product.slug}`}
-            className="border border-border rounded-theme p-6 bg-card hover:shadow-lg transition block"
-          >
-            <div className="h-48 bg-bg-secondary rounded-theme mb-4" />
-            <h2 className="font-semibold text-foreground">{product.name}</h2>
-            <p className="text-primary font-bold mt-1">{product.price}</p>
-          </Link>
-        ))}
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-6 py-10">
+        {/* Page Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">All Products</h1>
+          <p className="mt-1 text-text-secondary">Showing 12 products</p>
+        </div>
+
+        <div className="flex flex-col lg:flex-row gap-8">
+          {/* Filter Sidebar */}
+          <aside className="w-full lg:w-64 flex-shrink-0">
+            <div className="border border-border rounded-theme bg-card p-5 sticky top-6">
+              {/* Categories */}
+              <div className="mb-6">
+                <h3 className="font-semibold text-foreground text-sm mb-3">Category</h3>
+                <div className="space-y-2.5">
+                  {categories.map((cat) => (
+                    <label key={cat} className="flex items-center gap-2.5 cursor-pointer group">
+                      <input
+                        type="checkbox"
+                        className="w-4 h-4 rounded border-border text-primary focus:ring-primary"
+                      />
+                      <span className="text-sm text-text-secondary group-hover:text-foreground transition">
+                        {cat}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Price Range */}
+              <div className="mb-6">
+                <h3 className="font-semibold text-foreground text-sm mb-3">Price Range</h3>
+                <div className="space-y-2.5">
+                  {priceRanges.map((range) => (
+                    <label key={range} className="flex items-center gap-2.5 cursor-pointer group">
+                      <input
+                        type="radio"
+                        name="price"
+                        className="w-4 h-4 border-border text-primary focus:ring-primary"
+                      />
+                      <span className="text-sm text-text-secondary group-hover:text-foreground transition">
+                        {range}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Sort */}
+              <div className="mb-6">
+                <h3 className="font-semibold text-foreground text-sm mb-3">Sort By</h3>
+                <select className="w-full px-3 py-2 text-sm rounded-theme border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary">
+                  <option>Newest</option>
+                  <option>Price: Low to High</option>
+                  <option>Price: High to Low</option>
+                  <option>Best Selling</option>
+                </select>
+              </div>
+
+              {/* Clear */}
+              <button className="w-full py-2 text-sm font-medium text-text-secondary hover:text-foreground border border-border rounded-theme hover:bg-bg-secondary transition">
+                Clear Filters
+              </button>
+            </div>
+          </aside>
+
+          {/* Product Grid */}
+          <div className="flex-1">
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
+              {products.map((product) => (
+                <Link
+                  key={product.slug}
+                  href={`/products/${product.slug}`}
+                  className="group block border border-border rounded-theme bg-card overflow-hidden hover:shadow-lg transition-all duration-300"
+                >
+                  <div className="relative aspect-square overflow-hidden">
+                    <div
+                      className="w-full h-full transition-transform duration-300 group-hover:scale-105"
+                      style=\{{ backgroundColor: product.color }}
+                    />
+                    {product.badge && (
+                      <span className={`absolute top-3 left-3 px-2.5 py-1 text-xs font-semibold rounded-theme text-white ${product.badge === 'Sale' ? 'bg-red-500' : 'bg-primary'}`}>
+                        {product.badge}
+                      </span>
+                    )}
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-all duration-300">
+                      <span className="px-4 py-2 bg-white text-foreground text-sm font-medium rounded-theme opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
+                        Quick View
+                      </span>
+                    </div>
+                  </div>
+                  <div className="p-4">
+                    <h3 className="font-medium text-foreground group-hover:text-primary transition text-sm">
+                      {product.name}
+                    </h3>
+                    <div className="mt-2 flex items-center gap-2">
+                      <span className="font-bold text-foreground">{product.price}</span>
+                      {product.originalPrice && (
+                        <span className="text-sm text-text-secondary line-through">{product.originalPrice}</span>
+                      )}
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+
+            {/* Pagination */}
+            <div className="mt-10 flex items-center justify-center gap-2">
+              <button className="px-4 py-2 text-sm font-medium text-text-secondary border border-border rounded-theme hover:bg-bg-secondary transition">
+                Previous
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-white bg-primary rounded-theme">
+                1
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-text-secondary border border-border rounded-theme hover:bg-bg-secondary transition">
+                2
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-text-secondary border border-border rounded-theme hover:bg-bg-secondary transition">
+                3
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-text-secondary border border-border rounded-theme hover:bg-bg-secondary transition">
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/templates/ecommerce/nextjs-monolith/components/CartItem.tsx b/templates/ecommerce/nextjs-monolith/components/CartItem.tsx
new file mode 100644
index 0000000..7531425
--- /dev/null
+++ b/templates/ecommerce/nextjs-monolith/components/CartItem.tsx
@@ -0,0 +1,56 @@
+interface CartItemProps {
+  name: string;
+  price: number;
+  quantity: number;
+  color: string;
+  size: string;
+  imageColor: string;
+}
+
+export default function CartItem({ name, price, quantity, color, size, imageColor }: CartItemProps) {
+  const lineTotal = (price * quantity).toFixed(2);
+
+  return (
+    <div className="flex gap-4 py-6 border-b border-border">
+      {/* Image */}
+      <div
+        className="w-20 h-20 rounded-theme flex-shrink-0"
+        style=\{{ backgroundColor: imageColor }}
+      />
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h3 className="font-medium text-foreground text-sm">{name}</h3>
+            <p className="text-xs text-text-secondary mt-1">
+              {color} &middot; Size {size}
+            </p>
+          </div>
+          {/* Remove Button */}
+          <button className="text-text-secondary hover:text-red-500 transition p-1" aria-label="Remove item">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Quantity & Price */}
+        <div className="flex items-center justify-between mt-3">
+          <div className="flex items-center border border-border rounded-theme">
+            <button className="px-2.5 py-1 text-text-secondary hover:text-foreground transition text-sm" aria-label="Decrease quantity">
+              &minus;
+            </button>
+            <span className="px-3 py-1 text-sm font-medium text-foreground border-x border-border">
+              {quantity}
+            </span>
+            <button className="px-2.5 py-1 text-text-secondary hover:text-foreground transition text-sm" aria-label="Increase quantity">
+              &#43;
+            </button>
+          </div>
+          <span className="font-semibold text-foreground">${lineTotal}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/templates/ecommerce/nextjs-monolith/components/Footer.tsx b/templates/ecommerce/nextjs-monolith/components/Footer.tsx
new file mode 100644
index 0000000..252c7e6
--- /dev/null
+++ b/templates/ecommerce/nextjs-monolith/components/Footer.tsx
@@ -0,0 +1,146 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  const shopLinks = [
+    { label: 'New Arrivals', href: '/products' },
+    { label: 'Best Sellers', href: '/products' },
+    { label: 'Sale', href: '/products' },
+    { label: 'Collections', href: '/products' },
+    { label: 'Gift Cards', href: '/products' },
+  ];
+
+  const serviceLinks = [
+    { label: 'Contact Us', href: '/contact' },
+    { label: 'Shipping & Returns', href: '/shipping' },
+    { label: 'FAQ', href: '/faq' },
+    { label: 'Size Guide', href: '/size-guide' },
+    { label: 'Order Tracking', href: '/tracking' },
+  ];
+
+  return (
+    <footer className="border-t border-border bg-card">
+      {/* Newsletter Strip */}
+      <div className="bg-bg-secondary border-b border-border">
+        <div className="max-w-7xl mx-auto px-6 py-10 flex flex-col md:flex-row items-center justify-between gap-6">
+          <div>
+            <h3 className="text-lg font-semibold text-foreground">Join Our Newsletter</h3>
+            <p className="text-sm text-text-secondary mt-1">Get 10% off your first order + exclusive access to new drops.</p>
+          </div>
+          <div className="flex gap-3 w-full md:w-auto">
+            <input
+              type="email"
+              placeholder="your@email.com"
+              className="flex-1 md:w-64 px-4 py-2.5 rounded-theme border border-border bg-card text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+            <button className="px-6 py-2.5 rounded-theme bg-primary text-white font-medium hover:bg-primary-hover transition whitespace-nowrap">
+              Subscribe
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Footer */}
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
+          {/* Brand */}
+          <div>
+            <Link href="/" className="text-xl font-bold text-primary">
+              {{projectName}}
+            </Link>
+            <p className="mt-3 text-sm text-text-secondary leading-relaxed">
+              Curated fashion and lifestyle essentials for the modern individual. Quality craftsmanship meets contemporary design.
+            </p>
+            {/* Social Icons */}
+            <div className="flex gap-4 mt-5">
+              {/* Instagram */}
+              <a href="#" className="text-text-secondary hover:text-primary transition" aria-label="Instagram">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
+                </svg>
+              </a>
+              {/* Facebook */}
+              <a href="#" className="text-text-secondary hover:text-primary transition" aria-label="Facebook">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+                </svg>
+              </a>
+              {/* Twitter/X */}
+              <a href="#" className="text-text-secondary hover:text-primary transition" aria-label="Twitter">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+              </a>
+              {/* Pinterest */}
+              <a href="#" className="text-text-secondary hover:text-primary transition" aria-label="Pinterest">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.174.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          {/* Shop Links */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Shop</h4>
+            <ul className="space-y-2.5">
+              {shopLinks.map((link) => (
+                <li key={link.label}>
+                  <Link href={link.href} className="text-sm text-text-secondary hover:text-primary transition">
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Customer Service */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Customer Service</h4>
+            <ul className="space-y-2.5">
+              {serviceLinks.map((link) => (
+                <li key={link.label}>
+                  <Link href={link.href} className="text-sm text-text-secondary hover:text-primary transition">
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Connect */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Connect</h4>
+            <p className="text-sm text-text-secondary leading-relaxed">
+              Mon–Fri: 9am – 6pm EST<br />
+              support@{{projectName}}.com
+            </p>
+            <div className="mt-5">
+              <h5 className="text-sm font-medium text-foreground mb-3">We Accept</h5>
+              <div className="flex flex-wrap gap-2">
+                {['Visa', 'Mastercard', 'Amex', 'PayPal'].map((method) => (
+                  <span
+                    key={method}
+                    className="px-3 py-1.5 text-xs font-medium border border-border rounded-theme bg-bg-secondary text-text-secondary"
+                  >
+                    {method}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-sm text-text-secondary">
+            &copy; 2024 {{projectName}}. All rights reserved.
+          </p>
+          <div className="flex gap-6">
+            <Link href="/privacy" className="text-sm text-text-secondary hover:text-primary transition">Privacy Policy</Link>
+            <Link href="/terms" className="text-sm text-text-secondary hover:text-primary transition">Terms of Service</Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/templates/ecommerce/nextjs-monolith/components/ProductCard.tsx b/templates/ecommerce/nextjs-monolith/components/ProductCard.tsx
new file mode 100644
index 0000000..733b368
--- /dev/null
+++ b/templates/ecommerce/nextjs-monolith/components/ProductCard.tsx
@@ -0,0 +1,55 @@
+import Link from 'next/link';
+
+interface ProductCardProps {
+  name: string;
+  price: string;
+  originalPrice?: string;
+  imageColor: string;
+  badge?: 'New' | 'Sale';
+  slug: string;
+}
+
+export default function ProductCard({ name, price, originalPrice, imageColor, badge, slug }: ProductCardProps) {
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className="group block border border-border rounded-theme bg-card overflow-hidden hover:shadow-lg transition-all duration-300"
+    >
+      {/* Image */}
+      <div className="relative aspect-square overflow-hidden">
+        <div
+          className="w-full h-full transition-transform duration-300 group-hover:scale-105"
+          style=\{{ backgroundColor: imageColor }}
+        />
+        {/* Badge */}
+        {badge && (
+          <span
+            className={`absolute top-3 left-3 px-2.5 py-1 text-xs font-semibold rounded-theme text-white ${
+              badge === 'Sale' ? 'bg-red-500' : 'bg-primary'
+            }`}
+          >
+            {badge}
+          </span>
+        )}
+        {/* Quick View Overlay */}
+        <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-all duration-300">
+          <span className="px-4 py-2 bg-white text-foreground text-sm font-medium rounded-theme opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
+            Quick View
+          </span>
+        </div>
+      </div>
+      {/* Info */}
+      <div className="p-4">
+        <h3 className="font-medium text-foreground group-hover:text-primary transition text-sm leading-tight">
+          {name}
+        </h3>
+        <div className="mt-2 flex items-center gap-2">
+          <span className="font-bold text-foreground">{price}</span>
+          {originalPrice && (
+            <span className="text-sm text-text-secondary line-through">{originalPrice}</span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}