393 lines
17 KiB
TypeScript
393 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Calendar,
|
|
Clock,
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MessageSquare,
|
|
ArrowLeft,
|
|
Heart,
|
|
CheckCircle2,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function BookNowPage() {
|
|
const router = useRouter();
|
|
const [formData, setFormData] = useState({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
appointmentType: "",
|
|
preferredDate: "",
|
|
preferredTime: "",
|
|
message: "",
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission
|
|
console.log("Form submitted:", formData);
|
|
// You can add navigation or API call here
|
|
};
|
|
|
|
const handleChange = (field: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Main Content */}
|
|
<main className="min-h-screen flex">
|
|
{/* Left Side - Image (Fixed) */}
|
|
<div className="hidden lg:block fixed top-0 left-0 h-screen w-1/2 overflow-hidden z-10 bg-gradient-to-br from-rose-100 via-pink-50 to-orange-50">
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="/doctors.png"
|
|
alt="Therapy session"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
sizes="50vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/50"></div>
|
|
</div>
|
|
|
|
{/* Logo at Top */}
|
|
<div className="absolute top-0 left-0 right-0 z-20 flex items-center p-6">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<div className="bg-gradient-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
|
|
<Heart className="h-5 w-5 text-white fill-white" />
|
|
</div>
|
|
<span className="font-bold text-lg text-rose-500 drop-shadow-lg">
|
|
Attune Heart Therapy
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Overlay Content - Lower Position */}
|
|
<div className="relative z-10 w-full h-full flex items-end justify-center px-12 pb-20">
|
|
<div className="space-y-4 text-center max-w-sm">
|
|
<h2 className="text-xl md:text-2xl font-bold leading-tight text-white drop-shadow-lg">
|
|
Begin Your Journey to Wellness
|
|
</h2>
|
|
<p className="text-sm md:text-base text-white/95 leading-relaxed drop-shadow-md">
|
|
Take the first step towards healing and growth. Our compassionate team is here to support you every step of the way.
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-2 pt-3">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Safe and confidential environment</span>
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Experienced licensed therapists</span>
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Personalized treatment plans</span>
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Flexible scheduling options</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Form (Scrollable) */}
|
|
<div className="w-full lg:w-1/2 lg:ml-auto fixed top-0 right-0 h-screen overflow-y-auto bg-white custom-scrollbar">
|
|
<div className="flex items-start justify-center min-h-full">
|
|
<div className="w-full max-w-2xl">
|
|
{/* Page Header */}
|
|
<div className="pt-4 sm:pt-6 lg:pt-8 px-6 sm:px-8 lg:px-12 pb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => router.back()}
|
|
className="flex items-center gap-2 text-black hover:bg-gray-100 mb-4"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
<span className="hidden sm:inline">Back</span>
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-gray-900 mb-1">
|
|
Book Your Appointment
|
|
</h1>
|
|
<p className="text-sm text-gray-500">
|
|
Fill out the form below and we'll get back to you to confirm your appointment
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Booking Form */}
|
|
<div className="px-6 sm:px-8 lg:px-12 pb-6 sm:pb-8 lg:pb-12">
|
|
<div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Personal Information Section */}
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
|
<User className="w-5 h-5 text-rose-600" />
|
|
Personal Information
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="firstName"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
First Name *
|
|
</label>
|
|
<Input
|
|
id="firstName"
|
|
type="text"
|
|
placeholder="John"
|
|
value={formData.firstName}
|
|
onChange={(e) =>
|
|
handleChange("firstName", e.target.value)
|
|
}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="lastName"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
Last Name *
|
|
</label>
|
|
<Input
|
|
id="lastName"
|
|
type="text"
|
|
placeholder="Doe"
|
|
value={formData.lastName}
|
|
onChange={(e) =>
|
|
handleChange("lastName", e.target.value)
|
|
}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="email"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Mail className="w-4 h-4 text-gray-500" />
|
|
Email Address *
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="john.doe@example.com"
|
|
value={formData.email}
|
|
onChange={(e) => handleChange("email", e.target.value)}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="phone"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Phone className="w-4 h-4 text-gray-500" />
|
|
Phone Number *
|
|
</label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
value={formData.phone}
|
|
onChange={(e) => handleChange("phone", e.target.value)}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Appointment Details Section */}
|
|
<div className="space-y-4 pt-6 border-t border-gray-200">
|
|
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
|
<Calendar className="w-5 h-5 text-rose-600" />
|
|
Appointment Details
|
|
</h2>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="appointmentType"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
Appointment Type *
|
|
</label>
|
|
<Select
|
|
value={formData.appointmentType}
|
|
onValueChange={(value) =>
|
|
handleChange("appointmentType", value)
|
|
}
|
|
required
|
|
>
|
|
<SelectTrigger id="appointmentType" className="h-11">
|
|
<SelectValue placeholder="Select appointment type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="initial-consultation">
|
|
Initial Consultation
|
|
</SelectItem>
|
|
<SelectItem value="individual-therapy">
|
|
Individual Therapy
|
|
</SelectItem>
|
|
<SelectItem value="family-therapy">Family Therapy</SelectItem>
|
|
<SelectItem value="couples-therapy">
|
|
Couples Therapy
|
|
</SelectItem>
|
|
<SelectItem value="group-therapy">Group Therapy</SelectItem>
|
|
<SelectItem value="follow-up">Follow-up Session</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="preferredDate"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Calendar className="w-4 h-4 text-gray-500" />
|
|
Preferred Date *
|
|
</label>
|
|
<Input
|
|
id="preferredDate"
|
|
type="date"
|
|
value={formData.preferredDate}
|
|
onChange={(e) =>
|
|
handleChange("preferredDate", e.target.value)
|
|
}
|
|
required
|
|
min={new Date().toISOString().split("T")[0]}
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="preferredTime"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Clock className="w-4 h-4 text-gray-500" />
|
|
Preferred Time *
|
|
</label>
|
|
<Select
|
|
value={formData.preferredTime}
|
|
onValueChange={(value) =>
|
|
handleChange("preferredTime", value)
|
|
}
|
|
required
|
|
>
|
|
<SelectTrigger id="preferredTime" className="h-11">
|
|
<SelectValue placeholder="Select time" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="9:00 AM">9:00 AM</SelectItem>
|
|
<SelectItem value="10:00 AM">10:00 AM</SelectItem>
|
|
<SelectItem value="11:00 AM">11:00 AM</SelectItem>
|
|
<SelectItem value="12:00 PM">12:00 PM</SelectItem>
|
|
<SelectItem value="1:00 PM">1:00 PM</SelectItem>
|
|
<SelectItem value="2:00 PM">2:00 PM</SelectItem>
|
|
<SelectItem value="3:00 PM">3:00 PM</SelectItem>
|
|
<SelectItem value="4:00 PM">4:00 PM</SelectItem>
|
|
<SelectItem value="5:00 PM">5:00 PM</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Message Section */}
|
|
<div className="space-y-4 pt-6 border-t border-gray-200">
|
|
<label
|
|
htmlFor="message"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<MessageSquare className="w-4 h-4 text-gray-500" />
|
|
Additional Message (Optional)
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
rows={4}
|
|
placeholder="Tell us about any specific concerns or preferences..."
|
|
value={formData.message}
|
|
onChange={(e) => handleChange("message", e.target.value)}
|
|
className="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-rose-500 focus-visible:border-rose-500 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="pt-6">
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
className="w-full bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all h-12 text-base font-semibold"
|
|
>
|
|
Submit Booking Request
|
|
</Button>
|
|
<p className="text-xs text-gray-500 text-center mt-4">
|
|
We'll review your request and get back to you within 24 hours
|
|
to confirm your appointment.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div className="mt-6 text-center">
|
|
<p className="text-gray-600">
|
|
Prefer to book by phone?{" "}
|
|
<a
|
|
href="tel:+19548073027"
|
|
className="text-rose-600 hover:text-rose-700 font-medium underline"
|
|
>
|
|
Call us at (954) 807-3027
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|