Add src/app/products/[id]/page.tsx

src/app/products/[id]/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useParams } from "next/navigation";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Twitter } from "lucide-react";
+
+export default function ProductDetail() {
+  const { id } = useParams();
+  return (
+    <ThemeProvider>
+      <NavbarStyleCentered 
+         navItems={[{ name: "Home", id: "/" }, { name: "Products", id: "/products" }]} 
+         brandName="Melody Baku" 
+      />
+      <main className="container mx-auto py-24 min-h-screen flex flex-col items-center justify-center">
+        <h1 className="text-4xl font-bold mb-6">Product Details: {id}</h1>
+        <p className="mb-8 text-lg max-w-xl text-center">This is the detail page for product {id}. Here you can see specific technical specs, high-resolution imagery, and a direct checkout integration.</p>
+        <button 
+            className="bg-primary px-8 py-4 rounded-full text-white font-semibold hover:scale-105 transition-all"
+            onClick={() => alert("Processing payment for " + id)}
+        >
+            Buy Now
+        </button>
+      </main>
+      <FooterCard 
+        logoText="Melody Baku"
+        socialLinks={[{ icon: Instagram, href: "#", ariaLabel: "Instagram" }, { icon: Twitter, href: "#", ariaLabel: "Twitter" }]}
+      />
+    </ThemeProvider>
+  );
+}