diff --git a/app/(admin)/_components/header.tsx b/app/(admin)/_components/header.tsx index 7bc7ac6..c1a65a0 100644 --- a/app/(admin)/_components/header.tsx +++ b/app/(admin)/_components/header.tsx @@ -97,7 +97,7 @@ export function Header() { )} - + {/* Thumbtack Design at Top Right */}
@@ -170,7 +170,7 @@ export function Header() { - + {/* Thumbtack Design at Top Right */}
diff --git a/app/book-now/page.tsx b/app/book-now/page.tsx new file mode 100644 index 0000000..26adfb5 --- /dev/null +++ b/app/book-now/page.tsx @@ -0,0 +1,392 @@ +"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 ( +
+ {/* Main Content */} +
+ {/* Left Side - Image (Fixed) */} +
+
+ Therapy session +
+
+ + {/* Logo at Top */} +
+ +
+ +
+ + Attune Heart Therapy + + +
+ + {/* Overlay Content - Lower Position */} +
+
+

+ Begin Your Journey to Wellness +

+

+ Take the first step towards healing and growth. Our compassionate team is here to support you every step of the way. +

+ + {/* Features List */} +
+
+
+ +
+ Safe and confidential environment +
+
+
+ +
+ Experienced licensed therapists +
+
+
+ +
+ Personalized treatment plans +
+
+
+ +
+ Flexible scheduling options +
+
+
+
+
+ + {/* Right Side - Form (Scrollable) */} +
+
+
+ {/* Page Header */} +
+ +
+

+ Book Your Appointment +

+

+ Fill out the form below and we'll get back to you to confirm your appointment +

+
+
+ + {/* Booking Form */} +
+
+
+ {/* Personal Information Section */} +
+

+ + Personal Information +

+ +
+
+ + + handleChange("firstName", e.target.value) + } + required + className="h-11" + /> +
+ +
+ + + handleChange("lastName", e.target.value) + } + required + className="h-11" + /> +
+
+ +
+ + handleChange("email", e.target.value)} + required + className="h-11" + /> +
+ +
+ + handleChange("phone", e.target.value)} + required + className="h-11" + /> +
+
+ + {/* Appointment Details Section */} +
+

+ + Appointment Details +

+ +
+ + +
+ +
+
+ + + handleChange("preferredDate", e.target.value) + } + required + min={new Date().toISOString().split("T")[0]} + className="h-11" + /> +
+ +
+ + +
+
+
+ + {/* Additional Message Section */} +
+ +