From 56a509231625da3abd43ae7a260ae41ff17207a3 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 25 May 2026 10:34:01 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 59 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ba55d3c..7651d99 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
@@ -11,9 +12,13 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Scissors, Star } from 'lucide-react';
+import { Scissors, Star, X, Calendar, Check } from 'lucide-react';
 
 export default function LandingPage() {
+  const [showBookingModal, setShowBookingModal] = useState(false);
+
+  const handleBookingClick = () => setShowBookingModal(true);
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -37,8 +42,7 @@ export default function LandingPage() {
                 { name: "Location", id: "location" },
               ]}
               brandName="Express Barbershop"
-              button={{
-                text: "Book Now",                href: "#"}}
+              button={{ text: "Book Now", onClick: handleBookingClick }}
             />
         </div>
 
@@ -47,7 +51,7 @@ export default function LandingPage() {
               logoText="Express Barbershop"
               description="Sharp Cuts. Clean Fades. Easy Online Booking.\n\nExpress Barbershop in Milnerton offers professional cuts, fades, beard styling and grooming services with simple online booking through Booksy."
               buttons={[
-                { text: "Book Now", href: "#" },
+                { text: "Book Now", onClick: handleBookingClick },
                 { text: "View Services", href: "#services" },
               ]}
               imageSrc="http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg"
@@ -88,7 +92,7 @@ export default function LandingPage() {
               ]}
               title="What Our Clients Say"
               description="Highly rated barbershop services in the heart of Milnerton."
-              buttons={[{ text: "Book Now", href: "#" }]}
+              buttons={[{ text: "Book Now", onClick: handleBookingClick }]}
             />
         </div>
 
@@ -97,12 +101,12 @@ export default function LandingPage() {
               textboxLayout="default"
               useInvertedBackground={false}
               features={[
-                { title: "Gents Cut", description: "R150 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", buttonIcon: Scissors },
-                { title: "Fade", description: "R170 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg", buttonIcon: Scissors },
-                { title: "Kids Cut", description: "R120 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/man-working-with-radio-equipment-close-up_23-2148815385.jpg", buttonIcon: Scissors },
-                { title: "Kids Fade", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-various-barber-tools-row_23-2147839820.jpg", buttonIcon: Scissors },
-                { title: "Beard Styling", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg", buttonIcon: Scissors },
-                { title: "Hot Towel Shave", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-shop-instruments_23-2149319798.jpg", buttonIcon: Scissors },
+                { title: "Gents Cut", description: "R150 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
+                { title: "Fade", description: "R170 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
+                { title: "Kids Cut", description: "R120 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/man-working-with-radio-equipment-close-up_23-2148815385.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
+                { title: "Kids Fade", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-various-barber-tools-row_23-2147839820.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
+                { title: "Beard Styling", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
+                { title: "Hot Towel Shave", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-shop-instruments_23-2149319798.jpg", buttonIcon: Scissors, buttonOnClick: handleBookingClick },
               ]}
               title="Our Professional Services"
               description="High-quality grooming for every style."
@@ -130,7 +134,7 @@ export default function LandingPage() {
             <TextAbout
               useInvertedBackground={false}
               title="Visit Express Barbershop"
-              buttons={[{ text: "Book Now", href: "#" }]}
+              buttons={[{ text: "Book Now", onClick: handleBookingClick }]}
             />
         </div>
 
@@ -155,7 +159,7 @@ export default function LandingPage() {
               useInvertedBackground={false}
               background={{ variant: "plain" }}
               text="Book Your Next Cut Online. Choose your service, select a time and confirm your appointment through Booksy. All bookings stay synced."
-              buttons={[{ text: "Book Now", href: "#" }]}
+              buttons={[{ text: "Book Now", onClick: handleBookingClick }]}
             />
         </div>
 
@@ -179,7 +183,34 @@ export default function LandingPage() {
               ]}
             />
         </div>
+
+        {showBookingModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-300">
+            <div className="w-full max-w-md p-6 bg-white rounded-2xl shadow-2xl animate-in zoom-in-95 duration-300">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-gray-900">Booking Confirmed</h3>
+                <button onClick={() => setShowBookingModal(false)} className="p-1 text-gray-400 hover:text-gray-900 transition-colors">
+                    <X className="w-5 h-5" />
+                </button>
+              </div>
+              <div className="space-y-3 mb-6">
+                <p className="text-sm text-gray-500">Service: <span className="font-medium text-gray-900">Gents Cut</span></p>
+                <p className="text-sm text-gray-500">Date: <span className="font-medium text-gray-900">Tomorrow</span></p>
+                <p className="text-sm text-gray-500">Time: <span className="font-medium text-gray-900">10:00 AM</span></p>
+                <p className="mt-4 text-xs font-semibold text-emerald-600">* Payment collected on the day</p>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <button onClick={() => setShowBookingModal(false)} className="flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-white transition-all bg-black rounded-xl hover:bg-gray-800">
+                    <Check className="w-4 h-4" /> Finish
+                </button>
+                <button className="flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-gray-900 transition-all bg-gray-100 rounded-xl hover:bg-gray-200">
+                    <Calendar className="w-4 h-4" /> Calendar
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}