Update src/app/contact/page.tsx

Merge version_20 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,65 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ContactPage() {
+  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="contact-content" className="pt-32 pb-24">
+            <ContactSplitForm
+                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."
+                inputs={[
+                    { name: "name", type: "text", placeholder: "Your Name", required: true },
+                    { name: "email", type: "email", placeholder: "Your Email", required: true }
+                ]}
+                textarea={{ name: "message", placeholder: "Tell us what you're looking for..." }}
+                imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg"
+                useInvertedBackground={true}
+                mediaPosition="right"
+            />
+        </div>
+
+        <div id="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/layout.tsx

@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Manrope } from "next/font/google";
 import { DM_Sans } from "next/font/google";
@@ -39,7 +38,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body className={`${manrope.variable} ${dmSans.variable} antialiased`}>
-          <Tag />
+          
           {children}
           <script
               dangerouslySetInnerHTML={{

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 FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+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,30 +29,12 @@ export default function LandingPage() {
   <div id="nav" data-section="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",
-        },
+        { 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"
     />
@@ -61,160 +42,44 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "downward-rays-static",
-      }}
+      background={{ 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: "10/10",
-          label: "Recommend Rate",
-        },
-        {
-          value: "100%",
-          label: "Satisfaction",
-        },
+        { value: "20+", label: "Years Experience"},
+        { value: "10/10", label: "Recommend Rate"},
+        { value: "100%", label: "Satisfaction"},
       ]}
       enableKpiAnimation={true}
-      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg"
-      imageAlt="Lackawanna Barber Shop Interior"
+      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: "http://img.b2bpic.net/free-photo/retro-theatre-scene-celebrate-world-theatre-day_23-2151211458.jpg",
-          alt: "Retro theatre scene to celebrate world theatre day",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/tall-bar-stool-wooden-background_181624-30147.jpg",
-          alt: "Tall bar stool on a wooden background",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg",
-          alt: "Hair salon chair with towel on armchair",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/retro-world-theatre-day-scenes-with-backstage_23-2151211363.jpg",
-          alt: "Retro world theatre day scenes with a backstage",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg",
-          alt: "Client and barber greeting each other at barbershop",
-        },
+        { 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-opcyony6.jpg", alt: "Shop perspective"},
       ]}
       avatarText="Join 500+ satisfied clients"
       marqueeItems={[
-        {
-          type: "text",
-          text: "Classic Cuts",
-        },
-        {
-          type: "text",
-          text: "Hot Towel Shave",
-        },
-        {
-          type: "text",
-          text: "Beard Grooming",
-        },
-        {
-          type: "text",
-          text: "Expert Fades",
-        },
-        {
-          type: "text",
-          text: "Precision Styling",
-        },
+        { type: "text", text: "Classic Cuts" },
+        { type: "text", text: "Hot Towel Shave" },
+        { type: "text", text: "Beard Grooming" },
+        { type: "text", text: "Expert Fades" },
+        { type: "text", text: "Precision Styling" },
       ]}
     />
   </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="http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.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: "Walk-in Only",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Classic Scissor Cut",
-            "Modern Styling",
-            "Expert Consultation",
-          ],
-        },
-        {
-          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",
-          ],
-        },
+        { id: "basic", badge: "Classic", price: "$40", subtitle: "Precision Haircut", features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"], buttons: [{text: "Book Now", 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"}]},
+        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"], buttons: [{text: "Book Now", href: "/contact"}]},
       ]}
       title="Quality Service, Transparent Price"
       description="Simple, honest pricing for the services you need."
@@ -227,27 +92,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       team={[
-        {
-          id: "t1",
-          name: "John Franco",
-          role: "Master Barber",
-          imageSrc: "http://img.b2bpic.net/free-photo/pleased-looking-down-young-beautiful-female-barber-uniform-wearing-glasses-combing-hair-isolated-blue-wall_141793-106074.jpg",
-        },
-        {
-          id: "t2",
-          name: "Elio",
-          role: "Old School Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg",
-        },
-        {
-          id: "t3",
-          name: "The New Crew",
-          role: "Modern Stylists",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-making-haircut_23-2149220581.jpg",
-        },
+        { 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"},
       ]}
-      title="Meet Your Barbers"
-      description="Classy, skilled, and sociable – our team is here to give you the best experience in Morristown."
+      title="Meet Your Staff"
+      description="Our dedicated team is here to ensure you get the absolute best service in Morristown."
     />
   </div>
 
@@ -257,60 +106,16 @@ export default function LandingPage() {
       textboxLayout="split-description"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Barry H.",
-          role: "Loyal Customer",
-          company: "FL, FL",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-black-polo-shirt-swinging-paint-brush-with-aggressive-expression-standing-white-background_141793-20662.jpg",
-        },
-        {
-          id: "2",
-          name: "Melissa C.",
-          role: "Regular Client",
-          company: "New York, NY",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-father-son-shaving_23-2149434975.jpg",
-        },
-        {
-          id: "3",
-          name: "Aidan D.",
-          role: "Customer",
-          company: "Morristown, NJ",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg",
-        },
-        {
-          id: "4",
-          name: "Justin D.",
-          role: "Long-time Client",
-          company: "Morristown, NJ",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/drunk-friends-call-waiter_171337-19383.jpg",
-        },
-        {
-          id: "5",
-          name: "Jay V.",
-          role: "First-time Visitor",
-          company: "Little Falls, NJ",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/excited-young-male-barber-wearing-glasses-red-shirt-barber-apron-holding-barbering-tools-looking-camera-showing-thumb-up-isolated-blue-background_141793-138548.jpg",
-        },
+        { 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",
-        },
-        {
-          value: "20+",
-          label: "Years Served",
-        },
-        {
-          value: "5★",
-          label: "Rating Average",
-        },
+        { value: "100+", label: "Weekly Cuts" },
+        { value: "20+", label: "Years Served" },
+        { value: "5★", label: "Rating Average" },
       ]}
       title="What Our Clients Say"
       description="We are proud to serve our community and deliver the best cuts in town."
@@ -318,81 +123,32 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          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: "q3",
-          title: "Are you a salon or a barber shop?",
-          content: "We are a traditional barber shop – no salon fluff, just great cuts.",
-        },
-      ]}
-      sideTitle="Common Questions"
-      faqsAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      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: "#",
-        },
-      ]}
-    />
+      <FaqSplitMedia
+        faqs={[
+          { 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." },
+        ]}
+        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="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Lackawanna Barber Shop"
-      columns={[
-        {
-          title: "Shop",
-          items: [
-            {
-              label: "Morristown, NJ",
-              href: "#",
-            },
-            {
-              label: "Cash Only",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 Lackawanna Barber Shop. All rights reserved."
-    />
+      <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>
   );
-}
+}