Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,323 +3,125 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Calendar } from "lucide-react";
+import { Calendar, Scissors, Sparkles, Phone, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
         contentWidth="medium"
         sizing="medium"
         background="none"
-        cardStyle="solid"
+        cardStyle="outline"
         primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
-        headingFontWeight="bold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Services", id: "features" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Monheimer Barbershop"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardTestimonial
+      <HeroOverlay
-      useInvertedBackground={false}
+      title="Precision Grooming"
-      background={{
+      description="Experience premium cuts and styling in a clean, sophisticated environment. Your journey to a sharper look starts here."
-        variant: "plain",
+      tag="Monheimer's Finest"
-      }}
+      tagIcon={Sparkles}
-      title="Precision Cuts in Monheimer"
+      buttons={[{ text: "Book Appointment", href: "#contact" }]}
-      description="Experience premium grooming in a relaxed, upscale environment designed for the modern gentleman."
-      testimonials={[
-        {
-          name: "Mark S.",
-          handle: "@marks",
-          testimonial: "Best haircut I've had in years. The attention to detail is unmatched.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BqpkpcYV4lJq5utBbIhsGY5cLO/uploaded-1775226883136-lycmruwt.jpg?_wi=1",
-          imageAlt: "User provided image",
-        },
-        {
-          name: "John D.",
-          handle: "@johnd",
-          testimonial: "Fantastic atmosphere and service. Highly recommend.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
-          imageAlt: "barbershop interior warm lighting",
-        },
-        {
-          name: "Peter R.",
-          handle: "@peterr",
-          testimonial: "Clean, professional, and always on time.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg?_wi=1",
-          imageAlt: "happy client portrait male",
-        },
-        {
-          name: "Steve L.",
-          handle: "@stevel",
-          testimonial: "Top-tier grooming experience every single visit.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg?_wi=1",
-          imageAlt: "smiling customer in barbershop",
-        },
-        {
-          name: "David W.",
-          handle: "@davidw",
-          testimonial: "The only place I trust with my beard.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg?_wi=1",
-          imageAlt: "man looking sharp after haircut",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Book Your Visit",
-          href: "#contact",
-        },
-      ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BqpkpcYV4lJq5utBbIhsGY5cLO/uploaded-1775226883136-lycmruwt.jpg?_wi=2"
-      imageAlt="Inside Monheimer Barbershop"
+      imageAlt="Modern barbershop interior"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-young-man-posing-isolated-grey_171337-10592.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Join 500+ satisfied gentlemen"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Classic Cuts",
-        },
-        {
-          type: "text",
-          text: "Beard Sculpting",
-        },
-        {
-          type: "text",
-          text: "Premium Shaves",
-        },
-        {
-          type: "text",
-          text: "Hot Towel",
-        },
-        {
-          type: "text",
-          text: "Modern Style",
-        },
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <MediaAbout
+      title="Crafted for the Modern Gentleman"
+      description="We combine traditional barber techniques with modern precision to provide a service that respects your time and elevates your personal style."
+      imageSrc="http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg"
       useInvertedBackground={true}
-      heading={[
-        {
-          type: "text",
-          content: "Mastering the Art of Grooming",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
-          alt: "Barber shop service",
-        },
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwelve
+      <FeatureCardNine
+      title="Signature Services"
+      description="A curated selection of grooming treatments for the discerning individual."
+      showStepNumbers={true}
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={false}
       features={[
         {
-          id: "1",
+          id: 1,
-          label: "Cut",
+          title: "Precision Haircut",          description: "Bespoke cutting techniques tailored to your hair type and lifestyle.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg" },
-          title: "Classic Haircut",
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg" }
-          items: [
-            "Precision detailing",
-            "Hot towel service",
-            "Straight razor finish",
-          ],
         },
         {
-          id: "2",
+          id: 2,
-          label: "Beard",
+          title: "Beard Grooming",          description: "Professional shape-ups, essential oil treatments, and hot steam therapy.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg" },
-          title: "Beard Sculpting",
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg" }
-          items: [
+        }
-            "Beard shape up",
-            "Essential oil treatment",
-            "Hot steam therapy",
-          ],
-        },
-        {
-          id: "3",
-          label: "Combo",
-          title: "The Full Experience",
-          items: [
-            "Full haircut",
-            "Beard detailing",
-            "Scalp massage",
-          ],
-        },
       ]}
-      title="Our Services"
-      description="Premium grooming solutions tailored to your individual style."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+      <TestimonialCardTen
+      title="Voices of Style"
+      description="Hear why our regulars keep coming back for more than just a cut."
+      textboxLayout="split-description"
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "1",
+          id: "t1",          title: "Excellent Service",          quote: "The best grooming experience I've had in Monheimer. Truly professional.",          name: "Mark S.",          role: "Regular Client"
-          name: "Mark S.",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg?_wi=2",
         },
         {
-          id: "2",
+          id: "t2",          title: "Attention to Detail",          quote: "Precision that matters. I always leave feeling more confident.",          name: "John D.",          role: "Regular Client"
-          name: "John D.",
+        }
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg?_wi=2",
-        },
-        {
-          id: "3",
-          name: "Peter R.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg?_wi=2",
-        },
-        {
-          id: "4",
-          name: "Steve L.",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg",
-        },
-        {
-          id: "5",
-          name: "David W.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-posing-isolated-grey_171337-10592.jpg",
-        },
       ]}
-      cardTitle="What Our Clients Say"
-      cardTag="Trusted by Locals"
-      cardAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactFaq
-      animationType="slide-up"
-      useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "How do I book?", content: "Simply use our online portal or reach out via phone." },
-          id: "q1",
+        { id: "f2", title: "Are walk-ins welcome?", content: "While we prefer appointments, we strive to accommodate walk-ins when possible." }
-          title: "Do I need an appointment?",
-          content: "Yes, we recommend booking in advance to guarantee your preferred time.",
-        },
-        {
-          id: "q2",
-          title: "What payment methods are accepted?",
-          content: "We accept cash, major credit cards, and contactless payments.",
-        },
-        {
-          id: "q3",
-          title: "Where are you located?",
-          content: "We are located right in the heart of Monheimer.",
-        },
       ]}
-      ctaTitle="Ready for a Refresh?"
+      ctaTitle="Ready to look your best?"
-      ctaDescription="Book your appointment today and secure your spot in the chair."
+      ctaDescription="Book your session today and secure your spot."
-      ctaButton={{
+      ctaButton={{ text: "Book Now", href: "#" }}
-        text: "Book Now",
-        href: "#",
-      }}
       ctaIcon={Calendar}
+      useInvertedBackground={false}
+      animationType="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterCard
-      columns={[
+      logoText="Monheimer Barbershop"
-        {
+      copyrightText="© 2025 Monheimer Barbershop"
-          title: "Explore",
+      socialLinks={[{ icon: Scissors, href: "#", ariaLabel: "Instagram" }, { icon: MapPin, href: "#", ariaLabel: "Location" }]}
-          items: [
-            {
-              label: "Services",
-              href: "#features",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}