Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,43 +2,39 @@
 
 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() {
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
         borderRadius="pill"
-        contentWidth="compact"
-        sizing="large"
-        background="grid"
-        cardStyle="gradient-radial"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
+        contentWidth="medium"
+        sizing="medium"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Shop",          id: "#products"},
-        {
-          name: "About",          id: "#about"},
-        {
-          name: "Benefits",          id: "#features"},
-        {
-          name: "FAQ",          id: "#faq"},
+        { name: "Shop", id: "#products" },
+        { name: "About", id: "#about" },
+        { name: "Benefits", id: "#features" },
+        { name: "FAQ", id: "#faq" },
       ]}
       brandName="rhode"
     />
@@ -46,212 +42,121 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "gradient-bars"}}
-      title="Glazed skin, delivered."
-      description="Rhode creates skincare essentials designed to nourish your skin barrier and give you that signature glow."
+      background={{ variant: "glowing-orb" }}
+      title="The Glow is in the Details."
+      description="Chic, intentional, and high-performance skincare for your barrier. Experience the Rhode aesthetic."
       kpis={[
-        {
-          value: "100%",          label: "Clinically Tested"},
-        {
-          value: "Vegan",          label: "Cruelty Free"},
-        {
-          value: "Safe",          label: "Dermatologist Tested"},
+        { value: "100%", label: "Pure Ingredients" },
+        { value: "Vegan", label: "Cruelty-Free" },
+        { value: "Chic", label: "Skincare Essential" },
       ]}
       enableKpiAnimation={true}
-      imageSrc="http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382914.jpg"
-      imageAlt="Rhode skincare product"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-sensual-brunette-standing-naked-smiling-carefree_176420-20671.jpg",          alt: "Happy customer testimonial"},
-        {
-          src: "http://img.b2bpic.net/free-photo/cute-young-woman-skincare-portrait_624325-3441.jpg",          alt: "Skincare enthusiast profile"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg",          alt: "Glowing skin portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg",          alt: "Radiant skin user"},
-        {
-          src: "http://img.b2bpic.net/free-photo/headshot-attractive-female-with-charming-smile-having-blue-eyes-dimples-cheeks-rejoicing-summer-vacations-going-spend-them-abroad-with-her-boyfriend-beauty-emotions-concept_176532-8266.jpg",          alt: "Rhode community member"},
-      ]}
-      avatarText="Loved by 10k+ customers"
-      marqueeItems={[
-        {
-          type: "text",          text: "Dermatologist Formulated"},
-        {
-          type: "text",          text: "Fragrance-Free"},
-        {
-          type: "text",          text: "Gluten-Free"},
-        {
-          type: "text",          text: "Vegan & Cruelty Free"},
-        {
-          type: "text",          text: "Barrier Friendly"},
-      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/cosmetic-product-branding-with-neutral-background_23-2149504627.jpg"
+      imageAlt="Rhode luxury skincare"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="about" data-section="about">
       <TextAbout
       useInvertedBackground={true}
-      title="Less is more. We believe in simplicity."
+      title="Effortless beauty, redefined."
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={false}
+      <FeatureCardTwelve
+      animationType="blur-reveal"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      title="The Rhode Aesthetic"
+      description="Performance skincare that doubles as a chic accessory."
       features={[
-        {
-          title: "Deep Hydration",          description: "Powerful ingredients to lock in moisture all day.",          imageSrc: "http://img.b2bpic.net/free-vector/20-skin-solid-glyph-icon-presentation_1142-22865.jpg"},
-        {
-          title: "Clean Ingredients",          description: "Free from harsh chemicals and synthetic fillers.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-body-butter-leaves-plain-background_23-2148241839.jpg"},
-        {
-          title: "Barrier Support",          description: "Fortifies your skin for a healthy, radiant finish.",          imageSrc: "http://img.b2bpic.net/free-photo/blooming-spring-portrait-beautiful-woman_23-2151954365.jpg"},
+        { 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"] },
       ]}
-      title="Why Rhode Works"
-      description="Formulated with performance-based ingredients that hydrate, plump, and protect your skin."
     />
   </div>
 
   <div id="products" data-section="products">
       <ProductCardThree
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",          name: "Lip Treatment",          price: "$16",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg"},
-        {
-          id: "p2",          name: "Face Cream",          price: "$29",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cream-leaf-with-white-background_23-2148241826.jpg"},
-        {
-          id: "p3",          name: "Glazing Serum",          price: "$29",          imageSrc: "http://img.b2bpic.net/free-photo/different-pipettes-with-cotton-balls_23-2148317653.jpg"},
-        {
-          id: "p4",          name: "Skincare Set",          price: "$68",          imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263168.jpg"},
-        {
-          id: "p5",          name: "Body Moisturizer",          price: "$28",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg"},
-        {
-          id: "p6",          name: "Facial Mist",          price: "$24",          imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept_23-2147672777.jpg"},
+        { id: "p1", name: "Signature Lip Gloss", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/lip-gloss-pink-nude_23-2149504680.jpg" },
+        { id: "p2", name: "Glazing Serum", price: "$32", imageSrc: "http://img.b2bpic.net/free-photo/skincare-serum-bottle_23-2149504690.jpg" },
+        { id: "p3", name: "Rich Moisturizer", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/moisturizing-face-cream_23-2149504700.jpg" },
       ]}
-      title="Shop the Essentials"
-      description="Explore our curated collection of everyday skincare must-haves."
+      title="Curated Essentials"
+      description="Our most loved products, reimagined for your glow."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      description="What our community says about their skincare journey."
+      <TestimonialCardTwelve
+      cardAnimation="blur-reveal"
+      useInvertedBackground={true}
+      cardTitle="Loved by the Chic"
+      cardTag="Testimonials"
       testimonials={[
-        {
-          id: "1",          name: "Sarah J.",          handle: "@sarahskin",          testimonial: "My skin has never felt better! Total game changer.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-getting-special-skin-treatment-beautiful-girl-applying-serum-isolated-white-background-smooth-skin-without-wrinkles_657921-610.jpg"},
-        {
-          id: "2",          name: "Michael L.",          handle: "@mlglow",          testimonial: "Simple, effective, and beautiful. Obsessed.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-perfect-light-brown-skin-beautiful-curly-black-hair-smiling-camera-studio_633478-963.jpg"},
-        {
-          id: "3",          name: "Emily R.",          handle: "@emmy_r",          testimonial: "Finally found a routine that works for my sensitive skin.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg"},
-        {
-          id: "4",          name: "David K.",          handle: "@dk_skincare",          testimonial: "Everything I need in one sleek routine. Fantastic products.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blue-eyed-female-with-gym-outfit_181624-14551.jpg"},
-        {
-          id: "5",          name: "Jane D.",          handle: "@janed_glow",          testimonial: "Rhode makes my mornings so much easier and my skin glowing.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-young-woman_23-2149403019.jpg"},
+        { 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="Beloved by You"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      description="Clinically proven results for your skin barrier."
+      <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: "95%",          title: "Improved Hydration",          description: "Across clinical trials.",          imageSrc: "http://img.b2bpic.net/free-photo/drag-person-putting-makeup_23-2149256321.jpg"},
-        {
-          id: "m2",          value: "98%",          title: "Dermatologist Approved",          description: "Highly trusted formulas.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydro-alcoholic-gel-with-copy-space_23-2148775333.jpg"},
-        {
-          id: "m3",          value: "100%",          title: "Customer Satisfaction",          description: "Loved by our global community.",          imageSrc: "http://img.b2bpic.net/free-photo/adult-male-getting-hair-loss-treatment_23-2149152771.jpg"},
+        { id: "m1", value: "98%", description: "Visible radiance improvement" },
+        { id: "m2", value: "100%", description: "Loved for style & performance" },
       ]}
-      title="Proven Results"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      description="Got questions? We have answers."
+      <FaqSplitText
+      faqsAnimation="blur-reveal"
+      sideTitle="Glossary"
+      sideDescription="Everything you need to know about our signature glow."
       faqs={[
-        {
-          id: "q1",          title: "Are Rhode products vegan?",          content: "Yes, all our products are 100% vegan."},
-        {
-          id: "q2",          title: "Is it safe for sensitive skin?",          content: "Yes, our formulas are dermatologist-tested and gentle."},
-        {
-          id: "q3",          title: "Where can I track my order?",          content: "You will receive a tracking link in your confirmation email."},
+        { 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="Frequently Asked Questions"
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <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" }}
       useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient"}}
-      text="Join the Rhode community for updates, tips, and skincare secrets."
-      buttons={[
-        {
-          text: "Sign Up for Newsletter",          href: "#"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Shop",              href: "#products"},
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "FAQ",              href: "#faq"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",              href: "#"},
-            {
-              label: "Twitter",              href: "#"},
-            {
-              label: "Support",              href: "#"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy Policy",              href: "#"},
-            {
-              label: "Terms of Service",              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: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);