Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -4,14 +4,13 @@ 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 { Award, Globe, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,7 +27,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" },
@@ -54,7 +53,7 @@ export default function LandingPage() {
         { 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: "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" }
       ]}
     />
@@ -118,17 +117,16 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      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" }
-      ]}
+      <MetricCardFourteen
       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>
 
@@ -148,7 +146,7 @@ export default function LandingPage() {
     />
   </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 +157,14 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
+  <div id="footer" data-section="footer" className="opacity-80 hover:opacity-100 transition-opacity duration-700">
+      <FooterLogoReveal
       logoText="Lumière"
-      columns={[
-        { title: "Shop", items: [{ label: "All Products", href: "#products" }, { label: "Bundles", href: "#" }] },
-        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Shipping", href: "#" }] }
-      ]}
+      leftLink={{ text: "Privacy", href: "#" }}
+      rightLink={{ text: "Terms", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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