From 77ecc28df1d07d0754962801f44ad0b3a7a672cf Mon Sep 17 00:00:00 2001 From: iamkiddy Date: Fri, 7 Nov 2025 19:47:18 +0000 Subject: [PATCH] Add custom pink scrollbar styles and update Popover and Select components for consistent border styling. Modify Hero and Navbar components to link to booking page. --- app/(admin)/_components/header.tsx | 4 +- app/book-now/page.tsx | 392 +++++++++++++++++++++++++++++ app/globals.css | 25 ++ components/Hero.tsx | 9 +- components/Navbar.tsx | 2 +- components/ui/dropdown-menu.tsx | 4 +- components/ui/popover.tsx | 2 +- components/ui/select.tsx | 2 +- 8 files changed, 430 insertions(+), 10 deletions(-) create mode 100644 app/book-now/page.tsx 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 */} +
+ +