Update src/app/contact/page.tsx

Merge version_21 into main

src/app/about/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+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" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/"},
+              { name: "About", id: "/about"},
+              { name: "Contact", id: "/contact"},
+            ]}
+            brandName="Lackawanna"
+            />
+        </div>
+
+        <div id="about-content" data-section="about-content" className="pt-32 pb-24">
+            <TextSplitAbout
+                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."]}
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+                logoText="Lackawanna Barber Shop"
+                columns={[
+                { items: [{ label: "132 Morris St, Morristown, NJ", href: "/contact" }, { label: "+1 (973) 538-1675", href: "tel:+19735381675" }] },
+                { items: [{ label: "Services", href: "/#services" }, { label: "Team", href: "/#team" }, { label: "FAQs", href: "/#faq" }] }
+                ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import { useRouter } from "next/navigation";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ContactPage() {
+  const router = useRouter();
+
+  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" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Contact", id: "/contact" }
+              ]}
+              brandName="Lackawanna"
+            />
+        </div>
+
+        <div id="contact-content" data-section="contact-content" className="pt-32 pb-24">
+            <ContactCTA
+                tag="Contact"
+                title="Ready for your next cut?"
+                description="Stop by our Morristown shop or give us a call at (973) 538-1675 to inquire about wait times."
+                buttons={[{ text: "Submit", onClick: () => router.push("/") }]}
+                background={{ variant: "plain" }}
+                useInvertedBackground={true}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoReveal
+                logoText="Lackawanna Barber Shop"
+                leftLink={{ text: "Contact", href: "/contact" }}
+                rightLink={{ text: "Home", href: "/" }}
+            />
+        </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,23 @@ 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"
+      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 +71,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", features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"], buttons: [{text: "Book Now", href: "/contact"}]},
-          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", features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"], buttons: [{text: "Book Now", href: "/contact"}]},
-          features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"],
+        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"], buttons: [{text: "Book Now", href: "/contact"}]},
-        },
-        {
-          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 +92,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 +108,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 +123,30 @@ 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." },
+        ]}
-      ]}
+        title="Common Questions"
-      sideTitle="Common Questions"
+        description="Everything you need to know about our barber shop services."
-      faqsAnimation="blur-reveal"
+        faqsAnimation="slide-up"
-    />
+        textboxLayout="default"
-  </div>
+        mediaPosition="right"
-
+        useInvertedBackground={false}
-  <div id="contact" data-section="contact">
+        imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg"
-      <ContactText
+        imageAlt="Lackawanna Barber Shop Interior"
-      useInvertedBackground={false}
+      />
-      background={{ variant: "sparkles-gradient" }}
-      text="Ready for your next haircut? Stop by the shop today and meet the team. We look forward to seeing you!"
-      buttons={[{ text: "Visit Us Today", href: "#" }]}
-    />
   </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>