Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -2,9 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { Sparkles, Leaf, ShieldCheck, Mail } from "lucide-react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqBase from '@/components/sections/faq/FaqBase';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -30,25 +31,15 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "home"},
-          id: "home",
-        },
         {
-          name: "About",
+          name: "About",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Products",
+          name: "Products",          id: "products"},
-          id: "products",
-        },
         {
-          name: "Testimonials",
+          name: "Testimonials",          id: "testimonials"},
-          id: "testimonials",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Luminous"
     />
@@ -57,19 +48,14 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroLogoBillboard
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       logoText="Luminous Skincare"
       description="Unlock your natural radiance with our sustainably sourced, nature-inspired formulas."
       buttons={[
         {
-          text: "Shop Now",
+          text: "Shop Now",          href: "#products"},
-          href: "#products",
-        },
         {
-          text: "Our Story",
+          text: "Our Story",          href: "#about"},
-          href: "#about",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg"
       mediaAnimation="slide-up"
@@ -93,47 +79,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
+          id: "p1",          name: "Botanical Serum",          price: "$45",          variant: "30ml",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286705.jpg"},
-          name: "Botanical Serum",
-          price: "$45",
-          variant: "30ml",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286705.jpg",
-        },
         {
-          id: "p2",
+          id: "p2",          name: "Gentle Cleanser",          price: "$28",          variant: "150ml",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543055.jpg"},
-          name: "Gentle Cleanser",
-          price: "$28",
-          variant: "150ml",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543055.jpg",
-        },
         {
-          id: "p3",
+          id: "p3",          name: "Night Repair",          price: "$52",          variant: "50ml",          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420707.jpg"},
-          name: "Night Repair",
-          price: "$52",
-          variant: "50ml",
-          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420707.jpg",
-        },
         {
-          id: "p4",
+          id: "p4",          name: "Glow Mist",          price: "$32",          variant: "100ml",          imageSrc: "http://img.b2bpic.net/free-photo/black-white-beauty-product_23-2151307249.jpg"},
-          name: "Glow Mist",
-          price: "$32",
-          variant: "100ml",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-white-beauty-product_23-2151307249.jpg",
-        },
         {
-          id: "p5",
+          id: "p5",          name: "Daily Moisturizer",          price: "$38",          variant: "50ml",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-with-beauty-products_23-2149440626.jpg"},
-          name: "Daily Moisturizer",
-          price: "$38",
-          variant: "50ml",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-with-beauty-products_23-2149440626.jpg",
-        },
         {
-          id: "p6",
+          id: "p6",          name: "Active Balm",          price: "$35",          variant: "30ml",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-argan-product-composition_23-2148955781.jpg"},
-          name: "Active Balm",
-          price: "$35",
-          variant: "30ml",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-argan-product-composition_23-2148955781.jpg",
-        },
       ]}
       title="Our Essentials"
       description="Discover the building blocks of your perfect daily ritual."
@@ -147,59 +103,28 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Sarah J.",          role: "Creative Director",          company: "Studio L",          rating: 5,
-          name: "Sarah J.",
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-sitting-outdoor-cafe_1262-5818.jpg"},
-          role: "Creative Director",
-          company: "Studio L",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-sitting-outdoor-cafe_1262-5818.jpg",
-        },
         {
-          id: "2",
+          id: "2",          name: "Michael T.",          role: "Architect",          company: "DesignCo",          rating: 5,
-          name: "Michael T.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-massaging-her-neck-using-gua-sha_23-2149259918.jpg"},
-          role: "Architect",
-          company: "DesignCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-massaging-her-neck-using-gua-sha_23-2149259918.jpg",
-        },
         {
-          id: "3",
+          id: "3",          name: "Emily R.",          role: "Journalist",          company: "MediaHub",          rating: 5,
-          name: "Emily R.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-lavander-field_1303-24158.jpg"},
-          role: "Journalist",
-          company: "MediaHub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-lavander-field_1303-24158.jpg",
-        },
         {
-          id: "4",
+          id: "4",          name: "David K.",          role: "Founder",          company: "Startups",          rating: 5,
-          name: "David K.",
+          imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-smiling-holding-white-flower-beige-wall_176420-2685.jpg"},
-          role: "Founder",
-          company: "Startups",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-smiling-holding-white-flower-beige-wall_176420-2685.jpg",
-        },
         {
-          id: "5",
+          id: "5",          name: "Chloe B.",          role: "Teacher",          company: "EduNet",          rating: 5,
-          name: "Chloe B.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-pearls-make-up_23-2148871319.jpg"},
-          role: "Teacher",
-          company: "EduNet",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-pearls-make-up_23-2148871319.jpg",
-        },
       ]}
       kpiItems={[
         {
-          value: "15k+",
+          value: "15k+",          label: "Happy Customers"},
-          label: "Happy Customers",
-        },
         {
-          value: "4.9/5",
+          value: "4.9/5",          label: "Avg. Rating"},
-          label: "Avg. Rating",
-        },
         {
-          value: "20+",
+          value: "20+",          label: "Botanical Sources"},
-          label: "Botanical Sources",
-        },
       ]}
       title="Loved By Glow Getters"
       description="Hear from our community of radiant skin advocates."
@@ -212,20 +137,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",
+          id: "f1",          title: "Are your products vegan?",          content: "Yes, all our formulas are 100% plant-based and cruelty-free."},
-          title: "Are your products vegan?",
-          content: "Yes, all our formulas are 100% plant-based and cruelty-free.",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "How long for results?",          content: "Most users see a visible glow within 2 weeks of consistent daily usage."},
-          title: "How long for results?",
-          content: "Most users see a visible glow within 2 weeks of consistent daily usage.",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Do you ship internationally?",          content: "Yes, we ship to over 50 countries worldwide."},
-          title: "Do you ship internationally?",
-          content: "Yes, we ship to over 50 countries worldwide.",
-        },
       ]}
       title="Your Questions, Answered"
       description="Common inquiries about our natural skincare philosophy."
@@ -240,16 +156,10 @@ export default function LandingPage() {
       description="Have questions? Reach out to our skincare experts."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Name",          required: true,
-          type: "text",
-          placeholder: "Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Email",          required: true,
-          type: "email",
-          placeholder: "Email",
-          required: true,
         },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/cannabis-oil-cbd-oil-cannabis-extract-medical-cannabis-concept_1150-13453.jpg?_wi=2"
@@ -257,48 +167,12 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+    <FooterCard
       logoText="Luminous"
-      columns={[
+      socialLinks={[
-        {
+        { icon: Sparkles, href: "#", ariaLabel: "Instagram" },
-          title: "Shop",
+        { icon: Leaf, href: "#", ariaLabel: "Facebook" },
-          items: [
+        { icon: ShieldCheck, href: "#", ariaLabel: "Twitter" }
-            {
-              label: "Best Sellers",
-              href: "#products",
-            },
-            {
-              label: "New Arrivals",
-              href: "#products",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Our Story",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-          ],
-        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
+  --background: #fbfaf8;
-  --card: #efe7dd;
+  --card: #f3f0ec;
-  --foreground: #2b180a;
+  --foreground: #2d2a26;
-  --primary-cta: #2b180a;
+  --primary-cta: #c19a83;
   --primary-cta-text: #f6f0e9;
-  --secondary-cta: #efe7dd;
+  --secondary-cta: #efebe7;
   --secondary-cta-text: #2b180a;
-  --accent: #94877c;
+  --accent: #d8c7b8;
-  --background-accent: #afa094;
+  --background-accent: #e6e0da;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);