Update src/app/book-appointment/page.tsx

src/app/book-appointment/page.tsx

@@ -2,9 +2,10 @@
 import { useState } from "react";
 import { Calendar, Phone, Mail, User, MessageSquare, Stethoscope } from "lucide-react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import Textarea from "@/components/form/Textarea";
+import ButtonHoverBubble from "@/components/button/ButtonHoverBubble";
 
 interface FormData {
   fullName: string;
@@ -76,7 +77,9 @@ export default function BookAppointmentPage() {
     }
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
       ...prev,
@@ -112,33 +115,45 @@ export default function BookAppointmentPage() {
       headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
+        <NavbarStyleApple
           brandName="Rehoboth Dental"
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "about" },
-            { name: "Services", id: "/services" },
-            { name: "Contact", id: "contact" },
+            { name: "Services", id: "services" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Book Appointment", href: "/book-appointment" }}
-          animateOnLoad={true}
         />
       </div>
 
-      <div id="booking" data-section="booking" className="min-h-screen bg-background py-20 px-4 md:px-8">
+      <div
+        id="booking"
+        data-section="booking"
+        className="min-h-screen bg-background py-20 px-4 md:px-8"
+      >
         <div className="max-w-2xl mx-auto">
           <div className="mb-12 text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Book Your Appointment</h1>
-            <p className="text-lg text-foreground/70">Schedule your visit to Rehoboth Dental Clinic</p>
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
+              Book Your Appointment
+            </h1>
+            <p className="text-lg text-foreground/70">
+              Schedule your visit to Rehoboth Dental Clinic
+            </p>
           </div>
 
           {submitted && (
             <div className="mb-8 p-6 bg-green-50 border border-green-200 rounded-lg">
-              <p className="text-green-800 font-medium">✓ Your appointment request has been submitted successfully! We'll contact you shortly to confirm your booking.</p>
+              <p className="text-green-800 font-medium">
+                ✓ Your appointment request has been submitted successfully! We'll
+                contact you shortly to confirm your booking.
+              </p>
             </div>
           )}
 
-          <form onSubmit={handleSubmit} className="bg-card rounded-lg p-8 md:p-12 shadow-lg border border-background-accent">
+          <form
+            onSubmit={handleSubmit}
+            className="bg-card rounded-lg p-8 md:p-12 shadow-lg border border-background-accent"
+          >
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
               {/* Full Name */}
               <div>
@@ -158,7 +173,9 @@ export default function BookAppointmentPage() {
                   } text-foreground placeholder-foreground/50`}
                   placeholder="Enter your full name"
                 />
-                {errors.fullName && <p className="text-red-600 text-sm mt-2">{errors.fullName}</p>}
+                {errors.fullName && (
+                  <p className="text-red-600 text-sm mt-2">{errors.fullName}</p>
+                )}
               </div>
 
               {/* Email */}
@@ -179,7 +196,9 @@ export default function BookAppointmentPage() {
                   } text-foreground placeholder-foreground/50`}
                   placeholder="your.email@example.com"
                 />
-                {errors.email && <p className="text-red-600 text-sm mt-2">{errors.email}</p>}
+                {errors.email && (
+                  <p className="text-red-600 text-sm mt-2">{errors.email}</p>
+                )}
               </div>
 
               {/* Phone */}
@@ -200,7 +219,9 @@ export default function BookAppointmentPage() {
                   } text-foreground placeholder-foreground/50`}
                   placeholder="+250 792 891 566"
                 />
-                {errors.phone && <p className="text-red-600 text-sm mt-2">{errors.phone}</p>}
+                {errors.phone && (
+                  <p className="text-red-600 text-sm mt-2">{errors.phone}</p>
+                )}
               </div>
 
               {/* Service Type */}
@@ -228,7 +249,9 @@ export default function BookAppointmentPage() {
                   <option value="whitening">Professional Teeth Whitening</option>
                   <option value="emergency">Emergency Dental Care</option>
                 </select>
-                {errors.serviceType && <p className="text-red-600 text-sm mt-2">{errors.serviceType}</p>}
+                {errors.serviceType && (
+                  <p className="text-red-600 text-sm mt-2">{errors.serviceType}</p>
+                )}
               </div>
 
               {/* Preferred Date */}
@@ -248,12 +271,16 @@ export default function BookAppointmentPage() {
                       : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
                   } text-foreground`}
                 />
-                {errors.preferredDate && <p className="text-red-600 text-sm mt-2">{errors.preferredDate}</p>}
+                {errors.preferredDate && (
+                  <p className="text-red-600 text-sm mt-2">{errors.preferredDate}</p>
+                )}
               </div>
 
               {/* Preferred Time */}
               <div>
-                <label className="block text-foreground font-medium mb-2">Preferred Time</label>
+                <label className="block text-foreground font-medium mb-2">
+                  Preferred Time
+                </label>
                 <select
                   name="preferredTime"
                   value={formData.preferredTime}
@@ -279,7 +306,9 @@ export default function BookAppointmentPage() {
                   <option value="19:00">7:00 PM</option>
                   <option value="20:00">8:00 PM</option>
                 </select>
-                {errors.preferredTime && <p className="text-red-600 text-sm mt-2">{errors.preferredTime}</p>}
+                {errors.preferredTime && (
+                  <p className="text-red-600 text-sm mt-2">{errors.preferredTime}</p>
+                )}
               </div>
             </div>
 
@@ -299,12 +328,13 @@ export default function BookAppointmentPage() {
 
             {/* Submit Button */}
             <div className="flex gap-4">
-              <button
-                type="submit"
-                className="flex-1 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out"
-              >
-                Book Appointment
-              </button>
+              <ButtonHoverBubble
+                text="Book Appointment"
+                onClick={handleSubmit}
+                className="flex-1"
+                bgClassName="bg-primary-cta"
+                textClassName="text-white font-semibold"
+              />
               <button
                 type="reset"
                 onClick={() => {