From 446792903e12014c6d17f48aba7c8f7478266a1e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 13:34:17 +0000
Subject: [PATCH 1/3] Update src/app/book-appointment/page.tsx

---
 src/app/book-appointment/page.tsx | 80 +++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/app/book-appointment/page.tsx b/src/app/book-appointment/page.tsx
index 4d09229..1520ee9 100644
--- a/src/app/book-appointment/page.tsx
+++ b/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={() => {

From 4a90fb1913005ee59d18343ebe69689db0a57108 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 13:34:19 +0000
Subject: [PATCH 2/3] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 77 +++++++++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index e3cba9b..af4338f 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { MapPin, Phone, Clock, Mail } from "lucide-react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 
 export default function ContactPage() {
@@ -20,17 +20,14 @@ export default function ContactPage() {
       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: "Accessibility", id: "/accessibility" },
           ]}
-          button={{ text: "Book Appointment", href: "#contact" }}
-          animateOnLoad={true}
         />
       </div>
 
@@ -41,7 +38,8 @@ export default function ContactPage() {
               Get In Touch
             </h1>
             <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
-              Visit our clinic in Kigali or contact us for more information about our services and appointment availability.
+              Visit our clinic in Kigali or contact us for more information about
+              our services and appointment availability.
             </p>
           </div>
 
@@ -57,7 +55,8 @@ export default function ContactPage() {
                     Visit Us
                   </h3>
                   <p className="text-foreground/80">
-                    68 KG 208 Street<br />
+                    68 KG 208 Street
+                    <br />
                     Kigali, Rwanda
                   </p>
                 </div>
@@ -72,7 +71,10 @@ export default function ContactPage() {
                     Call Us
                   </h3>
                   <p className="text-foreground/80">
-                    <a href="tel:+250792891566" className="hover:text-primary-cta transition">
+                    <a
+                      href="tel:+250792891566"
+                      className="hover:text-primary-cta transition"
+                    >
                       +250 792 891 566
                     </a>
                   </p>
@@ -88,7 +90,10 @@ export default function ContactPage() {
                     Email
                   </h3>
                   <p className="text-foreground/80">
-                    <a href="mailto:info@rehobothdental.com" className="hover:text-primary-cta transition">
+                    <a
+                      href="mailto:info@rehobothdental.com"
+                      className="hover:text-primary-cta transition"
+                    >
                       info@rehobothdental.com
                     </a>
                   </p>
@@ -104,9 +109,15 @@ export default function ContactPage() {
                     Clinic Hours
                   </h3>
                   <div className="text-foreground/80 space-y-1">
-                    <p><strong>Monday - Saturday:</strong> 8:00 AM - 8:00 PM</p>
-                    <p><strong>Sunday:</strong> Closed</p>
-                    <p className="pt-2 text-sm"><em>Emergency services available 24/7</em></p>
+                    <p>
+                      <strong>Monday - Saturday:</strong> 8:00 AM - 8:00 PM
+                    </p>
+                    <p>
+                      <strong>Sunday:</strong> Closed
+                    </p>
+                    <p className="pt-2 text-sm">
+                      <em>Emergency services available 24/7</em>
+                    </p>
                   </div>
                 </div>
               </div>
@@ -128,20 +139,36 @@ export default function ContactPage() {
           </div>
 
           {/* Contact Form Section */}
-          <div className="mb-16">
-            <ContactSplit
-              tag="Book Your Appointment"
-              title="Schedule Your Visit"
-              description="Connect with us to book your dental appointment or ask any questions about our services."
-              tagIcon={Mail}
-              tagAnimation="slide-up"
-              background={{ variant: "sparkles-gradient" }}
-              useInvertedBackground={true}
+          <div id="contact-form" data-section="contact-form" className="mb-16">
+            <ContactSplitForm
+              title="Send Us a Message"
+              description="Have a question or want to schedule an appointment? Fill out the form below and we'll get back to you as soon as possible."
+              inputs={[
+                {
+                  name: "fullName",                  type: "text",                  placeholder: "Your Full Name",                  required: true,
+                },
+                {
+                  name: "email",                  type: "email",                  placeholder: "Your Email Address",                  required: true,
+                },
+                {
+                  name: "phone",                  type: "tel",                  placeholder: "Your Phone Number",                  required: true,
+                },
+                {
+                  name: "subject",                  type: "text",                  placeholder: "Subject",                  required: false,
+                },
+              ]}
+              textarea={{
+                name: "message",                placeholder: "Your message here...",                rows: 6,
+                required: true,
+              }}
+              useInvertedBackground={false}
+              imageSrc="/placeholders/placeholder-16-9.svg"
               mediaPosition="right"
-              inputPlaceholder="Enter your email address"
-              buttonText="Subscribe"
-              termsText="By subscribing, you'll receive our dental tips, clinic updates, and exclusive offers. We respect your privacy."
+              buttonText="Send Message"
               mediaAnimation="none"
+              onSubmit={(data) => {
+                console.log("Form submitted:", data);
+              }}
             />
           </div>
         </div>

From f794a0101ec49eb6343fdfee364e3815432851a9 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 13:34:19 +0000
Subject: [PATCH 3/3] Update src/app/layout.tsx

---
 src/app/layout.tsx | 71 ++++++----------------------------------------
 1 file changed, 9 insertions(+), 62 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 41f08d8..8e4eed4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,26 +1,14 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import "./styles/variables.css";
+import "./styles/base.css";
 
-const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: "Rehoboth Dental Clinic - Professional Dental Care in Kigali",  description: "Experience exceptional dental care at Rehoboth Dental Clinic in Kigali. We offer comprehensive dental services including checkups, cleanings, orthodontics, teeth whitening, and emergency care. Book your appointment today!",  keywords: "dental clinic, dental care, dentist in Kigali, teeth cleaning, orthodontics, teeth whitening, emergency dental care, professional dentistry",  authors: [{ name: "Rehoboth Dental Clinic" }],
-  openGraph: {
-    title: "Rehoboth Dental Clinic - Professional Dental Care in Kigali",    description: "Experience exceptional dental care at Rehoboth Dental Clinic. Comprehensive services for your smile and oral health.",    type: "website",    url: "https://rehobothdental.com",    images: [
-      {
-        url: "https://img.b2bpic.net/free-photo/happy-female-dentist-pointing-digital-tablet-screen-female-patient-clinic_23-2147879186.jpg",        width: 1200,
-        height: 630,
-        alt: "Rehoboth Dental Clinic"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Rehoboth Dental Clinic - Professional Dental Care",    description: "Book your dental appointment at Rehoboth Dental Clinic in Kigali.",    images: [
-      "https://img.b2bpic.net/free-photo/happy-female-dentist-pointing-digital-tablet-screen-female-patient-clinic_23-2147879186.jpg"],
-  },
-  robots: "index, follow",  viewport: "width=device-width, initial-scale=1",  alternates: {
-    canonical: "https://rehobothdental.com"},
-};
+  title: "Rehoboth Dental Clinic",  description: "Professional dental care services"};
 
 export default function RootLayout({
   children,
@@ -29,50 +17,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              "@context": "https://schema.org",              "@type": "LocalBusiness",              "@id": "https://rehobothdental.com",              name: "Rehoboth Dental Clinic",              description: "Professional dental clinic offering comprehensive dental services in Kigali, Rwanda",              image: "https://img.b2bpic.net/free-photo/happy-female-dentist-pointing-digital-tablet-screen-female-patient-clinic_23-2147879186.jpg",              url: "https://rehobothdental.com",              telephone: "+250792891566",              address: {
-                "@type": "PostalAddress",                streetAddress: "68 KG 208 St",                addressLocality: "Kigali",                postalCode: "N/A",                addressCountry: "RW"},
-              priceRange: "$$",              openingHoursSpecification: {
-                "@type": "OpeningHoursSpecification",                dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-                opens: "08:00",                closes: "20:00"},
-              areaServed: "Kigali, Rwanda",              sameAs: [
-                "https://www.facebook.com/rehobothdental",                "https://www.instagram.com/rehobothdental",                "https://www.whatsapp.com"],
-              serviceType: [
-                "General Dental Checkups",                "Professional Teeth Cleaning",                "Tooth Filling",                "Tooth Extraction",                "Orthodontics and Braces",                "Teeth Whitening",                "Emergency Dental Care"],
-            }),
-          }}
-        />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              "@context": "https://schema.org",              "@type": "FAQPage",              mainEntity: [
-                {
-                  "@type": "Question",                  name: "What are your clinic hours?",                  acceptedAnswer: {
-                    "@type": "Answer",                    text: "We are open Monday to Saturday from 8:00 AM to 8:00 PM. We are closed on Sundays. For emergencies outside our regular hours, please call +250 792 891 566."},
-                },
-                {
-                  "@type": "Question",                  name: "How do I book an appointment?",                  acceptedAnswer: {
-                    "@type": "Answer",                    text: "You can book an appointment online through our website, call us at +250 792 891 566, or visit us in person at 68 KG 208 St, Kigali, Rwanda."},
-                },
-                {
-                  "@type": "Question",                  name: "What payment methods do you accept?",                  acceptedAnswer: {
-                    "@type": "Answer",                    text: "We accept Credit Cards, Debit Cards, and NFC Mobile Payments. All payments are processed securely."},
-                },
-                {
-                  "@type": "Question",                  name: "Do you handle emergency cases?",                  acceptedAnswer: {
-                    "@type": "Answer",                    text: "Yes, we provide emergency dental care services. Call us immediately at +250 792 891 566 if you have a dental emergency."},
-                },
-              ],
-            }),
-          }}
-        />
-      </head>
-      <body className={inter.variable}>{children}
+      <body className={inter.variable}>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `