Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
@@ -30,61 +30,45 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Shop", id: "#products" },
-          name: "Shop",          id: "#products"},
+        { name: "Rituals", id: "#features" },
-        {
+        { name: "Community", id: "#testimonials" },
-          name: "Rituals",          id: "#features"},
-        {
-          name: "Community",          id: "#testimonials"},
       ]}
       brandName="Softly"
-      button={{
+      button={{ text: "Shop Skincare", href: "#products" }}
-        text: "Shop Skincare",        href: "#products"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       title="Skincare, but softly"
       description="Clinical formulas. Gentle rituals. Designed for real skin."
       buttons={[
-        {
+        { text: "Explore Products", href: "#products" },
-          text: "Explore Products",          href: "#products"},
+        { text: "Build Routine", href: "#" },
-        {
-          text: "Build Routine",          href: "#"},
       ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-mirror-chair-flower_23-2149409089.jpg", imageAlt: "minimalist skincare serum bottle" },
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-mirror-chair-flower_23-2149409089.jpg",          imageAlt: "minimalist skincare serum bottle"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-flowers-high-angle_23-2149551364.jpg", imageAlt: "minimalist skincare serum bottle" },
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-moisturizing-cream-brush-flower-alarm-marble_23-2147878918.jpg", imageAlt: "minimalist skincare serum bottle" },
-          imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-flowers-high-angle_23-2149551364.jpg",          imageAlt: "minimalist skincare serum bottle"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-moisturizing-cream-brush-flower-alarm-marble_23-2147878918.jpg",          imageAlt: "minimalist skincare serum bottle"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-eucalyptus-plant_23-2149200310.jpg",          imageAlt: "minimalist skincare serum bottle"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/star-shape-gingerbread-cookies-with-cup-herbal-tea-cinnamons_114579-26631.jpg",          imageAlt: "minimalist skincare serum bottle"},
       ]}
       mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardNineteen
+      <FeatureCardTwentySeven
       textboxLayout="split"
+      animationType="slide-up"
       useInvertedBackground={false}
-      features={[
-        {
-          tag: "AM",          title: "Cleanse & Hydrate",          subtitle: "Refresh your day",          description: "Starting the morning with soft hydration that locks in moisture.",          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-refreshing-drink-consulting-her-agenda_23-2147640373.jpg"},
-        {
-          tag: "PM",          title: "Repair & Restore",          subtitle: "Deep nourishment",          description: "Rebuild your skin barrier while you sleep with rich botanical blends.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186323.jpg"},
-        {
-          tag: "WEEKLY",          title: "Reset Mask",          subtitle: "A gentle reset",          description: "Weekly deep detox to soothe and clarify your complexion gently.",          imageSrc: "http://img.b2bpic.net/free-photo/two-caucasian-blonde-women-different-ages-are-tasting-cosmetic-product-while-sitting-white-background-skin-care-hydration-concept_197531-31442.jpg"},
-      ]}
       title="Your Daily Ritual"
       description="Carefully curated steps to help your skin breathe and reset."
+      features={[
+        { id: "am", title: "Cleanse & Hydrate", descriptions: ["Refresh your day with soft hydration."], imageSrc: "http://img.b2bpic.net/free-photo/girl-with-refreshing-drink-consulting-her-agenda_23-2147640373.jpg" },
+        { id: "pm", title: "Repair & Restore", descriptions: ["Deep nourishment while you sleep."], imageSrc: "http://img.b2bpic.net/free-photo/young-woman-preparing-her-bath-time_23-2149186323.jpg" },
+        { id: "weekly", title: "Reset Mask", descriptions: ["A gentle weekly detox reset."], imageSrc: "http://img.b2bpic.net/free-photo/two-caucasian-blonde-women-different-ages-are-tasting-cosmetic-product-while-sitting-white-background-skin-care-hydration-concept_197531-31442.jpg" },
+      ]}
     />
   </div>
 
@@ -95,18 +79,9 @@ export default function LandingPage() {
       animationType="slide-up"
       useInvertedBackground={true}
       products={[
-        {
+        { id: "p1", name: "Calm Serum", price: "$28", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-drinks-summer-still-life_23-2148993820.jpg" },
-          id: "p1",          name: "Calm Serum",          price: "$28",          variant: "30ml",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-drinks-summer-still-life_23-2148993820.jpg"},
+        { id: "p2", name: "Hydrate Cream", price: "$32", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-blushes_23-2149030355.jpg" },
-        {
+        { id: "p3", name: "Gentle Cleanser", price: "$24", variant: "150ml", imageSrc: "http://img.b2bpic.net/free-photo/medical-dropper_187299-47450.jpg" },
-          id: "p2",          name: "Hydrate Cream",          price: "$32",          variant: "50ml",          imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-blushes_23-2149030355.jpg"},
-        {
-          id: "p3",          name: "Gentle Cleanser",          price: "$24",          variant: "150ml",          imageSrc: "http://img.b2bpic.net/free-photo/medical-dropper_187299-47450.jpg"},
-        {
-          id: "p4",          name: "Barrier Oil",          price: "$38",          variant: "30ml",          imageSrc: "http://img.b2bpic.net/free-photo/shadow-oil-bottle-with-olives-tea-strainer-white-backdrop_23-2147853863.jpg"},
-        {
-          id: "p5",          name: "Reset Mask",          price: "$26",          variant: "100ml",          imageSrc: "http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449117.jpg"},
-        {
-          id: "p6",          name: "Night Balm",          price: "$34",          variant: "50ml",          imageSrc: "http://img.b2bpic.net/free-photo/refreshing-drink-with-peach-arrangement_23-2150928933.jpg"},
       ]}
       title="Our Essentials"
       description="Simple, clean formulas designed to harmonize with your skin."
@@ -119,12 +94,8 @@ export default function LandingPage() {
       title="Clinical Results"
       tag="Transparency"
       metrics={[
-        {
+        { id: "m1", value: "98%", description: "Reported calmer skin" },
-          id: "m1",          value: "98%",          description: "Reported calmer skin"},
+        { id: "m2", value: "24h", description: "Lasting hydration boost" },
-        {
-          id: "m2",          value: "24h",          description: "Lasting hydration boost"},
-        {
-          id: "m3",          value: "100%",          description: "Cruelty-free formulas"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -135,16 +106,7 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "1", title: "Life Changing", quote: "My skin has never felt this calm.", name: "Emma L.", role: "Creative" },
-          id: "1",          title: "Life Changing",          quote: "My skin has never felt this calm.",          name: "Emma L.",          role: "Creative",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-topless-women-posing_23-2149123468.jpg"},
-        {
-          id: "2",          title: "Daily Ritual",          quote: "I actually look forward to cleansing now.",          name: "Marcus J.",          role: "Designer",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-posing-with-flower_23-2150396580.jpg"},
-        {
-          id: "3",          title: "So Gentle",          quote: "Perfect for my reactive skin type.",          name: "Sarah K.",          role: "Teacher",          imageSrc: "http://img.b2bpic.net/free-photo/woman-suffering-from-body-dysmorphia_23-2150879649.jpg"},
-        {
-          id: "4",          title: "Pure Magic",          quote: "Simple, clean, and truly effective.",          name: "Alex W.",          role: "Student",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-natural-young-woman-portrait_23-2148994713.jpg"},
-        {
-          id: "5",          title: "Soft Glow",          quote: "The routine really changed my morning.",          name: "Chloe T.",          role: "Artist",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-vitiligo_23-2149012605.jpg"},
       ]}
       title="Skin Notes"
       description="Real stories from our community."
@@ -156,12 +118,7 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "q1", title: "Is it suitable for sensitive skin?", content: "Yes, our formulas are tested for maximum gentleness." },
-          id: "q1",          title: "Is it suitable for sensitive skin?",          content: "Yes, our formulas are tested for maximum gentleness."},
-        {
-          id: "q2",          title: "How do I build a routine?",          content: "Start with our cleanse and hydrate serum basics."},
-        {
-          id: "q3",          title: "Are you cruelty-free?",          content: "Absolutely. We are proud of our 100% vegan standards."},
       ]}
       title="Common Questions"
       description="Everything you need to know about our rituals."
@@ -172,8 +129,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       tag="Waitlist"
       title="Start your calm skin journey"
       description="Join our community and get access to exclusive rituals."
@@ -185,13 +141,11 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="SOFTLY"
-      leftLink={{
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-        text: "Privacy Policy",        href: "#"}}
+      rightLink={{ text: "© 2024 Softly Co.", href: "#" }}
-      rightLink={{
-        text: "© 2024 Softly Co.",        href: "#"}}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}