Update src/app/page.tsx

Merge version_2 into main

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,23 @@ 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 [bookingStep, setBookingStep] = useState<'form' | 'success'>('form');
+  const [formData, setFormData] = useState({ name: '', surname: '', phone: '', email: '' });
+
+  const handleBookingClick = () => {
+    setBookingStep('form');
+    setShowBookingModal(true);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setBookingStep('success');
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -37,8 +52,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 +61,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 +102,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 +111,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 +144,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 +169,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,6 +193,38 @@ 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-6">
+                <h3 className="text-xl font-bold text-gray-900">
+                  {bookingStep === 'form' ? 'Complete Booking' : '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>
+              
+              {bookingStep === 'form' ? (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <input required placeholder="Name" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, name: e.target.value})} />
+                    <input required placeholder="Surname" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, surname: e.target.value})} />
+                  </div>
+                  <input required type="tel" placeholder="Phone" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, phone: e.target.value})} />
+                  <input required type="email" placeholder="Email" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, email: e.target.value})} />
+                  <button type="submit" className="w-full p-3 text-white bg-black rounded-xl hover:bg-gray-800 transition-colors font-medium">Confirm Appointment</button>
+                </form>
+              ) : (
+                <div className="space-y-4">
+                    <p className="text-gray-600">Thank you {formData.name}, your appointment request has been submitted successfully.</p>
+                    <button onClick={() => setShowBookingModal(false)} className="w-full p-3 text-gray-900 bg-gray-100 rounded-xl hover:bg-gray-200">Close</button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
       </ReactLenis>
     </ThemeProvider>
   );