Update src/app/product-detail/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -27,9 +27,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        { name: "Home", id: "#hero" },
+        { name: "Home", id: "/" },
         { name: "Gallery", id: "#products" },
         { name: "Story", id: "#about" },
+        { name: "Product", id: "/product-detail" },
         { name: "Contact", id: "#contact" },
       ]}
       brandName="Wall Perspective"
@@ -72,7 +73,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="bg-[#FAF9F6]">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
       title="Curating Excellence"
@@ -99,7 +100,7 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "Our Gallery", href: "#products" }, { label: "About Us", href: "#about" }, { label: "Blog", href: "#" }] },
+        { items: [{ label: "Our Gallery", href: "#products" }, { label: "About Us", href: "#about" }, { label: "Product Detail", href: "/product-detail" }] },
         { items: [{ label: "Shipping", href: "#" }, { label: "Support", href: "#contact" }, { label: "Privacy", href: "#" }] },
       ]}
       logoText="Wall Perspective"

src/app/product-detail/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Gallery", id: "/#products" },
+              { name: "Product", id: "/product-detail" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Wall Perspective"
+          />
+        </div>
+        <div id="related" data-section="related">
+             <ProductCardFour 
+                title="Related Products" 
+                gridVariant="uniform-all-items-equal" 
+                animationType="blur-reveal" 
+                textboxLayout="default" 
+                useInvertedBackground={false}
+                description="Explore more luxury art prints for your collection."
+             />
+        </div>
+        <div id="testimonials" data-section="testimonials">
+             <TestimonialCardThirteen 
+                title="Client Testimonials" 
+                showRating={true} 
+                animationType="blur-reveal" 
+                textboxLayout="default" 
+                useInvertedBackground={true}
+                testimonials={[
+                    { id: "1", name: "Jane Doe", handle: "@janedoe", testimonial: "Absolutely stunning quality!", rating: 5 },
+                    { id: "2", name: "John Smith", handle: "@johnsmith", testimonial: "Fast shipping and beautiful packaging.", rating: 5 }
+                ]}
+                description="Hear what our clients have to say about our art."
+             />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis 
+            logoText="Wall Perspective" 
+            columns={[
+              { items: [{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }] }
+            ]} 
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}