Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -9,7 +9,9 @@ import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Award, Clock, Phone, Scissors, Sparkles } from "lucide-react";
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
+import EmailSignupForm from '@/components/form/EmailSignupForm';
+import { Award, Clock, Phone, Scissors, Sparkles, AlertTriangle, ShieldCheck } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,26 +31,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Guarantee", id: "guarantee" },
-        },
+        { name: "Process", id: "process" },
-        {
+        { name: "Reviews", id: "testimonials" },
-          name: "About",
+        { name: "Contact", id: "contact" },
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Visit",
-          id: "contact",
-        },
       ]}
       brandName="Junior Barbers"
     />
@@ -56,19 +44,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Mastery in Every Cut"
       description="Providing exceptional grooming experiences for over 16 years. Trust in the hands of our master barber Shehzad."
       imageSrc="http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18649.jpg"
       imageAlt="Luxury barbershop interior with a classic gold and charcoal aesthetic"
-      buttons={[
+      buttons={[{ text: "Book Your Seat", href: "#contact" }]}
-        {
-          text: "Book Your Seat",
-          href: "#contact",
-        },
-      ]}
     />
   </div>
 
@@ -79,18 +60,9 @@ export default function LandingPage() {
       title="A Legacy of Trust"
       description="With over 16 years of dedication, Junior Barbers has built a reputation for perfection. We believe in taking the time to understand your style, ensuring every cut is nothing short of a masterpiece."
       bulletPoints={[
-        {
+        { title: "Master Barber Expertise", description: "Expertly led by Shehzad, our scissors specialists never rush your cut.", icon: Scissors },
-          title: "Master Barber Expertise",
+        { title: "Signature Perks", description: "Enjoy a free signature head massage with every premium grooming experience.", icon: Sparkles },
-          description: "Expertly led by Shehzad, our scissors specialists never rush your cut.",
+        { title: "Family Friendly", description: "Expert haircuts for children, with a lollipop to celebrate their new style.", icon: Award },
-        },
-        {
-          title: "Signature Perks",
-          description: "Enjoy a free signature head massage with every premium grooming experience.",
-        },
-        {
-          title: "Family Friendly",
-          description: "Expert haircuts for children, with a lollipop to celebrate their new style.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg"
       mediaAnimation="slide-up"
@@ -98,41 +70,33 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="services" data-section="services">
+  <div id="guarantee" data-section="guarantee">
       <FeatureBorderGlow
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
+      title="Our Commitment to You"
+      description="We stand behind our craft with a promise of quality and rapid response to your needs."
       features={[
-        {
+          { icon: ShieldCheck, title: "20-Year Guarantee", description: "Our legacy is built on a two-decade promise of unmatched professional standards." },
-          icon: Scissors,
+          { icon: AlertTriangle, title: "Emergency Storm Response", description: "We are always ready to support our community during unpredictable weather emergencies." }
-          title: "Scissors Specialist Cut",
-          description: "Precision tailoring for your hair style.",
-        },
-        {
-          icon: Award,
-          title: "Junior Styling",
-          description: "Specialized kids haircuts for the little ones.",
-        },
-        {
-          icon: Sparkles,
-          title: "Signature Head Massage",
-          description: "Experience deep relaxation with our signature service.",
-        },
-        {
-          icon: Scissors,
-          title: "Beard Sculpting",
-          description: "Traditional hot towel treatment and razor edge lining.",
-        },
-        {
-          icon: Clock,
-          title: "Express Refresh",
-          description: "Quick maintenance for when you are on the go.",
-        },
       ]}
-      title="Our Grooming Services"
+      />
-      description="From precision cuts to signature treatments, we cater to every grooming need with classic care."
+  </div>
-    />
+
+  <div id="process" data-section="process">
+      <TimelineHorizontalCardStack
+      title="The Barber Process"
+      description="A systematic approach to ensuring the perfect groom every single visit."
+      textboxLayout="split"
+      useInvertedBackground={false}
+      ariaLabel="Our professional grooming process"
+      >
+          <div>1. Consultation: We listen to your hair vision.</div>
+          <div>2. Preparation: Sanitized tools for a clean slate.</div>
+          <div>3. Execution: Precision cutting by our specialists.</div>
+          <div>4. Finishing: Signature touches and styling.</div>
+      </TimelineHorizontalCardStack>
   </div>
 
   <div id="testimonials" data-section="testimonials">
@@ -140,46 +104,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", title: "Perfect Every Time", quote: "They never rush a cut. Always takes time to get it perfect.", name: "Graham", role: "Loyal Client" },
-          id: "1",
+        { id: "2", title: "Great Experience", quote: "The head massage is a absolute game-changer.", name: "Fahad", role: "Loyal Client" },
-          title: "Perfect Every Time",
+        { id: "3", title: "16 Years Strong", quote: "There's no better shop in town.", name: "Khalid", role: "Loyal Client" },
-          quote: "They never rush a cut. Always takes time to get it perfect.",
-          name: "Graham",
-          role: "Loyal Client",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-white-shirt-looking-cheerful_176474-17343.jpg",
-        },
-        {
-          id: "2",
-          title: "Great Experience",
-          quote: "The head massage is a absolute game-changer.",
-          name: "Fahad",
-          role: "Loyal Client",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-posing-her-home_23-2148708980.jpg",
-        },
-        {
-          id: "3",
-          title: "Kid Friendly",
-          quote: "My son loves coming here, and he always leaves with a lollipop!",
-          name: "Weronika",
-          role: "Parent",
-          imageSrc: "http://img.b2bpic.net/free-photo/authentic-book-club-scene_23-2150104578.jpg",
-        },
-        {
-          id: "4",
-          title: "16 Years Strong",
-          quote: "I've been trusting Shehzad for years. There's no better shop in town.",
-          name: "Khalid",
-          role: "Loyal Client",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg?_wi=1",
-        },
-        {
-          id: "5",
-          title: "Professionalism",
-          quote: "A true professional. Best fade I have had in the city.",
-          name: "Marcus",
-          role: "Regular",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg?_wi=2",
-        },
       ]}
       title="Voices of Trust"
       description="Hear what our loyal community says about our dedication to quality."
@@ -187,32 +114,24 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
+      <div className="py-12 bg-card">
+        <h2 className="text-center text-3xl font-bold mb-8">Schedule Your Appointment</h2>
+        <EmailSignupForm 
+            inputPlaceholder="Enter your phone number" 
+            buttonText="Request Quote"
+            className="max-w-md mx-auto"
+        />
+      </div>
       <ContactFaq
       animationType="slide-up"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "Opening Hours", content: "We are open all week except Tuesdays." },
-          id: "f1",
+        { id: "f3", title: "Location", content: "Visit our boutique studio downtown." },
-          title: "Opening Hours",
-          content: "We are open all week except Tuesdays.",
-        },
-        {
-          id: "f2",
-          title: "Wait Times",
-          content: "We recommend calling ahead to check the current wait times before arriving.",
-        },
-        {
-          id: "f3",
-          title: "Location",
-          content: "Visit our boutique studio downtown, easily accessible by public transit.",
-        },
       ]}
       ctaTitle="Visit Us Today"
       ctaDescription="Join the Junior Barbers family for your next precision cut."
-      ctaButton={{
+      ctaButton={{ text: "Call Now", href: "tel:+1000000000" }}
-        text: "Call Now",
-        href: "tel:+1000000000",
-      }}
       ctaIcon={Phone}
     />
   </div>
@@ -220,34 +139,10 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "Junior Barbers", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
-          title: "Junior Barbers",
+        { title: "Contact", items: [{ label: "Call Us", href: "tel:+1000000000" }, { label: "Find Us", href: "#contact" }] },
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Visit",
-          items: [
-            {
-              label: "Call Ahead",
-              href: "#contact",
-            },
-            {
-              label: "Contact Details",
-              href: "#contact",
-            },
-          ],
-        },
       ]}
-      copyrightText="© 2025 Junior Barbers. All rights reserved."
+      copyrightText="© 2025 Junior Barbers. Professional Industrial Grooming."
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #001f3f;
-  --card: #1a1a1a;
+  --card: #002b5c;
   --foreground: #f5f5f5;
-  --primary-cta: #d4af37;
+  --primary-cta: #d35400;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f39c12;
   --secondary-cta-text: #1a1a1a;
-  --accent: #b8860b;
+  --accent: #d35400;
-  --background-accent: #1a1a1a;
+  --background-accent: #001a35;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);