From 0289a8cd9246deee1206ccaf0a8c55b814ea72c4 Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 3 Mar 2026 17:05:19 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 367 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 362 insertions(+), 5 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 38bf0a2..73223ec 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,9 +9,359 @@ import FeatureCardOne from "@/components/sections/feature/FeatureCardOne"; import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix"; import ContactSplit from "@/components/sections/contact/ContactSplit"; import FooterBase from "@/components/sections/footer/FooterBase"; -import { Star, Sparkles, Award, Heart, Mail } from "lucide-react"; +import { Star, Sparkles, Award, Heart, Mail, Calendar, X, Clock, Users, CheckCircle } from "lucide-react"; +import { useState } from "react"; +import React from "react"; + +interface TimeSlot { + time: string; + available: boolean; +} + +interface BookingState { + isOpen: boolean; + step: 'service' | 'date' | 'time' | 'confirmation'; + selectedService: string | null; + selectedDate: string | null; + selectedTime: string | null; + name: string; + email: string; + phone: string; +} + +const SERVICES = [ + { id: 'cosmetic', name: 'Cosmetic Dentistry', duration: '1 hour' }, + { id: 'implants', name: 'Dental Implants', duration: '2 hours' }, + { id: 'cleaning', name: 'Professional Cleaning', duration: '45 minutes' }, + { id: 'root-canal', name: 'Root Canal', duration: '1.5 hours' }, + { id: 'orthodontics', name: 'Orthodontics Consultation', duration: '30 minutes' }, +]; + +const TIME_SLOTS: TimeSlot[] = [ + { time: '09:00 AM', available: true }, + { time: '09:30 AM', available: true }, + { time: '10:00 AM', available: false }, + { time: '10:30 AM', available: true }, + { time: '11:00 AM', available: true }, + { time: '02:00 PM', available: true }, + { time: '02:30 PM', available: false }, + { time: '03:00 PM', available: true }, + { time: '03:30 PM', available: true }, + { time: '04:00 PM', available: true }, +]; + +function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose: () => void; onSubmit: (data: any) => void }) { + const [state, setState] = React.useState({ + isOpen, + step: 'service', + selectedService: null, + selectedDate: null, + selectedTime: null, + name: '', + email: '', + phone: '', + }); + + React.useEffect(() => { + setState(prev => ({ ...prev, isOpen })); + }, [isOpen]); + + const handleServiceSelect = (serviceId: string) => { + setState(prev => ({ + ...prev, + selectedService: serviceId, + step: 'date', + })); + }; + + const handleDateSelect = (date: string) => { + setState(prev => ({ + ...prev, + selectedDate: date, + step: 'time', + })); + }; + + const handleTimeSelect = (time: string) => { + setState(prev => ({ + ...prev, + selectedTime: time, + step: 'confirmation', + })); + }; + + const handleInputChange = (field: string, value: string) => { + setState(prev => ({ + ...prev, + [field]: value, + })); + }; + + const handleSubmit = () => { + const service = SERVICES.find(s => s.id === state.selectedService); + onSubmit({ + service: service?.name, + date: state.selectedDate, + time: state.selectedTime, + name: state.name, + email: state.email, + phone: state.phone, + }); + onClose(); + }; + + const getNextAvailableDate = () => { + const tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + return tomorrow.toISOString().split('T')[0]; + }; + + const getDateRangeOptions = () => { + const dates = []; + for (let i = 1; i <= 30; i++) { + const date = new Date(); + date.setDate(date.getDate() + i); + dates.push(date.toISOString().split('T')[0]); + } + return dates; + }; + + const formatDate = (dateStr: string) => { + return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); + }; + + if (!isOpen) return null; + + return ( +
+
+ {/* Header */} +
+

Schedule Your Appointment

+ +
+ + {/* Progress Indicator */} +
+
+ {['Service', 'Date', 'Time', 'Confirm'].map((label, idx) => ( + +
+
+ {idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step) ? '✓' : idx + 1} +
+ {label} +
+ {idx < 3 && ( +
+ )} + + ))} +
+
+ + {/* Content */} +
+ {/* Service Selection */} + {state.step === 'service' && ( +
+

Select a Service

+
+ {SERVICES.map(service => ( + + ))} +
+ +
+ )} + + {/* Date Selection */} + {state.step === 'date' && ( +
+

Select a Date

+
+ {getDateRangeOptions().map(date => ( + + ))} +
+
+ + +
+
+ )} + + {/* Time Selection */} + {state.step === 'time' && ( +
+

Select a Time

+
+ {TIME_SLOTS.map(slot => ( + + ))} +
+
+ + +
+
+ )} + + {/* Confirmation */} + {state.step === 'confirmation' && ( +
+
+ +
+
Appointment Details
+
+ {SERVICES.find(s => s.id === state.selectedService)?.name} on {formatDate(state.selectedDate!)} at {state.selectedTime} +
+
+
+ +
+

Your Information

+ handleInputChange('name', e.target.value)} + className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600" + /> + handleInputChange('email', e.target.value)} + className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600" + /> + handleInputChange('phone', e.target.value)} + className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600" + /> +
+ +
+ + +
+
+ )} +
+
+
+ ); +} export default function LandingPage() { + const [bookingOpen, setBookingOpen] = useState(false); + + const handleBookingSubmit = (data: any) => { + console.log('Booking submitted:', data); + // Here you would typically send this to your backend + alert(`Booking confirmed for ${data.name} on ${data.date} at ${data.time}`); + }; + return ( + setBookingOpen(false)} + onSubmit={handleBookingSubmit} + /> + @@ -55,7 +412,7 @@ export default function LandingPage() { ]} enableKpiAnimation={true} buttons={[ - { text: "Book Consultation", href: "#contact" }, + { text: "Book Consultation", onClick: () => setBookingOpen(true) }, { text: "Learn More", href: "#services" }, ]} buttonAnimation="slide-up" @@ -88,7 +445,7 @@ export default function LandingPage() { ]} gridVariant="three-columns-all-equal-width" animationType="slide-up" - buttons={[{ text: "View All Services", href: "#contact" }]} + buttons={[{ text: "View All Services", onClick: () => setBookingOpen(true) }]} buttonAnimation="slide-up" />
@@ -129,7 +486,7 @@ export default function LandingPage() { ]} gridVariant="three-columns-all-equal-width" animationType="slide-up" - buttons={[{ text: "Schedule Appointment", href: "#contact" }]} + buttons={[{ text: "Schedule Appointment", onClick: () => setBookingOpen(true) }]} buttonAnimation="slide-up" /> -- 2.49.1