Update src/app/page.tsx

Merge version_7 into main

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
 import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
@@ -11,14 +11,14 @@ import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterCard from "@/components/sections/footer/FooterCard";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles, Droplets, FlaskConical, Star, Instagram, Facebook, Linkedin } from "lucide-react";
+import { Droplets, FlaskConical, Star, Instagram, Facebook } from "lucide-react";
 
 export default function LuminaSkincarePage() {
     return (
         <ThemeProvider
             defaultButtonVariant="icon-arrow"
             defaultTextAnimation="entrance-slide"
-            borderRadius="none"
+            borderRadius="soft"
             contentWidth="medium"
             sizing="medium"
             background="none"
@@ -39,87 +39,102 @@ export default function LuminaSkincarePage() {
                     brandName="LUMINA"
                     button={{ text: "Shop Now", href: "#products" }}
                 />
-                <HeroCarouselLogo
+                <div id="hero">
-                    logoText="LUMINA"
+                    <HeroLogo
-                    description="Advanced skincare designed for radiant, healthy skin. Reveal your natural glow."
+                        logoText="LUMINA"
-                    buttons={[
+                        description="Advanced skincare designed for radiant, healthy skin. Reveal your natural glow."
-                        { text: "Discover Collection", href: "#products" },
+                        buttons={[{ text: "Discover Collection", href: "#products" }]}
-                    ]}
+                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CgyDENoeD9EWEraDkwxRjhwOZ4/uploaded-1777063254698-mg3vepro.png"
-                    slides={[
+                    />
-                        { videoSrc: "http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286703.jpg", videoAriaLabel: "Luxury serum bottle on reflective water" },
+                </div>
-                    ]}
+                <div id="about">
-                    showDimOverlay={true}
+                    <InlineImageSplitTextAbout
-                />
+                        className="pt-40"
-                <InlineImageSplitTextAbout
+                        useInvertedBackground={false}
-                    className="pt-40"
+                        heading={[
-                    heading={[
+                            { type: "text", content: "Pure science meets" },
-                        { type: "text", content: "Pure science meets" },
+                            { type: "image", src: "http://img.b2bpic.net/free-photo/gray-abstract-background-oil-bubble-texture-wallpaper_53876-142972.jpg", alt: "Texture" },
-                        { type: "image", src: "http://img.b2bpic.net/free-photo/gray-abstract-background-oil-bubble-texture-wallpaper_53876-142972.jpg", alt: "Texture" },
+                            { type: "text", content: "uncompromised luxury. We refine the art of radiance." },
-                        { type: "text", content: "uncompromised luxury. We refine the art of radiance." },
+                        ]}
-                    ]}
+                        buttons={[{ text: "Our Philosophy", href: "#" }]}
-                    buttons={[
+                    />
-                        { text: "Our Philosophy", href: "#" },
+                </div>
-                    ]}
+                <div id="ingredients">
-                />
+                    <FeatureCardOne
-                <FeatureCardOne
+                        tag="Skincare Essentials"
-                    tag="Skincare Essentials"
+                        tagIcon={Droplets}
-                    tagIcon={Droplets}
+                        title="Designed for Perfection"
-                    title="Designed for Perfection"
+                        description="Minimalist formulations, maximal results for every skin type."
-                    description="Minimalist formulations, maximal results for every skin type."
+                        textboxLayout="default"
-                    textboxLayout="default"
+                        useInvertedBackground={false}
-                    animationType="slide-up"
+                        animationType="slide-up"
-                    gridVariant="uniform-all-items-equal"
+                        gridVariant="uniform-all-items-equal"
-                    features={[
+                        features={[
-                        { title: "Hydration Serum", description: "Deep cellular moisture for an instant glow.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-elegant-skincare-bottles-white-textured-surface_181624-35842.jpg", imageAlt: "Serum" },
+                            { title: "Hydration Serum", description: "Deep cellular moisture for an instant glow.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-elegant-skincare-bottles-white-textured-surface_181624-35842.jpg", imageAlt: "Serum" },
-                        { title: "Luminous Cream", description: "Lock in radiance with our botanical complex.", imageSrc: "http://img.b2bpic.net/free-photo/open-container-moisturizing-cream-marble_23-2147878917.jpg", imageAlt: "Cream" },
+                            { title: "Luminous Cream", description: "Lock in radiance with our botanical complex.", imageSrc: "http://img.b2bpic.net/open-container-moisturizing-cream-marble_23-2147878917.jpg", imageAlt: "Cream" },
-                        { title: "Renewal Essence", description: "Overnight restoration for skin clarity.", imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-transparent-bottle_23-2149046484.jpg", imageAlt: "Essence" },
+                            { title: "Renewal Essence", description: "Overnight restoration for skin clarity.", imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-transparent-bottle_23-2149046484.jpg", imageAlt: "Essence" },
-                    ]}
+                        ]}
-                />
+                    />
-                <FeatureCardNine
+                </div>
-                    tag="Scientific Purity"
+                <div id="science">
-                    tagIcon={FlaskConical}
+                    <FeatureCardNine
-                    title="Rooted in Innovation"
+                        tag="Scientific Purity"
-                    description="Our clinical approach to botanical beauty"
+                        tagIcon={FlaskConical}
-                    showStepNumbers={true}
+                        title="Rooted in Innovation"
-                    animationType="slide-up"
+                        description="Our clinical approach to botanical beauty"
-                    features={[
+                        textboxLayout="default"
-                        { title: "Molecular Extraction", description: "Sourcing the purest botanical actives.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/closeup-diagnoses-white-illness-team-clean_1291-20.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286759.jpg" } },
+                        useInvertedBackground={false}
-                        { title: "Dermatological Test", description: "Rigorous trials for proven results.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/elder-woman-disinfecting-her-phone-while-wearing-medical-mask_23-2148492307.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-natural-cream-concept_23-2148565339.jpg" } },
+                        showStepNumbers={true}
-                        { title: "Sustainable Packaging", description: "Conscious beauty for the modern era.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/foundation-bottles-stands_23-2149511226.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-diagnosing-melanoma-body-female-patient_23-2149365767.jpg" } },
+                        animationType="slide-up"
-                    ]}
+                        features={[
-                />
+                            { title: "Molecular Extraction", description: "Sourcing the purest botanical actives.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/closeup-diagnoses-white-illness-team-clean_1291-20.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hyaluronic-acid-tratment_23-2149286759.jpg" } },
-                <FeatureCardMedia
+                            { title: "Dermatological Test", description: "Rigorous trials for proven results.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/elder-woman-disinfecting-her-phone-while-wearing-medical-mask_23-2148492307.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-natural-cream-concept_23-2148565339.jpg" } },
-                    tag="Luxury Results"
+                            { title: "Sustainable Packaging", description: "Conscious beauty for the modern era.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/foundation-bottles-stands_23-2149511226.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-diagnosing-melanoma-body-female-patient_23-2149365767.jpg" } },
-                    tagIcon={Star}
+                        ]}
-                    title="Why LUMINA?"
+                    />
-                    description="The intersection of nature and clinical expertise"
+                </div>
-                    animationType="slide-up"
+                <div id="features">
-                    features={[
+                    <FeatureCardMedia
-                        { id: "1", title: "Anti-Aging", description: "Targets fine lines with peptides.", tag: "Treatment", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-ballet-dancer-ballerina-pointe-girl-ballet-studio_1157-43898.jpg" },
+                        tag="Luxury Results"
-                        { id: "2", title: "Brightening", description: "Vitamin C enriched clarity.", tag: "Radiance", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-hydro-alcoholic-gel-with-copy-space_23-2148775358.jpg" },
+                        tagIcon={Star}
-                        { id: "3", title: "Protection", description: "Barrier support for daily defense.", tag: "Defense", imageSrc: "http://img.b2bpic.net/free-photo/gua-sha-cotton-arrangement-high-angle_23-2149357123.jpg" },
+                        title="Why LUMINA?"
-                    ]}
+                        description="The intersection of nature and clinical expertise"
-                />
+                        textboxLayout="default"
-                <TestimonialCardFive
+                        useInvertedBackground={false}
-                    tag="Results"
+                        animationType="slide-up"
-                    title="Real Radiance"
+                        features={[
-                    description="Stories from our community"
+                            { id: "1", title: "Anti-Aging", description: "Targets fine lines with peptides.", tag: "Treatment", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-ballet-dancer-ballerina-pointe-girl-ballet-studio_1157-43898.jpg" },
-                    textboxLayout="default"
+                            { id: "2", title: "Brightening", description: "Vitamin C enriched clarity.", tag: "Radiance", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-hydro-alcoholic-gel-with-copy-space_23-2148775358.jpg" },
-                    testimonials={[
+                            { id: "3", title: "Protection", description: "Barrier support for daily defense.", tag: "Defense", imageSrc: "http://img.b2bpic.net/free-photo/gua-sha-cotton-arrangement-high-angle_23-2149357123.jpg" },
-                        { id: "1", name: "Elena V.", date: "March 2025", title: "Total skin transformation", quote: "My skin has never felt this luminous. Lumina is a true ritual.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-with-pink-sweater_23-2148749911.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-with-gold-body-painting_23-2150466380.jpg" },
+                        ]}
-                        { id: "2", name: "Marcus K.", date: "February 2025", title: "Effortless hydration", quote: "Minimalist, clean, and highly effective. My daily go-to.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-985.jpg", imageSrc: "http://img.b2bpic.net/free-photo/sunlight-falling-olive-oil-bottles-white-backdrop_23-2147853791.jpg" },
+                    />
-                    ]}
+                </div>
-                />
+                <div id="reviews">
-                <ContactSplitForm
+                    <TestimonialCardFive
-                    title="Experience Lumina"
+                        tag="Results"
-                    description="Questions about your skin journey? Connect with our experts."
+                        title="Real Radiance"
-                    imageSrc="http://img.b2bpic.net/free-photo/arrangement-with-flowers-white-background_23-2148345624.jpg"
+                        description="Stories from our community"
-                    inputs={[
+                        textboxLayout="default"
-                        { name: "name", type: "text", placeholder: "Full Name", required: true },
+                        useInvertedBackground={false}
-                        { name: "email", type: "email", placeholder: "Email", required: true },
+                        testimonials={[
-                    ]}
+                            { id: "1", name: "Elena V.", date: "March 2025", title: "Total skin transformation", quote: "My skin has never felt this luminous. Lumina is a true ritual.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-with-pink-sweater_23-2148749911.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-with-gold-body-painting_23-2150466380.jpg" },
-                    textarea={{ name: "message", placeholder: "Your skin goals...", rows: 4 }}
+                            { id: "2", name: "Marcus K.", date: "February 2025", title: "Effortless hydration", quote: "Minimalist, clean, and highly effective. My daily go-to.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-985.jpg", imageSrc: "http://img.b2bpic.net/free-photo/sunlight-falling-olive-oil-bottles-white-backdrop_23-2147853791.jpg" },
-                />
+                        ]}
+                    />
+                </div>
+                <div id="contact">
+                    <ContactSplitForm
+                        title="Experience Lumina"
+                        description="Questions about your skin journey? Connect with our experts."
+                        useInvertedBackground={false}
+                        imageSrc="http://img.b2bpic.net/free-photo/arrangement-with-flowers-white-background_23-2148345624.jpg"
+                        inputs={[
+                            { name: "name", type: "text", placeholder: "Full Name", required: true },
+                            { name: "email", type: "email", placeholder: "Email", required: true },
+                        ]}
+                        textarea={{ name: "message", placeholder: "Your skin goals...", rows: 4 }}
+                    />
+                </div>
                 <FooterCard
                     logoText="LUMINA"
                     copyrightText="© 2025 LUMINA Skincare. Minimalist beauty defined."

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #FFFFFF;
-  --card: #f9f9f9;
+  --card: #F7F7F7;
-  --foreground: #000f06e6;
+  --foreground: #000000;
-  --primary-cta: #0a7039;
+  --primary-cta: #000000;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #EFEFEF;
   --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
+  --accent: #E2E2E2;
-  --background-accent: #c4c4c4;
+  --background-accent: #D6D6D6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);