Update src/app/page.tsx

Merge version_22 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/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 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,30 +29,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "About", id: "/about"},
-          name: "About",
+        { name: "Services", id: "services"},
-          id: "#about",
+        { name: "Team", id: "team"},
-        },
+        { name: "Testimonials", id: "testimonials"},
-        {
+        { name: "FAQ", id: "faq"},
-          name: "Services",
+        { name: "Contact", id: "/contact"},
-          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={{
+      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+",
+        { value: "10/10", label: "Recommend Rate"},
-          label: "Years Experience",
+        { value: "100%", label: "Satisfaction"},
-        },
-        {
-          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"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg?_wi=1"
-      imageAlt="Lackawanna Barber Shop Interior"
+      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: "http://img.b2bpic.net/free-photo/retro-theatre-scene-celebrate-world-theatre-day_23-2151211458.jpg",
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201801-bp8o0yyb.jpg", alt: "Detail view"},
-          alt: "Retro theatre scene to celebrate world theatre day",
+        { 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"},
-        {
-          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",
-        },
       ]}
       avatarText="Join 500+ satisfied clients"
       marqueeItems={[
-        {
+        { type: "text", text: "Classic Cuts" },
-          type: "text",
+        { type: "text", text: "Hot Towel Shave" },
-          text: "Classic Cuts",
+        { type: "text", text: "Beard Grooming" },
-        },
+        { type: "text", text: "Expert Fades" },
-        {
+        { type: "text", text: "Precision Styling" },
-          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", features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"], buttons: [{text: "Contact Us", href: "/contact"}]},
-          id: "basic",
+        { id: "pro", badge: "Premium", price: "$75", subtitle: "Full Grooming Experience", features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"], buttons: [{text: "Contact Us", href: "/contact"}]},
-          badge: "Classic",
+        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"], buttons: [{text: "Contact Us", href: "/contact"}]},
-          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",
-          ],
-        },
       ]}
       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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352542504-tkr21jqa.png"},
-          id: "t1",
+        { 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"},
-          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",
-        },
       ]}
-      title="Meet Your Barbers"
+      title="Meet Your Staff"
-      description="Classy, skilled, and sociable – our team is here to give you the best experience in Morristown."
+      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", rating: 5 },
-          id: "1",
+        { id: "2", name: "Melissa C.", role: "Regular Client", company: "NY", rating: 5 },
-          name: "Barry H.",
+        { id: "3", name: "Tom K.", role: "Local Resident", company: "NJ", rating: 5 },
-          role: "Loyal Customer",
+        { id: "4", name: "Sarah J.", role: "Frequent Visitor", company: "NJ", rating: 5 },
-          company: "FL, FL",
+        { id: "5", name: "Michael P.", role: "Client", company: "NY", rating: 5 },
-          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",
-        },
       ]}
       kpiItems={[
-        {
+        { value: "100+", label: "Weekly Cuts" },
-          value: "100+",
+        { value: "20+", label: "Years Served" },
-          label: "Weekly Cuts",
+        { value: "5★", label: "Rating Average" },
-        },
-        {
-          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
+      <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: "q2", title: "Is it cash only?", content: "Yes, we are a classic cash-only establishment." },
-          id: "q1",
+        ]}
-          title: "Do you accept appointments?",
+        title="Common Questions"
-          content: "We operate primarily as a walk-in shop to maintain that classic, casual vibe.",
+        description="Everything you need to know about our barber shop services."
-        },
+        faqsAnimation="slide-up"
-        {
+        textboxLayout="default"
-          id: "q2",
+        mediaPosition="right"
-          title: "Is it cash only?",
+        useInvertedBackground={false}
-          content: "Yes, we are a classic cash-only establishment.",
+        imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg"
-        },
+        imageAlt="Lackawanna Barber Shop Interior"
-        {
+      />
-          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: "#",
-        },
-      ]}
-    />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoEmphasis
-      logoText="Lackawanna Barber Shop"
+        logoText="Lackawanna Barber Shop"
-      columns={[
+        columns={[
-        {
+          { items: [{ label: "132 Morris St, Morristown, NJ", href: "/contact" }, { label: "+1 (973) 538-1675", href: "/contact" }] },
-          title: "Shop",
+          { items: [{ label: "Services", href: "/#services" }, { label: "Team", href: "/#team" }, { label: "FAQs", href: "/#faq" }] }
-          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."
-    />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}