Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Leaf, Recycle, ShieldCheck, Sparkles } from "lucide-react";
+import { Leaf, Recycle, ShieldCheck, Sparkles, Mail, Phone, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,14 +32,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "About", id: "about" },
-          name: "About",          id: "about"},
+        { name: "Collection", id: "products" },
-        {
+        { name: "Testimonials", id: "testimonials" },
-          name: "Collection",          id: "products"},
+        { name: "FAQ", id: "faq" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Testimonials",          id: "testimonials"},
-        {
-          name: "FAQ",          id: "faq"},
       ]}
       brandName="Lumina Skincare"
     />
@@ -47,47 +44,18 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Radiance Refined"
       description="Discover a new standard of clean, minimalist luxury skincare designed to rejuvenate your natural beauty with every application."
       kpis={[
-        {
+        { value: "100%", label: "Natural Ingredients" },
-          value: "100%",          label: "Natural Ingredients"},
+        { value: "24h", label: "Active Hydration" },
-        {
+        { value: "50k+", label: "Happy Customers" },
-          value: "24h",          label: "Active Hydration"},
-        {
-          value: "50k+",          label: "Happy Customers"},
       ]}
       enableKpiAnimation={true}
       imageSrc="http://img.b2bpic.net/free-photo/make-up-concept-with-foundation_23-2149030367.jpg"
       imageAlt="Luxurious skincare products on stone"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg",          alt: "Happy woman with radiant skin"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-1098.jpg",          alt: "Serene woman with clear complexion"},
-        {
-          src: "http://img.b2bpic.net/free-photo/natural-beauty-portrait-beautiful-spa-woman-perfect-fresh-skin_1258-135256.jpg",          alt: "Natural beauty spa model"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-friendly-amazed-young-caucasian-female-stylish-top-with-open-shoulders-looking-with-happy-excited-smile-keeping-hands-her-chest-expressing-positive-attitude_343059-2985.jpg",          alt: "Happy customer smiling"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-lying-bed-early-morning_176420-3629.jpg",          alt: "Radiant woman in morning light"},
-      ]}
-      avatarText="Join 50k+ radiant souls"
-      marqueeItems={[
-        {
-          type: "text",          text: "Cruelty-Free"},
-        {
-          type: "text",          text: "Sustainable Glass"},
-        {
-          type: "text",          text: "Dermatologist Approved"},
-        {
-          type: "text",          text: "Ethically Sourced"},
-        {
-          type: "text",          text: "Clinical Efficacy"},
-      ]}
     />
   </div>
 
@@ -110,15 +78,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Vegan Formula", description: "100% cruelty-free ingredients.", bentoComponent: "reveal-icon", icon: Leaf },
-          title: "Vegan Formula",          description: "100% cruelty-free ingredients.",          bentoComponent: "reveal-icon",          icon: Leaf,
+        { title: "Recyclable Glass", description: "Sustainable packaging solutions.", bentoComponent: "reveal-icon", icon: Recycle },
-        },
+        { title: "Dermatologist Tested", description: "Clinical safety and efficacy.", bentoComponent: "reveal-icon", icon: ShieldCheck },
-        {
-          title: "Recyclable Glass",          description: "Sustainable packaging solutions.",          bentoComponent: "reveal-icon",          icon: Recycle,
-        },
-        {
-          title: "Dermatologist Tested",          description: "Clinical safety and efficacy.",          bentoComponent: "reveal-icon",          icon: ShieldCheck,
-        },
       ]}
       title="The Lumina Standard"
       description="Excellence in every drop."
@@ -132,18 +94,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", name: "Hydration Serum", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-plant_23-2149046487.jpg" },
-          id: "1",          name: "Hydration Serum",          price: "$85",          imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-plant_23-2149046487.jpg"},
+        { id: "2", name: "Day Cream", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg" },
-        {
+        { id: "3", name: "Cleansing Oil", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/front-view-healthy-argan-oil-arrangement_23-2148989094.jpg" },
-          id: "2",          name: "Day Cream",          price: "$65",          imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg"},
-        {
-          id: "3",          name: "Cleansing Oil",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-healthy-argan-oil-arrangement_23-2148989094.jpg"},
-        {
-          id: "4",          name: "Night Mask",          price: "$95",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242185.jpg"},
-        {
-          id: "5",          name: "Balancing Toner",          price: "$50",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-cosmetic-products_23-2148619984.jpg"},
-        {
-          id: "6",          name: "Radiance Eye Cream",          price: "$70",          imageSrc: "http://img.b2bpic.net/free-photo/composition-skin-beauty-products_23-2148761497.jpg"},
       ]}
       title="Shop the Collection"
       description="Explore our curated essentials."
@@ -155,16 +108,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", title: "Life Changing", quote: "My skin has never felt this hydrated and soft.", name: "Sarah J.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg" },
-          id: "1",          title: "Life Changing",          quote: "My skin has never felt this hydrated and soft.",          name: "Sarah J.",          role: "Creative Director",          imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg"},
-        {
-          id: "2",          title: "Absolute Luxury",          quote: "Finally found products that don't irritate my sensitive skin.",          name: "Michael R.",          role: "Architect",          imageSrc: "http://img.b2bpic.net/free-photo/interested-lady-posing-with-smile-jocund-young-woman-expressing-happiness_197531-14036.jpg"},
-        {
-          id: "3",          title: "Simply Radiant",          quote: "The glow is real. I get compliments all the time.",          name: "Emily K.",          role: "Founder",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-woman-posing_23-2148263495.jpg"},
-        {
-          id: "4",          title: "Worth Every Cent",          quote: "High-end results without the harsh chemical feel.",          name: "David W.",          role: "Executive",          imageSrc: "http://img.b2bpic.net/free-photo/lovely-woman-holding-eyeshadow-palette_23-2148398709.jpg"},
-        {
-          id: "5",          title: "Pure Magic",          quote: "Clean ingredients, powerful results. Amazing.",          name: "Sophia L.",          role: "Consultant",          imageSrc: "http://img.b2bpic.net/free-photo/summer-portrait-lovely-asian-woman-with-flower-hairs-posing-garden_273443-632.jpg"},
       ]}
       title="Loved by Thousands"
       description="Hear what our radiant community has to say."
@@ -175,74 +119,52 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
+      names={["Vogue", "Harper's Bazaar", "ELLE"]}
-        "Vogue",        "Harper's Bazaar",        "ELLE",        "Cosmopolitan",        "Allure",        "Forbes",        "Glamour"]}
       title="As Featured In"
       description="Recognized for our dedication to luxury and cleanliness."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqBase
-      useInvertedBackground={false}
+      title="Frequently Asked Questions"
+      description="Find answers to common questions about our products, shipping, and returns."
       faqs={[
-        {
+        { id: "q1", title: "Are your products cruelty-free?", content: "Yes, we are 100% cruelty-free and vegan." },
-          id: "q1",          title: "Are your products cruelty-free?",          content: "Yes, we are 100% cruelty-free and vegan."},
+        { id: "q2", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee." },
-        {
+        { id: "q3", title: "How long will my order take?", content: "Orders typically ship within 24 hours." },
-          id: "q2",          title: "What is your return policy?",          content: "We offer a 30-day money-back guarantee."},
-        {
-          id: "q3",          title: "How long will my order take?",          content: "Orders typically ship within 24 hours."},
       ]}
-      sideTitle="Questions?"
-      sideDescription="We're here to help you choose the best products for your skin."
       faqsAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      buttons={[{ text: "Contact Support", href: "#contact" }]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactSplitForm
+      title="Get in Touch"
+      description="Have questions or need a personalized consultation? Reach out and our team will get back to you within 24 hours."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true },
+      ]}
+      textarea={{ name: "message", placeholder: "How can we help?", rows: 4 }}
       useInvertedBackground={false}
-      background={{
+      buttonText="Send Message"
-        variant: "plain"}}
+      imageSrc="http://img.b2bpic.net/free-photo/close-up-friendly-amazed-young-caucasian-female-stylish-top-with-open-shoulders-looking-with-happy-excited-smile-keeping-hands-her-chest-expressing-positive-attitude_343059-2985.jpg"
-      title="Join Our Glow Circle"
-      description="Sign up for exclusive offers and skincare tips."
-      tag="Stay Connected"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterBaseCard
-      columns={[
-        {
-          title: "Shop",          items: [
-            {
-              label: "All Products",              href: "#"},
-            {
-              label: "Serum",              href: "#"},
-            {
-              label: "Moisturizer",              href: "#"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQ",              href: "#"},
-            {
-              label: "Shipping",              href: "#"},
-            {
-              label: "Returns",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
-          ],
-        },
-      ]}
       logoText="Lumina"
+      columns={[
+        { title: "Shop", items: [{ label: "All Products", href: "#" }, { label: "Serum", href: "#" }] },
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
+        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+      ]}
+      copyrightText="© 2025 Lumina Skincare. All rights reserved."
     />
   </div>
       </ReactLenis>