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

Merge version_4 into main

src/app/page.tsx

@@ -2,17 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import { Star, Eye } from "lucide-react";
 import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
 export default function LandingPage() {
   return (
@@ -22,9 +17,9 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="largeSmallSizeLargeTitles"
-        background="noiseDiagonalGradient"
-        cardStyle="inset"
-        primaryButtonStyle="gradient"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
         headingFontWeight="medium"
     >
@@ -32,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"
@@ -43,11 +39,11 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{ variant: "rotated-rays-animated" }}
+      background={{ variant: "rotated-rays-static" }}
       title="Artistic Perspective"
       description="Redefining spaces with curated luxury art. Experience minimalism in its most elegant form."
       buttons={[{ text: "Explore Collection", href: "#products" }]}
-      buttonClassName="bg-yellow-500 text-black border-2 border-yellow-600 font-bold hover:bg-yellow-400"
+      buttonClassName="bg-[#1C1C1A] text-[#FAF9F6] border-none font-bold hover:bg-[#BFA15F]"
       carouselItems={[
         { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=1", imageAlt: "Art Piece 1" },
         { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=1", imageAlt: "Art Piece 2" },
@@ -59,12 +55,12 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="products" data-section="products">
+  <div id="products" data-section="products" className="bg-[#F2F0EB]">
       <ProductCardFour
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="split"
       gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       title="Featured Posters"
       description="A curated masonry gallery showcase of our finest luxury prints, ranging from abstract compositions to minimalist line art."
       products={[
@@ -73,11 +69,11 @@ export default function LandingPage() {
         { id: "m3", name: "Golden Hour", price: "$520", variant: "Photography", imageSrc: "http://img.b2bpic.net/free-photo/tropical-authentic-dining-room-interior-design-with-blank-picture-frame_53876-129845.jpg" },
         { id: "m4", name: "Simple Void", price: "$310", variant: "Minimalist", imageSrc: "http://img.b2bpic.net/free-photo/empty-wooden-frame-standing-floor-have-sofa-decoration_41470-5116.jpg" }
       ]}
-      actionButtonClassName="hover:scale-105 transition-transform"
+      actionButtonClassName="hover:text-[#BFA15F] transition-colors"
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="bg-[#FAF9F6]">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
       title="Curating Excellence"
@@ -91,19 +87,20 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="bg-[#F2F0EB]">
       <ContactText
       useInvertedBackground={false}
-      background={{ variant: "gradient-bars" }}
+      background={{ variant: "plain" }}
       text="Join our collector's circle to receive exclusive art previews and curated monthly newsletters."
       buttons={[{ text: "Contact Us", href: "mailto:hello@wallperspective.com" }]}
+      buttonClassName="bg-[#1C1C1A] text-[#FAF9F6] hover:bg-[#BFA15F]"
     />
   </div>
 
   <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>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
+  --background: #FAF9F6;
+  --card: #FFFFFF;
+  --foreground: #1A1A1A;
+  --primary-cta: #1C1C1A;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #F2F0EB;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #BFA15F;
+  --background-accent: #F2F0EB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);