Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -4,14 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+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 { Award, Globe, Star } from "lucide-react";
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 
 export default function LandingPage() {
   return (
@@ -28,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" },
@@ -53,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}
@@ -118,37 +128,32 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardFourteen
-      animationType="depth-3d"
-      textboxLayout="inline-image"
-      useInvertedBackground={false}
-      metrics={[
-        { id: "m1", icon: Star, title: "Avg. Customer Rating", value: "4.9/5" },
-        { id: "m2", icon: Globe, title: "Countries Served", value: "40+" },
-        { id: "m3", icon: Award, title: "Industry Awards", value: "12" }
-      ]}
       title="Impact by Numbers"
-      description="Our community thrives on radiant, healthy skin transformations."
+      tag="Our Success"
+      useInvertedBackground={false}
+      metricsAnimation="slide-up"
+      metrics={[
+        { id: "m1", value: "4.9/5", description: "Customer Rating" },
+        { id: "m2", value: "40+", description: "Countries Served" },
+        { id: "m3", value: "12", description: "Industry Awards" }
+      ]}
     />
   </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" }}
@@ -159,16 +164,14 @@ 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">
-      <FooterBaseCard
+      <FooterLogoReveal
       logoText="Lumière"
-      columns={[
+      leftLink={{ text: "Privacy", href: "#" }}
-        { title: "Shop", items: [{ label: "All Products", href: "#products" }, { label: "Bundles", href: "#" }] },
+      rightLink={{ text: "Terms", href: "#" }}
-        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Shipping", href: "#" }] }
-      ]}
     />
   </div>
       </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);