diff --git a/src/app/appointments/page.tsx b/src/app/appointments/page.tsx new file mode 100644 index 0000000..9059e4c --- /dev/null +++ b/src/app/appointments/page.tsx @@ -0,0 +1,109 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; +import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; +import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; +import { useState } from 'react'; +import { CheckCircle } from 'lucide-react'; + +export default function AppointmentsPage() { + const [isBooked, setIsBooked] = useState(false); + const [formData, setFormData] = useState>({}); + + const handleSubmit = (data: Record) => { + setFormData(data); + setIsBooked(true); + // In a real app, you would send this data to a backend for actual booking + console.log("Booking data:", data); + }; + + const navItems = [ + { name: "Home", id: "/" }, + { name: "About Us", id: "/#about" }, + { name: "Services", id: "/#services" }, + { name: "Reviews", id: "/#reviews" }, + { name: "FAQ", id: "/#faq" }, + { name: "Contact", id: "/#contact" }, + { name: "Book Now", id: "/appointments" } + ]; + + return ( + + + + +
+ {!isBooked ? ( +
+ +
+ ) : ( +
+
+ +

Appointment Confirmed!

+

Thank you, {formData.fullName || 'Valued Customer'}!

+

Your appointment request for {formData.movingDate} at {formData.timeSlot} has been received. We will contact you shortly at {formData.email} or {formData.phone} to finalize the details.

+ + Go to Home Page + +
+
+ )} +
+ + +
+
+ ); +} \ No newline at end of file