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

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
+
+export default function ProductDetailPage() {
+    const params = useParams();
+    
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="largeSmallSizeLargeTitles"
+            background="aurora"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="solid"
+            headingFontWeight="extrabold"
+        >
+            <div className="container py-20">
+                <ProductDetailCard
+                    layout="page"
+                    name="Signature Glow Moisturizer"
+                    price="$68"
+                    description="Experience the ultimate hydration with our flagship moisturizer, packed with botanical extracts and essential nutrients to revitalize your complexion."
+                    images={[{ src: "/templates/skincare/image2.webp", alt: "Signature Moisturizer" }]}
+                    variants={[
+                        { label: "Size", options: ["10ml", "50ml", "100ml"], selected: "50ml", onChange: (v) => console.log(v) }
+                    ]}
+                    quantity={{ label: "Quantity", options: ["1", "2", "3"], selected: "1", onChange: (v) => console.log(v) }}
+                    buttons={[
+                        { text: "Add to Cart", onClick: () => alert("Added to cart") },
+                        { text: "Back to Shop", href: "/" }
+                    ]}
+                />
+            </div>
+        </ThemeProvider>
+    );
+}