From 1bb9f0259bac15866e753a86e57d3e4b194e0a02 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:27:58 +0000
Subject: [PATCH] Update app/products/[id]/page.tsx

---
 app/products/[id]/page.tsx | 132 +++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 app/products/[id]/page.tsx

diff --git a/app/products/[id]/page.tsx b/app/products/[id]/page.tsx
new file mode 100644
index 0000000..3e3f5b1
--- /dev/null
+++ b/app/products/[id]/page.tsx
@@ -0,0 +1,132 @@
+"use client";
+import { products } from "@/lib/data";
+import { useCart } from "@/lib/use-cart";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Button } from "@/components/ui/button";
+import { Footer } from "@/components/footer";
+import { Star, ShieldCheck, Truck, RotateCcw, ShoppingCart } from "lucide-react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const product = products.find((p) => p.id === params.id);
+  const { addToCart } = useCart();
+
+  if (!product) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <Heading>Product not found</Heading>
+          <Button asChild className="mt-4"><Link href="/products">Back to Products</Link></Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-white">
+      <Container className="py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          {/* Image Gallery */}
+          <div className="space-y-4">
+            <div className="aspect-square rounded-3xl overflow-hidden bg-neutral-100 border">
+              <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
+            </div>
+            <div className="grid grid-cols-4 gap-4">
+              {[1, 2, 3, 4].map((i) => (
+                <div key={i} className="aspect-square rounded-xl overflow-hidden bg-neutral-100 border cursor-pointer hover:opacity-80 transition-opacity">
+                  <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Product Info */}
+          <div className="flex flex-col">
+            <div className="mb-2">
+              <span className="text-sm font-medium text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
+                {product.category}
+              </span>
+            </div>
+            <Heading className="text-3xl md:text-4xl font-bold mb-4">{product.name}</Heading>
+            
+            <div className="flex items-center gap-4 mb-6">
+              <div className="flex items-center text-yellow-400">
+                {[...Array(5)].map((_, i) => (
+                  <Star key={i} className={`w-4 h-4 ${i < Math.floor(product.rating) ? "fill-current" : "text-neutral-300"}`} />
+                ))}
+                <span className="ml-2 text-sm font-bold text-neutral-900">{product.rating}</span>
+              </div>
+              <span className="text-sm text-neutral-500">{product.reviews} Reviews</span>
+            </div>
+
+            <div className="mb-8">
+              <div className="flex items-baseline gap-3">
+                <span className="text-4xl font-bold text-neutral-900">₹{product.price}</span>
+                {product.originalPrice && (
+                  <>
+                    <span className="text-xl text-neutral-400 line-through">₹{product.originalPrice}</span>
+                    <span className="text-green-600 font-bold">
+                      {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF
+                    </span>
+                  </>
+                )}
+              </div>
+              <p className="text-sm text-neutral-500 mt-1">Inclusive of all taxes</p>
+            </div>
+
+            <p className="text-neutral-600 leading-relaxed mb-8">
+              {product.description} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 mb-10">
+              <Button 
+                size="lg" 
+                className="flex-1 rounded-full py-7 text-lg"
+                onClick={() => addToCart(product)}
+              >
+                <ShoppingCart className="w-5 h-5 mr-2" /> Add to Cart
+              </Button>
+              <Button size="lg" variant="outline" className="flex-1 rounded-full py-7 text-lg">
+                Buy Now
+              </Button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8 border-t">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
+                  <Truck className="w-5 h-5 text-neutral-600" />
+                </div>
+                <div className="text-xs">
+                  <p className="font-bold">Free Delivery</p>
+                  <p className="text-neutral-500">Orders over ₹499</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
+                  <RotateCcw className="w-5 h-5 text-neutral-600" />
+                </div>
+                <div className="text-xs">
+                  <p className="font-bold">7 Days Return</p>
+                  <p className="text-neutral-500">Easy returns policy</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
+                  <ShieldCheck className="w-5 h-5 text-neutral-600" />
+                </div>
+                <div className="text-xs">
+                  <p className="font-bold">Secure Payment</p>
+                  <p className="text-neutral-500">100% safe checkout</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}