bender/657b2f1e-4f87-46f4-91ec-14a799a5d019
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/booking/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-09 13:35:32 +00:00
parent 2a2322a269
commit a466a21013
1 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/booking/page.tsx
View File

@@ -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>