Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import TextAbout from '@/components/sections/about/TextAbout';
 
 export default function LandingPage() {
@@ -65,16 +65,17 @@ export default function LandingPage() {
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        { title: "Glossy Finish", description: "High-shine lip care for an elevated look.", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-product-beauty-branding_23-2149504640.jpg" },
-        { title: "Rich Nutrition", description: "Nutrient-dense formulas for soft, healthy skin.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-routine-essential_23-2149504660.jpg" },
-        { title: "Chic Design", description: "Sophisticated packaging that looks beautiful anywhere.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg" },
-      ]}
+      <FeatureCardTwelve
+      animationType="blur-reveal"
+      textboxLayout="split"
+      useInvertedBackground={true}
       title="The Rhode Aesthetic"
       description="Performance skincare that doubles as a chic accessory."
+      features={[
+        { id: "f1", label: "01", title: "Glossy Finish", items: ["High-shine lip care", "Elevated look", "Glossy texture"] },
+        { id: "f2", label: "02", title: "Rich Nutrition", items: ["Nutrient-dense", "Healthy skin", "Deep hydration"] },
+        { id: "f3", label: "03", title: "Chic Design", items: ["Sophisticated packaging", "Beautiful design", "Modern aesthetic"] },
+      ]}
     />
   </div>
 
@@ -95,68 +96,67 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="blur-reveal"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      description="Join the global community embracing the glow."
+      <TestimonialCardTwelve
+      cardAnimation="blur-reveal"
+      useInvertedBackground={true}
+      cardTitle="Loved by the Chic"
+      cardTag="Testimonials"
       testimonials={[
-        { id: "1", name: "Maya A.", handle: "@maya.glow", testimonial: "The lip gloss is absolutely iconic. Chic and nourishing.", rating: 5 },
-        { id: "2", name: "Leo S.", handle: "@leoskin", testimonial: "Perfect routine for that effortless look. Simply expensive.", rating: 5 },
+        { id: "1", name: "Maya A.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling_23-2149504780.jpg" },
+        { id: "2", name: "Leo S.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-minimal_23-2149504790.jpg" },
       ]}
-      showRating={true}
-      title="Loved by the Chic"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
+      <MetricCardTwo
+      animationType="blur-reveal"
+      gridVariant="bento-grid"
+      textboxLayout="split"
+      useInvertedBackground={false}
+      title="Proven Glow"
       description="Elevating your daily beauty ritual with proven care."
       metrics={[
-        { id: "m1", value: "98%", title: "Glow Index", description: "Visible radiance improvement.", imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-splash_23-2149504720.jpg" },
-        { id: "m2", value: "100%", title: "Chic Appeal", description: "Loved for style & performance.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-texture_23-2149504730.jpg" },
+        { id: "m1", value: "98%", description: "Visible radiance improvement" },
+        { id: "m2", value: "100%", description: "Loved for style & performance" },
       ]}
-      title="Proven Glow"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      description="Everything you need to know about our signature glow."
+      <FaqSplitText
+      faqsAnimation="blur-reveal"
+      sideTitle="Glossary"
+      sideDescription="Everything you need to know about our signature glow."
       faqs={[
         { id: "q1", title: "Are these glosses sticky?", content: "Not at all. Our formula is designed for smooth, glassy comfort." },
         { id: "q2", title: "Is Rhode dermatologist-tested?", content: "Yes, all our formulas are rigorously tested for your skin barrier." },
       ]}
-      title="Glossary"
-      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
+      <ContactSplit
+      tag="Exclusive Access"
+      title="Join the Rhode Circle"
+      description="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
       background={{ variant: "sparkles-gradient" }}
-      text="Subscribe to the Rhode journal for beauty secrets and exclusive early access."
-      buttons={[{ text: "Join the Circle", href: "#" }]}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        { items: [{ label: "Shop", href: "#products" }, { label: "Journal", href: "#" }] },
-        { items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
-        { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
-      ]}
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/skincare-luxury-branding_23-2149504655.jpg"
       logoText="rhode"
+      columns={[
+        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "Journal", href: "#" }] },
+        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
+        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdf8d9;
-  --card: #fbf2b5;
-  --foreground: #4b3621;
-  --primary-cta: #7a5c37;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #f1e5a0;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #2a2928;
-  --accent: #d4b483;
-  --background-accent: #f3e5ab;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);