Add src/app/shop/[productId]/page.tsx

src/app/shop/[productId]/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+
+export default function ProductDetailPage({ params }: { params: { productId: string } }) {
+  const { productId } = params;
+
+  // In a real application, you would fetch product details using productId
+  const dummyProduct = {
+    id: productId,
+    name: "Luxury Product " + productId,
+    description: `This is a placeholder for the detailed description of ${productId}. Discover its exquisite craftsmanship, premium materials, and timeless elegance.`,
+    price: "$X,XXX",    imageSrc: "http://img.b2bpic.net/free-photo/fashionable-womens-accessories-pink-background-high-quality-photo_185193-108744.jpg"
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="circleGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",          id: "/"},
+              {
+                name: "About",          id: "#about"},
+              {
+                name: "Products",          id: "#products"},
+              {
+                name: "Shop",          id: "/shop"},
+              {
+                name: "Features",          id: "#features"},
+              {
+                name: "Testimonials",          id: "#testimonials"},
+              {
+                name: "Contact",          id: "#contact"},
+              {
+                name: "Cart",          id: "/cart"},
+              {
+                name: "Signup",          id: "/signup"},
+              {
+                name: "Order History",          id: "/order-history"},
+              {
+                name: "Account",          id: "/account"},
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            brandName="Elegance Atelier"
+            button={{
+              text: "Login",        href: "/login"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <main className="container mx-auto p-4 md:p-8 min-h-screen">
+          <div className="flex flex-col md:flex-row gap-8 items-start">
+            <div className="md:w-1/2">
+              <img src={dummyProduct.imageSrc} alt={dummyProduct.name} className="w-full h-auto object-cover rounded-lg shadow-lg" />
+            </div>
+            <div className="md:w-1/2 flex flex-col gap-4">
+              <h1 className="text-4xl font-light text-foreground">{dummyProduct.name}</h1>
+              <p className="text-2xl font-semibold text-primary-cta">{dummyProduct.price}</p>
+              <p className="text-foreground-secondary leading-relaxed">{dummyProduct.description}</p>
+              <div className="mt-6 flex flex-col sm:flex-row gap-4">
+                <button className="px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-full shadow-md hover:bg-opacity-90 transition-colors">Add to Cart</button>
+                <button className="px-6 py-3 border border-secondary-cta text-secondary-cta rounded-full shadow-md hover:bg-secondary-cta hover:text-secondary-cta-foreground transition-colors">Buy Now</button>
+              </div>
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            columns={[
+              {
+                items: [
+                  {
+                    label: "Home",              href: "/"},
+                  {
+                    label: "About Us",              href: "#about"},
+                  {
+                    label: "Collections",              href: "#products"},
+                  {
+                    label: "Shop",              href: "/shop"},
+                  {
+                    label: "Membership",              href: "#pricing"},
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Contact",              href: "#contact"},
+                  {
+                    label: "FAQ",              href: "#faq"},
+                  {
+                    label: "Login",              href: "/login"},
+                  {
+                    label: "Signup",              href: "/signup"},
+                  {
+                    label: "Cart",              href: "/cart"},
+                  {
+                    label: "Order History",              href: "/order-history"},
+                  {
+                    label: "Account",              href: "/account"}
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Privacy Policy",              href: "#"},
+                  {
+                    label: "Terms of Service",              href: "#"},
+                  {
+                    label: "Shipping & Returns",              href: "#"},
+                ],
+              },
+            ]}
+            logoText="Elegance Atelier"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}