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

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { Star } from "lucide-react";
+
+export default function ProductDetailPage() {
+  const handleAddToCart = () => {
+    alert("Product added to cart!");
+  };
+
+  const handleBuyNow = () => {
+    alert("Proceeding to checkout!");
+  };
+
+  const handleSizeChange = (value: string) => {
+    console.log("Selected size:", value);
+  };
+
+  const handleColorChange = (value: string) => {
+    console.log("Selected color:", value);
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "#about" },
+              { name: "Services", id: "#services" },
+              { name: "Product", id: "/product/1" },
+              { name: "Team", id: "#team" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Contact", id: "#contact" }
+            ]}
+            brandName="FCplus Center"
+          />
+        </div>
+
+        <div id="product-detail" data-section="product-detail">
+          <ProductDetailCard
+            layout="page"
+            name="Classic Blue Suit"
+            price="$599.00"
+            description="Elegantly crafted from premium Italian wool, this classic blue suit offers a timeless silhouette and unparalleled comfort. Perfect for business, formal events, or any occasion requiring a sharp, sophisticated look. Features a two-button closure, notched lapels, and flat-front trousers."
+            showRating={true}
+            rating={4.5}
+            ratingIcon={Star}
+            images={[
+              { src: "http://img.b2bpic.net/free-photo/stylish-man-in-blue-suit_1303-10022.jpg", alt: "Classic Blue Suit front view" },
+              { src: "http://img.b2bpic.net/free-photo/handsome-elegant-young-man-with-braces-posing_158595-5026.jpg", alt: "Man in suit close-up" },
+              { src: "http://img.b2bpic.net/free-photo/man-fitting-suit-store_107420-101416.jpg", alt: "Man fitting suit in store" },
+              { src: "http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg", alt: "Blue suit fabric detail" }
+            ]}
+            variants={[
+              {
+                label: "Size",                options: ["38S", "40S", "40R", "42R", "42L", "44L"],
+                selected: "40R",                onChange: handleSizeChange
+              },
+              {
+                label: "Color",                options: ["Blue", "Charcoal", "Black"],
+                selected: "Blue",                onChange: handleColorChange
+              }
+            ]}
+            quantity={{
+                label: "Quantity",                options: ["1", "2", "3", "4", "5"],
+                selected: "1",                onChange: (value) => console.log("Selected quantity:", value)
+            }}
+            buttons={[
+              { text: "Add to Cart", onClick: handleAddToCart },
+              { text: "Buy Now", onClick: handleBuyNow }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}