Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -10,7 +10,8 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 
 export default function LandingPage() {
   return (
@@ -27,7 +28,7 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="animate-in fade-in duration-1000">
       <NavbarStyleFullscreen
       navItems={[
         { name: "Collection", id: "#products" },
@@ -52,13 +53,23 @@ export default function LandingPage() {
         { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/light-textile-material-fine-mesh_23-2148066733.jpg", imageAlt: "Luxury cream jar" },
         { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-natural-argan-oil-dropper_23-2149016620.jpg", imageAlt: "Organic serum bottle" },
         { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-with-beauty-products_23-2149440672.jpg", imageAlt: "Beauty set" },
-        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-flower_23-2150512472.jpg", imageAlt: "Natural essence" },
+        { id: "4", imageSrc: "http://img.b2bpic.net/front-view-woman-posing-with-flower_23-2150512472.jpg", imageAlt: "Natural essence" },
-        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449094.jpg", imageAlt: "Glowing skin serum" },
+        { id: "5", imageSrc: "http://img.b2bpic.net/skin-care-banner-concept-with-lotion_23-2149449094.jpg", imageAlt: "Glowing skin serum" },
         { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/front-view-skin-oil-dropper_23-2148761494.jpg", imageAlt: "Botanical jar" }
       ]}
     />
   </div>
 
+  <div id="social-proof" data-section="social-proof">
+      <SocialProofOne
+      title="Trusted by Beauty Experts"
+      description="Our ingredients are handpicked from verified ethical sources worldwide."
+      names={["Vogue", "Harper's Bazaar", "Allure", "Elle", "Byrdie"]}
+      textboxLayout="default"
+      useInvertedBackground={true}
+    />
+  </div>
+
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
       useInvertedBackground={true}
@@ -131,22 +142,18 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+    <TestimonialCardFifteen
-      useInvertedBackground={true}
+        testimonial="The best skincare line I've used. My skin has never felt more radiant!"
-      testimonials={[
+        author="Elena R."
-        { id: "t1", name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/woman-look-mirror-eyeshadow-palette_197531-32894.jpg" },
+        rating={5}
-        { id: "t2", name: "Marcus S.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-outdoor_624325-1223.jpg" },
+        ratingAnimation="blur-reveal"
-        { id: "t3", name: "Sophie K.", imageSrc: "http://img.b2bpic.net/free-photo/little-girl-painting-with-flour-her-mother-face_23-2148327944.jpg" },
+        avatarsAnimation="blur-reveal"
-        { id: "t4", name: "Julian D.", imageSrc: "http://img.b2bpic.net/free-photo/positive-pleased-caucasian-woman-keeps-hands-chin_273609-28170.jpg" },
+        useInvertedBackground={false}
-        { id: "t5", name: "Maya W.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-pretty-woman-skin-care_624325-3175.jpg" }
+        avatars={[{ src: "http://img.b2bpic.net/free-photo/woman-look-mirror-eyeshadow-palette_197531-32894.jpg", alt: "Elena R." }]}
-      ]}
-      cardTitle="Loved by Thousands"
-      cardTag="Testimonials"
-      cardAnimation="slide-up"
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="animate-in slide-in-from-bottom-8 duration-1000">
       <ContactCTA
       useInvertedBackground={false}
       background={{ variant: "radial-gradient" }}
@@ -157,7 +164,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="opacity-80 hover:opacity-100 transition-opacity duration-700">
       <FooterLogoReveal
       logoText="Lumière"
       leftLink={{ text: "Privacy", href: "#" }}
@@ -167,4 +174,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #f6f0e9;
-  --card: #dad6cd;
+  --card: #efe7dd;
-  --foreground: #2a2928;
+  --foreground: #2b180a;
-  --primary-cta: #2a2928;
+  --primary-cta: #2b180a;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #94877c;
-  --background-accent: #c6b180;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);