Merge version_27 into main

Merge version_27 into main

src/app/about/page.tsx

@@ -3,7 +3,7 @@
 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 TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function AboutPage() {
@@ -21,43 +21,31 @@ export default function AboutPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-        <div id="nav">
+        <div id="nav" data-section="nav">
             <NavbarLayoutFloatingOverlay
             navItems={[
+              { name: "Home", id: "/"},
               { 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: "Contact", id: "/contact"},
             ]}
             brandName="Lackawanna"
             />
         </div>
 
-        <div id="about-content" className="pt-32 pb-24">
-            <SplitAbout
+        <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."
-                textboxLayout="default"
+                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}
-                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">
+        <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" }] },
-                { items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }, { label: "FAQs", href: "#faq" }] }
+                { 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>

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,14 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-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 TeamCardFive from '@/components/sections/team/TeamCardFive';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
@@ -30,11 +29,11 @@ export default function LandingPage() {
       <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: "Services", id: "/services"},
+        { name: "Team", id: "/team"},
+        { name: "Testimonials", id: "/testimonials"},
+        { name: "FAQ", id: "/faq"},
+        { name: "Contact", id: "/contact"},
       ]}
       brandName="Lackawanna"
     />
@@ -51,7 +50,6 @@ export default function LandingPage() {
         { value: "100%", label: "Satisfaction"},
       ]}
       enableKpiAnimation={true}
-      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"
@@ -78,9 +76,9 @@ export default function LandingPage() {
       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: "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"]},
-        { 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: "basic", badge: "Classic", price: "$40", subtitle: "Precision Haircut", features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"], buttons: [{text: "Contact Us", href: "/contact"}]},
+        { 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"}]},
+        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"], buttons: [{text: "Contact Us", href: "/contact"}]},
       ]}
       title="Quality Service, Transparent Price"
       description="Simple, honest pricing for the services you need."
@@ -102,24 +100,28 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="split-description"
-      useInvertedBackground={false}
-      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" },
-        { 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."
+    <TestimonialCardTwo
+        animationType="slide-up"
+        textboxLayout="default"
+        useInvertedBackground={false}
+        title="Testimonials"
+        description="See what our clients say about our work."
+        testimonials={[
+            { 
+                id: "1", 
+                name: "Client One", 
+                role: "Local Customer", 
+                testimonial: "Exceptional service and great atmosphere.", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776531377369-oo06t3wn.png"
+            },
+            { 
+                id: "2", 
+                name: "Client Two", 
+                role: "Regular Visitor", 
+                testimonial: "Always get a perfect fade here.", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776531377370-5uotcrix.png"
+            }
+        ]}
     />
   </div>
 
@@ -129,9 +131,6 @@ export default function LandingPage() {
           { 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." },
         ]}
-        buttons={[
-          { text: "Get Directions", href: "#contact" }
-        ]}
         title="Common Questions"
         description="Everything you need to know about our barber shop services."
         faqsAnimation="slide-up"
@@ -143,22 +142,12 @@ export default function LandingPage() {
       />
   </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-        tag="Visit Us"
-        title="Ready for your next cut?"
-        description="Stop by our Morristown shop to experience the Lackawanna difference."
-        background={{ variant: "sparkles-gradient" }}
-        useInvertedBackground={true}
-      />
-  </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" }] },
-          { items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }, { label: "FAQs", href: "#faq" }] }
+          { items: [{ label: "132 Morris St, Morristown, NJ", href: "/contact" }, { label: "+1 (973) 538-1675", href: "/contact" }] },
+          { items: [{ label: "Services", href: "/services" }, { label: "Team", href: "/team" }, { label: "FAQs", href: "/faq" }] }
         ]}
       />
   </div>