Update app/product/[id]/page.tsx

app/product/[id]/page.tsx

@@ -0,0 +1,117 @@
+import { products } from "@/lib/products";
+import { Container } from "@/components/container";
+import { Button } from "@/components/ui/button";
+import { Star, ArrowLeft, ShieldCheck, Truck, RefreshCcw } from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { Footer } from "@/components/footer";
+
+export default function ProductPage({ params }: { params: { id: string } }) {
+  const product = products.find((p) => p.id === params.id);
+
+  if (!product) {
+    notFound();
+  }
+
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <div className="bg-white border-b py-4">
+        <Container>
+          <Link href="/" className="flex items-center gap-2 text-sm text-neutral-600 hover:text-orange-600 transition-colors">
+            <ArrowLeft className="w-4 h-4" />
+            Back to Shopping
+          </Link>
+        </Container>
+      </div>
+
+      <section className="py-12">
+        <Container>
+          <div className="bg-white rounded-2xl overflow-hidden shadow-sm border grid grid-cols-1 lg:grid-cols-2">
+            {/* Image Gallery */}
+            <div className="p-8 bg-neutral-50 flex items-center justify-center">
+              <div className="relative aspect-square w-full max-w-md overflow-hidden rounded-xl bg-white shadow-inner">
+                <Image
+                  src={product.image}
+                  alt={product.name}
+                  fill
+                  className="object-contain p-4"
+                />
+              </div>
+            </div>
+
+            {/* Product Info */}
+            <div className="p-8 md:p-12 flex flex-col">
+              <div className="mb-6">
+                <span className="inline-block px-3 py-1 rounded-full bg-orange-100 text-orange-600 text-xs font-bold uppercase tracking-wider mb-4">
+                  {product.category}
+                </span>
+                <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-4">
+                  {product.name}
+                </h1>
+                <div className="flex items-center gap-2 mb-6">
+                  <div className="flex items-center gap-1">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <Star
+                        key={i}
+                        className={`w-4 h-4 ${
+                          i < Math.floor(product.rating)
+                            ? "fill-orange-400 text-orange-400"
+                            : "fill-neutral-200 text-neutral-200"
+                        }`}
+                      />
+                    ))}
+                  </div>
+                  <span className="text-sm font-medium text-neutral-600">
+                    {product.rating} Rating
+                  </span>
+                </div>
+                <p className="text-4xl font-bold text-orange-600 mb-8">
+                  {product.price}
+                </p>
+              </div>
+
+              <div className="prose prose-neutral mb-10">
+                <h3 className="text-lg font-bold mb-2">Description</h3>
+                <p className="text-neutral-600 leading-relaxed">
+                  {product.description}
+                </p>
+              </div>
+
+              <div className="mt-auto space-y-6">
+                <Button asChild size="lg" className="w-full h-14 text-lg bg-orange-600 hover:bg-orange-700 shadow-lg shadow-orange-200">
+                  <a href={product.affiliateLink} target="_blank" rel="noopener noreferrer">
+                    Shop Now
+                  </a>
+                </Button>
+                
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-8 border-t">
+                  <div className="flex items-center gap-3 text-xs text-neutral-500">
+                    <ShieldCheck className="w-5 h-5 text-green-500" />
+                    <span>Secure Checkout on Partner Site</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-xs text-neutral-500">
+                    <Truck className="w-5 h-5 text-blue-500" />
+                    <span>Global Shipping Available</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-xs text-neutral-500">
+                    <RefreshCcw className="w-5 h-5 text-orange-500" />
+                    <span>Easy Returns via Retailer</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Affiliate Disclaimer */}
+          <div className="mt-8 p-6 bg-neutral-100 rounded-xl border border-neutral-200">
+            <p className="text-xs text-neutral-500 text-center leading-relaxed">
+              <strong>Affiliate Disclosure:</strong> WORLDWIDE SHOPPERS is an affiliate marketing website. When you click "Shop Now", you will be redirected to a third-party retailer's website to complete your purchase. We may earn a commission from qualifying purchases at no extra cost to you.
+            </p>
+          </div>
+        </Container>
+      </section>
+      <Footer />
+    </main>
+  );
+}