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] 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>