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

Merge version_4 into main

src/app/page.tsx

@@ -3,15 +3,11 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/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 (
@@ -21,9 +17,9 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="largeSmallSizeLargeTitles"
-        background="noiseDiagonalGradient"
+        background="none"
-        cardStyle="inset"
+        cardStyle="outline"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
         headingFontWeight="medium"
     >
@@ -31,22 +27,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Gallery", id: "#products" },
-          id: "#hero",
+        { name: "Story", id: "#about" },
-        },
+        { name: "Product", id: "/product-detail" },
-        {
+        { name: "Contact", id: "#contact" },
-          name: "Gallery",
-          id: "#products",
-        },
-        {
-          name: "Story",
-          id: "#about",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
       ]}
       brandName="Wall Perspective"
     />
@@ -54,333 +39,69 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{
+      background={{ variant: "rotated-rays-static" }}
-        variant: "rotated-rays-animated",
-      }}
       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-[#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: "1",
+        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=1", imageAlt: "Art Piece 2" },
-          imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=1",
+        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/colorful-floral-shirt-close-up_23-2148237610.jpg", imageAlt: "Art Piece 3" },
-          imageAlt: "Art Piece 1",
+        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg", imageAlt: "Art Piece 4" },
-        },
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-wearing-blue-dress-high-heels-sitting-fireplace_132075-12009.jpg", imageAlt: "Art Piece 5" },
-        {
+        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blank-frame-concept_23-2148804382.jpg", imageAlt: "Art Piece 6" },
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=1",
-          imageAlt: "Art Piece 2",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/colorful-floral-shirt-close-up_23-2148237610.jpg",
-          imageAlt: "Art Piece 3",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg",
-          imageAlt: "Art Piece 4",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-wearing-blue-dress-high-heels-sitting-fireplace_132075-12009.jpg",
-          imageAlt: "Art Piece 5",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blank-frame-concept_23-2148804382.jpg",
-          imageAlt: "Art Piece 6",
-        },
       ]}
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="products" data-section="products" className="bg-[#F2F0EB]">
+      <ProductCardFour
+      animationType="blur-reveal"
+      textboxLayout="split"
+      gridVariant="asymmetric-60-wide-40-narrow"
+      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={[
+        { id: "m1", name: "Abstract Flux", price: "$450", variant: "Abstract", imageSrc: "http://img.b2bpic.net/free-photo/abstract-layered-wavy-terrain-shades-green-yellow_779267-3539.jpg" },
+        { id: "m2", name: "City Lines", price: "$380", variant: "Minimalist", imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151004978.jpg" },
+        { 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:text-[#BFA15F] transition-colors"
+    />
+  </div>
+
+  <div id="about" data-section="about" className="bg-[#FAF9F6]">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
       title="Curating Excellence"
       description="We believe that the walls of your home should reflect the depth of your character. Each piece is sourced for its timeless aesthetic and emotional resonance."
       metrics={[
-        {
+        { value: "500+", title: "Artworks" },
-          value: "500+",
+        { value: "15", title: "Countries" },
-          title: "Artworks",
+        { value: "99%", title: "Satisfaction" },
-        },
-        {
-          value: "15",
-          title: "Countries",
-        },
-        {
-          value: "99%",
-          title: "Satisfaction",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/female-artist-sketching-skeleton-paper-with-pencil-workbench_23-2147889804.jpg"
-      imageAlt="Artisan craftsmanship"
-      mediaAnimation="blur-reveal"
-      metricsAnimation="slide-up"
     />
   </div>
 
-  <div id="products" data-section="products">
+  <div id="contact" data-section="contact" className="bg-[#F2F0EB]">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="two-columns-alternating-heights"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Midnight Stillness",
-          price: "$340",
-          variant: "Gallery Frame",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-desk-with-computer-flowers_23-2152003930.jpg",
-        },
-        {
-          id: "p2",
-          name: "Architectural Echo",
-          price: "$280",
-          variant: "Canvas Print",
-          imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151004978.jpg",
-        },
-        {
-          id: "p3",
-          name: "Distant Horizon",
-          price: "$410",
-          variant: "Metal Print",
-          imageSrc: "http://img.b2bpic.net/free-photo/tropical-authentic-dining-room-interior-design-with-blank-picture-frame_53876-129845.jpg",
-        },
-        {
-          id: "p4",
-          name: "Golden Geometry",
-          price: "$310",
-          variant: "Gallery Frame",
-          imageSrc: "http://img.b2bpic.net/free-photo/home-plant-vase-decoration-composition_23-2149090621.jpg",
-        },
-        {
-          id: "p5",
-          name: "Nature's Shadow",
-          price: "$295",
-          variant: "Canvas Print",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-layered-wavy-terrain-shades-green-yellow_779267-3539.jpg",
-        },
-        {
-          id: "p6",
-          name: "Minimal Voice",
-          price: "$220",
-          variant: "Paper Print",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-wooden-frame-standing-floor-have-sofa-decoration_41470-5116.jpg",
-        },
-      ]}
-      title="Selected Gallery"
-      description="Limited edition prints crafted with museum-grade precision."
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeatureCardMedia
-      animationType="scale-rotate"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Museum Quality",
-          description: "Archival paper and inks ensured to last a lifetime.",
-          tag: "Quality",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg",
-          imageAlt: "professional headshot dark",
-        },
-        {
-          id: "f2",
-          title: "Sustainable",
-          description: "Eco-friendly wood and recycled materials used in all frames.",
-          tag: "Eco",
-          imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=2",
-          imageAlt: "professional headshot dark",
-        },
-        {
-          id: "f3",
-          title: "Global Shipping",
-          description: "Secure, fast delivery to your door, anywhere in the world.",
-          tag: "Logistics",
-          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=2",
-          imageAlt: "professional headshot dark",
-        },
-      ]}
-      title="Why Perspective"
-      description="Dedicated to bringing professional art to your home environment."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={true}
-      title="Our Impact"
-      tag="Milestones"
-      metrics={[
-        {
-          id: "m1",
-          value: "12K",
-          description: "Happy Collectors",
-        },
-        {
-          id: "m2",
-          value: "450",
-          description: "Featured Artists",
-        },
-        {
-          id: "m3",
-          value: "1.2M",
-          description: "Art Enthusiasts",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="depth-3d"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah Miller",
-          role: "Architect",
-          company: "Studio Urban",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hyzzlt",
-        },
-        {
-          id: "2",
-          name: "Liam Connor",
-          role: "Designer",
-          company: "Modern Life",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ux7f3",
-        },
-        {
-          id: "3",
-          name: "Elena Rossi",
-          role: "Director",
-          company: "Galleria Art",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jswwrk",
-        },
-        {
-          id: "4",
-          name: "Marcus Chen",
-          role: "Investor",
-          company: "Sky Holdings",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7rqnpn",
-        },
-        {
-          id: "5",
-          name: "Ava Sterling",
-          role: "Photographer",
-          company: "Vision Lab",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k78zm4",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "4.9",
-          label: "Avg Rating",
-        },
-        {
-          value: "98%",
-          label: "Retention",
-        },
-        {
-          value: "12K+",
-          label: "Reviews",
-        },
-      ]}
-      title="Collector Feedback"
-      description="Hear what our global community of collectors says."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Do you ship internationally?",
-          content: "Yes, we ship to over 150 countries worldwide using secure art shipping partners.",
-        },
-        {
-          id: "q2",
-          title: "How long is lead time?",
-          content: "Prints are typically processed and shipped within 3-5 business days.",
-        },
-        {
-          id: "q3",
-          title: "Do you offer returns?",
-          content: "Yes, we offer returns within 30 days of receiving your art piece in pristine condition.",
-        },
-      ]}
-      title="Questions?"
-      description="We are here to assist with your art collection inquiries."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "gradient-bars",
-      }}
       text="Join our collector's circle to receive exclusive art previews and curated monthly newsletters."
-      buttons={[
+      buttons={[{ text: "Contact Us", href: "mailto:hello@wallperspective.com" }]}
-        {
+      buttonClassName="bg-[#1C1C1A] text-[#FAF9F6] hover:bg-[#BFA15F]"
-          text: "Contact Us",
-          href: "mailto:hello@wallperspective.com",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        {
+        { items: [{ label: "Our Gallery", href: "#products" }, { label: "About Us", href: "#about" }, { label: "Product Detail", href: "/product-detail" }] },
-          items: [
+        { items: [{ label: "Shipping", href: "#" }, { label: "Support", href: "#contact" }, { label: "Privacy", href: "#" }] },
-            {
-              label: "Our Gallery",
-              href: "#products",
-            },
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Blog",
-              href: "#",
-            },
-          ],
-        },
-        {
-          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;
+  --background: #FAF9F6;
-  --card: #1a1a1a;
+  --card: #FFFFFF;
-  --foreground: #ffffffe6;
+  --foreground: #1A1A1A;
-  --primary-cta: #e6e6e6;
+  --primary-cta: #1C1C1A;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #F2F0EB;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
+  --accent: #BFA15F;
-  --background-accent: #737373;
+  --background-accent: #F2F0EB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);