Merge version_24 into main

Merge version_24 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,14 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 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 (
@@ -29,12 +28,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: "Services", id: "#services"},
-        { name: "Team", id: "team"},
+        { name: "Team", id: "#team"},
-        { name: "Testimonials", id: "testimonials"},
+        { name: "Testimonials", id: "#testimonials"},
-        { name: "FAQ", id: "faq"},
+        { name: "FAQ", id: "#faq"},
-        { name: "Contact", id: "contact"},
+        { name: "Contact", id: "/contact"},
       ]}
       brandName="Lackawanna"
     />
@@ -51,7 +50,7 @@ export default function LandingPage() {
         { 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={[
@@ -71,25 +70,15 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about" className="py-24 bg-background">
-    <div className="container mx-auto px-4">
-        <h2 className="text-3xl font-bold mb-12 text-center">Shop Contact Information</h2>
-        <div className="text-center py-10">
-            <p className="text-lg font-medium">Location: Morristown, NJ</p>
-            <p className="text-lg font-medium">Phone: +1 (973) 538-1675</p>
-        </div>
-    </div>
-  </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: "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", buttons: [{ text: "Walk-in Only", href: "#contact" }], features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"]},
+        { 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", buttons: [{ text: "Walk-in Only", href: "#contact" }], features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"]},
+        { 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."
@@ -111,53 +100,55 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+    <TestimonialCardTwo
-      animationType="slide-up"
+        animationType="slide-up"
-      textboxLayout="split-description"
+        textboxLayout="default"
-      useInvertedBackground={false}
+        title="Testimonials"
-      testimonials={[
+        description="See what our clients say about our work."
-        { id: "1", name: "Barry H.", role: "Loyal Customer", company: "FL", rating: 5 },
+        testimonials={[
-        { id: "2", name: "Melissa C.", role: "Regular Client", company: "NY", rating: 5 },
+            { 
-      ]}
+                id: "1", 
-      kpiItems={[
+                name: "Client One", 
-        { value: "100+", label: "Weekly Cuts" },
+                role: "Local Customer", 
-        { value: "20+", label: "Years Served" },
+                testimonial: "Exceptional service and great atmosphere.", 
-        { value: "5★", label: "Rating Average" },
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776531377369-oo06t3wn.png"
-      ]}
+            },
-      title="What Our Clients Say"
+            { 
-      description="We are proud to serve our community and deliver the best cuts in town."
+                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>
 
   <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: "+1 (973) 538-1675", href: "tel:+19735381675" }]}
-    />
   </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", href: "/contact" }] },
-      ]}
+          { items: [{ label: "Services", href: "/#services" }, { label: "Team", href: "/#team" }, { label: "FAQs", href: "/#faq" }] }
-      copyrightText="© 2024 Lackawanna Barber Shop. All rights reserved."
+        ]}
-    />
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #f5f4ef;
-  --card: #ffffff;
+  --card: #dad6cd;
-  --foreground: #0c1325;
+  --foreground: #2a2928;
-  --primary-cta: #0b07ff;
+  --primary-cta: #2a2928;
-  --primary-cta-text: #f7f6f7;
+  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #ecebea;
-  --secondary-cta-text: #0c1325;
+  --secondary-cta-text: #2a2928;
-  --accent: #93b7ff;
+  --accent: #ffffff;
-  --background-accent: #a8bae8;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);