From 16f59adc17f551356e76a9a9b31339f406857705 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Fri, 17 Oct 2025 14:01:20 +0530
Subject: [PATCH] Responsive & new no index appointment booking form  updated

---
 app/appointment-booking-form/ContactClient.js | 254 ++++++++++++++++++
 app/appointment-booking-form/page.js          |  27 ++
 app/covid-19-updates/CovidClient.js           |   2 +-
 .../WhyusClient.js                            |  10 +-
 public/assets/css/module-css/solutions.css    |   8 +
 public/assets/css/style.css                   |   5 +
 6 files changed, 300 insertions(+), 6 deletions(-)
 create mode 100644 app/appointment-booking-form/ContactClient.js
 create mode 100644 app/appointment-booking-form/page.js

diff --git a/app/appointment-booking-form/ContactClient.js b/app/appointment-booking-form/ContactClient.js
new file mode 100644
index 0000000..63bad89
--- /dev/null
+++ b/app/appointment-booking-form/ContactClient.js
@@ -0,0 +1,254 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
+import Link from "next/link";
+import { servicesList } from "@/utils/Services.utils";
+
+export default function ContactClient() {
+  const [formData, setFormData] = useState({
+    username: "",
+    email: "",
+    phone: "",
+    service: "",
+    message: "",
+  });
+
+  const [formErrors, setFormErrors] = useState({});
+  const [captchaToken, setCaptchaToken] = useState(null);
+  const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleCaptchaChange = (token) => {
+    setCaptchaToken(token);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const errors = {};
+    if (!formData.username.trim()) errors.username = "Name is required.";
+    if (!formData.email.trim()) errors.email = "Email is required.";
+    if (!formData.phone.trim()) errors.phone = "Phone is required.";
+    if (!formData.service.trim()) errors.service = "Please select a service.";
+    if (!formData.message.trim()) errors.message = "Message is required.";
+    // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
+
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
+    const emailData = {
+      name: formData.username,          
+      phone: formData.phone,
+      email: formData.email,
+      subject: formData.service,         
+      message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
+      to: "bloor@rapharehab.ca",
+      senderName: "Rapha Rehab Contact Page",
+      recaptchaToken: captchaToken,
+    };
+
+    try {
+      const res = await axios.post(
+        "https://mailserver.metatronnest.com/send",
+        emailData,
+        { headers: { "Content-Type": "application/json" } }
+      );
+
+      setAlert({
+        show: true,
+        type: "success",
+        message: res?.data?.message || "Message sent successfully!",
+      });
+
+      setFormData({ username: "", email: "", phone: "", service: "", message: "" });
+      setCaptchaToken(null);
+      setFormErrors({});
+    } catch (error) {
+      setAlert({
+        show: true,
+        type: "danger",
+        message: "Failed to send message. Please try again later.",
+      });
+    }
+  };
+
+
+  useEffect(() => {
+    if (alert.show) {
+      const timer = setTimeout(() => {
+        setAlert((prev) => ({ ...prev, show: false }));
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [alert.show]);
+
+  return (
+    <div>
+      {/* <section className="contact-info-section pt_90">
+        <div className="auto-container">
+          <div className="row clearfix">
+            <div className="col-lg-4 col-md-6 col-sm-12 info-column">
+              <div className="info-block-one">
+                <h3>Quick Contact</h3>
+                <div className="inner-box">
+                  <div className="icon-box"><i className="icon-2"></i></div>
+                  <p>
+                    <Link href="tel:647-722-3434">+647-722-3434</Link><br />
+                    <Link href="tel:416-622-2873">+416-622-2873</Link>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4 col-md-6 col-sm-12 info-column">
+              <div className="info-block-one">
+                <h3>Email Address</h3>
+                <div className="inner-box">
+                  <div className="icon-box"><i className="icon-26"></i></div>
+                  <p>
+                    <Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4 col-md-6 col-sm-12 info-column">
+              <div className="info-block-one">
+                <h3>Mailing Address</h3>
+                <div className="inner-box">
+                  <div className="icon-box">
+                    <img src="/assets/images/icons/icon-2.png" alt="" />
+                  </div>
+                  <p>5 – 4335 Bloor Street West <br />Etobicoke, M9C 2A5</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section> */}
+
+      <section className="contact-style-three pt_90 pb_90">
+        <div className="auto-container">
+          <div className="row clearfix">
+            <div className="col-lg-8 col-md-12 col-sm-12 form-column">
+              <div className="form-inner mr_40">
+                <div className="sec-title mb_50">
+                  <h2>How can we help?</h2>
+                  <p className="mt-3">
+                    Please complete the contact information below and let us know your needs.
+                    Upon receipt of your information one of our team members will reach out.
+                  </p>
+                </div>
+
+                {alert.show && (
+                  <div className={`alert alert-${alert.type}`}>{alert.message}</div>
+                )}
+
+                <form onSubmit={handleSubmit} className="default-form">
+                  <div className="row clearfix">
+                    <div className="col-lg-6 col-md-6 col-sm-12 form-group">
+                      <input
+                        type="text"
+                        name="username"
+                        placeholder="Name"
+                        value={formData.username}
+                        onChange={handleChange}
+                      />
+                      {formErrors.username && <small className="text-danger">{formErrors.username}</small>}
+                    </div>
+
+                    <div className="col-lg-6 col-md-6 col-sm-12 form-group">
+                      <input
+                        type="text"
+                        name="phone"
+                        placeholder="Phone"
+                        value={formData.phone}
+                        onChange={handleChange}
+                      />
+                      {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
+                    </div>
+
+                    <div className="col-lg-6 col-md-6 col-sm-12 form-group">
+                      <input
+                        type="email"
+                        name="email"
+                        placeholder="Your Email"
+                        value={formData.email}
+                        onChange={handleChange}
+                      />
+                      {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
+                    </div>
+
+                    <div className="col-lg-6 col-md-6 col-sm-12 form-group">
+                      <select
+                        name="service"
+                        value={formData.service}
+                        onChange={handleChange}
+                        className="form-control"
+                      >
+                        <option value="">Select Service</option>
+                        {servicesList.map((service) => (
+                          <option key={service.slug} value={service.shortTitle}>
+                            {service.shortTitle}
+                          </option>
+                        ))}
+                      </select>
+                      {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
+                    </div>
+
+                    <div className="col-lg-12 col-md-6 col-sm-12 form-group">
+                      <textarea
+                        name="message"
+                        placeholder="Message"
+                        value={formData.message}
+                        onChange={handleChange}
+                      ></textarea>
+                      {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
+                    </div>
+
+                    <div className="col-lg-12 mb-3">
+                      <ReCAPTCHA
+                        sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
+                        onChange={handleCaptchaChange}
+                      />
+                      {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
+                    </div>
+
+                    <div className="col-lg-12 col-md-12 col-sm-12 form-group message-btn">
+                      <button className="theme-btn btn-one" type="submit" name="submit-form">
+                        <span>Send Message</span>
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+
+            <div className="col-lg-4 col-md-12 col-sm-12 image-column">
+              <figure className="image-box">
+                <img src="/assets/images/contact/img.webp" alt="Physiotherapy at Rapharehab" />
+              </figure>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* <section className="google-map-section">
+        <div className="map-inner">
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.847666572518!2d-79.57789668450145!3d43.6308386791466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3811bd400001%3A0x87ffabfe7d6aeeca!2s4335+Bloor+St+W+%236%2C+Etobicoke%2C+ON+M9C+5S2%2C+Canada!5e0!3m2!1sen!2sca!4v1693224000000!5m2!1sen!2sca"
+            height={570}
+            style={{ border: 0, width: "100%" }}
+            allowFullScreen
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+          />
+        </div>
+      </section> */}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/appointment-booking-form/page.js b/app/appointment-booking-form/page.js
new file mode 100644
index 0000000..ca02395
--- /dev/null
+++ b/app/appointment-booking-form/page.js
@@ -0,0 +1,27 @@
+import Head from "next/head";
+import Layout from "@/components/layout/Layout";
+import ContactClient from "../appointment-booking-form/ContactClient";
+
+export const metadata = {
+  title: "Contact Rapharehab – Book Your Appointment Today",
+  description:
+    "Reach out to Rapharehab for expert rehab and therapy services. Call or message us to schedule your consultation with our professional care team.",
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+
+export default function Appointment() {
+  return (
+    <Layout
+      headerStyle={1}
+      footerStyle={1}
+      breadcrumbTitle="Appointment Booking"
+      bannerImage="/assets/images/contact/contact-us-banner.webp"
+    >
+      <ContactClient />
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/app/covid-19-updates/CovidClient.js b/app/covid-19-updates/CovidClient.js
index 0aca13d..1ebf214 100644
--- a/app/covid-19-updates/CovidClient.js
+++ b/app/covid-19-updates/CovidClient.js
@@ -45,7 +45,7 @@ export default function Home() {
                                 {/* Top Intro */}
                                 <div className="sec-title mb_50 text-center">
                                     <h2 className="mb-3">COVID 19 UPDATES</h2>
-                                    <p>
+                                    <p className="section-para">
                                         The COVID 19 pandemic has created increased stress and anxiety levels for many people. 
                                         We would like to take this opportunity to remind you that virtual therapy and at-home 
                                         or mobile therapy are effective alternatives to in-clinic therapy for many of our clients.
diff --git a/app/why-rapha-physiotherapy-etobicoke/WhyusClient.js b/app/why-rapha-physiotherapy-etobicoke/WhyusClient.js
index 64ee4a7..0f580a1 100644
--- a/app/why-rapha-physiotherapy-etobicoke/WhyusClient.js
+++ b/app/why-rapha-physiotherapy-etobicoke/WhyusClient.js
@@ -92,15 +92,15 @@ export default function Team() {
                     <div className="row align-items-center">
                         {/* LEFT IMAGE / RIGHT CONTENT */}
                         <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
-                            <div className="image_block_two pr_30">
+                            <div className="image_block_two">
                                 <div className="image-box">
-                                    <figure className="image image-1-ho"><img src="/assets/images/why-us/back-1.webp" alt="health care professionals" /></figure>
+                                    <figure className="image image-1-ho renderd-area"><img src="/assets/images/why-us/back-1.webp" alt="health care professionals" /></figure>
                                     <figure className="image image-2"><img src="/assets/images/why-us/front-1.webp" alt="health care professionals" /></figure>
                                     <div className="icon-box"><img src="/assets/images/why-us/icon-1.webp" alt="health care professionals" /></div>
                                 </div>
                             </div>
                         </div>
-                        <div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2">
+                        <div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2 pr_30">
                             <div className="content_block_one">
                                 <div className="content-box">
                                     {/* <div className="sec-title mb_15">
@@ -129,9 +129,9 @@ export default function Team() {
                     <div className="row align-items-center flex-row-reverse">
                         {/* RIGHT IMAGE / LEFT CONTENT */}
                         <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
-                            <div className="image_block_two pl_30">
+                            <div className="image_block_two">
                                 <div className="image-box">
-                                    <figure className="image image-1-ho"><img src="/assets/images/why-us/back-2.webp" alt="Top-Notch Treatment " /></figure>
+                                    <figure className="image image-1-ho renderd-area"><img src="/assets/images/why-us/back-2.webp" alt="Top-Notch Treatment " /></figure>
                                     <figure className="image image-2 rowImage"><img src="/assets/images/why-us/front-2.webp" alt="Top-Notch Treatment " /></figure>
                                     <div className="icon-box"><img src="/assets/images/why-us/icon-2.webp" alt="Top-Notch Treatment" /></div>
                                 </div>
diff --git a/public/assets/css/module-css/solutions.css b/public/assets/css/module-css/solutions.css
index 93fd8e1..fba2170 100644
--- a/public/assets/css/module-css/solutions.css
+++ b/public/assets/css/module-css/solutions.css
@@ -174,6 +174,14 @@
 
 }
 
+.renderd-area img{
+
+  position: relative;
+    top: -150px;
+  left: -17px;
+
+}
+
 .image .image-1-ho .aligned-image img{
 
 
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index ccd02c2..3205923 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -3615,6 +3615,11 @@
   }
 }
 
+.section-para{
+
+  font-size: 14px !important;
+
+}
 
  .custom-table {
       border: 1px solid #101A30;