Update src/app/booking/page.tsx

src/app/booking/page.tsx

@@ -5,8 +5,18 @@ import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from "react";
 
 export default function BookingPage() {
+  const [isBooking, setIsBooking] = useState(false);
+
+  const handleBookingClick = () => {
+    setIsBooking(true);
+    // Add logic to trigger booking modal or scroll to form
+    const section = document.getElementById('booking-form');
+    if (section) section.scrollIntoView({ behavior: 'smooth' });
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -40,11 +50,17 @@ export default function BookingPage() {
           <div className="grid md:grid-cols-2 gap-12">
             <div className="p-8 bg-white/50 rounded-2xl shadow-inner border border-gray-100">
               <h2 className="text-2xl font-semibold mb-6">Calendar & Availability</h2>
-              <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center text-gray-500 italic">
+              <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center text-gray-500 italic mb-4">
                 [Calendar Widget Placeholder]
               </div>
+              <button 
+                onClick={handleBookingClick}
+                className="w-full py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition"
+              >
+                Check Available Slots
+              </button>
             </div>
-            <div className="p-8 bg-white/50 rounded-2xl shadow-inner border border-gray-100">
+            <div id="booking-form" className="p-8 bg-white/50 rounded-2xl shadow-inner border border-gray-100">
               <h2 className="text-2xl font-semibold mb-6">Booking Details</h2>
               <div className="space-y-4">
                 <input type="text" placeholder="Full Name" className="w-full p-3 rounded-md border" />
@@ -54,7 +70,12 @@ export default function BookingPage() {
                   <option>Bridal Makeup</option>
                   <option>Facials</option>
                 </select>
-                <button className="w-full py-3 bg-primary text-white rounded-md">Confirm Booking</button>
+                <button 
+                  onClick={() => alert("Booking Request Initiated!")}
+                  className="w-full py-3 bg-primary text-white rounded-md hover:opacity-90 transition"
+                >
+                  Confirm Booking
+                </button>
               </div>
             </div>
           </div>