Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,15 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import AboutMetric from '@/components/sections/about/AboutMetric';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { Award, Star, Zap } from "lucide-react";
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { Star, User, Smile } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,14 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "About",          id: "#about"},
-        {
-          name: "Services",          id: "#services"},
-        {
-          name: "Pricing",          id: "#pricing"},
-        {
-          name: "Reviews",          id: "#reviews"},
+        { name: "About", id: "#about" },
+        { name: "Services", id: "#services" },
+        { name: "Pricing", id: "#pricing" },
+        { name: "Reviews", id: "#reviews" },
       ]}
       brandName="Bill's Barber Shop"
       button={{ text: "Book Appointment", href: "tel:6077989003" }}
@@ -49,156 +44,75 @@ export default function LandingPage() {
       <HeroCarouselLogo
       logoText="Bill's Barber Shop"
       description="Laid-back barber shop for men's haircuts and beard trims, plus classic decor. Serving the Johnson City community with high-quality service and great vibes."
-      buttons={[
-        {
-          text: "Book an Appointment",          href: "tel:6077989003"},
-      ]}
+      buttons={[{ text: "Book an Appointment", href: "tel:6077989003" }]}
       slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg",          imageAlt: "Vintage Barber Shop"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table-with-electric-machines_627829-6252.jpg",          imageAlt: "Vintage Barber Shop"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/combs-scissors-skull_23-2147736976.jpg",          imageAlt: "Vintage Barber Shop"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7325.jpg",          imageAlt: "Vintage Barber Shop"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/composition-fathers-day_23-2148101903.jpg",          imageAlt: "Vintage Barber Shop"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-with-scissors-barbershop_140725-7670.jpg",          imageAlt: "Vintage Barber Shop"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg", imageAlt: "Vintage Barber Shop" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table-with-electric-machines_627829-6252.jpg", imageAlt: "Vintage Barber Shop" },
       ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <MetricSplitMediaAbout
+      <AboutMetric
       useInvertedBackground={true}
       title="A Community Staple in Johnson City"
-      description="At Bill's Barber Shop, we pride ourselves on delivering high quality service, affordable pricing, and a friendly atmosphere. Whether you need a fresh fade, a precise beard trim, or a classic scissor cut, our experienced team is here to help you look and feel your best."
       metrics={[
-        {
-          value: "4.8",          title: "Google Rating"},
-        {
-          value: "236",          title: "Happy Reviews"},
-        {
-          value: "15+",          title: "Years of Vibe"},
+        { icon: Star, label: "Google Rating", value: "4.8" },
+        { icon: Smile, label: "Happy Reviews", value: "236" },
+        { icon: User, label: "Years of Vibe", value: "15+" },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg"
-      imageAlt="Barber at work"
-      mediaAnimation="slide-up"
       metricsAnimation="slide-up"
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardMedia
+      <FeatureCardTwelve
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={false}
+      title="Our Expert Services"
+      description="We offer a wide range of professional grooming services tailored to your specific style."
       features={[
         {
-          id: "s1",          title: "Precision Haircuts",          description: "From classic cuts to modern fades, our barbers ensure a clean look every time.",          tag: "Popular",          imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg"},
-        {
-          id: "s2",          title: "Beard Grooming",          description: "Expert beard trims and maintenance to keep your facial hair looking sharp.",          tag: "Expertise",          imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg"},
-        {
-          id: "s3",          title: "Kids Cuts",          description: "Kid-friendly environment with gentle, professional service for the little ones.",          tag: "Friendly",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-cute-preschooler-boy-getting-haircut-dark-background_613910-19731.jpg"},
+          id: "s1",          label: "Professional Grooming",          title: "Available Services",          items: ["Beard trim", "Haircut", "Beard maintenance", "Buzz cut", "Curly hair", "Custom cut", "Fade cut", "Head shave", "Kids' cuts", "Long haircut", "Scissor cut"]
+        }
       ]}
-      title="Our Expert Services"
-      description="We offer a wide range of grooming services tailored to every style."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardThree
+      <PricingCardOne
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={true}
-      plans={[
-        {
-          id: "p1",          price: "$25",          name: "Classic Haircut",          features: [
-            "Scissor cut",            "Fade",            "Style"],
-          buttons: [
-            {
-              text: "Book Now",              href: "tel:6077989003"},
-          ],
-        },
-        {
-          id: "p2",          price: "$15",          name: "Beard Trim",          features: [
-            "Maintenance",            "Shaping",            "Edge-up"],
-          buttons: [
-            {
-              text: "Book Now",              href: "tel:6077989003"},
-          ],
-        },
-        {
-          id: "p3",          price: "$20",          name: "Kids Cut",          features: [
-            "Standard cut",            "Comfortable vibe"],
-          buttons: [
-            {
-              text: "Book Now",              href: "tel:6077989003"},
-          ],
-        },
-      ]}
       title="Simple, Transparent Pricing"
       description="Great quality at an affordable price. Walk-ins welcome."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          value: "236",          title: "Total Reviews",          description: "Verified customer reviews.",          icon: Star,
-        },
-        {
-          id: "m2",          value: "4.8",          title: "Average Rating",          description: "Based on Google feedback.",          icon: Award,
-        },
-        {
-          id: "m3",          value: "Daily",          title: "Great Vibes",          description: "Friendly neighborhood atmosphere.",          icon: Zap,
-        },
+      plans={[
+        { id: "p1", badge: "Popular", price: "$25", subtitle: "/cut - Classic haircut and style", features: ["Scissor cut", "Fade", "Style"] },
+        { id: "p2", badge: "Essential", price: "$15", subtitle: "/trim - Professional beard maintenance", features: ["Trimming", "Edge-up", "Shaping"] },
       ]}
-      title="Why Our Clients Love Bill's"
-      description="Consistently providing 5-star experiences."
     />
   </div>
 
   <div id="reviews" data-section="reviews">
-      <TestimonialCardThirteen
+      <TestimonialCardTwo
+      title="Hear From Our Locals"
+      description="Real feedback from our community."
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",          name: "Local Resident",          handle: "@johnsoncity",          testimonial: "Came in, short wait time, fresh haircut, great price and service.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4219.jpg"},
-        {
-          id: "t2",          name: "Satisfied Customer",          handle: "@regular",          testimonial: "High quality service, Affordable pricing, Friendly staff.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665410.jpg"},
-        {
-          id: "t3",          name: "Returning Patron",          handle: "@local",          testimonial: "Best barber around, not to mention great guy, great vibes, and great prices too.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-fashionable-modern-male-grey-t-shirt_613910-532.jpg"},
-        {
-          id: "t4",          name: "New Client",          handle: "@visitor",          testimonial: "Fast service, professional result, exactly what I asked for.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-customer-checking-his-beard_23-2148298299.jpg"},
-        {
-          id: "t5",          name: "Loyal Customer",          handle: "@loyal",          testimonial: "Solid shop, clean environment, reliable haircuts every single time.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing_23-2149438508.jpg"},
+          id: "t1",          name: "Satisfied Customer",          role: "Regular Client",          testimonial: "Best barber around, great guy, great vibes, and great prices too. Always a 5-star experience!",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4219.jpg"
+        }
       ]}
-      showRating={true}
-      title="What Our Clients Say"
-      description="Don't just take our word for it."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
+      background={{ variant: "plain" }}
       tag="Visit Us"
       title="Stop by Bill's Today"
       description="259 Floral Ave, Johnson City, NY 13790. Call us at (607) 798-9003 to book an appointment."
@@ -208,31 +122,15 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Navigate",          items: [
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Services",              href: "#services"},
-            {
-              label: "Pricing",              href: "#pricing"},
-          ],
-        },
-        {
-          title: "Location",          items: [
-            {
-              label: "259 Floral Ave, Johnson City",              href: "#"},
-            {
-              label: "(607) 798-9003",              href: "tel:6077989003"},
-          ],
-        },
-      ]}
+      <FooterBaseReveal
       logoText="Bill's Barber Shop"
+      columns={[
+        { title: "Navigate", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Location", items: [{ label: "259 Floral Ave, Johnson City", href: "#" }] },
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}