Update src/app/page.tsx

src/app/page.tsx

@@ -4,15 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import { Droplets, Shield, Sparkles } from "lucide-react";
+import { Droplets, Shield, Sparkles, User, Info, Package, Phone } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -23,361 +23,146 @@ export default function LandingPage() {
         contentWidth="mediumLarge"
         sizing="medium"
         background="noiseDiagonalGradient"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="radial-glow"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Products", id: "products" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Lumina Skincare"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
+      <HeroSplitKpi
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "gradient-bars",
+      enableKpiAnimation={true}
-      }}
       title="Unveil Your Natural Radiance"
-      description="Experience the purity of nature with our botanical skin care collections, designed to nourish, revitalize, and restore your skin's youthful glow."
+      description="Discover botanical skincare designed to nourish and restore your skin’s true potential."
-      tag="Purely Organic"
+      imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-with-towel-using-beauty-product_1157-31103.jpg"
-      tagAnimation="slide-up"
+      kpis={[
-      buttons={[
+        { value: "98%", label: "Glowing Results" },
-        {
+        { value: "24h", label: "Deep Hydration" },
-          text: "Shop Collections",
+        { value: "100%", label: "Pure Organic" },
-          href: "#products",
-        },
-      ]}
-      buttonAnimation="slide-up"
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-with-towel-using-beauty-product_1157-31103.jpg",
-          imageAlt: "Model glowing skin",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-personal-hygiene-items-white-background-isolated_169016-19064.jpg",
-          imageAlt: "Serum texture",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238283.jpg",
-          imageAlt: "Botanical ingredients",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-towel-resting-her-head-hand_23-2148537384.jpg",
-          imageAlt: "Healthy skin close up",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/eucalyptus-populus-leaves-oats-oil-brush-la-stone-soap-concrete-backdrop_23-2148087701.jpg",
-          imageAlt: "Skincare bottle",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-natural-elements_23-2148201394.jpg",
-          imageAlt: "Hydrated skin",
-        },
       ]}
+      buttons={[{ text: "Shop Collections", href: "#products" }]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <TestimonialAboutCard
+      tag="Our Story"
+      title="Science Meets Botanical Wisdom"
+      description="At Lumina, we believe in the power of nature combined with dermatological innovation. Every batch is crafted with precision to ensure maximum potency and purity."
+      subdescription="We refuse to compromise on quality, sourcing only the finest rare botanical extracts for your daily ritual."
+      icon={Info}
+      imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238283.jpg"
       useInvertedBackground={false}
-      title="Science Meets Nature"
-      description={[
-        "At Lumina, we believe that your skin deserves the most potent, natural ingredients on Earth. Our formulas blend traditional botanical wisdom with modern dermatological science.",
-        "Every product is handcrafted in small batches, ensuring freshness and maximum potency to reveal your skin's brightest, clearest potential.",
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardMedia
+      <FeatureCardSeven
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="default"
+      title="The Lumina Promise"
+      description="Premium ingredients, sustainable sourcing, and transformative results for every skin type."
+      textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Pure Actives", description: "Rare plant-based extracts that work deep within your skin barrier.", imageSrc: "http://img.b2bpic.net/free-photo/grapefruit-oil-serum-bottle-put-green-light-background_1150-28091.jpg" },
-          id: "f1",
+        { title: "Deep Hydration", description: "Lock in essential moisture for a plump and vibrant complexion.", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-white-cream-blue-background_23-2152029099.jpg" },
-          title: "Potent Botanicals",
-          description: "Derived from rare plants, our actives work deeply to heal and rejuvenate.",
-          tag: "Nature-First",
-          imageSrc: "http://img.b2bpic.net/free-photo/grapefruit-oil-serum-bottle-put-green-light-background_1150-28091.jpg",
-        },
-        {
-          id: "f2",
-          title: "Deep Hydration",
-          description: "Moisture-locking complexes that restore balance and bounce throughout the day.",
-          tag: "Hydrating",
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-with-white-cream-blue-background_23-2152029099.jpg",
-        },
-        {
-          id: "f3",
-          title: "Gentle Cleansing",
-          description: "Purify your skin without stripping away the essential natural oils.",
-          tag: "Soothing",
-          imageSrc: "http://img.b2bpic.net/free-photo/aloe-vera-cucumber-with-beauty-cream_23-2148173814.jpg",
-        },
       ]}
-      title="Why Your Skin Loves Us"
-      description="Discover the unique benefits that set our botanical formulations apart."
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardTwo
+      <ProductCardThree
+      gridVariant="one-large-left-three-stacked-right"
       animationType="slide-up"
-      textboxLayout="default"
+      title="Curated Skin Essentials"
-      gridVariant="three-columns-all-equal-width"
+      description="Experience our best-selling botanical formulas for your daily glow."
+      textboxLayout="split"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Renew Serum", price: "$78", imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg" },
-          id: "p1",
+        { id: "p2", name: "Velvet Night Cream", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/beauty-cream-with-natural-elements_23-2148173802.jpg" },
-          brand: "Lumina",
+        { id: "p3", name: "Balance Toner", price: "$42", imageSrc: "http://img.b2bpic.net/free-photo/hand-sanitizer-gel-copy-space_23-2148758798.jpg" },
-          name: "Renew Serum",
+        { id: "p4", name: "Glow Brightener", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg" },
-          price: "$78",
-          rating: 5,
-          reviewCount: "124",
-          imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Lumina",
-          name: "Velvet Night Cream",
-          price: "$85",
-          rating: 5,
-          reviewCount: "98",
-          imageSrc: "http://img.b2bpic.net/free-photo/beauty-cream-with-natural-elements_23-2148173802.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Lumina",
-          name: "Balance Toner",
-          price: "$42",
-          rating: 4,
-          reviewCount: "210",
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-sanitizer-gel-copy-space_23-2148758798.jpg",
-        },
-        {
-          id: "p4",
-          brand: "Lumina",
-          name: "Glow Brightener",
-          price: "$65",
-          rating: 5,
-          reviewCount: "156",
-          imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Lumina",
-          name: "Aloe Calm Gel",
-          price: "$38",
-          rating: 4,
-          reviewCount: "342",
-          imageSrc: "http://img.b2bpic.net/free-photo/aloe-vera-cucumber-with-beauty-cream_23-2148173812.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Lumina",
-          name: "Golden Nectar Oil",
-          price: "$92",
-          rating: 5,
-          reviewCount: "89",
-          imageSrc: "http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382893.jpg",
-        },
       ]}
-      title="Best Sellers"
-      description="Explore our curated collection of botanical essentials for every skin type."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardOne
-      animationType="slide-up"
+      gridVariant="bento-grid"
-      textboxLayout="default"
+      animationType="depth-3d"
+      title="Clinical Excellence"
+      description="Evidence-based skincare results backed by science."
+      textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", title: "Radiance", value: "94%", description: "Visible clarity improvement.", icon: Sparkles },
-          id: "m1",
+        { id: "m2", title: "Hydration", value: "24h", description: "Long-lasting moisture retention.", icon: Droplets },
-          icon: Sparkles,
+        { id: "m3", title: "Support", value: "100%", description: "Barrier protection efficiency.", icon: Shield },
-          title: "Radiance Improvement",
-          value: "94%",
-        },
-        {
-          id: "m2",
-          icon: Droplets,
-          title: "Hydration Boost",
-          value: "24h",
-        },
-        {
-          id: "m3",
-          icon: Shield,
-          title: "Skin Barrier Support",
-          value: "100%",
-        },
       ]}
-      title="Proven Results"
-      description="Clinical studies show incredible improvements after consistent use."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardThirteen
+      showRating={true}
+      animationType="blur-reveal"
+      title="Community Love"
+      description="Hear from our glowing community members."
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", name: "Elena R.", handle: "@skinjoy", testimonial: "My skin feels transformed and completely rejuvenated!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-bed-sitting-pillow_273609-4819.jpg" },
-          id: "t1",
+        { id: "t2", name: "Sarah J.", handle: "@beautyguru", testimonial: "Finally, organic ingredients that actually work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-women-hanging-out_23-2149168545.jpg" },
-          title: "Life changer!",
-          quote: "My skin has never felt this soft or looked this bright.",
-          name: "Elena R.",
-          role: "User",
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-bed-sitting-pillow_273609-4819.jpg",
-        },
-        {
-          id: "t2",
-          title: "Truly organic",
-          quote: "I love that I can read all the ingredients on the bottle.",
-          name: "Sarah J.",
-          role: "Influencer",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-women-hanging-out_23-2149168545.jpg",
-        },
-        {
-          id: "t3",
-          title: "Instant glow",
-          quote: "The serum changed everything within two weeks.",
-          name: "Maya L.",
-          role: "Makeup Artist",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-book-close-up_23-2148973429.jpg",
-        },
-        {
-          id: "t4",
-          title: "So soothing",
-          quote: "Perfect for sensitive skin like mine.",
-          name: "Chloe B.",
-          role: "User",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-posing_23-2149652024.jpg",
-        },
-        {
-          id: "t5",
-          title: "Finally hydrated",
-          quote: "No more dry patches. I'm obsessed.",
-          name: "Jessica M.",
-          role: "Dermatologist Assistant",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-outdoor-portrait-brunette-short-hair-woman-with-broom_343596-703.jpg",
-        },
       ]}
-      title="Loved by Skin Enthusiasts"
-      description="Read what our community has to say about their journey to healthy skin."
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
       faqs={[
-        {
+        { id: "q1", title: "Vegan & Cruelty-Free?", content: "Yes, 100% certified." },
-          id: "q1",
+        { id: "q2", title: "Shipping?", content: "Global shipping available." },
-          title: "Are products vegan?",
-          content: "Yes, our entire collection is 100% vegan and cruelty-free.",
-        },
-        {
-          id: "q2",
-          title: "How long until I see results?",
-          content: "Most users see visible results within 2-4 weeks of consistent daily usage.",
-        },
-        {
-          id: "q3",
-          title: "Do you ship globally?",
-          content: "We ship to over 50 countries worldwide.",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/master-applying-makeup-smiling-blond-woman_23-2148113227.jpg"
+      title="Common Questions"
-      mediaAnimation="slide-up"
+      description="Everything you need to know."
-      title="Questions Answered"
+      textboxLayout="split"
-      description="Common curiosities about our process and ingredients."
       faqsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
+      tag="Newsletter"
+      title="Start Your Glow"
+      description="Get 15% off your first order by joining our community today."
+      background={{ variant: "plain" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Join Us"
-      title="Stay Glowing"
-      description="Sign up for 15% off your first order and exclusive skincare tips."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterLogoReveal
       logoText="Lumina Skincare"
-      columns={[
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-        {
+      rightLink={{ text: "Terms & Conditions", href: "#" }}
-          title: "Shop",
-          items: [
-            {
-              label: "All Products",
-              href: "#products",
-            },
-            {
-              label: "New Arrivals",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#",
-            },
-            {
-              label: "FAQ",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Blog",
-              href: "#",
-            },
-          ],
-        },
-      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}