Switch to version 2: modified src/app/page.tsx

Merge version_3_1781996827590 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
+import FeaturesMediaGrid from '@/components/sections/features/FeaturesMediaGrid';
+import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
+import HeroBrand from '@/components/sections/hero/HeroBrand';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import NavbarDropdown from '@/components/ui/NavbarDropdown';
+import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import TeamDetailedCards from '@/components/sections/team/TeamDetailedCards';
+import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
 
 export default function LandingPage() {
   return (
@@ -29,151 +29,117 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarDropdown
+      logo="Modern Blendz"
       navItems={[
-        { name: "Home", id: "hero" },
-        { name: "Services", id: "pricing" },
-        { name: "Barbers", id: "team" },
-        { name: "Contact", id: "contact" },
+        { name: "Home", href: "#hero" },
+        { name: "Services", href: "#pricing" },
+        { name: "Barbers", href: "#team" },
+        { name: "Contact", href: "#contact" },
       ]}
-      brandName="Modern Blendz"
-      button={{ text: "Book Now", href: "#contact" }}
+      ctaButton={{ text: "Book Now", href: "#contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{ variant: "rotated-rays-static" }}
-      title="Precision Grooming in Geneva, NY"
+      <HeroBrand
+      brand="Precision Grooming in Geneva, NY"
       description="Experience professional cuts and a welcoming atmosphere at Modern Blendz Barbershop. Where community and style meet."
-      buttons={[{ text: "Book Now", href: "#contact" }]}
-      mediaItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167450.jpg?_wi=1", imageAlt: "Barbershop interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-getting-ready-giving-haircut-her-client_23-2148353413.jpg", imageAlt: "Professional haircut" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326537.jpg", imageAlt: "Beard grooming" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205855.jpg", imageAlt: "Modern shop" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7361.jpg", imageAlt: "Friendly community" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-cutting-customer-hair-helped-by-scissors_23-2148256966.jpg", imageAlt: "Expert styling" },
-      ]}
+      primaryButton={{ text: "Book Now", href: "#contact" }}
+      secondaryButton={{ text: "Learn More", href: "#about" }}
     />
   </div>
 
   <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={false}
+      <AboutMediaOverlay
+      tag="Our Mission"
       title="Committed to Our Community"
       description="Located at 480 Hamilton St, Modern Blendz is more than just a shop. We are a community destination known for our 4.9-star service and commitment to our neighbors, from back-to-school events to expert grooming."
-      bulletPoints={[
-        { title: "Expert Team", description: "Skilled barbers dedicated to your style." },
-        { title: "Community Focus", description: "Proudly supporting the Geneva community." },
-        { title: "Accessible Facility", description: "Wheelchair-accessible parking for all." },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7902.jpg?_wi=1"
-      mediaAnimation="slide-up"
+      primaryButton={{ text: "Book Now", href: "#contact" }}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{ items: ["Walk-ins only when available", "Booking required for guaranteed time"] }}
-      positiveCard={{ items: ["Highly recommended online booking", "Professional atmosphere", "Community-focused service", "Expert styling and fades", "Clean and comfortable environment"] }}
+      <FeaturesMediaGrid
+      tag="Why Us"
       title="Why Choose Modern Blendz"
       description="We prioritize quality and comfort with every service."
+      items={[
+        { title: "Expert Team", description: "Skilled barbers dedicated to your style.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167450.jpg?_wi=1" },
+        { title: "Community Focus", description: "Proudly supporting the Geneva community.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-getting-ready-giving-haircut-her-client_23-2148353413.jpg" }
+      ]}
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        { id: "cut", badge: "Popular", price: "$30 - $40", subtitle: "Precision Haircut", features: ["Consultation", "Precision Cut", "Style"], buttons: [{ text: "Book", href: "#contact" }] },
-        { id: "cutbeard", badge: "Essential", price: "$35 - $45", subtitle: "Cut & Beard", features: ["Full Cut", "Beard Grooming", "Clean Line"], buttons: [{ text: "Book", href: "#contact" }] },
-        { id: "full", badge: "Premium", price: "$45 - $55", subtitle: "Full Service", features: ["Cut & Beard", "Razor Finish", "Enhancements"], buttons: [{ text: "Book", href: "#contact" }] },
-      ]}
+      <PricingLayeredCards
+      tag="Pricing"
       title="Transparent Pricing"
       description="Quality grooming for everyone in Geneva."
+      plans={[
+        { tag: "Popular", price: "$30 - $40", description: "Precision Haircut", primaryButton: { text: "Book", href: "#contact" }, features: ["Consultation", "Precision Cut", "Style"] },
+        { tag: "Essential", price: "$35 - $45", description: "Cut & Beard", primaryButton: { text: "Book", href: "#contact" }, features: ["Full Cut", "Beard Grooming", "Clean Line"] },
+        { tag: "Premium", price: "$45 - $55", description: "Full Service", primaryButton: { text: "Book", href: "#contact" }, features: ["Cut & Beard", "Razor Finish", "Enhancements"] },
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        { id: "m1", value: "4.9★", title: "Customer Rating", description: "Highly-rated satisfaction", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-view-barber-shaking-hand-with-male-client_23-2147839833.jpg?_wi=1" },
-        { id: "m2", value: "5+", title: "Skilled Barbers", description: "Years of experience", imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg" },
-        { id: "m3", value: "2018", title: "Established", description: "Your local choice", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-shaving-his-neck_23-2148783532.jpg" },
-      ]}
+      <MetricsIconCards
+      tag="Our Success"
       title="By the Numbers"
       description="A legacy of grooming excellence."
+      metrics={[
+        { icon: "Star", title: "Customer Rating", value: "4.9★" },
+        { icon: "Users", title: "Skilled Barbers", value: "5+" },
+        { icon: "Calendar", title: "Established", value: "2018" },
+      ]}
     />
   </div>
 
   <div id="team" data-section="team">
-      <TeamCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      groups={[
-        {
-          id: "barbers",          groupTitle: "Professional Team",          members: [
-            { id: "t1", title: "Tone Tha Barber", subtitle: "Owner", detail: "Lead barber with a vision.", imageSrc: "http://img.b2bpic.net/free-photo/annoyed-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-looking-straight-razor-with-shaving-cream-put-his-face-keeping-hand-air_141793-98626.jpg?_wi=1" },
-            { id: "t2", title: "Raph", subtitle: "Barber", detail: "Specialist in fade cuts.", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-tattooed-man-cafe-street-with-glass-wine-romantic-guy-white-cap-suspenders-city-peaky-blinders-old-fashionable-retro_1321-2027.jpg?_wi=1" },
-            { id: "t3", title: "Edwin Loarca", subtitle: "Barber", detail: "Experienced professional.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506366.jpg" },
-            { id: "t4", title: "Dai", subtitle: "Barber", detail: "Creative grooming talent.", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg" },
-          ]
-        }
-      ]}
+      <TeamDetailedCards
+      tag="Meet the Team"
       title="Meet Our Barbers"
       description="The talent behind your favorite cuts."
+      members={[
+        { name: "Tone Tha Barber", role: "Owner", description: "Lead barber with a vision.", socialLinks: [], imageSrc: "http://img.b2bpic.net/free-photo/annoyed-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-looking-straight-razor-with-shaving-cream-put-his-face-keeping-hand-air_141793-98626.jpg?_wi=1" },
+        { name: "Raph", role: "Barber", description: "Specialist in fade cuts.", socialLinks: [], imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-tattooed-man-cafe-street-with-glass-wine-romantic-guy-white-cap-suspenders-city-peaky-blinders-old-fashionable-retro_1321-2027.jpg?_wi=1" }
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        { id: "1", name: "John Doe", date: "Jan 2025", title: "Great atmosphere", quote: "Best haircut in Geneva, hands down.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167450.jpg?_wi=2", imageAlt: "happy customer barbershop portrait" },
-        { id: "2", name: "Mike Smith", date: "Dec 2024", title: "Professional", quote: "Tone and the team never miss.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg", imageSrc: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7902.jpg?_wi=2", imageAlt: "happy customer barbershop portrait" },
-        { id: "3", name: "Alex R.", date: "Nov 2024", title: "Quality", quote: "Friendly and skilled barbers.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11879.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-view-barber-shaking-hand-with-male-client_23-2147839833.jpg?_wi=2", imageAlt: "happy customer barbershop portrait" },
-        { id: "4", name: "Chris B.", date: "Oct 2024", title: "Top tier", quote: "My kids love it here.", tag: "Parent", avatarSrc: "http://img.b2bpic.net/free-photo/bearded-man-navy-t-shirt-with-confident-expression-smart-face-pointing-with-index-finger-her-temple-standing-orange-wall_141793-81830.jpg", imageSrc: "http://img.b2bpic.net/free-photo/annoyed-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-looking-straight-razor-with-shaving-cream-put-his-face-keeping-hand-air_141793-98626.jpg?_wi=2", imageAlt: "happy customer barbershop portrait" },
-        { id: "5", name: "Sam K.", date: "Sep 2024", title: "Experience", quote: "Always consistent fades.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-hipster-pretty-woman-surprised-exited-emotions-hearted-glasses-cozy-sweater-unusual-ombre-fuchsia-hairs-yellow-wall_291049-392.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-tattooed-man-cafe-street-with-glass-wine-romantic-guy-white-cap-suspenders-city-peaky-blinders-old-fashionable-retro_1321-2027.jpg?_wi=2", imageAlt: "happy customer barbershop portrait" },
-      ]}
+      <TestimonialDetailedCards
+      tag="Testimonials"
       title="What Our Clients Say"
       description="Loved in Geneva for quality service."
+      testimonials={[
+        { title: "Great atmosphere", quote: "Best haircut in Geneva, hands down.", name: "John Doe", role: "Regular", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167450.jpg?_wi=2" }
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
-      tag="Visit Us"
-      title="Book Your Appointment"
-      description="Find us at 480 Hamilton St, Suite B. Book online via Booksy or call us at (315) 325-4567."
-      buttons={[{ text: "Book Online", href: "https://booksy.com" }]}
+      <ContactSplitEmail
+      tag="Contact"
+      title="Stay Updated"
+      description="Join our newsletter for updates and booking news."
+      inputPlaceholder="Email address"
+      buttonText="Subscribe"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326541.jpg"
-      logoText="Modern Blendz"
+      <FooterBrandReveal
+      brand="Modern Blendz"
       columns={[
-        { title: "Hours", items: [{ label: "Tue-Fri: 9am-5pm", href: "#" }, { label: "Sat: 8am-2pm", href: "#" }] },
-        { title: "Support", items: [{ label: "(315) 325-4567", href: "tel:3153254567" }, { label: "Booksy Online", href: "https://booksy.com" }] },
+        { items: [{ label: "Hours: Tue-Fri: 9am-5pm" }, { label: "Sat: 8am-2pm" }] },
+        { items: [{ label: "Call (315) 325-4567", href: "tel:3153254567" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}