src/app/page.tsx

@@ -10,7 +10,7 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import ProductCardFour from '@/components/sections/ecommerce/productDetail/ProductDetailCard';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import { Sparkles, Star, User, Zap } from "lucide-react";
 
@@ -66,6 +66,7 @@ export default function LuxurySalonPage() {
             description="Elite services tailored to your aesthetic aspirations."
             animationType="blur-reveal"
             textboxLayout="split"
+            useInvertedBackground={false}
             features={[
               { id: "s1", title: "Bespoke Styling", descriptions: ["Precision cut and tailored texture."] },
               { id: "s2", title: "Rejuvenation Therapy", descriptions: ["Deep hydrating scalp treatments."] }
@@ -75,19 +76,27 @@ export default function LuxurySalonPage() {
 
         <div id="products" data-section="products">
            <ProductCardFour
-             layout="section"
-             name="Aura Elixir"
-             price="€180"
-             images={[{ src: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg", alt: "Elixir" }]}
+             gridVariant="uniform-all-items-equal"
+             animationType="blur-reveal"
+             textboxLayout="split"
+             useInvertedBackground={false}
+             title="Aura Elixir"
              description="Our most potent, gold-infused radiance serum."
+             products={[
+               { id: "p1", name: "Aura Elixir", price: "€180", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg" },
+               { id: "p2", name: "Radiance Oil", price: "€120", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg" },
+               { id: "p3", name: "Hydra Serum", price: "€140", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg" }
+             ]}
            />
         </div>
 
         <div id="testimonials" data-section="testimonials">
           <TestimonialCardSix
             title="Client Echoes"
+            description="What our elite clients say."
             animationType="slide-up"
             textboxLayout="split"
+            useInvertedBackground={false}
             testimonials={[{ id: "t1", name: "Elena V.", handle: "@elena_v", testimonial: "Pure perfection in every detail." }]}
           />
         </div>
@@ -95,8 +104,10 @@ export default function LuxurySalonPage() {
         <div id="pricing" data-section="pricing">
           <PricingCardNine
             title="Investment in Aura"
+            description="Tailored pricing for bespoke experiences."
             animationType="scale-rotate"
             textboxLayout="split"
+            useInvertedBackground={false}
             plans={[
               { id: "p1", title: "Essence", price: "€150", period: "/session", features: ["Styling", "Hydration"], button: { text: "Reserve" } }
             ]}
@@ -106,8 +117,10 @@ export default function LuxurySalonPage() {
         <div id="metrics" data-section="metrics">
           <MetricCardThree
             title="Salon Impact"
+            description="Measurable excellence in luxury care."
             animationType="depth-3d"
             textboxLayout="split"
+            useInvertedBackground={false}
             metrics={[
               { id: "m1", icon: Star, title: "Excellence Rating", value: "5.0" },
               { id: "m2", icon: User, title: "Elite Clients", value: "10k+" }
@@ -119,6 +132,7 @@ export default function LuxurySalonPage() {
           <ContactText
             text="Join our exclusive mailing list for private booking access."
             background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
           />
         </div>