contact validation updated

app/blog/[slug]/BlogContent.js

@@ -0,0 +1,21 @@
+'use client'
+import { useState, useEffect } from "react";
+
+export default function BlogContent({ content }) {
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
+  const processedContent = content.replace(
+    'bloor@rapharehab.ca',
+    email ? `<a href="mailto:${email}">${email}</a>` : '<span>Loading...</span>'
+  );
+
+  return (
+    <div dangerouslySetInnerHTML={{ __html: processedContent }} />
+  );
+}

app/blog/[slug]/page.js

@@ -3,6 +3,7 @@ import Link from "next/link";
 import Blogs from "@/utils/Blog.utils";
 import { notFound } from "next/navigation";
 import FaqSection from "@/components/FaqSection";
+import BlogContent from "./BlogContent";
 
 export async function generateStaticParams() {
   return Blogs.map((item) => ({
@@ -34,7 +35,6 @@ export default function BlogDetails({ params }) {
 
   const relatedBlogs = sameCategoryBlogs.length > 0 ? [sameCategoryBlogs[0]] : [];
 
-
   return (
     <Layout
       headerStyle={1}
@@ -59,7 +59,7 @@ export default function BlogDetails({ params }) {
                           <Link
                             href={`/blog/${b.slug}`}
                             className={b.slug === blog.slug ? "current" : ""}
-                          aria-label="Blog List">
+                            aria-label="Blog List">
                             {b.title}
                           </Link>
                         </li>
@@ -95,7 +95,7 @@ export default function BlogDetails({ params }) {
                               <Link
                                 href={`/blog/${related.slug}`}
                                 className="read-more"
-                              aria-label="Read More">
+                                aria-label="Read More">
                                 Read More
                               </Link>
                             </div>
@@ -122,8 +122,8 @@ export default function BlogDetails({ params }) {
                     </figure>
                     <div className="lower-content">
                       <h2>{blog.title}</h2>
-                      <div dangerouslySetInnerHTML={{ __html: blog.content }} />
+                      <BlogContent content={blog.content} />
-                        {blog.faq && <FaqSection faqData={blog.faq} />}
+                      {blog.faq && <FaqSection faqData={blog.faq} />}
                     </div>
                   </div>
                 </div>

app/why-rapha-physiotherapy-etobicoke/WhyusClient.js

@@ -1,19 +1,25 @@
 'use client';
+import { useState, useEffect } from "react";
 import Layout from "@/components/layout/Layout";
 import Link from "next/link";
 import Image from "next/image";
 
-
-
 export default function Team() {
+    const [email, setEmail] = useState("");
+
+    useEffect(() => {
+        const user = "bloor";
+        const domain = "rapharehab.ca";
+        setEmail(`${user}@${domain}`);
+    }, []);
+
     const teamMembers = [
-        // { name: 'Musculoskeletal Physiotherapy', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
         { name: 'Musculoskeletal Physiotherapy', image: '/assets/images/why-us/img/musculo.webp' },
         { name: 'Sports Physiotherapy', image: '/assets/images/why-us/img/sports.webp' },
         { name: 'Clinical Pilates', image: '/assets/images/why-us/img/clinical-pilates.webp' },
         { name: 'Workplace & Occupational', image: '/assets/images/why-us/img/workplace.webp' },
         { name: 'Sports Rehabilitation', image: '/assets/images/why-us/img/sports-rehabilation.webp' },
-        { name: 'Women’s health', image: '/assets/images/why-us/img/women-health.webp' },
+        { name: 'Womens health', image: '/assets/images/why-us/img/women-health.webp' },
         { name: 'Back & Neck Pain', image: '/assets/images/why-us/img/back-pain.webp' },
         { name: 'Fitness & Exercise Programs', image: '/assets/images/why-us/img/fitness.webp' },
         { name: 'Pregnancy and Post-natal', image: '/assets/images/why-us/img/pregnancy.webp' },
@@ -21,13 +27,13 @@ export default function Team() {
         { name: 'Injury Management', image: '/assets/images/why-us/img/injury.webp' },
         { name: 'Pre/Post Surgical Management', image: '/assets/images/why-us/img/surgical.webp' },
     ];
+
     return (
         <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Why Us" bannerImage="/assets/images/why-us/why-us-banner.webp">
             <section className="team-section pt_90 centred pb-0">
                 <div className="pattern-layer">
                     <div className="pattern-1">
                         <Image
-                            // loader={exportableLoader}
                             src="/assets/images/shape/shape-13.webp"
                             alt="Physiotherapy at Rapharehab"
                             fill
@@ -37,21 +43,13 @@ export default function Team() {
 
                     <div className="pattern-2">
                         <Image
-                            // loader={exportableLoader}
                             src="/assets/images/shape/shape-14.webp"
                             alt="Physiotherapy at Rapharehab"
                             fill
                             style={{ objectFit: "cover" }}
                         />
                     </div>
-
-
                 </div>
-                {/* <div className="shape">
-                    <div className="shape-1 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div>
-                    <div className="shape-2"></div>
-                    <div className="shape-3 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-16.png)' }}></div>
-                </div> */}
                 <div className="auto-container">
                     <div className="sec-title mb_50">
                         <span className="sub-title">Why Choose Us</span>
@@ -64,12 +62,6 @@ export default function Team() {
                                     <div className="inner-box">
                                         <div className="image-box">
                                             <figure className="image"><img src={member.image} alt={`${member.name}`} /></figure>
-                                            {/* <ul className="social-links clearfix">
-                                                <li><Link href="/#"><i className="icon-4"></i></Link></li>
-                                                <li><Link href="/#"><i className="icon-5"></i></Link></li>
-                                                <li><Link href="/#"><i className="icon-6"></i></Link></li>
-                                                <li><Link href="/#"><i className="icon-7"></i></Link></li>
-                                            </ul> */}
                                         </div>
                                         <div className="lower-content">
                                             <h3>{member.name}</h3>
@@ -83,11 +75,9 @@ export default function Team() {
                 </div>
             </section>
 
-
             <section className="testimonial-style-two pb_90 p_relative">
                 <div className="pattern-layer">
                     <Image
-                        // loader={exportableLoader}
                         src="/assets/images/shape/shape-19.png"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -96,7 +86,6 @@ export default function Team() {
                 </div>
                 <div className="auto-container">
                     <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">
                                 <div className="image-box">
@@ -109,10 +98,6 @@ export default function Team() {
                         <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">
-                                        <span className="sub-title">About Us</span>
-                                        <h2>Medical services & diagnostics</h2>
-                                    </div> */}
                                     <div className="text-box mb_40">
                                         <ul className="list-style-one clearfix">
                                             <li>Team of health care professionals – We are a team of health care professionals working together to help get you better, faster. This helps us in rendering our best possible services to our clients.</li>
@@ -130,10 +115,8 @@ export default function Team() {
             </section>
 
             <section className="testimonial-style-two p_relative pt-5">
-                {/* <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-19.png)' }}></div> */}
                 <div className="auto-container">
                     <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">
                                 <div className="image-box">
@@ -146,10 +129,6 @@ export default function Team() {
                         <div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2">
                             <div className="content_block_one pr_30">
                                 <div className="content-box">
-                                    {/* <div className="sec-title mb_15">
-                                        <span className="sub-title">About Us</span>
-                                        <h2>Medical services & diagnostics</h2>
-                                    </div> */}
                                     <div className="text-box mb_40">
                                         <ul className="list-style-one clearfix">
                                             <li>Top-Notch Treatment – Under our care, you will be placed in a supportive and comfortable environment helping you receive care in comfortable and supportive environment designed to address your issues.</li>
@@ -169,7 +148,6 @@ export default function Team() {
             <section className="video-section p_relative">
                 <div className="bg-layer parallax-bg" data-parallax='{"y": 100}'>
                     <Image
-                        // loader={exportableLoader}
                         src="/assets/images/why-us/bg.webp"
                         alt=" Physiotherapy at Rapharehab "
                         fill
@@ -182,7 +160,6 @@ export default function Team() {
                     <div className="inner-box">
                         <div className="shape new-arrow">
                             <Image
-                                // loader={exportableLoader}
                                 src="/assets/images/shape/shape-17.png"
                                 alt="Physiotherapy at Rapharehab"
                                 fill
@@ -190,24 +167,21 @@ export default function Team() {
                             />
                         </div>
 
-                        {/* <div className="video-btn">
+                        <p className="inner-box-new-color">
-          <a onClick={() => setOpen(true)}><i className="fas fa-play"></i>
+                            Rapha rehab offers patients in etobicoke and scarborough exceptional care with a personalized treatment plan to suit your specific needs. If you are suffering from pain or have recently experienced an injury, our etobicoke and scarborough Physiotherapists will ensure you get back to the activities you enjoy and love. Call us at 647-722-3434 for an appointment today or email us at {email ? (
-                            <span className="border-animation border-1"></span>
+                                <Link href={`mailto:${email}`} style={{color: "inherit"}}>{email}</Link>
-                            <span className="border-animation border-2"></span>
+                            ) : (
-                            <span className="border-animation border-3"></span>
+                                <span>Loading...</span>
-          </a>
+                            )} to book a consultation.
-          </div> */}
+                        </p>
-                        <p className="inner-box-new-color">Rapha rehab offers patients in etobicoke and scarborough exceptional care with a personalized treatment plan to suit your specific needs. If you are suffering from pain or have recently experienced an injury, our  etobicoke and scarborough Physiotherapists will ensure you get back to the activities you enjoy and love. Call us at 647-722-3434  for an appointment today or email us at bloor@rapharehab.ca to book a consultation.</p>
                         <div className="btn-box mt-4">
                             <Link href="/contact" className="theme-btn btn-one-blue" aria-label="Make an appointment">
                                 <span>Make an Appointment</span>
                             </Link>
                         </div>
-
                     </div>
                 </div>
             </section>
-
         </Layout>
     );
 }

components/layout/MobileMenu.js

@@ -1,6 +1,6 @@
 'use client'
 import Link from "next/link";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { servicesList } from "@/utils/Services.utils";
 import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";
 import Rehabilitation from "@/utils/Rehabilitation.utils";
@@ -13,6 +13,14 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
     subMenuKey: "",
   });
   
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
   const handleToggle = (key, subMenuKey = "") => {
     if (isActive.key === key && isActive.subMenuKey === subMenuKey) {
       setIsActive({
@@ -200,9 +208,13 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
                 </Link>
               </li>
               <li>
-                <Link href="mailto:bloor@rapharehab.ca" onClick={closeMenu} aria-label="bloor@rapharehab.ca">
+                {email ? (
-                  bloor@rapharehab.ca
+                  <Link href={`mailto:${email}`} onClick={closeMenu} aria-label={email}>
-                </Link>
+                    {email}
+                  </Link>
+                ) : (
+                  <span>Loading...</span>
+                )}
               </li>
             </ul>
           </div>

components/layout/footer/Footer1.js

@@ -1,3 +1,5 @@
+"use client"
+import { useState, useEffect } from "react"
 import Link from "next/link"
 import Rehabilitation from "@/utils/Rehabilitation.utils"
 import Accident from "@/utils/Accident.utils"
@@ -5,6 +7,13 @@ import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
 import { servicesList } from "@/utils/Services.utils"
 
 export default function Footer2() {
+    const [email, setEmail] = useState("");
+
+    useEffect(() => {
+        const user = "bloor";
+        const domain = "rapharehab.ca";
+        setEmail(`${user}@${domain}`);
+    }, []);
 
     const servicesCols = [
         servicesList.slice(0, 13),
@@ -12,7 +21,6 @@ export default function Footer2() {
         servicesList.slice(25, 37),
     ];
 
-
     return (
         <>
             <footer className="main-footer">
@@ -107,8 +115,6 @@ export default function Footer2() {
                                 </div>
                             </div>
 
-
-
                             <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                 <div className="footer-widget links-widget">
                                     <div className="widget-title">
@@ -166,9 +172,13 @@ export default function Footer2() {
                                             </li>
                                             <li>
                                                 <i className="icon-26"></i>
-                                                <Link href="mailto:example@info.com" aria-label="bloor@rapharehab.ca">
+                                                {email ? (
-                                                    bloor@rapharehab.ca
+                                                    <Link href={`mailto:${email}`} aria-label={email}>
-                                                </Link>
+                                                        {email}
+                                                    </Link>
+                                                ) : (
+                                                    <span>Loading...</span>
+                                                )}
                                             </li>
                                         </ul>
                                     </div>
@@ -196,10 +206,8 @@ export default function Footer2() {
                                 </p>
                             </div>
                         </div>
-
                     </div>
                 </div>
-
             </footer>
         </>
     )

components/layout/footer/Footer2.js

@@ -1,3 +1,5 @@
+"use client"
+import { useState, useEffect } from "react"
 import Link from "next/link"
 import Rehabilitation from "@/utils/Rehabilitation.utils"
 import Accident from "@/utils/Accident.utils"
@@ -5,6 +7,13 @@ import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
 import { servicesList } from "@/utils/Services.utils"
 
 export default function Footer2() {
+    const [email, setEmail] = useState("");
+
+    useEffect(() => {
+        const user = "bloor";
+        const domain = "rapharehab.ca";
+        setEmail(`${user}@${domain}`);
+    }, []);
 
     const servicesCols = [
         servicesList.slice(0, 13),
@@ -12,7 +21,6 @@ export default function Footer2() {
         servicesList.slice(25, 37),
     ];
 
-
     return (
         <>
             <footer className="main-footer">
@@ -107,8 +115,6 @@ export default function Footer2() {
                                 </div>
                             </div>
 
-
-
                             <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                 <div className="footer-widget links-widget">
                                     <div className="widget-title">
@@ -166,9 +172,13 @@ export default function Footer2() {
                                             </li>
                                             <li>
                                                 <i className="icon-26"></i>
-                                                <Link href="mailto:bloor@rapharehab.ca" aria-label="bloor@repharehab.ca">
+                                                {email ? (
-                                                    bloor@rapharehab.ca
+                                                    <Link href={`mailto:${email}`} aria-label={email}>
-                                                </Link>
+                                                        {email}
+                                                    </Link>
+                                                ) : (
+                                                    <span>Loading...</span>
+                                                )}
                                             </li>
                                         </ul>
                                     </div>
@@ -196,10 +206,8 @@ export default function Footer2() {
                                 </p>
                             </div>
                         </div>
-
                     </div>
                 </div>
-
             </footer>
         </>
     )

components/layout/header/Header1.js

@@ -2,8 +2,18 @@
 import Link from "next/link";
 import Menu from "../Menu"
 import MobileMenu from "../MobileMenu"
+import { useState, useEffect } from "react"; // Import useState and useEffect
 
 export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    // Set the email address safely
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
   return (
     <>
       <header className={`main-header ${scroll ? "fixed-header" : ""}`}>
@@ -19,7 +29,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
                     style={{ marginRight: "8px" }}
                     className="red-icon"
                   />
-                  <Link href="tel:647-722-3434" aria-label="647-722-3434" >
+                  <Link href="tel:647-722-3434" aria-label="647-722-3434">
                     <span style={{
                       color: "white",
                     }} >
@@ -34,19 +44,27 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
                     style={{ marginRight: "8px" }}
                     className="red-icon"
                   />
-                  <Link href="mailto:bloor@rapharehab.ca" aria-label="bloor@rapharehab.ca">
+                  {email ? (
+                    <Link href={`mailto:${email}`} aria-label={email}>
+                      <span style={{
+                        color: "white",
+                      }} >
+                        {email}
+                      </span>
+                    </Link>
+                  ) : (
                     <span style={{
                       color: "white",
                     }} >
-                      bloor@rapharehab.ca
+                      Loading...
                     </span>
-                  </Link>
+                  )}
                 </li>
               </ul>
 
               <ul className="social-links clearfix">
                 <li><Link href="/why-rapha-physiotherapy-etobicoke" aria-label="Why us">Why Us</Link></li>
-                <li><Link href="/faq-physiotherapy-etobicoke" aria-label="Faq">FAQ’s</Link></li>
+                <li><Link href="/faq-physiotherapy-etobicoke" aria-label="Faq">FAQ's</Link></li>
                 <li><Link href="/what-to-expect" aria-label="What to expect">What To Expect</Link></li>
                 <li><Link href="/payment-insurance" aria-label="Payment and insurance">Payment And Insurance</Link></li>
                 {/* <li><Link href="/refugee-physiotherapy">Refugee Physiotherapy</Link></li> */}

components/layout/header/Header2.js

@@ -14,6 +14,7 @@ export default function Header2({
   isHome = false,
 }) {
   const [isMobile, setIsMobile] = useState(false);
+  const [email, setEmail] = useState("");
 
   // ✅ Detect mobile screen
   useEffect(() => {
@@ -23,6 +24,13 @@ export default function Header2({
     return () => window.removeEventListener("resize", checkScreenSize);
   }, []);
 
+  // ✅ Set email safely
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
   // ✅ Switch logo based on screen size
   const logoSrc = isMobile
     ? "/assets/images/logo-mbl.png" // mobile logo
@@ -54,9 +62,17 @@ export default function Header2({
                   alt="Mail"
                   className="contact-icon"
                 />
-                <Link href="mailto:bloor@rapharehab.ca" aria-label="Send email to bloor@rapharehab.ca">
+                {email ? (
-                  bloor@rapharehab.ca
+                  <Link href={`mailto:${email}`} aria-label={email}>
-                </Link>
+                    <span style={{ color: "white" }}>
+                      {email}
+                    </span>
+                  </Link>
+                ) : (
+                  <span style={{ color: "white" }}>
+                    Loading...
+                  </span>
+                )}
               </li>
             </ul>
 
@@ -67,8 +83,8 @@ export default function Header2({
                 </Link>
               </li>
               <li>
-                <Link href="/faq-physiotherapy-etobicoke" aria-label="FAQ’s page">
+                <Link href="/faq-physiotherapy-etobicoke" aria-label="FAQ's page">
-                  FAQ’s
+                  FAQ's
                 </Link>
               </li>
               <li>