Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -19,35 +19,23 @@ export default function LandingPage() {
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
         defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
         contentWidth="compact"
-        sizing="largeSmallSizeMediumTitles"
-        background="blurBottom"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="extrabold"
+        sizing="largeSizeMediumTitles"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Products", id: "products" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Lumina Beauty"
     />
@@ -55,32 +43,13 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Unveil Your Inner Glow"
       description="Experience professional-grade makeup designed to celebrate your unique beauty. Lumina brings elegance to every look."
       mediaItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jgcrni",
-          imageAlt: "Luxurious Beauty Campaign",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=acppv7",
-          imageAlt: "Editorial Model Portrait",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=23blgm",
-          imageAlt: "Professional Makeup Toolkit",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cwo9uz",
-          imageAlt: "Textured Product Detail",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9dr5nf",
-          imageAlt: "Glamorous Editorial Shot",
-        },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jgcrni", imageAlt: "Luxurious Beauty Campaign" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=acppv7", imageAlt: "Editorial Model Portrait" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=23blgm", imageAlt: "Professional Makeup Toolkit" },
       ]}
       mediaAnimation="blur-reveal"
     />
@@ -96,7 +65,6 @@ export default function LandingPage() {
       icon={Sparkles}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=drs5lg"
       mediaAnimation="slide-up"
-      imageAlt="Makeup artist at work studio"
     />
   </div>
 
@@ -105,24 +73,8 @@ export default function LandingPage() {
       animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Parabens-free",
-          "Cruelty-free sourcing",
-          "No synthetic fragrances",
-          "Phthalate-free",
-          "Gluten-free",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Mineral-rich ingredients",
-          "Clinically tested formulas",
-          "Sustainable glass packaging",
-          "Dermatologist approved",
-          "Vitamin-infused",
-        ],
-      }}
+      negativeCard={{ items: ["Parabens-free", "Cruelty-free sourcing", "No synthetic fragrances", "Phthalate-free", "Gluten-free"] }}
+      positiveCard={{ items: ["Mineral-rich ingredients", "Clinically tested formulas", "Sustainable glass packaging", "Dermatologist approved", "Vitamin-infused"] }}
       title="Why Lumina Beauty"
       description="Excellence is in every detail of our process."
     />
@@ -135,42 +87,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        {
-          id: "1",
-          name: "Silk Lipstick",
-          price: "$28",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ny7yoq",
-        },
-        {
-          id: "2",
-          name: "Nude Eyeshadow Palette",
-          price: "$45",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sgwsae",
-        },
-        {
-          id: "3",
-          name: "Luminous Foundation",
-          price: "$38",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2alqbk",
-        },
-        {
-          id: "4",
-          name: "Ultra-Volume Mascara",
-          price: "$24",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u32fna",
-        },
-        {
-          id: "5",
-          name: "Radiant Blush",
-          price: "$32",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e231o3",
-        },
-        {
-          id: "6",
-          name: "Liquid Illuminator",
-          price: "$29",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h41ran",
-        },
+        { id: "1", name: "Silk Lipstick", price: "$28", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ny7yoq" },
+        { id: "2", name: "Nude Eyeshadow Palette", price: "$45", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sgwsae" },
+        { id: "3", name: "Luminous Foundation", price: "$38", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2alqbk" },
       ]}
       title="The Collection"
       description="Hand-picked essentials for a flawless finish."
@@ -184,31 +103,8 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "15k+",
-          description: "Happy Customers",
-        },
-        {
-          id: "m2",
-          value: "98%",
-          description: "Formula Satisfaction",
-        },
-        {
-          id: "m3",
-          value: "24h",
-          description: "Wear Test Duration",
-        },
-        {
-          id: "m4",
-          value: "50+",
-          description: "Global Regions",
-        },
-        {
-          id: "m5",
-          value: "100%",
-          description: "Recyclable Pack",
-        },
+        { id: "m1", value: "15k+", description: "Happy Customers" },
+        { id: "m2", value: "98%", description: "Formula Satisfaction" },
       ]}
       title="Quality Certified"
       description="Our dedication to quality is recognized globally."
@@ -221,28 +117,7 @@ export default function LandingPage() {
       testimonial="Lumina Beauty completely transformed my daily routine. The texture is unmatched and the finish is truly radiant."
       rating={5}
       author="Sarah Miller"
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fsaxwq",
-          alt: "Happy customer using makeup",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rvmqvo",
-          alt: "Makeup influencer beauty blogger",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3jdp8q",
-          alt: "Smiling elegant woman face",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=38knof",
-          alt: "Portrait of modern woman",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9ewm9p",
-          alt: "Confident beauty brand customer",
-        },
-      ]}
+      avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fsaxwq", alt: "Sarah Miller" }]}
       ratingAnimation="slide-up"
       avatarsAnimation="blur-reveal"
     />
@@ -253,31 +128,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "Are your products cruelty-free?",
-          content: "Yes, we are 100% cruelty-free.",
-        },
-        {
-          id: "f2",
-          title: "Do you offer worldwide shipping?",
-          content: "Yes, we ship to over 50 countries globally.",
-        },
-        {
-          id: "f3",
-          title: "What is the return policy?",
-          content: "We offer a 30-day money-back guarantee.",
-        },
-        {
-          id: "f4",
-          title: "How to choose my shade?",
-          content: "We have a virtual try-on tool available on each product page.",
-        },
-        {
-          id: "f5",
-          title: "Where are your ingredients sourced?",
-          content: "Our ingredients are ethically sourced from sustainable farms worldwide.",
-        },
+        { id: "f1", title: "Are your products cruelty-free?", content: "Yes, we are 100% cruelty-free." },
+        { id: "f2", title: "Do you offer worldwide shipping?", content: "Yes, we ship to over 50 countries globally." },
       ]}
       title="Common Questions"
       description="Answers to your queries about our brand and products."
@@ -286,53 +138,29 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactSplit
+      background={{ variant: "gradient-bars" }}
+      tag="Contact Us"
+      title="Customer Inquiries"
+      description="Have questions about our products or your order? We're here to help."
+      buttonText="Send Message"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cwo9uz"
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Stay Updated"
-      title="Join the Beauty Insider"
-      description="Sign up for exclusive access to launches and beauty tips."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Shop",
-              href: "#products",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Support",
-              href: "#faq",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Terms of Use",
-              href: "#",
-            },
-          ],
-        },
-      ]}
+      <FooterBaseReveal
       logoText="Lumina Beauty"
+      columns={[
+        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "New Arrivals", href: "#products" }] },
+        { title: "Account", items: [{ label: "My Orders", href: "#" }, { label: "Support", href: "#faq" }] },
+        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }, { label: "Facebook", href: "#" }] }
+      ]}
+      copyrightText="© 2024 Lumina Beauty. All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #fbfbfb;
   --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
+  --foreground: #1a1a1a;
+  --primary-cta: #d6409f;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f1f1f1;
   --secondary-cta-text: #1c1c1c;
-  --accent: #6139e6;
-  --background-accent: #b3a8e8;
+  --accent: #8a2be2;
+  --background-accent: #f3e5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);