Implement booking form functionality with loading state and error handling. Add user and booking interfaces, and display confirmation message upon successful submission. Enhance form submission process with time conversion and mock API response for development.

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,647 @@
+"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,
+  CheckCircle,
+  Loader2,
+} from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { LoginDialog } from "@/components/LoginDialog";
+
+interface User {
+  ID: number;
+  CreatedAt?: string;
+  UpdatedAt?: string;
+  DeletedAt?: string | null;
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+  location: string;
+  date_of_birth?: string;
+  is_admin?: boolean;
+  bookings?: null;
+}
+
+interface Booking {
+  ID: number;
+  CreatedAt: string;
+  UpdatedAt: string;
+  DeletedAt: string | null;
+  user_id: number;
+  user: User;
+  scheduled_at: string;
+  duration: number;
+  status: string;
+  jitsi_room_id: string;
+  jitsi_room_url: string;
+  payment_id: string;
+  payment_status: string;
+  amount: number;
+  notes: string;
+}
+
+interface BookingsResponse {
+  bookings: Booking[];
+  limit: number;
+  offset: number;
+  total: number;
+}
+
+export default function BookNowPage() {
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    appointmentType: "",
+    preferredDate: "",
+    preferredTime: "",
+    message: "",
+  });
+  const [loading, setLoading] = useState(false);
+  const [booking, setBooking] = useState<Booking | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // Open login dialog instead of submitting directly
+    setShowLoginDialog(true);
+  };
+
+  const handleLoginSuccess = async () => {
+    // After successful login, proceed with booking submission
+    await submitBooking();
+  };
+
+  const submitBooking = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Convert time to 24-hour format for ISO string
+      const time24 = formData.preferredTime.includes("PM") 
+        ? formData.preferredTime.replace("PM", "").trim().split(":").map((v, i) => 
+            i === 0 ? (parseInt(v) === 12 ? 12 : parseInt(v) + 12) : v
+          ).join(":")
+        : formData.preferredTime.replace("AM", "").trim().split(":").map((v, i) => 
+            i === 0 ? (parseInt(v) === 12 ? "00" : v.padStart(2, "0")) : v
+          ).join(":");
+      
+      // Combine date and time into scheduled_at (ISO format)
+      const dateTimeString = `${formData.preferredDate}T${time24}:00Z`;
+      
+      // Prepare request payload
+      const payload = {
+        first_name: formData.firstName,
+        last_name: formData.lastName,
+        email: formData.email,
+        phone: formData.phone,
+        appointment_type: formData.appointmentType,
+        scheduled_at: dateTimeString,
+        duration: 60, // Default to 60 minutes
+        notes: formData.message || "",
+      };
+
+      // Simulate API call - Replace with actual API endpoint
+      const response = await fetch("/api/bookings", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      }).catch(() => {
+        // Fallback to mock data if API is not available
+        return null;
+      });
+
+      let bookingData: Booking;
+
+      if (response && response.ok) {
+        const data: BookingsResponse = await response.json();
+        bookingData = data.bookings[0];
+      } else {
+        // Mock response for development - matches the API structure provided
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        bookingData = {
+          ID: Math.floor(Math.random() * 1000),
+          CreatedAt: new Date().toISOString(),
+          UpdatedAt: new Date().toISOString(),
+          DeletedAt: null,
+          user_id: 1,
+          user: {
+            ID: 1,
+            CreatedAt: new Date().toISOString(),
+            UpdatedAt: new Date().toISOString(),
+            DeletedAt: null,
+            first_name: formData.firstName,
+            last_name: formData.lastName,
+            email: formData.email,
+            phone: formData.phone,
+            location: "",
+            date_of_birth: "0001-01-01T00:00:00Z",
+            is_admin: false,
+            bookings: null,
+          },
+          scheduled_at: dateTimeString,
+          duration: 60,
+          status: "scheduled",
+          jitsi_room_id: `booking-${Math.floor(Math.random() * 1000)}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          jitsi_room_url: `https://meet.jit.si/booking-${Math.floor(Math.random() * 1000)}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          payment_id: "",
+          payment_status: "pending",
+          amount: 52,
+          notes: formData.message || "Initial consultation session",
+        };
+      }
+
+      setBooking(bookingData);
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to submit booking. Please try again.");
+      setLoading(false);
+      console.error("Booking error:", err);
+    }
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const formatDateTime = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true,
+    });
+  };
+
+  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 or Success Message */}
+              <div className="px-6 sm:px-8 lg:px-12 pb-6 sm:pb-8 lg:pb-12">
+                {booking ? (
+                  <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
+                    <div className="text-center space-y-4">
+                      <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
+                        <CheckCircle className="w-8 h-8 text-green-600" />
+                      </div>
+                      <div>
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-2">
+                          Booking Confirmed!
+                        </h2>
+                        <p className="text-gray-600">
+                          Your appointment has been successfully booked.
+                        </p>
+                      </div>
+                      <div className="bg-gray-50 rounded-lg p-6 space-y-4 text-left">
+                        <div>
+                          <p className="text-sm font-medium text-gray-500 mb-1">Booking ID</p>
+                          <p className="text-base font-semibold text-gray-900">#{booking.ID}</p>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-500 mb-1">Patient</p>
+                          <p className="text-base text-gray-900">
+                            {booking.user.first_name} {booking.user.last_name}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-500 mb-1">Scheduled Time</p>
+                          <p className="text-base text-gray-900">{formatDateTime(booking.scheduled_at)}</p>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-500 mb-1">Duration</p>
+                          <p className="text-base text-gray-900">{booking.duration} minutes</p>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-500 mb-1">Status</p>
+                          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                            {booking.status}
+                          </span>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-500 mb-1">Amount</p>
+                          <p className="text-base font-semibold text-gray-900">${booking.amount}</p>
+                        </div>
+                        {booking.notes && (
+                          <div>
+                            <p className="text-sm font-medium text-gray-500 mb-1">Notes</p>
+                            <p className="text-base text-gray-900">{booking.notes}</p>
+                          </div>
+                        )}
+                      </div>
+                      <div className="pt-4 flex flex-col sm:flex-row gap-3 justify-center">
+                        <Button
+                          onClick={() => {
+                            setBooking(null);
+                            setFormData({
+                              firstName: "",
+                              lastName: "",
+                              email: "",
+                              phone: "",
+                              appointmentType: "",
+                              preferredDate: "",
+                              preferredTime: "",
+                              message: "",
+                            });
+                          }}
+                          variant="outline"
+                        >
+                          Book Another Appointment
+                        </Button>
+                        <Button
+                          onClick={() => router.push("/")}
+                          className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
+                        >
+                          Return to Home
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
+                      {error && (
+                        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+                          <p className="text-sm text-red-800">{error}</p>
+                        </div>
+                      )}
+                      <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"
+                      disabled={loading}
+                      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 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {loading ? (
+                        <>
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          Submitting...
+                        </>
+                      ) : (
+                        "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>
+
+      {/* Login Dialog */}
+      <LoginDialog
+        open={showLoginDialog}
+        onOpenChange={setShowLoginDialog}
+        onLoginSuccess={handleLoginSuccess}
+      />
+    </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/LoginDialog.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import Link from "next/link";
+
+interface LoginDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onLoginSuccess: () => void;
+}
+
+export function LoginDialog({ open, onOpenChange, onLoginSuccess }: LoginDialogProps) {
+  const [loginData, setLoginData] = useState({
+    email: "",
+    password: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoginLoading(true);
+    setError(null);
+    
+    try {
+      // Simulate login API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      
+      // After successful login, close dialog and call success callback
+      setShowPassword(false);
+      setLoginLoading(false);
+      onOpenChange(false);
+      onLoginSuccess();
+    } catch (err) {
+      setError("Login failed. Please try again.");
+      setLoginLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md bg-white">
+        <DialogHeader>
+          <DialogTitle className="text-3xl font-bold bg-linear-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent">
+            Welcome back
+          </DialogTitle>
+          <DialogDescription className="text-gray-600">
+            Please log in to complete your booking
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Login Form */}
+        <form className="space-y-6 mt-4" onSubmit={handleLogin}>
+          {error && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+              <p className="text-sm text-red-800">{error}</p>
+            </div>
+          )}
+
+          {/* Email Field */}
+          <div className="space-y-2">
+            <label htmlFor="login-email" className="text-sm font-medium text-black">
+              Email address
+            </label>
+            <Input
+              id="login-email"
+              type="email"
+              placeholder="Email address"
+              value={loginData.email}
+              onChange={(e) => setLoginData({ ...loginData, email: e.target.value })}
+              className="h-12 bg-white border-gray-300"
+              required
+            />
+          </div>
+
+          {/* Password Field */}
+          <div className="space-y-2">
+            <label htmlFor="login-password" className="text-sm font-medium text-black">
+              Your password
+            </label>
+            <div className="relative">
+              <Input
+                id="login-password"
+                type={showPassword ? "text" : "password"}
+                placeholder="Your password"
+                value={loginData.password}
+                onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
+                className="h-12 bg-white border-gray-300 pr-12"
+                required
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-4 top-1/2 -translate-y-1/2 h-auto w-auto p-0 text-gray-500 hover:text-gray-700"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? (
+                  <EyeOff className="w-5 h-5" />
+                ) : (
+                  <Eye className="w-5 h-5" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <Button
+            type="submit"
+            disabled={loginLoading}
+            className="w-full h-12 text-base font-semibold bg-linear-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 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loginLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Logging in...
+              </>
+            ) : (
+              "Log in"
+            )}
+          </Button>
+
+          {/* Remember Me & Forgot Password */}
+          <div className="flex items-center justify-between text-sm">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="w-4 h-4 rounded border-gray-300 text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer"
+              />
+              <span className="text-black">Remember me</span>
+            </label>
+            <Link
+              href="/forgot-password"
+              className="text-blue-600 hover:text-blue-700 font-medium"
+              onClick={(e) => {
+                e.preventDefault();
+                onOpenChange(false);
+              }}
+            >
+              Forgot password?
+            </Link>
+          </div>
+
+          {/* Sign Up Prompt */}
+          <p className="text-sm text-gray-600 text-center">
+            New to Attune Heart Therapy?{" "}
+            <Link href="/signup" className="text-blue-600 underline font-medium">
+              Sign up
+            </Link>
+          </p>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

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/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

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

package.json

@@ -12,6 +12,7 @@
     "node": ">=20.9.0"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.16
         version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -504,6 +507,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -2801,6 +2817,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.2
 
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.2.2)(react@19.2.0)':
     dependencies:
       react: 19.2.0