Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,9 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -32,25 +32,15 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "About",
+          name: "About",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Services",
+          name: "Services",          id: "services"},
-          id: "services",
-        },
         {
-          name: "Pricing",
+          name: "Pricing",          id: "pricing"},
-          id: "pricing",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Melon Mirror"
     />
@@ -59,15 +49,12 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
       logoText="Melon Mirror"
       description="Premium salon experience crafted for everyone. Discover luxury grooming, expert care, and transformative beauty moments in one elegant space."
       buttons={[
         {
-          text: "Book Your Glow",
+          text: "Book Your Glow",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=1"
       imageAlt="Salon Interior"
@@ -82,17 +69,11 @@ export default function LandingPage() {
       description="At Melon Mirror, we believe beauty is a transformative moment. Our sanctuary is designed to help you find your glow through personalized care and premium techniques."
       metrics={[
         {
-          value: "10+",
+          value: "10+",          title: "Years Experience"},
-          title: "Years Experience",
-        },
         {
-          value: "5k+",
+          value: "5k+",          title: "Happy Clients"},
-          title: "Happy Clients",
-        },
         {
-          value: "100%",
+          value: "100%",          title: "Satisfaction"},
-          title: "Satisfaction",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=1"
       mediaAnimation="blur-reveal"
@@ -106,29 +87,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Hair Styling",
+          title: "Hair Styling",          description: "Precision cuts and color services tailored to your unique beauty.",          imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",          imageAlt: "Barber doing haircut bearded aged client in hair salon"},
-          description: "Precision cuts and color services tailored to your unique beauty.",
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",
-          imageAlt: "Barber doing haircut bearded aged client in hair salon",
-        },
         {
-          title: "Facial & Skincare",
+          title: "Facial & Skincare",          description: "Customized treatments for a radiant and refreshed complexion.",          imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=2",          imageAlt: "Barber doing haircut bearded aged client in hair salon"},
-          description: "Customized treatments for a radiant and refreshed complexion.",
-          imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=2",
-          imageAlt: "Barber doing haircut bearded aged client in hair salon",
-        },
         {
-          title: "Bridal Makeup",
+          title: "Bridal Makeup",          description: "Expert makeup artistry for your most memorable moments.",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=2",          imageAlt: "Barber doing haircut bearded aged client in hair salon"},
-          description: "Expert makeup artistry for your most memorable moments.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=2",
-          imageAlt: "Barber doing haircut bearded aged client in hair salon",
-        },
         {
-          title: "Spa & Relaxation",
+          title: "Spa & Relaxation",          description: "Unwind with our therapeutic spa services designed for well-being.",          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=1",          imageAlt: "Barber doing haircut bearded aged client in hair salon"},
-          description: "Unwind with our therapeutic spa services designed for well-being.",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=1",
-          imageAlt: "Barber doing haircut bearded aged client in hair salon",
-        },
       ]}
       title="Our Expert Services"
       description="From transformative hair styles to rejuvenating spa treatments, experience beauty tailored to you."
@@ -142,55 +107,28 @@ export default function LandingPage() {
       useInvertedBackground={true}
       plans={[
         {
-          id: "basic",
+          id: "basic",          badge: "Essential",          price: "$80",          subtitle: "Core beauty care",          buttons: [
-          badge: "Essential",
-          price: "$80",
-          subtitle: "Core beauty care",
-          buttons: [
             {
-              text: "Book",
+              text: "Book",              href: "#contact"},
-              href: "#contact",
-            },
           ],
           features: [
-            "Consultation",
+            "Consultation",            "Hair Cut",            "Style"],
-            "Hair Cut",
-            "Style",
-          ],
         },
         {
-          id: "pro",
+          id: "pro",          badge: "Signature",          price: "$150",          subtitle: "Transformative experience",          buttons: [
-          badge: "Signature",
-          price: "$150",
-          subtitle: "Transformative experience",
-          buttons: [
             {
-              text: "Book",
+              text: "Book",              href: "#contact"},
-              href: "#contact",
-            },
           ],
           features: [
-            "Full Color",
+            "Full Color",            "Facial Treatment",            "Style"],
-            "Facial Treatment",
-            "Style",
-          ],
         },
         {
-          id: "ultimate",
+          id: "ultimate",          badge: "Luxury",          price: "$250",          subtitle: "The ultimate indulgence",          buttons: [
-          badge: "Luxury",
-          price: "$250",
-          subtitle: "The ultimate indulgence",
-          buttons: [
             {
-              text: "Book",
+              text: "Book",              href: "#contact"},
-              href: "#contact",
-            },
           ],
           features: [
-            "Premium Spa Service",
+            "Premium Spa Service",            "Bridal Makeup",            "Deep Condition"],
-            "Bridal Makeup",
-            "Deep Condition",
-          ],
         },
       ]}
       title="Elevated Care Packages"
@@ -206,33 +144,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       members={[
         {
-          id: "t1",
+          id: "t1",          name: "Sarah D.",          role: "Creative Director",          imageSrc: "http://img.b2bpic.net/free-photo/female-painter-using-watercolor-paint-mixing-colors-artistic-creation_482257-124848.jpg",          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
-          name: "Sarah D.",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-painter-using-watercolor-paint-mixing-colors-artistic-creation_482257-124848.jpg",
-          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Michael L.",          role: "Senior Stylist",          imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=3",          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
-          name: "Michael L.",
-          role: "Senior Stylist",
-          imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=3",
-          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Emma W.",          role: "Spa Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=3",          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
-          name: "Emma W.",
-          role: "Spa Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=3",
-          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Jordan P.",          role: "Makeup Artist",          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=2",          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
-          name: "Jordan P.",
-          role: "Makeup Artist",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=2",
-          imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
-        },
       ]}
       title="Meet Our Experts"
       description="Our professionals are dedicated to your beauty journey."
@@ -246,40 +164,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Sarah Johnson",          handle: "@sarahj",          testimonial: "The best salon experience ever. I felt so pampered!",          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=3"},
-          name: "Sarah Johnson",
-          handle: "@sarahj",
-          testimonial: "The best salon experience ever. I felt so pampered!",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=3",
-        },
         {
-          id: "2",
+          id: "2",          name: "Michael Chen",          handle: "@mchen",          testimonial: "Incredible skill and very friendly service. Highly recommend.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg"},
-          name: "Michael Chen",
-          handle: "@mchen",
-          testimonial: "Incredible skill and very friendly service. Highly recommend.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg",
-        },
         {
-          id: "3",
+          id: "3",          name: "Emily Rodriguez",          handle: "@emilyr",          testimonial: "My bridal makeup was flawless. So thankful for Melon Mirror.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-dress_624325-1363.jpg"},
-          name: "Emily Rodriguez",
-          handle: "@emilyr",
-          testimonial: "My bridal makeup was flawless. So thankful for Melon Mirror.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-dress_624325-1363.jpg",
-        },
         {
-          id: "4",
+          id: "4",          name: "David Kim",          handle: "@dkim",          testimonial: "Consistently professional and always feel like a million bucks.",          imageSrc: "http://img.b2bpic.net/free-photo/hair-dresser-posing-with-scissors_23-2148108780.jpg"},
-          name: "David Kim",
-          handle: "@dkim",
-          testimonial: "Consistently professional and always feel like a million bucks.",
-          imageSrc: "http://img.b2bpic.net/free-photo/hair-dresser-posing-with-scissors_23-2148108780.jpg",
-        },
         {
-          id: "5",
+          id: "5",          name: "Laura P.",          handle: "@laurap",          testimonial: "The spa treatments are a game changer. Pure relaxation.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg"},
-          name: "Laura P.",
-          handle: "@laurap",
-          testimonial: "The spa treatments are a game changer. Pure relaxation.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg",
-        },
       ]}
       title="Client Stories"
       description="Hear from our beloved clients."
@@ -287,25 +180,16 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqDouble
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",
+          id: "f1",          title: "How do I book?",          content: "You can book directly through our website via the Contact form or give us a call."},
-          title: "How do I book?",
-          content: "You can book directly through our website via the Contact form or give us a call.",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Do you offer consultations?",          content: "Yes, we offer complimentary consultations for all major services."},
-          title: "Do you offer consultations?",
-          content: "Yes, we offer complimentary consultations for all major services.",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Are your products cruelty-free?",          content: "We prioritize high-quality, sustainable, and ethical products for all our treatments."},
-          title: "Are your products cruelty-free?",
-          content: "We prioritize high-quality, sustainable, and ethical products for all our treatments.",
-        },
       ]}
       title="Common Questions"
       description="We're here to help you get the most out of your visit."
@@ -320,37 +204,38 @@ export default function LandingPage() {
       description="Ready to get pampered? Send us a message to secure your appointment today."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
         },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "Your appointment request..."}}
-        placeholder: "Your appointment request...",
-      }}
       imageSrc="http://img.b2bpic.net/free-photo/luxury-retro-wall-lamp-cafe_1150-10890.jpg"
+      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterBaseCard
       logoText="Melon Mirror"
-      leftLink={{
+      columns={[
-        text: "Privacy Policy",
+          {
-        href: "#",
+              title: "Navigate",              items: [
-      }}
+                  { label: "Home", href: "#hero" },
-      rightLink={{
+                  { label: "About", href: "#about" },
-        text: "Terms & Conditions",
+                  { label: "Services", href: "#services" }
-        href: "#",
+              ]
-      }}
+          },
+          {
+              title: "Legal",              items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms & Conditions", href: "#" }
+              ]
+          }
+      ]}
+      className="animate-in slide-in-from-bottom-20 duration-1000"
     />
   </div>
       </ReactLenis>