Update src/app/page.tsx

Merge version_17 into main

src/app/about/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="blurBottom"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "About", id: "/about"},
+              { name: "Services", id: "services"},
+              { name: "Team", id: "team"},
+              { name: "Testimonials", id: "testimonials"},
+              { name: "FAQ", id: "faq"},
+              { name: "Contact", id: "contact"},
+            ]}
+            brandName="Lackawanna"
+            />
+        </div>
+
+        <div id="about-content" className="pt-32 pb-24">
+            <SplitAbout
+                title="About Lackawanna Barber Shop"
+                description="At Lackawanna, we are dedicated to preserving the art of traditional barbering while serving the modern man. With over two decades of experience, our commitment to quality, community, and precision cuts has made us a cornerstone of Morristown."
+                textboxLayout="default"
+                useInvertedBackground={false}
+                bulletPoints={[
+                    { title: "Expert Precision", description: "Master barbers trained in both classic and contemporary styles." },
+                    { title: "Classic Atmosphere", description: "A warm, welcoming environment that honors the traditional barbershop experience." },
+                    { title: "Community Focused", description: "Proudly serving the Morristown area for over 20 years." }
+                ]}
+                imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg?_wi=2"
+                imageAlt="Lackawanna Barber Shop Interior"
+                mediaAnimation="slide-up"
+            />
+        </div>
+
+        <div id="footer">
+            <FooterLogoEmphasis
+                logoText="Lackawanna Barber Shop"
+                columns={[
+                { items: [{ label: "132 Morris St, Morristown, NJ", href: "#contact" }, { label: "+1 (973) 538-1675" }] },
+                { items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }, { label: "FAQs", href: "#faq" }] }
+                ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import SplitAbout from '@/components/sections/about/SplitAbout';
 import TeamCardFive from '@/components/sections/team/TeamCardFive';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
@@ -30,18 +29,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "About", id: "/about"},
-          name: "About",          id: "#about"},
+        { name: "Services", id: "services"},
-        {
+        { name: "Team", id: "team"},
-          name: "Services",          id: "#services"},
+        { name: "Testimonials", id: "testimonials"},
-        {
+        { name: "FAQ", id: "faq"},
-          name: "Team",          id: "#team"},
+        { name: "Contact", id: "contact"},
-        {
-          name: "Testimonials",          id: "#testimonials"},
-        {
-          name: "FAQ",          id: "#faq"},
-        {
-          name: "Contact",          id: "#contact"},
       ]}
       brandName="Lackawanna"
     />
@@ -49,31 +42,24 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "downward-rays-static"}}
-        variant: "downward-rays-static"}}
       title="Classic Style, Contemporary Precision."
       description="At Lackawanna, we blend old-school charm with modern barbering. Experience the best cut in Morristown from barbers who actually care about your look."
       kpis={[
-        {
+        { value: "20+", label: "Years Experience"},
-          value: "20+",          label: "Years Experience"},
+        { value: "10/10", label: "Recommend Rate"},
-        {
+        { value: "100%", label: "Satisfaction"},
-          value: "10/10",          label: "Recommend Rate"},
-        {
-          value: "100%",          label: "Satisfaction"},
       ]}
       enableKpiAnimation={true}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg"
+      buttons={[{ text: "Book Now", href: "#contact" }]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg?_wi=1"
       imageAlt="Lackawanna Barber Shop"
       mediaAnimation="slide-up"
       avatars={[
-        {
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg", alt: "Barber shop interior"},
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg",          alt: "Barber shop interior"},
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-bp8o0yyb.jpg", alt: "Detail view"},
-        {
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-l2nw3w51.jpg", alt: "Chair and tools"},
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-bp8o0yyb.jpg",          alt: "Detail view"},
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-opcyony6.jpg", alt: "Shop perspective"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-l2nw3w51.jpg",          alt: "Chair and tools"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-opcyony6.jpg",          alt: "Shop perspective"},
       ]}
       avatarText="Join 500+ satisfied clients"
       marqueeItems={[
@@ -86,43 +72,15 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={false}
-      title="More Than Just a Haircut"
-      description="We are a throwback barber shop where you can get a classic men's cut, beard trim, or a hot towel shave. We treat you like family, ensuring you leave with both the cut you wanted and the confidence you deserve."
-      bulletPoints={[
-        {
-          title: "Old School Values",          description: "Classic techniques combined with current styling trends."},
-        {
-          title: "Warm Environment",          description: "Friendly, sociable atmosphere where you feel right at home."},
-        {
-          title: "Expert Care",          description: "Knowledgeable barbers who understand every hair type."},
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-bp8o0yyb.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
-
   <div id="services" data-section="services">
       <PricingCardEight
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
+        { id: "basic", badge: "Classic", price: "$40", subtitle: "Precision Haircut", buttons: [{ text: "Get Directions", href: "#contact" }], features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"]},
-          id: "basic",          badge: "Classic",          price: "$40",          subtitle: "Precision Haircut",          buttons: [{ text: "Walk-in Only", href: "#contact" }],
+        { id: "pro", badge: "Premium", price: "$75", subtitle: "Full Grooming Experience", buttons: [{ text: "Get Directions", href: "#contact" }], features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"]},
-          features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"],
+        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", buttons: [{ text: "Get Directions", href: "#contact" }], features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"]},
-        },
-        {
-          id: "pro",          badge: "Premium",          price: "$75",          subtitle: "Full Grooming Experience",          buttons: [{ text: "Walk-in Only", href: "#contact" }],
-          features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"],
-        },
-        {
-          id: "kids",          badge: "Family",          price: "$30",          subtitle: "Youth Haircut",          buttons: [{ text: "Walk-in Only", href: "#contact" }],
-          features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"],
-        },
       ]}
       title="Quality Service, Transparent Price"
       description="Simple, honest pricing for the services you need."
@@ -135,10 +93,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       team={[
-        {
+        { id: "t1", name: "John Franco", role: "Master Barber", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352542504-tkr21jqa.png"},
-          id: "t1",          name: "John Franco",          role: "Master Barber",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352542504-tkr21jqa.png"},
+        { id: "t2", name: "Elio", role: "Old School Specialist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352566826-2nyt55b1.jpg"},
-        {
-          id: "t2",          name: "Elio",          role: "Old School Specialist",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352566826-2nyt55b1.jpg"},
       ]}
       title="Meet Your Staff"
       description="Our dedicated team is here to ensure you get the absolute best service in Morristown."
@@ -153,6 +109,9 @@ export default function LandingPage() {
       testimonials={[
         { id: "1", name: "Barry H.", role: "Loyal Customer", company: "FL", rating: 5 },
         { id: "2", name: "Melissa C.", role: "Regular Client", company: "NY", rating: 5 },
+        { id: "3", name: "Tom K.", role: "Local Resident", company: "NJ", rating: 5 },
+        { id: "4", name: "Sarah J.", role: "Frequent Visitor", company: "NJ", rating: 5 },
+        { id: "5", name: "Michael P.", role: "Client", company: "NY", rating: 5 },
       ]}
       kpiItems={[
         { value: "100+", label: "Weekly Cuts" },
@@ -165,34 +124,43 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
-      useInvertedBackground={false}
+        faqs={[
-      faqs={[
+          { id: "q1", title: "Do you accept appointments?", content: "We operate primarily as a walk-in shop to maintain that classic, casual vibe." },
-        { id: "q1", title: "Do you accept appointments?", content: "We operate primarily as a walk-in shop to maintain that classic, casual vibe." },
+          { id: "q2", title: "Is it cash only?", content: "Yes, we are a classic cash-only establishment." },
-        { id: "q2", title: "Is it cash only?", content: "Yes, we are a classic cash-only establishment." },
+        ]}
-      ]}
+        buttons={[
-      sideTitle="Common Questions"
+          { text: "Get Directions", href: "#contact" }
-      faqsAnimation="blur-reveal"
+        ]}
-    />
+        title="Common Questions"
+        description="Everything you need to know about our barber shop services."
+        faqsAnimation="slide-up"
+        textboxLayout="default"
+        mediaPosition="right"
+        useInvertedBackground={false}
+        imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg"
+        imageAlt="Lackawanna Barber Shop Interior"
+      />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
-      useInvertedBackground={false}
+        tag="Visit Us"
-      background={{ variant: "sparkles-gradient" }}
+        title="Ready for your next cut?"
-      text="Ready for your next haircut? Stop by the shop today and meet the team. We look forward to seeing you!"
+        description="Stop by our Morristown shop to experience the Lackawanna difference."
-      buttons={[{ text: "+1 (973) 538-1675", href: "tel:+19735381675" }]}
+        background={{ variant: "sparkles-gradient" }}
-    />
+        useInvertedBackground={true}
+      />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoEmphasis
-      logoText="Lackawanna Barber Shop"
+        logoText="Lackawanna Barber Shop"
-      columns={[
+        columns={[
-        { title: "Shop", items: [{ label: "Morristown, NJ", href: "#" }] },
+          { items: [{ label: "132 Morris St, Morristown, NJ", href: "#contact" }, { label: "+1 (973) 538-1675" }] },
-      ]}
+          { items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }, { label: "FAQs", href: "#faq" }] }
-      copyrightText="© 2024 Lackawanna Barber Shop. All rights reserved."
+        ]}
-    />
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>