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

@@ -97,7 +97,7 @@ export function Header() {
                   )}
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-[calc(100vw-2rem)] sm:w-80 md:w-96 p-0 bg-white shadow-xl" align="end">
+              <PopoverContent className="w-[calc(100vw-2rem)] sm:w-80 md:w-96 p-0 bg-white shadow-xl border border-gray-200" align="end">
                 {/* Thumbtack Design at Top Right */}
                 <div className="relative">
                   <div className="absolute -top-2 right-8 w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45"></div>
@@ -170,7 +170,7 @@ export function Header() {
                   <UserCog className="w-4 h-4 sm:w-5 sm:h-5 text-rose-600" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-56 sm:w-64 p-0 bg-white shadow-xl" align="end">
+              <PopoverContent className="w-56 sm:w-64 p-0 bg-white shadow-xl border border-gray-200" align="end">
                 {/* Thumbtack Design at Top Right */}
                 <div className="relative">
                   <div className="absolute -top-2 right-8 w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45"></div>

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 (
+    <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>
+  );
+}
+

app/globals.css

@@ -91,4 +91,29 @@
   .text-balance {
     text-wrap: balance;
   }
+  
+  /* Custom Pink Scrollbar */
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: rgb(255 228 230);
+    border-radius: 4px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgb(244 63 94);
+    border-radius: 4px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgb(225 29 72);
+  }
+  
+  /* Firefox */
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(244 63 94) rgb(255 228 230);
+  }
 }

components/Hero.tsx

@@ -143,10 +143,13 @@ export function HeroSection() {
               <Button
                 size="lg"
                 className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white group cursor-pointer hover:scale-105 hover:shadow-lg transition-all"
+                asChild
               >
+                <a href="/book-now">
                   <Calendar className="mr-2 h-5 w-5" />
                   Book Appointment
                   <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+                </a>
               </Button>
               <Button 
                 size="lg" 

components/Navbar.tsx

@@ -84,7 +84,7 @@ export function Navbar() {
             </Button>
             <ThemeToggle />
             <Button size="sm" className="hidden sm:inline-flex hover:opacity-90 hover:scale-105 transition-all dark:hover:bg-emerald-600" asChild>
-              <a href="tel:+19548073027">Book Now</a>
+              <a href="/book-now">Book Now</a>
             </Button>
           </div>
         </div>

components/ui/dropdown-menu.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border-0 p-1 shadow-md",
           className
         )}
         {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border-0 p-1 shadow-lg",
         className
       )}
       {...props}

components/ui/popover.tsx

@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-gray-200 p-4 shadow-md outline-hidden",
           className
         )}
         {...props}

components/ui/select.tsx

@@ -62,7 +62,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border-0 shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className