New Blog and Images updated

.gitignore

@@ -12,6 +12,7 @@
 # next.js
 /.next/
 /out/
+/.zip/
 
 # production
 /build

app/about-us/AboutClient.js

@@ -4,12 +4,12 @@ import Link from "next/link"
 import { useState } from 'react'
 import { teamMembers } from "@/utils/constant.utils";
 import CounterUp from "@/components/elements/CounterUp";
-import Image from "next/image";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
+import Image from "next/image";
 
 const swiperOptions = {
   modules: [Autoplay, Pagination, Navigation],
@@ -81,6 +81,7 @@ export default function Home() {
                     <div className="shape-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div>
                     <div className="shape-2">
                       <Image
+                      //  loader={exportableLoader}
                         src="/assets/images/shape/shape-33.png"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -91,6 +92,7 @@ export default function Home() {
                     {/* <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div> */}
                     <div className="shape-4">
                       <Image
+                      //  loader={exportableLoader}
                         src="/assets/images/shape/shape-34.png"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -100,6 +102,7 @@ export default function Home() {
 
                     <div className="shape-5">
                       <Image
+                      //  loader={exportableLoader}
                         src="/assets/images/shape/shape-11.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -125,7 +128,7 @@ export default function Home() {
                     <p>Welcome to Rapha Rehab Physiotherapy Massage Therapy Clinic Etobicoke – physiotherapy clinic in etobicoke managed by Registered Physiotherapists offering reliable physiotherapy treatment Services, Sports injury physiotherapy, Pelvic floor physiotherapy, Chiropractor, Massage therapy , Acupuncture treatment, Foot Reflexology, Osteopathy, custom knee braces, orthotics, spinal decompression therapy, concussion management, chronic pain management, workplace injury management, Naturopathy and home care physiotherapy Services in Etobicoke.</p>
                   </div>
                   <div className="btn-box">
-                    <Link href="/contact" className="theme-btn btn-one"><span>Book Appointment</span></Link>
+                    <Link href="/contact" className="theme-btn btn-one" aria-label="Book Appointment"><span>Book Appointment</span></Link>
                   </div>
                 </div>
               </div>
@@ -139,6 +142,7 @@ export default function Home() {
       <section className="process-section sec-pad pt-0">
         <div className="pattern-layer">
           <Image
+          //  loader={exportableLoader}
             src="/assets/images/shape/shape-19.png"
             alt="Physiotherapy at Rapharehab"
             fill
@@ -160,6 +164,7 @@ export default function Home() {
           <div className="inner-container">
             <div className="arrow-shape">
               <Image
+              //  loader={exportableLoader}
                 src="/assets/images/shape/shape-18.webp"
                 alt="Physiotherapy at Rapharehab"
                 fill
@@ -221,7 +226,7 @@ export default function Home() {
                     <p className="tex-color-1">Physiotherapy etobicoke is 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.</p>
                   </div>
                   <div className="btn-box">
-                    <Link href="/contact" className="theme-btn btn-one-new"><span>Book Appointment</span></Link>
+                    <Link href="/contact" className="theme-btn btn-one-new" aria-label="Contact"><span>Book Appointment</span></Link>
                   </div>
                 </div>
               </div>
@@ -283,7 +288,7 @@ export default function Home() {
 
                     <div className="lower-content">
                       <h3>
-                        <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>
+                        <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`} aria-label="Our Team Member Name">
                           {member.name}
                         </Link>
                       </h3>
@@ -299,6 +304,7 @@ export default function Home() {
       <section className="chooseus-section">
         <div className="bg-layer">
           <Image
+          //  loader={exportableLoader}
             src="/assets/images/about-us/section4/why-choose-right.webp"
             alt="Physiotherapy at Rapharehab"
             fill
@@ -309,6 +315,7 @@ export default function Home() {
 
         <div className="pattern-layer">
           <Image
+          //  loader={exportableLoader}
             src="/assets/images/shape/shape-12.webp"
             alt="Physiotherapy at Rapharehab"
             fill

app/accident/[slug]/page.js

@@ -14,14 +14,14 @@ export async function generateMetadata({ params }) {
 
   if (!service) {
     return {
-      title: "Accident Services | MySite",
+      title: "Accident Services",
       description: "Explore our accident-related services",
     };
   }
 
   return {
     title: service.metaTitle || service.title,
-    description: service.metaDiscription || service.shortDesc,
+    description: service.metaDescription || service.shortDesc,
   };
 }
 
@@ -47,7 +47,7 @@ export default function AccidentDetailsPage({ params }) {
 
                 {/* Categories */}
                 <div className="sidebar-widget category-widget">
-                  <div className="widget-title"><h3>Accident</h3></div>
+                  <div className="widget-title"><h2>Accident</h2></div>
                   <div className="widget-content">
                     <ul className="category-list clearfix">
                       {Accident.map((cat) => (
@@ -55,7 +55,7 @@ export default function AccidentDetailsPage({ params }) {
                           <Link
                             href={`/accident/${cat.slug}`}
                             className={cat.slug === service.slug ? "current" : ""}
-                          >
+                          aria-label="Accident list">
                             {cat.title}
                           </Link>
                         </li>
@@ -76,7 +76,7 @@ export default function AccidentDetailsPage({ params }) {
                       <div className="icon-box">
                         <img src={service.icon} alt={`${service.title}`} />
                       </div>
-                      <h3>{service.title}</h3>
+                      <h2>{service.title}</h2>
                       <p>{service.shortDesc}</p>
                     </div>
                   </div>

app/accident/page.js

@@ -49,7 +49,7 @@ export default function AccidentPage() {
                   <div className="inner-box d-flex flex-column flex-grow-1">
                     <div className="image-box">
                       <figure className="image">
-                        <Link href={`/accident/${service.slug}`}>
+                        <Link href={`/accident/${service.slug}`} aria-label="Accident Image">
                            <img src={service.mainImage} alt={service.title} />
                      </Link>
                       </figure>
@@ -61,9 +61,9 @@ export default function AccidentPage() {
                           alt={`${service.title}`}
                         />
                       </div>
-                      <h3 className='text-start'>
-                        <Link href={`/accident/${service.slug}`}>{service.title}</Link>
-                      </h3>
+                      <h2 className='text-start'>
+                        <Link href={`/accident/${service.slug}`} aria-label="Accident Title">{service.title}</Link>
+                      </h2>
                       <p
                         className='text-start'
                         style={{

app/appointment-booking-form/ContactClient.js

@@ -7,6 +7,15 @@ import Link from "next/link";
 import { servicesList } from "@/utils/Services.utils";
 
 export default function ContactClient() {
+
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
   const [formData, setFormData] = useState({
     username: "",
     email: "",
@@ -48,7 +57,7 @@ export default function ContactClient() {
       email: formData.email,
       subject: formData.service,         
       message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
-      to: "bloor@rapharehab.ca",
+      to: email,
       senderName: "Rapha Rehab Contact Page",
       recaptchaToken: captchaToken,
     };
@@ -77,7 +86,7 @@ export default function ContactClient() {
       });
     }
   };
-
+  
 
   useEffect(() => {
     if (alert.show) {
@@ -111,7 +120,11 @@ export default function ContactClient() {
                 <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>
+                    {email ? (
+                      <a href={`mailto:${email}`} aria-label={email}>{email}</a>
+                    ) : (
+                      <span>Loading...</span>
+                    )}
                   </p>
                 </div>
               </div>
@@ -237,7 +250,7 @@ export default function ContactClient() {
         </div>
       </section>
 
-      {/* <section className="google-map-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"

app/area-of-injury/[slug]/page.js

@@ -14,14 +14,14 @@ export async function generateMetadata({ params }) {
 
   if (!service) {
     return {
-      title: "Area of Injury Not Found – Rapharehab Clinic",
+      title: "Area of Injury Not Found",
       description: "The requested area of injury page could not be found.",
     };
   }
 
   return {
-    title: `${service.metaTitle} – Rapharehab Clinic`,
-    description: service.metaDiscription || "Expert physiotherapy and pain relief treatments.",
+    title: `${service.metaTitle}`,
+    description: service.metaDiscription,
   };
 }
 
@@ -48,7 +48,7 @@ export default function AreaOfInjuryDetails({ params }) {
                 {/* Categories */}
                 <div className="sidebar-widget category-widget">
                   <div className="widget-title">
-                    <h3>Area Of Injury</h3>
+                    <h2>Area Of Injury</h2>
                   </div>
                   <div className="widget-content">
                     <ul className="category-list clearfix">
@@ -57,7 +57,7 @@ export default function AreaOfInjuryDetails({ params }) {
                           <Link
                             href={`/area-of-injury/${cat.slug}`}
                             className={cat.slug === service.slug ? "current" : ""}
-                          >
+                           aria-label="Area of injury list">
                             {cat.title}
                           </Link>
                         </li>
@@ -78,7 +78,7 @@ export default function AreaOfInjuryDetails({ params }) {
                       <div className="icon-box">
                         <img src={service.icon} alt={altText} />
                       </div>
-                      <h3>{service.title}</h3>
+                      <h2>{service.title}</h2>
                       <p>{service.shortDescription}</p>
                     </div>
                   </div>

app/area-of-injury/page.js

@@ -54,7 +54,7 @@ export default function AreaOfInjury() {
                   <div className="inner-box d-flex flex-column flex-grow-1">
                     <div className="image-box">
                       <figure className="image">
-                       <Link href={`/area-of-injury/${item.slug}`}>
+                       <Link href={`/area-of-injury/${item.slug}`} aria-label="Area oF Injury Image Link">
                             <img src={item.image} alt={altText} />
                            </Link>
                       </figure>
@@ -63,9 +63,24 @@ export default function AreaOfInjury() {
                       <div className="icon-box-new">
                         <img src={item.icon} alt={altText} />
                       </div>
-                      <h3 className='text-start'>
-                        <Link href={`/area-of-injury/${item.slug}`}>{item.title}</Link>
-                      </h3>
+                      <h2 className='text-start'>
+                        <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of injury title">{item.title}</Link>
+                      </h2>
+                         {/* <h3 className="text-start">
+                          <Link
+                            href={`/area-of-injury/${item.slug}`}
+                            style={{
+                              display: '-webkit-box',
+                              WebkitLineClamp: 2,
+                              WebkitBoxOrient: 'vertical',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'normal',
+                            }}
+                          >
+                            {item.title}
+                          </Link>
+                        </h3> */}
                       <p
                         className='text-start'
                         style={{

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) => ({
@@ -33,7 +34,6 @@ export default function BlogDetails({ params }) {
   );
 
   const relatedBlogs = sameCategoryBlogs.length > 0 ? [sameCategoryBlogs[0]] : [];
-  
 
   return (
     <Layout
@@ -50,7 +50,7 @@ export default function BlogDetails({ params }) {
               <div className="default-sidebar service-sidebar mr_15">
                 <div className="sidebar-widget category-widget">
                   <div className="widget-title">
-                    <h3>Blogs</h3>
+                    <h2>Blogs</h2>
                   </div>
                   <div className="widget-content">
                     <ul className="category-list clearfix">
@@ -59,7 +59,7 @@ export default function BlogDetails({ params }) {
                           <Link
                             href={`/blog/${b.slug}`}
                             className={b.slug === blog.slug ? "current" : ""}
-                          >
+                            aria-label="Blog List">
                             {b.title}
                           </Link>
                         </li>
@@ -71,7 +71,7 @@ export default function BlogDetails({ params }) {
                 {relatedBlogs.length > 0 && (
                   <div className="sidebar-widget related-post">
                     <div className="widget-title">
-                      <h3>Related Blog</h3>
+                      <h2>Related Blog</h2>
                     </div>
                     <div className="post-inner">
                       {relatedBlogs.map((related) => (
@@ -87,7 +87,7 @@ export default function BlogDetails({ params }) {
                             </div>
                             <div className="lower-content2">
                               <h3>
-                                <Link href={`/blog/${related.slug}`}>
+                                <Link href={`/blog/${related.slug}`} aria-label="Our Blog Title">
                                   {related.title}
                                 </Link>
                               </h3>
@@ -95,7 +95,7 @@ export default function BlogDetails({ params }) {
                               <Link
                                 href={`/blog/${related.slug}`}
                                 className="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 }} />
-                        {blog.faq && <FaqSection faqData={blog.faq} />}
+                      <BlogContent content={blog.content} />
+                      {blog.faq && <FaqSection faqData={blog.faq} />}
                     </div>
                   </div>
                 </div>
@@ -134,4 +134,4 @@ export default function BlogDetails({ params }) {
       </section>
     </Layout>
   );
-}
+}

app/blog/page.js

@@ -28,7 +28,7 @@ export default function Blog() {
                 >
                   <div className="inner-box">
                     <figure className="image-box">
-                      <Link href={`/blog/${blog.slug}`}>
+                      <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
                         <img src={blog.thumbnail} alt={blog.title} />
                       </Link>
                     </figure>
@@ -39,7 +39,7 @@ export default function Blog() {
                         <li>{blog.comments}</li>
                       </ul> */}
                       <h3>
-                        <Link href={`/blog/${blog.slug}`}>
+                        <Link href={`/blog/${blog.slug}`} aria-label="Our Blog Title">
                           {blog.title.split(" ").length > 5
                             ? blog.title.split(" ").slice(0, 5).join(" ") + "..."
                             : blog.title}
@@ -47,7 +47,7 @@ export default function Blog() {
                       </h3>
                       <p>{blog.shortDesc}</p>
                       <div className="link">
-                        <Link href={`/blog/${blog.slug}`}><span>Read More</span></Link>
+                        <Link href={`/blog/${blog.slug}`} aria-label="Read More"><span>Read More</span></Link>
                       </div>
                     </div>
                   </div>

app/caregivers/CaregiversPage.js

@@ -3,6 +3,8 @@ import Layout from "@/components/layout/Layout";
 import Link from "next/link";
 import { useState } from 'react';
 import Image from "next/image";
+
+
 import { teamMembers } from "@/utils/constant.utils";
 
 export default function Home() {
@@ -30,6 +32,7 @@ export default function Home() {
                 <section className="feature-section pt_90 pb_90">
                     <div className="shape hide-element">
                         <Image
+                            // loader={exportableLoader}
                             src="/assets/images/shape/shape-6.png"
                             alt="Physiotherapy at Rapharehab"
                             fill
@@ -48,7 +51,7 @@ export default function Home() {
                                 <div className="feature-block-one">
                                     <div className="inner-box">
                                         <div className="icon-box"><img src="/assets/images/caregivers/caring.webp" alt="Caring with a smile" /></div>
-                                        <h3><Link href="/">Caring with a smile</Link></h3>
+                                        <h3>Caring with a smile</h3>
                                         <p>It’s not what we do as a home care agency, but how we do it. All of our elderly caregiving services are delivered with a smile. And we all know that a smile can be infectious.</p>
                                     </div>
                                 </div>
@@ -57,7 +60,7 @@ export default function Home() {
                                 <div className="feature-block-one">
                                     <div className="inner-box">
                                         <div className="icon-box"><img src="/assets/images/caregivers/attentive.webp" alt="Attentive listener" /></div>
-                                        <h3><Link href="/">Attentive listener</Link></h3>
+                                        <h3>Attentive listener</h3>
                                         <p>How do you like things done? Where would you like to go? Listening to your needs, and having conversations with you, helps us make sure we bring you the perfect match.</p>
                                     </div>
                                 </div>
@@ -66,7 +69,7 @@ export default function Home() {
                                 <div className="feature-block-one">
                                     <div className="inner-box">
                                         <div className="icon-box"><img src="/assets/images/caregivers/qualified.webp" alt="Qualified" /></div>
-                                        <h3><Link href="/">Qualified</Link></h3>
+                                        <h3>Qualified</h3>
                                         <p>Whether you just need someone to take you for a walk or a to provide attentive complex caring – we, as a home care agency, can provide a caregiver that is qualified to meet your needs.</p>
                                     </div>
                                 </div>
@@ -113,7 +116,7 @@ export default function Home() {
                                             <p className="text-white">At NanoCare, we select Caregivers who are passionate about providing in home care to those in need on a daily basis.</p>
                                         </div>
                                         <div className="btn-box">
-                                            <Link href="/contact" className="theme-btn btn-one-new"><span>Become A Caregiver</span></Link>
+                                            <Link href="/contact" className="theme-btn btn-one-new" aria-label="Contact"><span>Become A Caregiver</span></Link>
                                         </div>
                                     </div>
                                 </div>
@@ -122,7 +125,7 @@ export default function Home() {
                     </div>
                 </section>
 
-                <section className="team-section pb_90 pt_90 bg-color-1">
+                <section className="team-section pb_90 bg-color-1">
                     <div className="auto-container">
                         {/* <div className="sec-title mb_50">
               <span className="sub-title">Meet the Team</span>
@@ -148,7 +151,7 @@ export default function Home() {
                                             </div>
                                             <div className="lower-content">
                                                 <h3>
-                                                    <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>{member.name}</Link>
+                                                    <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`} aria-label="Our team physiotherapy etobicoke">{member.name}</Link>
                                                 </h3>
                                                 <span className="designation">{member.designation}</span>
                                                 {/* <ul className="social-links clearfix">
@@ -204,7 +207,7 @@ export default function Home() {
                                                 onClick={() => handleToggle(1)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>Why Should I apply to NanoCare?</h5>
+                                                <h3>Why Should I apply to NanoCare?</h3>
                                             </div>
                                             <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -222,7 +225,7 @@ export default function Home() {
                                                 onClick={() => handleToggle(2)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>Where can I work?</h5>
+                                                <h3>Where can I work?</h3>
                                             </div>
                                             <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -240,7 +243,7 @@ export default function Home() {
                                                 onClick={() => handleToggle(3)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>What types of shifts do you offer?</h5>
+                                                <h3>What types of shifts do you offer?</h3>
                                             </div>
                                             <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -258,7 +261,7 @@ export default function Home() {
                                                 onClick={() => handleToggle(4)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>Do you hire W-2, 1099, or private contractors?</h5>
+                                                <h3>Do you hire W-2, 1099, or private contractors?</h3>
                                             </div>
                                             <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">

app/caregivers/page.js

@@ -1,4 +1,4 @@
-import CaregiversPage from "../caregivers/CaregiversPage";
+import dynamic from "next/dynamic";
 
 export const metadata = {
   title: "Trusted Caregiver Support Services – Rapharehab Clinic",
@@ -6,6 +6,10 @@ export const metadata = {
     "Rapharehab offers professional caregiver services tailored to support patient recovery, ensuring comfort, safety, and dedicated assistance.",
 };
 
+const CaregiversPage = dynamic(() => import("../caregivers/CaregiversPage"), {
+  ssr: false,
+});
+
 export default function Page() {
   return <CaregiversPage />;
 }

app/contact/ContactClient.js

@@ -7,6 +7,15 @@ import Link from "next/link";
 import { servicesList } from "@/utils/Services.utils";
 
 export default function ContactClient() {
+
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
   const [formData, setFormData] = useState({
     username: "",
     email: "",
@@ -43,12 +52,12 @@ export default function ContactClient() {
     if (Object.keys(errors).length > 0) return;
 
     const emailData = {
-      name: formData.username,          
+      name: formData.username,
       phone: formData.phone,
       email: formData.email,
-      subject: formData.service,         
+      subject: formData.service,
       message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
-      to: "bloor@rapharehab.ca",
+      to: email,
       senderName: "Rapha Rehab Contact Page",
       recaptchaToken: captchaToken,
     };
@@ -95,30 +104,34 @@ export default function ContactClient() {
           <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>
+                <h2>Quick Contact</h2>
                 <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>
+                    <Link href="tel:647-722-3434" aria-label="+647-722-3434">+647-722-3434</Link><br />
+                    <Link href="tel:416-622-2873" aria-label="+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>
+                <h2>Email Address</h2>
                 <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>
+                    {email ? (
+                      <a href={`mailto:${email}`} aria-label={email}>{email}</a>
+                    ) : (
+                      <span>Loading...</span>
+                    )}
                   </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>
+                <h2>Mailing Address</h2>
                 <div className="inner-box">
                   <div className="icon-box">
                     <img src="/assets/images/icons/icon-2.png" alt="" />

app/contact/page.js

@@ -1,5 +1,5 @@
+import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
-import ContactClient from "../contact/ContactClient";
 
 export const metadata = {
   title: "Contact Rapharehab – Book Your Appointment Today",
@@ -7,7 +7,12 @@ export const metadata = {
     "Reach out to Rapharehab for expert rehab and therapy services. Call or message us to schedule your consultation with our professional care team.",
 };
 
-export default function ContactPage() {
+// 👇 Dynamically import ContactClient to disable SSR (fix hydration issues)
+const ContactClient = dynamic(() => import("../contact/ContactClient"), {
+  ssr: false,
+});
+
+export default function Page() {
   return (
     <Layout
       headerStyle={1}

app/etobicoke-treatment-service/[slug]/page.js

@@ -14,14 +14,14 @@ export async function generateMetadata({ params }) {
 
   if (!service) {
     return {
-      title: "Service Not Found – MySite",
+      title: "Service Not Found",
       description: "The requested service could not be found.",
     };
   }
 
   return {
-    title: `${service.metaTitle || service.shortTitle || service.title} – MySite`,
-    description: service.metaDiscription || service.shortDesc || "Explore our services in detail.",
+    title: `${service.metaTitle || service.shortTitle || service.title}`,
+    description: service.metaDiscription || service.shortDesc,
   };
 }
 
@@ -48,7 +48,7 @@ export default function ServiceDetailPage({ params }) {
                 {/* Categories */}
                 <div className="sidebar-widget category-widget">
                   <div className="widget-title">
-                    <h3>Services</h3>
+                    <h2>Services</h2>
                   </div>
                   <div className="widget-content">
                     <ul className="category-list clearfix">
@@ -57,7 +57,7 @@ export default function ServiceDetailPage({ params }) {
                           <Link
                             href={`/etobicoke-treatment-service/${item.slug}`}
                             className={item.slug === service.slug ? "current" : ""}
-                          >
+                          aria-label="Etobicoke treatment service">
                             {item.shortTitle}
                           </Link>
                         </li>
@@ -77,7 +77,7 @@ export default function ServiceDetailPage({ params }) {
                       <div className="icon-box">
                         <img src={service.icon} alt={`${service.title} Icon`} />
                       </div>
-                      <h3>{service.shortTitle}</h3>
+                      <h2>{service.shortTitle}</h2>
                       <p>{service.shortDescription}</p>
                     </div>
                   </div>

app/etobicoke-treatment-service/page.js

@@ -21,7 +21,7 @@ export default function ServicesPage() {
                                     <div className="inner-box d-flex flex-column flex-grow-1">
                                         <div className="image-box">
                                             <figure className="image">
-                                                <Link href={`/etobicoke-treatment-service/${item.slug}`}>
+                                                <Link href={`/etobicoke-treatment-service/${item.slug}`} aria-label="Etobicoke treatment service">
                                                     <img src={item?.image} alt={item.alt} />
                                                 </Link>
                                             </figure>
@@ -30,11 +30,11 @@ export default function ServicesPage() {
                                             <div className="icon-box-new">
                                                 <img src={item?.icon} alt={item.alt} />
                                             </div>
-                                            <h3 className='text-start'>
-                                                <Link href={`/etobicoke-treatment-service/${item.slug}`}>
+                                            <h2 className='text-start'>
+                                                <Link href={`/etobicoke-treatment-service/${item.slug}`} aria-label="Etobicoke treatment service title">
                                                     {item?.shortTitle}
                                                 </Link>
-                                            </h3>
+                                            </h2>
                                             <p
                                                 className='text-start'
                                                 style={{

app/faq-physiotherapy-etobicoke/FaqClient.js

@@ -61,7 +61,7 @@ export default function Faq() {
                                                 onClick={() => handleToggle(1)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>What is physiotherapy?</h5>
+                                                <h3>What is physiotherapy?</h3>
                                             </div>
                                             <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -79,7 +79,7 @@ export default function Faq() {
                                                 onClick={() => handleToggle(2)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>What does the physiotherapist do?</h5>
+                                                <h3>What does the physiotherapist do?</h3>
                                             </div>
                                             <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -97,7 +97,7 @@ export default function Faq() {
                                                 onClick={() => handleToggle(3)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>How long will your session take?</h5>
+                                                <h3>How long will your session take?</h3>
                                             </div>
                                             <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">

app/faq-physiotherapy-etobicoke/page.js

@@ -1,5 +1,11 @@
+// src/app/faq/page.jsx
+import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
-import FaqClient from "../faq-physiotherapy-etobicoke/FaqClient";
+
+const FaqClient = dynamic(
+  () => import("../faq-physiotherapy-etobicoke/FaqClient"),
+  { ssr: false }
+);
 
 export const metadata = {
   title: "FAQs – Answers from Rapharehab’s Expert Team",
@@ -18,4 +24,4 @@ export default function FaqPage() {
       <FaqClient />
     </Layout>
   );
-}
+}

app/gallery-physiotherapy-etobicoke/GalleryClient.js

@@ -33,7 +33,7 @@ export default function WhyChooseUs() {
                                             <img src={src} alt={`gallery-${index}`} />
                                         </figure>
                                         <div className="view-btn">
-                                            <Link href={src} className="lightbox-image" data-fancybox="gallery">
+                                            <Link href={src} className="lightbox-image" data-fancybox="gallery" aria-label="View btn icon">
                                                 <i className="icon-4"></i>
                                             </Link>
                                         </div>
@@ -53,7 +53,7 @@ export default function WhyChooseUs() {
                                             e.preventDefault()
                                             handlePageChange(currentPage - 1)
                                         }}
-                                    >
+                                    aria-label="Gallery left image">
                                         <img src="/assets/images/gallery/left.png" alt="Previous" />
                                     </Link>
                                 </li>
@@ -68,7 +68,7 @@ export default function WhyChooseUs() {
                                             handlePageChange(i + 1)
                                         }}
                                         className={currentPage === i + 1 ? "current" : ""}
-                                    >
+                                    aria-label="Gallery list">
                                         {i + 1}
                                     </Link>
                                 </li>
@@ -82,7 +82,7 @@ export default function WhyChooseUs() {
                                             e.preventDefault()
                                             handlePageChange(currentPage + 1)
                                         }}
-                                    >
+                                    aria-label="Gallery right image">
                                         <img src="/assets/images/gallery/right.png" alt="Previous" />
                                     </Link>
                                 </li>

app/layout.js

@@ -10,25 +10,153 @@ import Script from "next/script";
 
 export const metadata = {
   title: "Best Pain Relief & Physiotherapy - Repharehab Clinic",
-  description: "Best pain relief physiotherapy clinic",
+  description:
+    "Rapharehab offers trusted physiotherapy and pain relief treatments with professional care tailored to restore your health and mobility.",
 };
 
 export default function RootLayout({ children }) {
+  const siteUrl = "https://rapharehab.ca";
+  const logoUrl = `${siteUrl}/assets/images/logo.png`;
+  const ogImage = `${siteUrl}/assets/images/logo.jpg`;
+
   return (
     <html lang="en" className={`${poppins.variable}`}>
       <head>
-        {/* Microsoft Clarity */}
-        <Script id="clarity-script" strategy="afterInteractive">
-          {`
-            (function(c,l,a,r,i,t,y){
-              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/th7p0lr1ca";
-              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-            })(window, document, "clarity", "script", "th7p0lr1ca");
-          `}
+        {/* ✅ Preload critical font */}
+        {/* <link
+          rel="preload"
+          href="/fonts/poppins.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        /> */}
+
+        {/* ✅ Canonical Tag */}
+        <link rel="canonical" href={siteUrl} aria-label="Site Url" />
+
+        {/* ✅ Open Graph Meta */}
+        <meta property="og:title" content="Rapha Rehab – Physiotherapy Clinic" />
+        <meta
+          property="og:description"
+          content="Trusted physiotherapy, pain relief and rehab clinic in Etobicoke. Book your appointment now."
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={siteUrl} />
+        <meta property="og:image" content={ogImage} />
+        <meta property="og:site_name" content="Rapha Rehab" />
+        <meta property="og:locale" content="en_CA" />
+
+        {/* ✅ Twitter Meta */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          name="twitter:title"
+          content="Rapha Rehab – Physiotherapy & Rehab Clinic in Etobicoke"
+        />
+        <meta
+          name="twitter:description"
+          content="Expert physiotherapy and pain relief treatments tailored to you."
+        />
+        <meta name="twitter:image" content={ogImage} />
+        <meta name="twitter:site" content="@YourTwitterHandle" />
+
+        {/* ✅ Preconnect — Faster 3rd-party requests */}
+        <link rel="preconnect" href="https://www.googletagmanager.com" aria-label="Googleletamanage" />
+        <link rel="preconnect" href="https://connect.facebook.net" aria-label="facebook" />
+        <link rel="preconnect" href="https://www.facebook.com" aria-label="Facebook" />
+        <link rel="preconnect" href="https://scripts.clarity.ms" aria-label="Scripts Clarity" />
+
+        {/* ✅ fetchpriority for LCP Image */}
+        <link
+          rel="preload"
+          as="image"
+          href="/assets/images/banner/mobile-banner/4.webp"
+          fetchPriority="high"
+          aria-label="loader"
+        />
+      </head>
+      <body>
+        {/* PhysiotherapyClinic Schema Markup */}
+        <Script
+          id="schema-physiotherapy"
+          type="application/ld+json"
+          strategy="afterInteractive"
+        >
+          {JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "PhysiotherapyClinic",
+            name: "Repharehab Clinic",
+            image: logoUrl,
+            "@id": siteUrl,
+            url: siteUrl,
+            telephone: "+16477223434",
+            priceRange: "$$",
+            medicalSpecialty: "PhysicalTherapy",
+            address: {
+              "@type": "PostalAddress",
+              streetAddress: "5 – 4335 Bloor Street West",
+              addressLocality: "Etobicoke",
+              addressRegion: "ON",
+              postalCode: "M9C 2A5",
+              addressCountry: "CA",
+            },
+            geo: {
+              "@type": "GeoCoordinates",
+              latitude: 43.6389,
+              longitude: -79.5716,
+            },
+            openingHoursSpecification: [
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Monday",
+                opens: "10:00",
+                closes: "20:00",
+              },
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Tuesday",
+                opens: "14:00",
+                closes: "19:00",
+              },
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Wednesday",
+                opens: "10:00",
+                closes: "20:00",
+              },
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Thursday",
+                opens: "10:00",
+                closes: "20:00",
+              },
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Friday",
+                opens: "10:00",
+                closes: "20:00",
+              },
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Saturday",
+                opens: "10:00",
+                closes: "19:00",
+              },
+              {
+                "@type": "OpeningHoursSpecification",
+                dayOfWeek: "Sunday",
+                opens: "00:00",
+                closes: "00:00",
+                closed: true,
+              },
+            ],
+            sameAs: [
+              "https://www.facebook.com/ELRaphaRehabCenter/",
+              "https://www.instagram.com/elrapharehab/",
+            ],
+          })}
         </Script>
 
-        {/* Google Tag Manager */}
+        {/* ✅ Google Tag Manager — non-blocking */}
         <Script id="gtm-init" strategy="afterInteractive">
           {`
             (function(w,d,s,l,i){
@@ -43,10 +171,47 @@ export default function RootLayout({ children }) {
             })(window,document,'script','dataLayer','G-KM1KJW539N');
           `}
         </Script>
-      </head>
 
-      <body>
-        {/* GTM noscript fallback */}
+        {/* ✅ Microsoft Clarity — lazy load to reduce LCP impact */}
+        <Script id="clarity-script" strategy="lazyOnload">
+          {`
+            window.onload = function() {
+              setTimeout(() => {
+                (function(c,l,a,r,i,t,y){
+                  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/th7p0lr1ca";
+                  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "th7p0lr1ca");
+              }, 3000);
+            };
+          `}
+        </Script>
+
+        {/* ✅ Facebook Pixel — lazy load to avoid blocking */}
+        <Script id="facebook-pixel" strategy="lazyOnload">
+          {`
+            setTimeout(() => {
+              !function(f,b,e,v,n,t,s){
+                if(f.fbq)return;
+                n=f.fbq=function(){n.callMethod?
+                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+                if(!f._fbq)f._fbq=n;
+                n.push=n;
+                n.loaded=!0;
+                n.version='2.0';
+                n.queue=[];
+                t=b.createElement(e);t.async=!0;
+                t.src=v;
+                s=b.getElementsByTagName(e)[0];
+                s.parentNode.insertBefore(t,s)
+              }(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
+              fbq('init', '1133141855537200');
+              fbq('track', 'PageView');
+            }, 4000);
+          `}
+        </Script>
+
+        {/* ✅ Facebook & GTM noscript fallback */}
         <noscript>
           <iframe
             src="https://www.googletagmanager.com/ns.html?id=G-KM1KJW539N"
@@ -54,6 +219,13 @@ export default function RootLayout({ children }) {
             width="0"
             style={{ display: "none", visibility: "hidden" }}
           ></iframe>
+          <img
+            height="1"
+            width="1"
+            style={{ display: "none" }}
+            src="https://www.facebook.com/tr?id=1133141855537200&ev=PageView&noscript=1"
+            alt="facebook pixel"
+          />
         </noscript>
 
         {children}

app/not-found.js

@@ -13,7 +13,7 @@ export default function Error404() {
                     <figure className="error-image"><img src="/assets/images/icons/error-1.png" alt="" /></figure>
                     <h2>Oops, page not <br />found!</h2>
                     <p>Mauris urna velit in fermentum in in natoque. Tincidunt pellentesque et risus tincidunt <br />dignissim proin auctor.</p>
-                    <Link href="/" className="theme-btn btn-one"><span>Back To Home</span></Link>
+                    <Link href="/" className="theme-btn btn-one" aria-label="Back to home"><span>Back To Home</span></Link>
                 </div>
             </div>
         </section>
@@ -36,7 +36,7 @@ export default function Error404() {
                                     <div className="form-group">
                                         <div className="check-box">
                                             <input className="check" type="checkbox" id="checkbox1" />
-                                            <label htmlFor="checkbox1">I agree to the <Link href="/">Privacy Policy.</Link></label>
+                                            <label htmlFor="checkbox1" aria-label="Pricacy Policy">I agree to the <Link href="/" aria-label="Privacy Policy">Privacy Policy.</Link></label>
                                         </div>
                                     </div>
                                 </form>

app/our-team-physiotherapy-etobicoke/TeamClient.js

@@ -33,7 +33,7 @@ export default function Home() {
                       </div>
                       <div className="lower-content">
                         <h3>
-                          <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>{member.name}</Link>
+                          <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`} aria-label="Our team physiotherapy etobicoke">{member.name}</Link>
                         </h3>
                         <span className="designation">{member.designation}</span>
                         {/* <ul className="social-links clearfix">

app/our-team-physiotherapy-etobicoke/[slug]/page.js

@@ -42,7 +42,7 @@ export default function TeamDetails({ params }) {
       <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Not Found">
         <div className="auto-container">
           <h2>Team member not found!</h2>
-          <Link href="/" className="theme-btn btn-one">Go Back</Link>
+          <Link href="/" className="theme-btn btn-one" aria-label="Go back">Go Back</Link>
         </div>
       </Layout>
     );
@@ -71,13 +71,13 @@ export default function TeamDetails({ params }) {
                   <p>{member.description}</p>
                   <ul className="info-list mb_30 clearfix">
                     <li><strong>Experience: </strong>{member.experience}</li>
-                    <li><strong>Email: </strong><Link href={`mailto:${member.email}`}>{member.email}</Link></li>
-                    <li><strong>Phone: </strong><Link href={`tel:${member.phone}`}>{member.phone}</Link></li>
+                    <li><strong>Email: </strong><Link href={`mailto:${member.email}`} aria-label="Email">{member.email}</Link></li>
+                    <li><strong>Phone: </strong><Link href={`tel:${member.phone}`} aria-label="Phone">{member.phone}</Link></li>
                   </ul>
                   <ul className="social-links clearfix">
                     {member.socials.map((social, idx) => (
                       <li key={idx}>
-                        <Link href={social.link}>
+                        <Link href={social.link} aria-label="Social links">
                           <i className={social.icon}></i>
                         </Link>
                       </li>

app/ourapproach-physiotherapy-etobicoke/page.js

@@ -2,6 +2,8 @@ import Link from "next/link"
 import Layout from "@/components/layout/Layout"
 import Image from "next/image";
 
+
+
 export const metadata = {
   title: "Our Healing Approach – Rapharehab’s Proven Methods",
   description: "Discover Rapharehab’s personalized approach to wellness. We combine evidence-based methods and holistic care to ensure lasting health results.",
@@ -18,6 +20,7 @@ export default function About() {
             <div className="pattern-1 rotate-me" style={{ backgroundImage: "url(/assets/images/shape/shape-8.webp)" }}></div>
             <div className="pattern-2 rotate-me absolute w-[140px] h-[140px]">
               <Image
+              //  loader={exportableLoader}
                 src="/assets/images/shape/shape-9.webp"
                 alt="Physiotherapy at Rapharehab"
                 fill
@@ -36,6 +39,7 @@ export default function About() {
                     <div className="image-shape">
                       <div className="shape-1 rotate-me">
                         <Image
+                        //  loader={exportableLoader}
                           src="/assets/images/shape/shape-8.webp"
                           alt="Physiotherapy at Rapharehab"
                           fill
@@ -45,6 +49,7 @@ export default function About() {
 
                       <div className="shape-2">
                         <Image
+                        //  loader={exportableLoader}
                           src="/assets/images/shape/shape-33.png"
                           alt="Physiotherapy at Rapharehab"
                           fill
@@ -63,6 +68,7 @@ export default function About() {
 
                       <div className="shape-4">
                         <Image
+                        //  loader={exportableLoader}
                           src="/assets/images/shape/shape-34.png"
                           alt="Physiotherapy at Rapharehab"
                           fill
@@ -72,6 +78,7 @@ export default function About() {
 
                       <div className="shape-5">
                         <Image
+                        //  loader={exportableLoader}
                           src="/assets/images/shape/shape-11.webp"
                           alt="Physiotherapy at Rapharehab"
                           fill

app/page.js

@@ -1,53 +1,59 @@
-import Layout from "@/components/layout/Layout"
-import Banner from "@/components/sections/home2/Banner"
-import Features from "@/components/sections/home2/Features"
-import Testimonial from "@/components/sections/home1/Testimonial"
-import Video from "@/components/sections/home1/Video"
-import Solution from "@/components/sections/home2/Solution"
-import AboutSection from "@/components/sections/home/AboutSection"
-import ServicesSection from "@/components/sections/home/ServicesSection"
-import WhyChooseUsSection from "@/components/sections/home/WhyChooseusSection"
-import CounterSection from "@/components/sections/home/CounterSection"
-import FaqSection from "@/components/sections/home/FaqSection"
-import AreaOfInjury from "@/components/sections/home/AreaOfInjury"
-import MobileServices from "@/components/sections/home/MobileServicesSection"
-import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard"
-import MobileBanner from "@/components/sections/home2/MobileBanner"
+"use client";
 
-export const metadata = {
-  title: "Best Pain Relief & Physiotherapy – Rapharehab Clinic",
-  description: "Rapharehab offers trusted physiotherapy and pain relief treatments with professional care tailored to restore your health and mobility.",
-};
+import { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import Layout from "@/components/layout/Layout";
+
+// ✅ Banner components — immediate load (important for FCP)
+import Banner from "@/components/sections/home2/Banner";
+import MobileBanner from "@/components/sections/home2/MobileBanner";
+
+// ✅ Lazy load all other sections (FCP/LCP performance boost)
+const AboutSection = dynamic(() => import("@/components/sections/home/AboutSection"), { ssr: false });
+const ServicesSection = dynamic(() => import("@/components/sections/home/ServicesSection"), { ssr: false });
+const MobileServices = dynamic(() => import("@/components/sections/home/MobileServicesSection"), { ssr: false });
+const MobileFeatureCard = dynamic(() => import("@/components/sections/home/MobileFeatureCard"), { ssr: false });
+const Features = dynamic(() => import("@/components/sections/home2/Features"), { ssr: false });
+const FaqSection = dynamic(() => import("@/components/sections/home/FaqSection"), { ssr: false });
+const AreaOfInjury = dynamic(() => import("@/components/sections/home/AreaOfInjury"), { ssr: false });
+const WhyChooseUsSection = dynamic(() => import("@/components/sections/home/WhyChooseusSection"), { ssr: false });
+const CounterSection = dynamic(() => import("@/components/sections/home/CounterSection"), { ssr: false });
+const Testimonial = dynamic(() => import("@/components/sections/home1/Testimonial"), { ssr: false });
+const Solution = dynamic(() => import("@/components/sections/home2/Solution"), { ssr: false });
+const Video = dynamic(() => import("@/components/sections/home1/Video"), { ssr: false });
 
 export default function Home() {
+  const [isMobile, setIsMobile] = useState(false);
 
-    return (
-        <>
-            <Layout headerStyle={2} footerStyle={2}>
-                <div className="d-none d-md-block">
-                    <Banner />
-                </div>
-                <div className="d-block d-md-none">
-                    <MobileBanner />
-                </div>
-                <AboutSection />
-                <div className="d-none d-md-block">
-                    <ServicesSection />
-                </div>
-                <div className="d-block d-md-none">
-                    <MobileServices />
-                </div>
-                <MobileFeatureCard />
-                <Features />
-                <FaqSection />
-                <AreaOfInjury />
-                <WhyChooseUsSection />
-                <CounterSection />
-                <Testimonial />
-                <Solution />
-                <Video />
+  useEffect(() => {
+    // ✅ Detect mobile screen only in browser
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
 
-            </Layout>
-        </>
-    )
-} 
+  return (
+    <Layout headerStyle={2} footerStyle={2}>
+      {/* ✅ Prevent layout shift for banner */}
+      <section style={{ minHeight: "100vh", position: "relative" }}>
+        {isMobile ? <MobileBanner /> : <Banner />}
+      </section>
+
+      {/* ✅ Lazy loaded sections — improve Lighthouse performance */}
+      <AboutSection />
+
+      {isMobile ? <MobileServices /> : <ServicesSection />}
+
+      <MobileFeatureCard />
+      <Features />
+      <FaqSection />
+      <AreaOfInjury />
+      <WhyChooseUsSection />
+      <CounterSection />
+      <Testimonial />
+      <Solution />
+      <Video />
+    </Layout>
+  );
+}

app/payment-insurance/PaymentInsurence.js

@@ -37,9 +37,9 @@ export default function RefugeeIFHP() {
                         <div className="content-box full-width">
                             <div className="sec-title mb_15">
                                 <h2>Refugee Physiotherapy & IFHP Claims (Canada)</h2>
-                                <h4 className="mt-3">
+                                <h3 className="mt-3">
                                     <strong>Simple claims - No surprises.</strong>
-                                </h4>
+                                </h3>
                             </div>
 
                             <div className="mb_30">
@@ -51,12 +51,12 @@ export default function RefugeeIFHP() {
                                     most - your recovery.
                                 </p>
                                 <div className="btn-box mt-4">
-                                    <Link href="/contact" className="theme-btn btn-one"><span>Book Your IFHP-Covered Visit</span></Link>
+                                    <Link href="/contact" className="theme-btn btn-one" aria-label="Booke your IFHP-Covered visit "><span>Book Your IFHP-Covered Visit</span></Link>
                                 </div>
                             </div>
 
                             <div className=" mb_30">
-                                <h4 className="mb-3">Who’s eligible under IFHP?</h4>
+                                <h3 className="recuression mb-3">Who’s eligible under IFHP?</h3>
                                 <p>
                                     IFHP is temporary health coverage for people in Canada who
                                     aren’t yet eligible for provincial/territorial health insurance
@@ -67,7 +67,7 @@ export default function RefugeeIFHP() {
                             </div>
 
                             <div className=" mb_30">
-                                <h4 className="mb-3">Does IFHP cover physiotherapy?</h4>
+                                <h3 className="recuression mb-3">Does IFHP cover physiotherapy?</h3>
                                 <p>
                                     Yes. IFHP’s Supplemental Coverage includes physiotherapy, along
                                     with other allied health services. For physiotherapy, the
@@ -109,7 +109,7 @@ export default function RefugeeIFHP() {
 
                             <div className="row mt-5">
                                 <div className="col-lg-6 col-md-6 col-sm-12 mb_30">
-                                    <h4 className="mb-4">How IFHP claims work at Rapha Rehab (so it’s easy for you)?</h4>
+                                    <h3 className=" recuression mb-4 ">How IFHP claims work at Rapha Rehab (so it’s easy for you)?</h3>
                                     <ul className="list-style-one clearfix mt-3">
                                         <li>
                                             IFHP eligibility document (with your UCI/Client ID and valid coverage dates)
@@ -138,7 +138,7 @@ export default function RefugeeIFHP() {
                                     </ul>
                                 </div>
                                 <div className="col-lg-6 col-md-6 col-sm-12 mb_30">
-                                    <h4>What your treatment includes?</h4>
+                                    <h3 className="recuression">What your treatment includes?</h3>
                                     <ul className="list-style-one clearfix mt-3">
                                         <li>
                                             A 45-60 minute initial visit with assessment, goal setting, and a simple home program
@@ -160,7 +160,7 @@ export default function RefugeeIFHP() {
                             <div className="content-column mb-5">
                                 <div className="sec-title mb_30">
                                     <span className="sub-title">Faq's</span>
-                                    <h4>Frequently Asked Questions</h4>
+                                    <h3 className="recuression">Frequently Asked Questions</h3>
                                 </div>
                                 <div className="content-box">
                                     <ul className="accordion-box">
@@ -170,7 +170,7 @@ export default function RefugeeIFHP() {
                                                 onClick={() => handleToggle(1)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>Do I need a referral?</h5>
+                                                <h3 className="recuression">Do I need a referral?</h3>
                                             </div>
                                             <div className={isActive.key === 1 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -191,7 +191,7 @@ export default function RefugeeIFHP() {
                                                 onClick={() => handleToggle(2)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>How many physio sessions are covered?</h5>
+                                                <h3 className="recuression">How many physio sessions are covered?</h3>
                                             </div>
                                             <div className={isActive.key === 2 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -213,7 +213,7 @@ export default function RefugeeIFHP() {
                                                 onClick={() => handleToggle(3)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>What if I can’t come to the clinic?</h5>
+                                                <h3>What if I can’t come to the clinic?</h3>
                                             </div>
                                             <div className={isActive.key === 3 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -236,7 +236,7 @@ export default function RefugeeIFHP() {
                                                 onClick={() => handleToggle(4)}
                                             >
                                                 <div className="icon-box"><i className="icon-34"></i></div>
-                                                <h5>What happens when I get provincial coverage (like OHIP)?</h5>
+                                                <h3>What happens when I get provincial coverage (like OHIP)?</h3>
                                             </div>
                                             <div className={isActive.key === 4 ? "acc-content current" : "acc-content"}>
                                                 <div className="content">
@@ -258,7 +258,7 @@ export default function RefugeeIFHP() {
                             <div className="row">
                                 {/* Left Column */}
                                 <div className="col-lg-6 col-md-6 col-sm-12 mb_0 mt-3">
-                                    <h4 className="mb-3">What to bring to your first appointment?</h4>
+                                    <h3 className="mb-3">What to bring to your first appointment?</h3>
                                     <ul className="list-style-one clearfix mt-3">
                                         <li>Your IFHP eligibility document (with UCI)</li>
                                         <li>Photo ID (if you have it)</li>
@@ -272,7 +272,7 @@ export default function RefugeeIFHP() {
 
                                 {/* Right Column */}
                                 <div className="col-lg-6 col-md-6 col-sm-12 mb_30 mt-3">
-                                    <h4>Why choose Rapha Rehab for IFHP-covered care?</h4>
+                                    <h3>Why choose Rapha Rehab for IFHP-covered care?</h3>
                                     <ul className="list-style-one clearfix mt-3">
                                         <li>
                                             <strong>Welcoming & culturally sensitive:</strong>{" "}
@@ -296,7 +296,7 @@ export default function RefugeeIFHP() {
 
 
                             <div className=" mb_30">
-                                <h4 className="mb-3">Blue Cross: Trusted Partner in Refugee Health Coverage</h4>
+                                <h3 className="mb-3">Blue Cross: Trusted Partner in Refugee Health Coverage</h3>
                                 <p>
                                     The Interim Federal Health Program (IFHP) is administered
                                     through Medavie Blue Cross, one of Canada’s leading health
@@ -320,7 +320,7 @@ export default function RefugeeIFHP() {
                                     guide you step by step.
                                 </p>
                                 <div className="btn-box mt-3">
-                                    <Link href="/contact" className="theme-btn btn-one"><span>Book Your IFHP-Covered Visit</span></Link>
+                                    <Link href="/contact" className="theme-btn btn-one" aria-label="Booke your IFHP-Covered visit"><span>Book Your IFHP-Covered Visit</span></Link>
                                 </div>
 
                             </div>
@@ -521,7 +521,7 @@ export default function RefugeeIFHP() {
                                             you through every step of the process.
                                         </p>
                                         <div className="btn-box mt-3 mb-4">
-                                            <Link href="/contact" className="theme-btn btn-one"><span>Contact Us to Check Your Coverage</span></Link>
+                                            <Link href="/contact" className="theme-btn btn-one" aria-label="Contact us to check your coverage "><span>Contact Us to Check Your Coverage</span></Link>
                                         </div>
 
                                     </div>

app/payment-insurance/page.js

@@ -1,17 +1,17 @@
-import Layout from "@/components/layout/Layout";
-import RefugeeIFHP from "./PaymentInsurence";
+import dynamic from "next/dynamic";
 
 export const metadata = {
-    title:
-        "Refugee Physiotherapy & IFHP Claims (Canada) - Rapharehab Physiotherapy Etobicoke",
-    description:
-        "Access refugee physiotherapy covered by Canada's Interim Federal Health Program (IFHP) at Rapha Rehab Etobicoke. We handle paperwork, explain coverage clearly, and focus on your recovery. Book your IFHP-covered physiotherapy visit today.",
+  title:
+    "Refugee Physiotherapy & IFHP Claims (Canada) - Rapharehab Physiotherapy Etobicoke",
+  description:
+    "Access refugee physiotherapy covered by Canada's Interim Federal Health Program (IFHP) at Rapha Rehab Etobicoke. We handle paperwork, explain coverage clearly, and focus on your recovery. Book your IFHP-covered physiotherapy visit today.",
 };
 
-export default function FaqPage() {
-    return (
-        <>
-            <RefugeeIFHP />
-        </>
-    );
+// 👇 Disable SSR to prevent hydration mismatch issues
+const RefugeeIFHPPage = dynamic(() => import("../payment-insurance/PaymentInsurence"), {
+  ssr: false,
+});
+
+export default function Page() {
+  return <RefugeeIFHPPage />;
 }

app/rehabilitation/[slug]/page.js

@@ -12,11 +12,11 @@ export async function generateStaticParams() {
 export async function generateMetadata({ params }) {
   const service = Rehabilitation.find((item) => item.slug === params.slug);
 
-  if (!service) return { title: "Rehabilitation | MySite", description: "Explore our rehabilitation services" };
+  if (!service) return { title: "Rehabilitation", description: "Explore our rehabilitation services" };
 
   return {
     title: service.metaTitle || service.title,
-    description: service.metaDiscription || service.shortDesc,
+    description: service.metaDescription || service.shortDesc,
   };
 }
 
@@ -42,7 +42,7 @@ export default function RehabilitationDetailsPage({ params }) {
 
                 {/* Categories */}
                 <div className="sidebar-widget category-widget">
-                  <div className="widget-title"><h3>Rehabilitation</h3></div>
+                  <div className="widget-title"><h2>Rehabilitation</h2></div>
                   <div className="widget-content">
                     <ul className="category-list clearfix">
                       {Rehabilitation.map((cat) => (
@@ -50,7 +50,7 @@ export default function RehabilitationDetailsPage({ params }) {
                           <Link
                             href={`/rehabilitation/${cat.slug}`}
                             className={cat.slug === service.slug ? "current" : ""}
-                          >
+                           aria-label="rehabilitation">
                             {cat.title}
                           </Link>
                         </li>
@@ -71,7 +71,7 @@ export default function RehabilitationDetailsPage({ params }) {
                       <div className="icon-box">
                         <img src={service.icon} alt={`${service.title} Icon`} />
                       </div>
-                      <h3>{service.title}</h3>
+                      <h2>{service.title}</h2>
                       <p>{service.shortDesc}</p>
                     </div>
                   </div>

app/rehabilitation/page.js

@@ -50,7 +50,7 @@ export default function RehabilitationPage() {
                   <div className="inner-box d-flex flex-column flex-grow-1">
                     <div className="image-box">
                       <figure className="image">
-                        <Link href={`/rehabilitation/${service.slug}`}>
+                        <Link href={`/rehabilitation/${service.slug}`} aria-label="rehabilitation">
                           <img src={service.mainImage} alt={service.title} />
                         </Link>
                       </figure>
@@ -62,9 +62,9 @@ export default function RehabilitationPage() {
                           alt={`${service.title} Icon`}
                         />
                       </div>
-                      <h3>
-                        <Link href={`/rehabilitation/${service.slug}`}>{service.title}</Link>
-                      </h3>
+                      <h2>
+                        <Link href={`/rehabilitation/${service.slug}`} aria-label="Service Title">{service.title}</Link>
+                      </h2>
                       <p
                         className='text-start'
                         style={{

app/shortcodes/ShortcodesClient.js

@@ -5,7 +5,9 @@ import { motion } from "framer-motion"
 import TestimonialSlider1 from '@/components/slider/TestimonialSlider1'
 import PortfolioFilter1 from "@/components/elements/Shortcodes"
 import CounterUp from "@/components/elements/CounterUp"
-import Image from "next/image"
+import Image from "next/image";
+
+
 import { teamMembers } from "@/utils/constant.utils";
 
 export default function Home() {
@@ -179,7 +181,7 @@ export default function Home() {
                             <div className="feature-block-one">
                                 <div className="inner-box">
                                     <div className="icon-box"><img src="/assets/images/shortcodes/icons/daily-care.webp" alt="Daily Care Experts" /></div>
-                                    <h3><Link href="/">Daily Care Experts</Link></h3>
+                                    <h3><Link href="/" aria-label="Daily care experts">Daily Care Experts</Link></h3>
                                     <p>We specialize in around the clock care to help seniors live well at home.</p>
                                 </div>
                             </div>
@@ -189,7 +191,7 @@ export default function Home() {
                             <div className="feature-block-one">
                                 <div className="inner-box">
                                     <div className="icon-box"><img src="/assets/images/shortcodes/icons/balanced-care.webp" alt="Balanced Care" /></div>
-                                    <h3><Link href="/">Balanced Care</Link></h3>
+                                    <h3><Link href="/" aria-label="Balanced care">Balanced Care</Link></h3>
                                     <p>Our unique approach to care promotes healthy mind, body and spirit.</p>
                                 </div>
                             </div>
@@ -199,7 +201,7 @@ export default function Home() {
                             <div className="feature-block-one">
                                 <div className="inner-box">
                                     <div className="icon-box"><img src="/assets/images/shortcodes/icons/peace.webp" alt="Peace of Mind" /></div>
-                                    <h3><Link href="/">Peace of Mind</Link></h3>
+                                    <h3><Link href="/" aria-label="Peace of mind">Peace of Mind</Link></h3>
                                     <p>Independent industry surveys place our client satisfaction rate at 97%.</p>
                                 </div>
                             </div>
@@ -209,7 +211,7 @@ export default function Home() {
                             <div className="feature-block-one">
                                 <div className="inner-box">
                                     <div className="icon-box"><img src="/assets/images/shortcodes/icons/24-7.webp" alt="Available 24/7" /></div>
-                                    <h3><Link href="/">Available 24/7</Link></h3>
+                                    <h3><Link href="/" aria-label="Availabele 24/7">Available 24/7</Link></h3>
                                     <p>We are available 24 hours a day to provide your loved one with a caregiver.</p>
                                 </div>
                             </div>
@@ -219,7 +221,7 @@ export default function Home() {
                             <div className="feature-block-one">
                                 <div className="inner-box">
                                     <div className="icon-box"><img src="/assets/images/shortcodes/icons/high.webp" alt="High Caliber Caregivers" /></div>
-                                    <h3><Link href="/">High Caliber Caregivers</Link></h3>
+                                    <h3><Link href="/" aria-label="High caliber caregivers">High Caliber Caregivers</Link></h3>
                                     <p>We typically hire only 1 in 25 applicants and provide ongoing training.</p>
                                 </div>
                             </div>
@@ -229,7 +231,7 @@ export default function Home() {
                             <div className="feature-block-one">
                                 <div className="inner-box">
                                     <div className="icon-box"><img src="/assets/images/shortcodes/icons/trusted.webp" alt="A Trusted Partner" /></div>
-                                    <h3><Link href="/">A Trusted Partner</Link></h3>
+                                    <h3><Link href="/" aria-label="A trusted partner">A Trusted Partner</Link></h3>
                                     <p>Nano Home Care is the trusted referral choice for elder care professionals.</p>
                                 </div>
                             </div>
@@ -349,6 +351,7 @@ export default function Home() {
             <section className="process-section pt_90 pb_90">
                 <div className="pattern-layer">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/shape/shape-19.png"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -364,6 +367,7 @@ export default function Home() {
                     <div className="inner-container">
                         <div className="arrow-shape">
                             <Image
+                                // loader={exportableLoader}
                                 src="/assets/images/shape/shape-18.webp"
                                 alt=" Physiotherapy at Rapharehab"
                                 fill
@@ -428,7 +432,7 @@ export default function Home() {
                                         <p className="tex-color-1">NanoCare is committed to being your shoulder to lean on and providing honest advice for your loved one’s situation during this delicate time. No one should feel alone when looking for senior home care solutions. </p>
                                     </div>
                                     <div className="btn-box">
-                                        <Link href="/contact" className="theme-btn btn-one-new"><span>Book Appointment</span></Link>
+                                        <Link href="/contact" className="theme-btn btn-one-new" aria-label="Booke appointment"><span>Book Appointment</span></Link>
                                     </div>
                                 </div>
                             </div>
@@ -486,6 +490,7 @@ export default function Home() {
             <section className="testimonial-section pt_90 pb_90 bg-color-1" id="testimonial">
                 <div className="bg-layer">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/shortcodes/testimonials-carousel.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -495,6 +500,7 @@ export default function Home() {
 
                 <div className="pattern-layer">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/shape/shape-21.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -531,7 +537,7 @@ export default function Home() {
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         className="theme-btn btn-one-new-raw"
-                                    >
+                                     aria-label="Reviee us on google">
                                         <span>Review us on Google</span>
                                     </Link>
                                 </div>
@@ -620,7 +626,7 @@ export default function Home() {
                                         </div>
                                         <div className="lower-content">
                                             <h3>
-                                                <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>{member.name}</Link>
+                                                <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`} aria-label="Our team physiotherapy etobicoke members name">{member.name}</Link>
                                             </h3>
                                             <span className="designation">{member.designation}</span>
                                             {/* <ul className="social-links clearfix">

app/what-to-expect/page.js

@@ -2,6 +2,8 @@ import Link from "next/link"
 import Layout from "@/components/layout/Layout"
 import Image from "next/image";
 
+
+
 export const metadata = {
     title: "What to expect at Physiotherapy Etobicoke - Rapha Physiotherapy etobicoke",
     description:
@@ -24,6 +26,7 @@ export default function About() {
                                         <div className="image-shape">
                                             <div className="shape-1 rotate-me">
                                                 <Image
+                                                    // loader={exportableLoader}
                                                     src="/assets/images/shape/shape-8.webp"
                                                     alt="Physiotherapy at Rapharehab"
                                                     fill
@@ -33,6 +36,7 @@ export default function About() {
 
                                             <div className="shape-2">
                                                 <Image
+                                                    // loader={exportableLoader}
                                                     src="/assets/images/shape/shape-33.png"
                                                     alt="Physiotherapy at Rapharehab"
                                                     fill
@@ -51,6 +55,7 @@ export default function About() {
 
                                             <div className="shape-4">
                                                 <Image
+                                                    // loader={exportableLoader}
                                                     src="/assets/images/shape/shape-34.png"
                                                     alt="Physiotherapy at Rapharehab"
                                                     fill
@@ -60,6 +65,7 @@ export default function About() {
 
                                             <div className="shape-5">
                                                 <Image
+                                                    // loader={exportableLoader}
                                                     src="/assets/images/shape/shape-11.webp"
                                                     alt="Physiotherapy at Rapharehab"
                                                     fill

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

@@ -1,16 +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' },
@@ -18,6 +27,7 @@ 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">
@@ -39,14 +49,7 @@ export default function Team() {
                             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>
@@ -59,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>
@@ -78,7 +75,6 @@ export default function Team() {
                 </div>
             </section>
 
-
             <section className="testimonial-style-two pb_90 p_relative">
                 <div className="pattern-layer">
                     <Image
@@ -90,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">
@@ -103,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>
@@ -124,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">
@@ -140,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>
@@ -182,24 +167,21 @@ export default function Team() {
                             />
                         </div>
 
-                        {/* <div className="video-btn">
-          <a onClick={() => setOpen(true)}><i className="fas fa-play"></i>
-                            <span className="border-animation border-1"></span>
-                            <span className="border-animation border-2"></span>
-                            <span className="border-animation border-3"></span>
-          </a>
-          </div> */}
-                        <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>
+                        <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 {email ? (
+                                <Link href={`mailto:${email}`} style={{color: "inherit"}}>{email}</Link>
+                            ) : (
+                                <span>Loading...</span>
+                            )} to book a consultation.
+                        </p>
                         <div className="btn-box mt-4">
-                            <Link href="/contact" className="theme-btn btn-one-blue">
+                            <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/AutoPopup.js

@@ -4,6 +4,15 @@ import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
 
 export default function AutoPopup() {
+
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
+
   const [show, setShow] = useState(false);
   const [formData, setFormData] = useState({
     username: "",
@@ -49,7 +58,7 @@ export default function AutoPopup() {
     const emailData = {
       ...formData,
       message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
-      to: "bloor@rapharehab.ca",
+      to: email,
       senderName: "Rapha Rehab Auto Popup",
       recaptchaToken: captchaToken,
     };

components/ContactFloat.js

@@ -1,12 +1,19 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
 
 export default function ContactFloat() {
   const [open, setOpen] = useState(false);
   const [showChat, setShowChat] = useState(false);
-  const [showSocial, setShowSocial] = useState(false); 
+  const [showSocial, setShowSocial] = useState(false);
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    const user = "bloor";
+    const domain = "rapharehab.ca";
+    setEmail(`${user}@${domain}`);
+  }, []);
 
   /** Contact actions */
   const extraIcons = [
@@ -14,7 +21,7 @@ export default function ContactFloat() {
       href: "tel:647-722-3434",
       src: "/assets/images/icons/call.webp",
       label: "Call",
-      newTab: true, 
+      newTab: true,
     },
     {
       action: () => setShowChat(true),
@@ -67,7 +74,7 @@ export default function ContactFloat() {
               bottom: "11px",
               background: "rgb(255, 255, 255)",
               borderRadius: "30px 30px 35px 35px",
-              boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.2)",
+                boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.2)",
               padding: "10px",
               display: "flex",
               flexDirection: "column",
@@ -79,7 +86,7 @@ export default function ContactFloat() {
           >
             {extraIcons.map((icon, i) =>
               icon.href ? (
-                <a
+             <a
                   key={i}
                   href={icon.href}
                   aria-label={icon.label}
@@ -103,7 +110,7 @@ export default function ContactFloat() {
                   />
                 </a>
               ) : (
-                <button
+               <button
                   key={i}
                   onClick={icon.action}
                   aria-label={icon.label}
@@ -130,7 +137,7 @@ export default function ContactFloat() {
           </div>
         )}
 
-        <button
+         <button
           type="button"
           aria-label={open ? "Close" : "Contact Us"}
           className="contact-icon-outer toggle-btn"
@@ -157,7 +164,7 @@ export default function ContactFloat() {
             zIndex: 9999,
           }}
         >
-          <img
+             <img
             src={
               open
                 ? "/assets/images/cancel.png"
@@ -166,11 +173,11 @@ export default function ContactFloat() {
             alt="Contact"
             style={{ width: "28px", height: "28px" }}
           />
-        </button>
+          </button>
       </div>
 
       {showSocial && (
-        <div
+         <div
           style={{
             position: "fixed",
             bottom: "11%",
@@ -185,7 +192,7 @@ export default function ContactFloat() {
             borderRadius: "50px",
           }}
         >
-          {socialIcons.map((icon, i) => (
+           {socialIcons.map((icon, i) => (
             <a
               key={i}
               href={icon.href}
@@ -204,14 +211,14 @@ export default function ContactFloat() {
                 fontSize: "22px",
                 textDecoration: "none",
               }}
-            >
+              >
               <i className={icon.iconClass}></i>
             </a>
           ))}
         </div>
       )}
 
-      {showChat && <ChatForm onClose={() => setShowChat(false)} />}
+      {showChat && <ChatForm onClose={() => setShowChat(false)} email={email} />}
     </>
   );
 }
@@ -234,7 +241,7 @@ function ChatForm({ onClose }) {
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleCaptchaChange = (token) => {
+    const handleCaptchaChange = (token) => {
     // console.log("ReCAPTCHA token:", token); 
     setCaptchaToken(token);
   };
@@ -242,36 +249,36 @@ function ChatForm({ onClose }) {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    // console.log("Form submitted:", formData);
+        // console.log("Form submitted:", formData);
 
     const errors = {};
     if (!formData.username.trim()) errors.username = "First Name is required.";
-    // if (!formData.lname.trim()) errors.lname = "Last Name is required.";
+        // if (!formData.lname.trim()) errors.lname = "Last 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.";
+        // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
 
     setFormErrors(errors);
-    if (Object.keys(errors).length > 0) {
+       if (Object.keys(errors).length > 0) {
       // console.log("Form validation errors:", errors);
       return;
     }
 
     const emailData = {
-      name: formData.username,          
+      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",
+      subject: formData.service,
+      message: `Service: ${formData.service}<br /><br/>Message: ${formData.message}`,
+      to: email,
       senderName: "Rapha Rehab Contact Page",
       recaptchaToken: captchaToken,
     };
 
     try {
-      const res = await axios.post(
+       const res = await axios.post(
         "https://mailserver.metatronnest.com/send",
         emailData,
         { headers: { "Content-Type": "application/json" } }
@@ -282,11 +289,11 @@ function ChatForm({ onClose }) {
         type: "success",
         message: res?.data?.message || "Message sent successfully!",
       });
-
+      
       setFormData({ username: "", email: "", phone: "", service: "", message: "" });
       setCaptchaToken(null);
       setFormErrors({});
-    } catch (error) {
+       } catch (error) {
       setAlert({
         show: true,
         type: "danger",
@@ -312,8 +319,8 @@ function ChatForm({ onClose }) {
         padding: "20px"
       }}
     >
-      <div className="p-3 border-bottom d-flex justify-content-between align-items-center">
-        <h5 className="mb-3" style={{ margin: 0, color: "#bc0000" }}>Chat with Us</h5>
+      <div className="p-3 pb-0 border-bottom d-flex justify-content-between align-items-center">
+        <h4 style={{ margin: 0, color: "#bc0000" }}>Chat with Us</h4>
         <button onClick={onClose} className="btn-close"></button>
       </div>
 
@@ -329,11 +336,11 @@ function ChatForm({ onClose }) {
             placeholder="Name"
             value={formData.username}
             onChange={handleChange}
-            className="form-control mb-2"
+            className="form-control mt-2 chat-form"
           />
           {formErrors.username && <small className="text-danger">{formErrors.username}</small>}
 
-          {/* <input
+           {/* <input
             type="text"
             name="lname"
             placeholder="Last Name"
@@ -343,13 +350,13 @@ function ChatForm({ onClose }) {
           />
           {formErrors.lname && <small className="text-danger">{formErrors.lname}</small>} */}
 
-          <input
+      <input
             type="text"
             name="phone"
             placeholder="Phone"
             value={formData.phone}
             onChange={handleChange}
-            className="form-control mb-2"
+            className="form-control mt-3 chat-form"
           />
           {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
 
@@ -359,7 +366,7 @@ function ChatForm({ onClose }) {
             placeholder="Your Email"
             value={formData.email}
             onChange={handleChange}
-            className="form-control mb-2"
+            className="form-control mt-3 chat-form"
           />
           {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
 
@@ -367,7 +374,7 @@ function ChatForm({ onClose }) {
             name="service"
             value={formData.service}
             onChange={handleChange}
-            className="form-control mb-2"
+            className="form-control mt-3 chat-form"
           >
             <option value="">Select Service</option>
             <option value="Physio">Physio</option>
@@ -379,16 +386,16 @@ function ChatForm({ onClose }) {
           </select>
           {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
 
-          <textarea
+         <textarea
             name="message"
             placeholder="Message"
             value={formData.message}
             onChange={handleChange}
-            className="form-control mb-2"
+            className="form-control mt-3"
           ></textarea>
           {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
 
-          <div className="mb-2">
+          <div className="mt-3">
             <ReCAPTCHA
               sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
               onChange={handleCaptchaChange}
@@ -396,7 +403,7 @@ function ChatForm({ onClose }) {
             {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
           </div>
 
-          <button
+         <button
             className="btn w-100"
             type="submit"
             style={{

components/FaqSection.js

@@ -24,7 +24,7 @@ export default function FaqSection({ faqData }) {
                 onClick={() => handleToggle(index)}
               >
                 <div className="icon-box"><i className="icon-34"></i></div>
-                <h5>{item.question}</h5>
+                <h4>{item.question}</h4>
               </div>
               <div className={isActive === index ? "acc-content current" : "acc-content"}>
                 <div className="content">

components/SocialFloat.js

@@ -54,6 +54,7 @@ export default function SocialFloat() {
                 color: "#fff", // White icon color
                 fontSize: "22px",
                 textDecoration: "none",
+                
               }}
             >
               <i className={icon.iconClass}></i>

components/elements/BackToTop.js

@@ -5,7 +5,7 @@ export default function BackToTop({ scroll }) {
     return (
         <>
             {scroll && (
-                <Link className="scroll-to-top scroll-to-target d-block" href="#top">
+                <Link className="scroll-to-top scroll-to-target d-block" href="#top" aria-label="Scroll top">
                     <i className="fas fa-angle-up"></i>
                 </Link> 
             )}

components/elements/DataBg.js

@@ -1,16 +1,16 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
 export default function DataBg() {
-    useEffect(() => {
-        const elements = document.querySelectorAll('[data-bg]')
+  useEffect(() => {
+    const elements = document.querySelectorAll("[data-bg]");
 
-        elements.forEach((element) => {
-            element.style.backgroundImage = `url(${element.getAttribute('data-bg')})`
-        })
-    }, [])
-    return (
-        <>
+    requestAnimationFrame(() => {
+      elements.forEach((element) => {
+        const bg = element.getAttribute("data-bg");
+        if (bg) element.style.backgroundImage = `url(${bg})`;
+      });
+    });
+  }, []);
 
-        </>
-    )
-}
+  return null;
+}

components/elements/PortfolioFilter1.js

@@ -60,7 +60,7 @@ export default function PortfolioFilter1() {
                         <div className="inner-box">
                         <figure className="image-box"><img src="assets/images/gallery/gallery-1.jpg" alt="" /></figure>
                             <div className="content-box">
-                                        <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery">
+                                        <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery" aria-label="Social Icons">
                                             <i className="icon-4"></i></a>
                                             </div>
                                        
@@ -74,7 +74,7 @@ export default function PortfolioFilter1() {
                         <div className="inner-box">
                         <figure className="image-box"><img src="assets/images/gallery/gallery-2.jpg" alt="" /></figure>
                             <div className="content-box">
-                            <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery">
+                            <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery" aria-label="Social Icons">
                                             <i className="icon-4"></i></a>
                                             </div>
                                         
@@ -88,7 +88,7 @@ export default function PortfolioFilter1() {
                         <div className="inner-box">
                         <figure className="image-box"><img src="assets/images/gallery/gallery-3.jpg" alt="" /></figure>
                             <div className="content-box">
-                            <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery">
+                            <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery" aria-label="Social Icons">
                                             <i className="icon-4"></i></a>
                                             </div>
                                        
@@ -104,7 +104,7 @@ export default function PortfolioFilter1() {
                         <figure className="image-box"><img src="assets/images/gallery/gallery-4.jpg" alt="" /></figure>
                         <div className="content-box">
                         <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery">
-                                            <i className="icon-4"></i></a>
+                                            <i className="icon-4" aria-label="Social Icons"></i></a>
                                             </div>
                                     
                             </div>
@@ -118,7 +118,7 @@ export default function PortfolioFilter1() {
                         <div className="inner-box">
                             <figure className="image-box"><img src="assets/images/gallery/gallery-5.jpg" alt="" /></figure>
                             <div className="content-box">
-                            <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery">
+                            <div className="link-box"><a href="project-details" className="lightbox-image" data-fancybox="gallery" aria-label="Social Icons">
                                             <i className="icon-4"></i></a>
                                             </div>
                                        

components/elements/Preloader.js

@@ -16,7 +16,7 @@ export default function Preloader() {
   if (!loading) return null; 
 
   return (
-    <div className="loader-wrap">
+    <div className="loader-wrap  d-flex justify-content-center align-items-center" style={{height:"100vh"}}>
       <div className="preloader">
         <img src="/assets/images/logo.png" alt="rapharehab" className="preloader-icon" />
         {/* <div className="preloader-close">Preloader Close</div> */}

components/elements/ServiceTabs1.js

@@ -12,21 +12,21 @@ export default function ServiceTabs1() {
                 <div className="col-md-6">
                     <ul className="nav nav-tabs tab-btn-style-one mr-md-4" role="tablist">
                         <li className="nav-item" onClick={() => handleOnClick(1)}>
-                            <a className={activeIndex == 1 ? "nav-link active" : "nav-link"}>01. Workflow &amp; Process
+                            <a className={activeIndex == 1 ? "nav-link active" : "nav-link"} aria-label="Workflow process">01. Workflow &amp; Process
                             </a>
                         </li>
                         <li className="nav-item" onClick={() => handleOnClick(2)}>
-                            <a className={activeIndex == 2 ? "nav-link active" : "nav-link"}>
+                            <a className={activeIndex == 2 ? "nav-link active" : "nav-link"} aria-label="Research analysis">
                                 02. Research analysis
                             </a>
                         </li>
                         <li className="nav-item" onClick={() => handleOnClick(3)}>
-                            <a className={activeIndex == 3 ? "nav-link active" : "nav-link"}>
+                            <a className={activeIndex == 3 ? "nav-link active" : "nav-link"} aria-label="Financial statement">
                                 03. Financial statement
                             </a>
                         </li>
                         <li className="nav-item" onClick={() => handleOnClick(4)}>
-                            <a className={activeIndex == 4 ? "nav-link active" : "nav-link"}>
+                            <a className={activeIndex == 4 ? "nav-link active" : "nav-link"} aria-label="Risk assuarance">
                                 04. Risk assuarance
                             </a>
                         </li>

components/elements/VideoPopup.js

@@ -10,7 +10,7 @@ export default function VideoPopup({ style, text }) {
             {/* <a onClick={() => setOpen(true)} className="lightbox-image"><i className="icon-play" /></a> */}
             {/* <span className="icon-10" onClick={() => setOpen(true)} /> */}
             {!style &&
-                <a onClick={() => setOpen(true)} className="overlay-link lightbox-image video-fancybox ripple"><span className="icon-10" />
+                <a onClick={() => setOpen(true)} className="overlay-link lightbox-image video-fancybox ripple" aria-label="Light box image"><span className="icon-10" />
                 </a>
 
             }
@@ -18,17 +18,17 @@ export default function VideoPopup({ style, text }) {
 
             {style === 1 &&
                 <div className="video-btn">
-                    <a onClick={() => setOpen(true)} className="overlay-link lightbox-image video-fancybox ripple"><span className="icon-10" /> </a>
+                    <a onClick={() => setOpen(true)} className="overlay-link lightbox-image video-fancybox ripple" aria-label="Light box image "><span className="icon-10" /> </a>
                 </div>
             }
             {style === 2 &&
                 <div className="video-btn">
-                    <a onClick={() => setOpen(true)} className="overlay-link lightbox-image video-fancybox ripple"><span className="icon-10" /></a><h6>{text ? text : "Latest Program Video"}</h6>
+                    <a onClick={() => setOpen(true)} className="overlay-link lightbox-image video-fancybox ripple" aria-label="light box image"><span className="icon-10" /></a><h6>{text ? text : "Latest Program Video"}</h6>
                 </div>
             }
             {style === 3 &&
                 <div className="video-btn">
-                    <a onClick={() => setOpen(true)} className="lightbox-image">
+                    <a onClick={() => setOpen(true)} className="lightbox-image" aria-label="light box image">
                         <i className="customicon-play-button" />
                         <span className="border-animation border-1" />
                         <span className="border-animation border-2" />
@@ -38,12 +38,12 @@ export default function VideoPopup({ style, text }) {
             }
             {style === 4 &&
                 <div className="video-btn">
-                    <a onClick={() => setOpen(true)} className="lightbox-image">
+                    <a onClick={() => setOpen(true)} className="lightbox-image" aria-label="Light box image">
                         <img src="/assets/images-4/icons/video-btn-1.png" alt="" /></a>
                 </div>
             }
             {style === 5 &&
-                <a onClick={() => setOpen(true)} className="video-btn overlay-link lightbox-image video-fancybox ripple"><span className="fas fa-play" /></a>
+                <a onClick={() => setOpen(true)} className="video-btn overlay-link lightbox-image video-fancybox ripple" aria-label="Light box image"><span className="fas fa-play" /></a>
             }
 
 

components/layout/Breadcrumb.js

@@ -21,7 +21,7 @@ export default function Breadcrumb({ breadcrumbTitle, bannerImage }) {
                     <div className="content-box">
                         <h1>{breadcrumbTitle}</h1>
                         <ul className="bread-crumb clearfix">
-                            <li><Link href="/">Home</Link></li>
+                            <li><Link href="/" aria-label="Home">Home</Link></li>
                             <li>{breadcrumbTitle}</li>
                         </ul>
                     </div>

components/layout/Layout.js

@@ -9,13 +9,12 @@ const WOW = dynamic(() => import('wowjs/dist/wow'));
 import BackToTop from '../elements/BackToTop';
 import DataBg from "../elements/DataBg";
 import Breadcrumb from './Breadcrumb';
-import Sidebar from "./Sidebar";
+// import Sidebar from "./Sidebar";
 import Footer1 from './footer/Footer1';
 import Footer2 from './footer/Footer2';
 import Header1 from "./header/Header1";
-import Header2 from './header/Header2';
-import Header3 from "./header/Header3";
-import Header4 from "./header/Header4";
+import Header2 from "./header/Header2";
+
 import ContactFloat from "../ContactFloat";
 import SocialFloat from "../SocialFloat";
 
@@ -52,10 +51,8 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
             <div className={`boxed_wrapper ltr ${wrapperCls ? wrapperCls : ""}`} id="#top">
                 {(headerStyle === 1 || !headerStyle) && <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
                 {headerStyle === 2 && <Header2 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
-                {headerStyle === 3 && <Header3 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
-                {headerStyle === 4 && <Header4 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
 
-                <Sidebar isSidebar={isSidebar} handleSidebar={handleSidebar} />
+                {/* <Sidebar isSidebar={isSidebar} handleSidebar={handleSidebar} /> */}
 
                 {breadcrumbTitle && (
                     <Breadcrumb breadcrumbTitle={breadcrumbTitle} bannerImage={bannerImage} />
@@ -66,8 +63,8 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
                 {(footerStyle === 1 || !footerStyle) && <Footer1 />}
                 {footerStyle === 2 && <Footer2 />}
             </div>
-             <ContactFloat />
-             {/* <SocialFloat/> */}
+            {/* <ContactFloat /> */}
+            {/* <SocialFloat/> */}
             <BackToTop scroll={scroll} />
         </>
     );

components/layout/Menu.js

@@ -16,7 +16,7 @@ export default function Menu() {
             </ul> */}
 
             <ul className="navigation new-nav clearfix">
-                <li className="dropdown"><Link href="/">Home</Link>
+                <li className="dropdown"><Link href="/" aria-label="Home page">Home</Link>
                     {/* <ul>
                         <li><Link href="/">Home Page One</Link></li>
                         <li><Link href="/index-2">Home Page Two</Link></li>
@@ -25,24 +25,24 @@ export default function Menu() {
                     </ul> */}
                 </li>
 
-                <li className="dropdown menu-item-has-children"><Link href="/about-us">About Us</Link>
+                <li className="dropdown menu-item-has-children"><Link href="/about-us" aria-label="About Us">About Us</Link>
                     <ul>
-                        <li><Link href="/our-team-physiotherapy-etobicoke">Our Team</Link></li>
-                        <li><Link href="/ourapproach-physiotherapy-etobicoke">Our Approach</Link></li>
-                        <li><Link href="/gallery-physiotherapy-etobicoke">Gallery</Link></li>
-                        <li><Link href="/covid-19-updates">Covid-19-Updates</Link></li>
+                        <li><Link href="/our-team-physiotherapy-etobicoke" aria-label="Our Team">Our Team</Link></li>
+                        <li><Link href="/ourapproach-physiotherapy-etobicoke" aria-label="Our Approach">Our Approach</Link></li>
+                        <li><Link href="/gallery-physiotherapy-etobicoke" aria-label="Gallery">Gallery</Link></li>
+                        <li><Link href="/covid-19-updates" aria-label="Covid 19 Updates">Covid-19-Updates</Link></li>
                     </ul>
                 </li>
 
                 <li className="dropdown menu-item-has-children relative group">
-                    <Link href="/etobicoke-treatment-service">Services</Link>
+                    <Link href="/etobicoke-treatment-service" aria-label="Services">Services</Link>
                     {/* Dropdown */}
                     <ul className="absolute left-0 hidden group-hover:grid p-4
                  grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
                         style={{ columnCount: 4, width: "100%", left: "0px" }}>
                         {servicesList.map((item) => (
                             <li key={item.id} className="break-inside-avoid">
-                                <Link href={`/etobicoke-treatment-service/${item.slug}`}>
+                                <Link href={`/etobicoke-treatment-service/${item.slug}`} aria-label="Etobicoke Treatment Service">
                                     {item.shortTitle}
                                 </Link>
                             </li>
@@ -78,23 +78,34 @@ export default function Menu() {
                     </ul>
                 </li> */}
 
-                <li className="dropdown menu-item-has-children"><Link href="/area-of-injury">Area of Injury</Link>
+                <li className="dropdown menu-item-has-children"><Link href="/area-of-injury" aria-label="Area of Injury">Area of Injury</Link>
                     <ul>
                         {areaOfInjuryData.map(item => (
                             <li key={item.id}>
+                                <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of Injury Title">
+                                    {item.title}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                      {/* <ul className="absolute left-0 hidden group-hover:grid p-4
+                 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+                        style={{ columnCount: 2, width: "50%", left: "480px" }}>
+                        {areaOfInjuryData.map((item) => (
+                            <li key={item.id} className="break-inside-avoid">
                                 <Link href={`/area-of-injury/${item.slug}`}>
                                     {item.title}
                                 </Link>
                             </li>
                         ))}
-                    </ul>
+                    </ul> */}
                 </li>
 
-                <li className="dropdown menu-item-has-children"><Link href="/rehabilitation">Rehabilitation</Link>
+                <li className="dropdown menu-item-has-children"><Link href="/rehabilitation" aria-label="Rehabilitation">Rehabilitation</Link>
                     <ul>
                         {Rehabilitation.map(item => (
                             <li key={item.id}>
-                                <Link href={`/rehabilitation/${item.slug}`}>
+                                <Link href={`/rehabilitation/${item.slug}`} aria-label="Rehabilitation Title">
                                     {item.title}
                                 </Link>
                             </li>
@@ -102,11 +113,11 @@ export default function Menu() {
                     </ul>
                 </li>
 
-                <li className="dropdown menu-item-has-children"><Link href="/accident">Accident</Link>
+                <li className="dropdown menu-item-has-children"><Link href="/accident" aria-label="Accident">Accident</Link>
                     <ul>
                         {Accident.map(item => (
                             <li key={item.id}>
-                                <Link href={`/accident/${item.slug}`}>
+                                <Link href={`/accident/${item.slug}`} aria-label="Accident Title">
                                     {item.title}
                                 </Link>
                             </li>
@@ -114,10 +125,10 @@ export default function Menu() {
                     </ul>
                 </li>
 
-                <li><Link href="/blog">Blog</Link></li>
+                <li><Link href="/blog" aria-label="Blog">Blog</Link></li>
 
                 {/* Contact */}
-                <li><Link href="/contact">Contact</Link></li>
+                <li><Link href="/contact" aria-label="Contact">Contact</Link></li>
             </ul>
         </>
     )

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";
@@ -12,6 +12,14 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
     key: "",
     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) {
@@ -51,19 +59,19 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
           {/* Header row (Logo left, Social icons right) */}
           <div className="nav-header">
             <div className="nav-logo">
-              <Link href="/" onClick={closeMenu}>
+              <Link href="/" onClick={closeMenu} aria-label="Logo2 image">
                 <img src="/assets/images/logo-2.png" alt="Logo" />
               </Link>
             </div>
             <div className="nav-social">
               <ul className="clearfix">
                 <li>
-                  <Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
+                  <Link href="https://www.instagram.com/elrapharehab/" aria-label="Instagram Link" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
                     <span className="fab fa-instagram"></span>
                   </Link>
                 </li>
                 <li>
-                  <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
+                  <Link href="https://www.facebook.com/ELRaphaRehabCenter/" aria-label="Facebook Link" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
                     <span className="fab fa-facebook-square"></span>
                   </Link>
                 </li>
@@ -77,17 +85,17 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
               <ul className="navigation clearfix">
 
                 <li>
-                  <Link href="/" onClick={closeMenu}>Home</Link>
+                  <Link href="/" onClick={closeMenu} aria-label="Home">Home</Link>
                 </li>
 
                 {/* About Us */}
                 <li className={isActive.key == 1 ? "dropdown current" : "dropdown"}>
-                  <Link href="/about-us" onClick={closeMenu}>About Us</Link>
+                  <Link href="/about-us" onClick={closeMenu} aria-label="About Us">About Us</Link>
                   <ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
-                    <li><Link href="/our-team-physiotherapy-etobicoke" onClick={closeMenu}>Our Team</Link></li>
-                    <li><Link href="/ourapproach-physiotherapy-etobicoke" onClick={closeMenu}>Our Approach</Link></li>
-                    <li><Link href="/gallery-physiotherapy-etobicoke" onClick={closeMenu}>Gallery</Link></li>
-                    <li><Link href="/covid-19-updates" onClick={closeMenu}>Covid-19 Updates</Link></li>
+                    <li><Link href="/our-team-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Out Team">Our Team</Link></li>
+                    <li><Link href="/ourapproach-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Our approach">Our Approach</Link></li>
+                    <li><Link href="/gallery-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Gallery">Gallery</Link></li>
+                    <li><Link href="/covid-19-updates" onClick={closeMenu} aria-label="Covid-19 Updates">Covid-19 Updates</Link></li>
                   </ul>
                   <div
                     className={isActive.key == 1 ? "dropdown-btn open" : "dropdown-btn"}
@@ -99,11 +107,11 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
 
                 {/* Services */}
                 <li className={isActive.key == 2 ? "dropdown current" : "dropdown"}>
-                  <Link href="/etobicoke-treatment-service" onClick={closeMenu}>Services</Link>
+                  <Link href="/etobicoke-treatment-service" onClick={closeMenu} aria-label="Services">Services</Link>
                   <ul style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
                     {servicesList.map((item) => (
                       <li key={item.id}>
-                        <Link href={`/etobicoke-treatment-service/${item.slug}`} onClick={closeMenu}>
+                        <Link href={`/etobicoke-treatment-service/${item.slug}`} onClick={closeMenu} aria-label="Etobicoke Treatment Service">
                           {item.shortTitle}
                         </Link>
                       </li>
@@ -119,11 +127,11 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
 
                 {/* Area of Injury */}
                 <li className={isActive.key == 3 ? "dropdown current" : "dropdown"}>
-                  <Link href="/area-of-injury" onClick={closeMenu}>Area of Injury</Link>
+                  <Link href="/area-of-injury" onClick={closeMenu} aria-label="Area of injury">Area of Injury</Link>
                   <ul style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
                     {areaOfInjuryData.map((item) => (
                       <li key={item.id}>
-                        <Link href={`/area-of-injury/${item.slug}`} onClick={closeMenu}>
+                        <Link href={`/area-of-injury/${item.slug}`} onClick={closeMenu} aria-label="Area of injury title">
                           {item.title}
                         </Link>
                       </li>
@@ -139,11 +147,11 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
 
                 {/* Rehabilitation */}
                 <li className={isActive.key == 4 ? "dropdown current" : "dropdown"}>
-                  <Link href="/rehabilitation" onClick={closeMenu}>Rehabilitation</Link>
+                  <Link href="/rehabilitation" onClick={closeMenu} aria-label="Rehabilitation">Rehabilitation</Link>
                   <ul style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
                     {Rehabilitation.map((item) => (
                       <li key={item.id}>
-                        <Link href={`/rehabilitation/${item.slug}`} onClick={closeMenu}>
+                        <Link href={`/rehabilitation/${item.slug}`} onClick={closeMenu} aria-label="Rehabilitation title">
                           {item.title}
                         </Link>
                       </li>
@@ -159,11 +167,11 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
 
                 {/* Accident */}
                 <li className={isActive.key == 5 ? "dropdown current" : "dropdown"}>
-                  <Link href="/accident" onClick={closeMenu}>Accident</Link>
+                  <Link href="/accident" onClick={closeMenu} aria-label="Accident">Accident</Link>
                   <ul style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
                     {Accident.map((item) => (
                       <li key={item.id}>
-                        <Link href={`/accident/${item.slug}`} onClick={closeMenu}>
+                        <Link href={`/accident/${item.slug}`} onClick={closeMenu} aria-label="Accident title">
                           {item.title}
                         </Link>
                       </li>
@@ -178,12 +186,12 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
                 </li>
 
                 {/* Other Links */}
-                <li><Link href="/contact" onClick={closeMenu}>Contact</Link></li>
-                <li><Link href="/blog" onClick={closeMenu}>Blog</Link></li>
-                <li><Link href="/why-rapha-physiotherapy-etobicoke" onClick={closeMenu}>Why Us</Link></li>
-                <li><Link href="/faq-physiotherapy-etobicoke" onClick={closeMenu}>Faq</Link></li>
-                <li><Link href="/what-to-expect" onClick={closeMenu}>What To Expect</Link></li>
-                <li><Link href="/payment-insurance" onClick={closeMenu}>Payment And Insurance</Link></li>
+                <li><Link href="/contact" onClick={closeMenu} aria-label="Contact">Contact</Link></li>
+                <li><Link href="/blog" onClick={closeMenu} aria-label="Blog">Blog</Link></li>
+                <li><Link href="/why-rapha-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Why Us">Why Us</Link></li>
+                <li><Link href="/faq-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Faq">Faq</Link></li>
+                <li><Link href="/what-to-expect" onClick={closeMenu} aria-label="What to expect">What To Expect</Link></li>
+                <li><Link href="/payment-insurance" onClick={closeMenu} aria-label="Payment and insurance">Payment And Insurance</Link></li>
                 {/* <li><Link href="/refugee-physiotherapy" onClick={closeMenu}>Refugee Physiotherapy</Link></li> */}
               </ul>
             </div>
@@ -195,14 +203,18 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
             <ul>
               <li>5 – 4335 Bloor Street West Etobicoke, M9C 2A5</li>
               <li>
-                <Link href="tel:+647-722-3434, +416-622-2873" onClick={closeMenu}>
+                <Link href="tel:+647-722-3434, +416-622-2873" onClick={closeMenu} aria-label="+647-722-3434">
                   +647-722-3434, +416-622-2873
                 </Link>
               </li>
               <li>
-                <Link href="mailto:bloor@rapharehab.ca" onClick={closeMenu}>
-                  bloor@rapharehab.ca
-                </Link>
+                {email ? (
+                  <Link href={`mailto:${email}`} onClick={closeMenu} aria-label={email}>
+                    {email}
+                  </Link>
+                ) : (
+                  <span>Loading...</span>
+                )}
               </li>
             </ul>
           </div>
@@ -217,4 +229,4 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
       />
     </>
   );
-}
+}

components/layout/MobileMenu2.js

@@ -1,85 +0,0 @@
-'use client'
-import Link from "next/link"
-import { useState } from "react"
-export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar }) {
-    const [isActive, setIsActive] = useState({
-        status: false,
-        key: "",
-    })
-
-    const handleToggle = (key) => {
-        if (isActive.key === key) {
-            setIsActive({
-                status: false,
-            })
-        } else {
-            setIsActive({
-                status: true,
-                key,
-            })
-        }
-    }
-    return (
-        <>
-            <div className="mobile-menu">
-                <div className="menu-backdrop" onClick={handleMobileMenu} />
-                <div className="close-btn" onClick={handleMobileMenu}>
-                    <i className="fas fa-times"></i>
-                </div>
-                <nav className="menu-box">
-                    <div className="nav-logo">
-                        <Link href="/">
-                            <img src="/assets/images/logo.png" alt="rapharehab" />
-                        </Link>
-                    </div>
-
-                    {/* menu-outer */}
-                    <div className="menu-outer">
-                        <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
-                            <ul className="navigation clearfix">
-                                <li className={isActive.key === 1 ? "dropdown current" : "dropdown"}>
-                                    <Link href="/" onClick={handleMobileMenu}>Home</Link>
-                                    <ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
-                                        <li><Link href="/"onClick={handleMobileMenu}>Home Page One</Link></li>
-                                        <li><Link href="/index-2"onClick={handleMobileMenu}>Home Page Two</Link></li>
-                                        <li><Link href="/index-3"onClick={handleMobileMenu}>Home Page Three</Link></li>
-                                        <li><Link href="/index-onepage"onClick={handleMobileMenu}>OnePage Home</Link></li>
-                                    </ul>
-                                    <div className={isActive.key === 1 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(1)}>
-                                        <span className="fa fa-angle-right" />
-                                    </div>
-                                </li>
-                                <li><Link href="#about"onClick={handleMobileMenu}>About</Link></li>
-                                <li><Link href="#service"onClick={handleMobileMenu}>Service</Link></li>
-                                <li><Link href="#team"onClick={handleMobileMenu}>Team</Link></li>
-                                <li><Link href="#news"onClick={handleMobileMenu}>News</Link></li>
-                                <li><Link href="#footer"onClick={handleMobileMenu}>Footer</Link></li>
-                            </ul>
-                        </div>
-                    </div>
-                    {/* menu-outer end */}
-                    <div className="contact-info">
-                        <h4>Contact Info</h4>
-                        <ul>
-                            <li>Chicago 12, Melbourne City, USA</li>
-                            <li><Link href="tel:+8801682648101">+88 01682648101</Link></li>
-                            <li><Link href="mailto:info@example.com">info@example.com</Link></li>
-                        </ul>
-                    </div>
-
-                    {/* Social Links */}
-                    <div className="social-links">
-                        <ul className="clearfix">
-                            <li><Link href="/"><span className="fab fa-twitter"></span></Link></li>
-                            <li><Link href="/"><span className="fab fa-facebook-square"></span></Link></li>
-                            <li><Link href="/"><span className="fab fa-pinterest-p"></span></Link></li>
-                            <li><Link href="/"><span className="fab fa-instagram"></span></Link></li>
-                            <li><Link href="/"><span className="fab fa-youtube"></span></Link></li>
-                        </ul>
-                    </div>
-                </nav>
-            </div>{/* End Mobile Menu */}
-            <div className="nav-overlay" style={{ display: `${isSidebar ? "block" : "none"}` }} onClick={handleSidebar} />
-        </>
-    );
-}

components/layout/OnepageMenu.js

@@ -13,19 +13,19 @@ export default function Menu() {
             </ul> */}
 
             <ul className="navigation clearfix">
-                <li className=" dropdown"><Link href="/">Home</Link>
+                <li className=" dropdown"><Link href="/" aria-label="Home">Home</Link>
                     <ul>
-                        <li><Link href="/">Home Page One</Link></li>
-                        <li><Link href="/index-2">Home Page Two</Link></li>
-                        <li><Link href="/index-3">Home Page Three</Link></li>
-                        <li><Link href="/onepage">OnePage Home</Link></li>
+                        <li><Link href="/" aria-label="Home Page one ">Home Page One</Link></li>
+                        <li><Link href="/index-2" aria-label="Home page two">Home Page Two</Link></li>
+                        <li><Link href="/index-3" aria-label="Home page three">Home Page Three</Link></li>
+                        <li><Link href="/onepage" aria-label="Onepage home">OnePage Home</Link></li>
                     </ul>
                 </li>
-                <li><Link href="#about">About</Link></li>
-                <li><Link href="#service">Service</Link></li>
-                <li><Link href="#team">Team</Link></li>
-                <li><Link href="#news">News</Link></li>
-                <li><Link href="#footer">Footer</Link></li> 
+                <li><Link href="#about" aria-label="About">About</Link></li>
+                <li><Link href="#service" aria-label="Service">Service</Link></li>
+                <li><Link href="#team" aria-label="Team">Team</Link></li>
+                <li><Link href="#news" aria-label="News">News</Link></li>
+                <li><Link href="#footer" aria-label="Footer">Footer</Link></li> 
             </ul>
 
         </>

components/layout/Sidebar.js

@@ -20,27 +20,27 @@ export default function Sidebar({ isSidebar, handleSidebar }) {
                         <div className="sidebar-info-contents">
                             <div className="content-inner">
                                 <div className="logo">
-                                    <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
+                                    <Link href="/" aria-label="Logo"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
                                 </div>
                                 <div className="content-box">
                                     <h4>About Us</h4>
                                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
                                     <p>Research oriented solutions for Data Science and Machine Learning business needs.</p>
-                                    <Link href="#" className="theme-btn btn-one"><span>About Us</span></Link>
+                                    <Link href="#" className="theme-btn btn-one" aria-label="About Us"><span>About Us</span></Link>
                                 </div>
                                 <div className="contact-info">
                                     <h4>Contact Info</h4>
                                     <ul>
                                         <li>Chicago 12, Melborne City, USA</li>
-                                        <li><Link href="tel:+8801682648101">+88 01682648101</Link></li>
-                                        <li><Link href="mailto:info@example.com">info@example.com</Link></li>
+                                        <li><Link href="tel:+8801682648101" aria-label="+88 01682648101">+88 01682648101</Link></li>
+                                        <li><Link href="mailto:info@example.com" aria-label="info@example.com">info@example.com</Link></li>
                                     </ul>
                                 </div>
                                 <ul className="social-box">
-                                    <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>
+                                    <li><Link href="#" aria-label="Social Icons"><i className="icon-4"></i></Link></li>
+                                    <li><Link href="#" aria-label="Social Icons"><i className="icon-5"></i></Link></li>
+                                    <li><Link href="#" aria-label="Social Icons"><i className="icon-6"></i></Link></li>
+                                    <li><Link href="#" aria-label="Social Icons"><i className="icon-7"></i></Link></li>
                                 </ul>
                             </div>
                         </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">
@@ -38,7 +46,7 @@ export default function Footer2() {
                             <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                 <div className="footer-widget logo-widget">
                                     <figure className="footer-logo">
-                                        <Link href="/">
+                                        <Link href="/" aria-label="Logo">
                                             <img src="/assets/images/footer-logo.png" alt="rapharehab" />
                                         </Link>
                                     </figure>
@@ -48,11 +56,11 @@ export default function Footer2() {
                                     <ul className="social-links clearfix">
                                         <li>
                                             <Link href="https://www.instagram.com/elrapharehab/" target="_blank"
-                                                rel="noopener noreferrer"><i className="icon-4"></i></Link>
+                                                rel="noopener noreferrer"><i className="icon-4" aria-label="Instagram"></i></Link>
                                         </li>
                                         <li>
                                             <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank"
-                                                rel="noopener noreferrer"><i className="icon-7"></i></Link>
+                                                rel="noopener noreferrer"><i className="icon-7" aria-label="Facebook"></i></Link>
                                         </li>
                                     </ul>
                                 </div>
@@ -74,7 +82,7 @@ export default function Footer2() {
                                                         <li key={item.id}>
                                                             <Link
                                                                 href={`/etobicoke-treatment-service/${item.slug}`}
-                                                            >
+                                                             aria-label="Etobicoke treatment service">
                                                                 {item.shortTitle}
                                                             </Link>
                                                         </li>
@@ -97,7 +105,7 @@ export default function Footer2() {
                                         <ul className="links-list clearfix">
                                             {areaOfInjuryData.map((item) => (
                                                 <li key={item.id}>
-                                                    <Link href={`/area-of-injury/${item.slug}`}>
+                                                    <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of injury">
                                                         {item.title}
                                                     </Link>
                                                 </li>
@@ -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">
@@ -118,7 +124,7 @@ export default function Footer2() {
                                         <ul className="links-list clearfix">
                                             {Accident.map((item) => (
                                                 <li key={item.id}>
-                                                    <Link href={`/accident/${item.slug}`}>
+                                                    <Link href={`/accident/${item.slug}`} aria-label="Accident title">
                                                         {item.title}
                                                     </Link>
                                                 </li>
@@ -137,7 +143,7 @@ export default function Footer2() {
                                         <ul className="links-list clearfix">
                                             {Rehabilitation.map((item) => (
                                                 <li key={item.id}>
-                                                    <Link href={`/rehabilitation/${item.slug}`}>
+                                                    <Link href={`/rehabilitation/${item.slug}`} aria-label="Rehabilitation title">
                                                         {item.title}
                                                     </Link>
                                                 </li>
@@ -162,13 +168,17 @@ export default function Footer2() {
                                             </li>
                                             <li>
                                                 <i className="icon-2"></i>
-                                                <Link href="tel:647-722-3434">647-722-3434</Link>
+                                                <Link href="tel:647-722-3434" aria-label="647-722-3434">647-722-3434</Link>
                                             </li>
                                             <li>
                                                 <i className="icon-26"></i>
-                                                <Link href="mailto:example@info.com">
-                                                    bloor@rapharehab.ca
-                                                </Link>
+                                                {email ? (
+                                                    <Link href={`mailto:${email}`} aria-label={email}>
+                                                        {email}
+                                                    </Link>
+                                                ) : (
+                                                    <span>Loading...</span>
+                                                )}
                                             </li>
                                         </ul>
                                     </div>
@@ -189,18 +199,16 @@ export default function Footer2() {
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         style={{ color: "#fff", fontWeight: "700" }}
-                                    >
+                                     aria-label="Metatroncubesolutions">
                                         MetatronCube
                                     </a>{" "}
                                     All Rights Reserved
                                 </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">
@@ -38,7 +46,7 @@ export default function Footer2() {
                             <div className="col-lg-3 col-md-6 col-sm-12 footer-column">
                                 <div className="footer-widget logo-widget">
                                     <figure className="footer-logo">
-                                        <Link href="/">
+                                        <Link href="/" aria-label="Logo">
                                             <img src="/assets/images/footer-logo.png" alt="rapharehab" />
                                         </Link>
                                     </figure>
@@ -48,11 +56,11 @@ export default function Footer2() {
                                     <ul className="social-links clearfix">
                                         <li>
                                             <Link href="https://www.instagram.com/elrapharehab/" target="_blank"
-                                                rel="noopener noreferrer"><i className="icon-4"></i></Link>
+                                                rel="noopener noreferrer" aria-label="Instagram"><i className="icon-4"></i></Link>
                                         </li>
                                         <li>
                                             <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank"
-                                                rel="noopener noreferrer"><i className="icon-7"></i></Link>
+                                                rel="noopener noreferrer" aria-label="Facebook"><i className="icon-7" ></i></Link>
                                         </li>
                                     </ul>
                                 </div>
@@ -74,7 +82,7 @@ export default function Footer2() {
                                                         <li key={item.id}>
                                                             <Link
                                                                 href={`/etobicoke-treatment-service/${item.slug}`}
-                                                            >
+                                                            aria-label="Etobicoke treatment service">
                                                                 {item.shortTitle}
                                                             </Link>
                                                         </li>
@@ -97,7 +105,7 @@ export default function Footer2() {
                                         <ul className="links-list clearfix">
                                             {areaOfInjuryData.map((item) => (
                                                 <li key={item.id}>
-                                                    <Link href={`/area-of-injury/${item.slug}`}>
+                                                    <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of injury">
                                                         {item.title}
                                                     </Link>
                                                 </li>
@@ -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">
@@ -118,7 +124,7 @@ export default function Footer2() {
                                         <ul className="links-list clearfix">
                                             {Accident.map((item) => (
                                                 <li key={item.id}>
-                                                    <Link href={`/accident/${item.slug}`}>
+                                                    <Link href={`/accident/${item.slug}`} aria-label="Accident title">
                                                         {item.title}
                                                     </Link>
                                                 </li>
@@ -137,7 +143,7 @@ export default function Footer2() {
                                         <ul className="links-list clearfix">
                                             {Rehabilitation.map((item) => (
                                                 <li key={item.id}>
-                                                    <Link href={`/rehabilitation/${item.slug}`}>
+                                                    <Link href={`/rehabilitation/${item.slug}`} aria-label="rehabilitation title">
                                                         {item.title}
                                                     </Link>
                                                 </li>
@@ -162,13 +168,17 @@ export default function Footer2() {
                                             </li>
                                             <li>
                                                 <i className="icon-2"></i>
-                                                <Link href="tel:647-722-3434">647-722-3434</Link>
+                                                <Link href="tel:647-722-3434" aria-label="647-722-3434">647-722-3434</Link>
                                             </li>
                                             <li>
                                                 <i className="icon-26"></i>
-                                                <Link href="mailto:example@info.com">
-                                                    bloor@rapharehab.ca
-                                                </Link>
+                                                {email ? (
+                                                    <Link href={`mailto:${email}`} aria-label={email}>
+                                                        {email}
+                                                    </Link>
+                                                ) : (
+                                                    <span>Loading...</span>
+                                                )}
                                             </li>
                                         </ul>
                                     </div>
@@ -189,18 +199,16 @@ export default function Footer2() {
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         style={{ color: "#fff", fontWeight: "700" }}
-                                    >
+                                     aria-label="Metatroncubesolutions">
                                         MetatronCube
                                     </a>{" "}
                                     All Rights Reserved
                                 </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,10 +29,10 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
                     style={{ marginRight: "8px" }}
                     className="red-icon"
                   />
-                  <Link href="tel:647-722-3434">
+                  <Link href="tel:647-722-3434" aria-label="647-722-3434">
                     <span style={{
                       color: "white",
-                    }}>
+                    }} >
                       647-722-3434
                     </span>
                   </Link>
@@ -34,29 +44,37 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
                     style={{ marginRight: "8px" }}
                     className="red-icon"
                   />
-                  <Link href="mailto: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">Why Us</Link></li>
-                <li><Link href="/faq-physiotherapy-etobicoke">FAQ’s</Link></li>
-                <li><Link href="/what-to-expect">What To Expect</Link></li>
-                <li><Link href="/payment-insurance">Payment And Insurance</Link></li>
+                <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="/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> */}
                 <li>
-                  <Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer">
+                  <Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                     <i className="icon-4"></i>
                   </Link>
                 </li>
                 <li>
-                  <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer">
+                  <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                     <i className="icon-7"></i>
                   </Link>
                 </li>
@@ -70,8 +88,8 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
           <div className="outer-container">
             <div className="outer-box new">
               <div className="logo-box">
-                <figure className="logo">
-                  <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
+                <figure className="logo" >
+                  <Link href="/" aria-label="Logo"><img src="/assets/images/logo.png" alt="rapharehab"/></Link>
                 </figure>
               </div>
 
@@ -97,7 +115,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
             <div className="outer-box">
               <div className="logo-box">
                 <figure className="logo">
-                  <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
+                  <Link href="/" aria-label="Logo"><img src="/assets/images/logo.png" alt="rapharehab"/></Link>
                 </figure>
               </div>
 
@@ -114,4 +132,4 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
       </header>
     </>
   )
-}
+}

components/layout/header/Header2.js

@@ -1,7 +1,9 @@
-'use client'
+"use client";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Menu from "../Menu";
 import MobileMenu from "../MobileMenu";
+import Image from "next/image";
 
 export default function Header2({
   scroll,
@@ -11,12 +13,36 @@ export default function Header2({
   handleSidebar,
   isHome = false,
 }) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [email, setEmail] = useState("");
+
+  // ✅ Detect mobile screen
+  useEffect(() => {
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    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
+    : "/assets/images/logo.png"; // desktop logo
+
   return (
     <>
       <header
-        className={`main-header header-style-two ${scroll ? "fixed-header" : ""} ${isHome ? "home-page" : ""}`}
+        className={`main-header header-style-two ${
+          scroll ? "fixed-header" : ""
+        } ${isHome ? "home-page" : ""}`}
       >
-        {/* Header Top */}
         <div className="header-top">
           <div className="top-inner">
             <ul className="info-list clearfix">
@@ -26,7 +52,9 @@ export default function Header2({
                   alt="Phone"
                   className="contact-icon"
                 />
-                <Link href="tel:647-722-3434">647-722-3434</Link>
+                <Link href="tel:647-722-3434" aria-label="Call us at 647-722-3434">
+                  647-722-3434
+                </Link>
               </li>
               <li>
                 <img
@@ -34,22 +62,58 @@ export default function Header2({
                   alt="Mail"
                   className="contact-icon"
                 />
-                <Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>
+                {email ? (
+                  <Link href={`mailto:${email}`} aria-label={email}>
+                    <span style={{ color: "white" }}>
+                      {email}
+                    </span>
+                  </Link>
+                ) : (
+                  <span style={{ color: "white" }}>
+                    Loading...
+                  </span>
+                )}
               </li>
             </ul>
 
             <ul className="social-links clearfix">
-              <li><Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link></li>
-              <li><Link href="/faq-physiotherapy-etobicoke">FAQ’s</Link></li>
-              <li><Link href="/what-to-expect">What To Expect</Link></li>
-              <li><Link href="/payment-insurance">Payment And Insurance</Link></li>
               <li>
-                <Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer">
+                <Link href="/why-rapha-physiotherapy-etobicoke" aria-label="Why Us page">
+                  Why Us
+                </Link>
+              </li>
+              <li>
+                <Link href="/faq-physiotherapy-etobicoke" aria-label="FAQ's page">
+                  FAQ's
+                </Link>
+              </li>
+              <li>
+                <Link href="/what-to-expect" aria-label="What To Expect page">
+                  What To Expect
+                </Link>
+              </li>
+              <li>
+                <Link href="/payment-insurance" aria-label="Payment And Insurance page">
+                  Payment And Insurance
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="https://www.instagram.com/elrapharehab/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Instagram profile"
+                >
                   <i className="icon-4"></i>
                 </Link>
               </li>
               <li>
-                <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer">
+                <Link
+                  href="https://www.facebook.com/ELRaphaRehabCenter/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Facebook page"
+                >
                   <i className="icon-7"></i>
                 </Link>
               </li>
@@ -57,13 +121,28 @@ export default function Header2({
           </div>
         </div>
 
-        {/* Header Lower */}
         <div className="header-lower">
           <div className="outer-container">
             <div className="outer-box">
               <div className="logo-box">
                 <figure className="logo">
-                  <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
+                  {/* ✅ Responsive logo using Next/Image */}
+                  <Link href="/" aria-label="Home page">
+                    <Image
+                      src={logoSrc}
+                      alt="rapharehab logo"
+                      width={isMobile ? 150 : 200} // smaller on mobile
+                      height={isMobile ? 45 : 60}
+                      priority
+                      quality={80}
+                      sizes="(max-width: 768px) 150px, 200px"
+                      style={{
+                        width: "100%",
+                        height: "auto",
+                        objectFit: "contain",
+                      }}
+                    />
+                  </Link>
                 </figure>
               </div>
 
@@ -75,7 +154,10 @@ export default function Header2({
                 </div>
 
                 <nav className="main-menu navbar-expand-md navbar-light clearfix">
-                  <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
+                  <div
+                    className="collapse navbar-collapse show clearfix"
+                    id="navbarSupportedContent"
+                  >
                     <Menu />
                   </div>
                 </nav>
@@ -84,18 +166,36 @@ export default function Header2({
           </div>
         </div>
 
-        {/* Sticky Header */}
         <div className="sticky-header">
           <div className="auto-container">
             <div className="outer-box">
               <div className="logo-box">
                 <figure className="logo">
-                  <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
+                  {/* ✅ Sticky header also gets responsive logo */}
+                  <Link href="/" aria-label="Home page">
+                    <Image
+                      src={logoSrc}
+                      alt="rapharehab logo"
+                      width={isMobile ? 150 : 200}
+                      height={isMobile ? 45 : 60}
+                      priority
+                      quality={80}
+                      sizes="(max-width: 768px) 150px, 200px"
+                      style={{
+                        width: "100%",
+                        height: "auto",
+                        objectFit: "contain",
+                      }}
+                    />
+                  </Link>
                 </figure>
               </div>
 
               <nav className="main-menu navbar-expand-md navbar-light clearfix">
-                <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
+                <div
+                  className="collapse navbar-collapse show clearfix"
+                  id="navbarSupportedContent"
+                >
                   <Menu />
                 </div>
               </nav>
@@ -103,9 +203,8 @@ export default function Header2({
           </div>
         </div>
 
-        {/* Mobile Menu */}
         <MobileMenu handleMobileMenu={handleMobileMenu} />
       </header>
     </>
   );
-}
+}

components/layout/header/Header3.js

@@ -1,98 +0,0 @@
-'use client'
-import Link from "next/link";
-import Menu from "../Menu"
-import MobileMenu from "../MobileMenu"
-export default function Header3({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
-    return (
-        <>
-            <header className={`main-header header-style-two ${scroll ? "fixed-header" : ""}`}>
-                {/* Header Top */}
-                <div className="header-top">
-                <div className="auto-container">
-                    <div className="top-inner">
-                        <ul className="info-list clearfix">
-                            <li><i className="icon-1"></i>Mon - Fri 8:00 - 18:00 / Sunday 8:00 - 14:00</li>
-                            <li><i className="icon-2"></i>Email: <Link href="tel:01989526503">0198-9526503</Link></li>
-                            <li><img src="assets/images/icons/icon-1.png" alt="location" /> 47 Bakery Street, London, UK</li>
-                        </ul>
-                        <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>
-                        </div>
-                  
-                {/* Header Upper */}
-                <div className="header-lower">
-                <div className="outer-container">
-                <div className="auto-container">
-                    <div className="outer-box">
-                        <div className="logo-box">
-                            <figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link></figure>
-                        </div>
-                        <div className="menu-area">
-                        {/* Mobile Navigation Toggler */}
-                        <div className="mobile-nav-toggler" onClick={handleMobileMenu}>
-                            <i className="icon-bar"></i>
-                            <i className="icon-bar"></i>
-                            <i className="icon-bar"></i>
-                        </div>
-                        {/* Main Menu */}
-                        <nav className="main-menu navbar-expand-md navbar-light clearfix">
-                            <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
-                                <Menu/>
-                            </div>
-                        </nav>
-                        
-                        </div>
-                        {/* Menu Right Content */}
-                        <ul className="menu-right-content">
-                           
-                            <li className="search-box-outer search-toggler" onClick={handlePopup}>
-                            <i className="icon-27"></i>
-                            </li>
-                            <li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
-                            <i className="icon-28"></i>
-                            </li>
-                        </ul>
-                    </div>
-                    </div>
-                </div>
-                </div>
-                {/*End Header Upper*/}
-                {/* Sticky Header  */}
-                <div className="sticky-header">
-                    <div className="auto-container">
-                        <div className="outer-box">
-                        <div className="logo-box">
-                            <figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link></figure>
-                        </div>
-                       
-                            <nav className="main-menu navbar-expand-md navbar-light clearfix">
-                                <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
-                                    <Menu/>
-                                </div>
-                            </nav>
-                            <ul className="menu-right-content">
-                           
-                            <li className="search-box-outer search-toggler" onClick={handlePopup}>
-                            <i className="icon-27"></i>
-                            </li>
-                            <li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
-                            <i className="icon-28"></i>
-                            </li>
-                            </ul>
-                        
-                        </div>
-                    </div>
-                </div>{/* End Sticky Menu */}
-                {/* Mobile Menu  */}
-
-                <MobileMenu handleMobileMenu={handleMobileMenu} />
-            </header>
-        </>
-    )
-}

components/layout/header/Header4.js

@@ -1,92 +0,0 @@
-'use client'
-import Link from "next/link";
-import OnepageMenu from "../OnepageMenu"
-import MobileMenu from "../MobileMenu"
-
-export default function Header4({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
-    return (
-        <>
-            <header className={`main-header ${scroll ? "fixed-header" : ""}`}>
-                {/* Header Top */}
-                <div className="header-top">
-        <div className="auto-container">
-          <div className="top-inner">
-            <ul className="info-list clearfix">
-              <li><i className="icon-1"></i>Mon - Fri 8:00 - 18:00 / Sunday 8:00 - 14:00</li>
-              <li><i className="icon-2"></i>Email: <Link href="tel:01989526503">0198-9526503</Link></li>
-              <li><img src="assets/images/icons/icon-1.png" alt="location"/> 47 Bakery Street, London, UK</li>
-            </ul>
-            <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>
-      </div>
-                   
-                {/* Header Upper */}
-                <div className="header-lower">
-                    <div className="outer-container">
-                    <div className="auto-container">
-                        <div className="outer-box">
-                        <div className="logo-box">
-                            <figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab"/></Link></figure>
-                        </div>
-                        <div className="menu-area">
-                        {/* Mobile Navigation Toggler */}
-                        <div className="mobile-nav-toggler" onClick={handleMobileMenu}>
-                            <i className="icon-bar"></i>
-                            <i className="icon-bar"></i>
-                            <i className="icon-bar"></i>
-                        </div>
-                        {/* Main Menu */}
-                        <nav className="main-menu navbar-expand-md navbar-light clearfix">
-                            <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
-                                <OnepageMenu/>
-                            </div>
-                        </nav>
-                        
-                        </div>
-                        {/* Menu Right Content */}
-                        <ul className="menu-right-content">
-                           
-                           
-                            <div className="btn-box">
-                                <Link href="/" className="theme-btn btn-one"><span>Request A Pickup</span></Link>
-                            </div>
-                        </ul>
-                    </div>
-                </div>
-                </div>
-                </div>
-                {/*End Header Upper*/}
-                {/* Sticky Header  */}
-                <div className="sticky-header">
-                    <div className="auto-container">
-                        <div className="outer-box">
-                        <div className="logo-box">
-                            <figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab"/></Link></figure>
-                        </div>
-                                    
-                        <div className="menu-area">
-                            <nav className="main-menu clearfix">
-                                <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
-                                    <OnepageMenu/>
-                                </div>
-                            </nav>
-                            </div>
-                            <div className="btn-box">
-                        <Link href="/" className="theme-btn btn-one"><span>Request A Pickup</span></Link>
-                    </div>
-                        </div>
-                    </div>
-                </div>{/* End Sticky Menu */}
-                {/* Mobile Menu  */}
-
-                <MobileMenu handleMobileMenu={handleMobileMenu} />
-            </header>
-        </>
-    )
-}

components/sections/home/AboutSection.js

@@ -1,108 +1,161 @@
-import Image from "next/image";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import Image from "next/image";
 
 export default function AboutSection() {
   return (
-    <section className="about-style-two pt_90 pb_90 relative overflow-hidden">
-      {/* Pattern Layers with fixed sizes */}
+    <section
+      className="about-style-two pt_90 pb_90 relative overflow-hidden"
+      style={{ minHeight: "600px" }}
+    >
+      {/* ===== Pattern Layers ===== */}
       <div className="pattern-layer">
-        <div className="pattern-1 rotate-me absolute w-[120px] h-[120px]">
+        <div
+          className="pattern-1 rotate-me absolute"
+          style={{ width: "120px", height: "120px" }}
+        >
           <Image
             src="/assets/images/shape/shape-8.webp"
-            alt="Physiotherapy at Rapharehab"
-            fill
+            alt="Decorative Shape"
+            width={120}
+            height={120}
             sizes="120px"
-            style={{ objectFit: "contain" }}
-            priority={false}
+            loading="lazy"
+            decoding="async"
+            style={{ objectFit: "contain", display: "block" }}
           />
         </div>
 
-        <div className="pattern-2 rotate-me absolute w-[140px] h-[140px]">
+        <div
+          className="pattern-2 rotate-me absolute"
+          style={{ width: "60px", height: "60px" }}
+        >
           <Image
             src="/assets/images/shape/shape-9.webp"
-            alt="Physiotherapy at Rapharehab"
-            fill
-            sizes="140px"
-            style={{ objectFit: "contain" }}
+            alt="Decorative Shape"
+            width={60}
+            height={60}
+            sizes="60px"
+            loading="lazy"
+            decoding="async"
+            style={{ objectFit: "contain", display: "block" }}
           />
         </div>
 
-        <div className="pattern-3 absolute w-[150px] h-[150px]">
+        <div
+          className="pattern-3 absolute"
+          style={{ width: "150px", height: "150px" }}
+        >
           <Image
             src="/assets/images/shape/shape-11.webp"
-            alt="Physiotherapy at Rapharehab"
-            fill
+            alt="Decorative Shape"
+            width={150}
+            height={150}
             sizes="150px"
-            style={{ objectFit: "contain" }}
+            loading="lazy"
+            decoding="async"
+            style={{ objectFit: "contain", display: "block" }}
           />
         </div>
       </div>
 
+      {/* ===== Content Area ===== */}
       <div className="auto-container">
         <div className="row clearfix">
-          {/* Image Column */}
+          {/* Left: Image Column */}
           <div className="col-lg-6 col-md-12 col-sm-12 image-column">
             <div className="image_block_one relative">
               <div className="image-box relative">
+
                 {/* Background Shape */}
-                <div className="image-shape absolute inset-0 -z-10 w-[600px] h-[500px]">
+                <div
+                  className="image-shape absolute inset-0 -z-10"
+                  style={{
+                    width: "100%",
+                    maxWidth: "600px",
+                    aspectRatio: "6 / 5",
+                    overflow: "hidden",
+                  }}
+                >
                   <Image
                     src="/assets/images/shape/shape-26.webp"
-                    alt="Background shape"
-                    fill
-                    sizes="50vw"
-                    style={{ objectFit: "contain" }}
+                    alt="Background Shape"
+                    width={600}
+                    height={500}
+                    sizes="(max-width: 768px) 90vw, 50vw"
+                    priority // 👈 add this
+                    fetchPriority="high" // 👈 optional (for clarity)
+                    decoding="async"
+                    style={{ objectFit: "contain", display: "block" }}
                   />
                 </div>
 
-                {/* Main Hero Image (LCP) */}
-                <figure className="image-2 relative min-h-[420px]">
+                {/* ===== Responsive Main Image ===== */}
+                <picture>
+                  {/* Mobile image */}
+                  <source
+                    srcSet="/assets/images/home/welcome/home-welcome-mbl.webp"
+                    media="(max-width: 768px)"
+                  />
+                  {/* Desktop image */}
                   <Image
                     src="/assets/images/home/welcome/home-welcome.webp"
-                    alt="Physiotherapy"
+                    alt="Physiotherapy at Rapha Rehab"
                     width={600}
                     height={420}
+                    className="welcome-image-home"
+                    sizes="(max-width: 480px) 90vw, (max-width: 768px) 70vw, (max-width: 1200px) 50vw, 600px"
                     priority
-                    sizes="(max-width: 768px) 100vw, 50vw"
+                    quality={70}
                     placeholder="blur"
-                    blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
+                    blurDataURL="/assets/images/home/welcome/home-welcome.webp"
                     style={{
-                      borderRadius: "8px",
                       width: "100%",
                       height: "auto",
+                      borderRadius: "8px",
+                      display: "block",
                     }}
                   />
-                </figure>
+                </picture>
 
                 {/* Top Icon */}
-                <div className="icon-one absolute top-0 left-0 w-[40px] h-[40px]">
+                <div
+                  className="icon-one absolute top-0 left-0"
+                  style={{ width: "80px", height: "80px" }}
+                >
                   <Image
                     src="/assets/images/home/welcome/top-icon.webp"
-                    alt="Physiotherapy at Rapharehab"
-                    fill
-                    sizes="40px"
-                    style={{ objectFit: "contain" }}
+                    alt="Physiotherapy Icon"
+                    width={80}
+                    height={80}
+                    sizes="80px"
                     loading="lazy"
+                    decoding="async"
+                    style={{ objectFit: "contain", display: "block" }}
                   />
                 </div>
 
                 {/* Bottom Icon */}
-                <div className="icon-two absolute bottom-0 right-0 w-[40px] h-[40px]">
+                <div
+                  className="icon-two absolute bottom-0 right-0"
+                  style={{ width: "80px", height: "80px" }}
+                >
                   <Image
                     src="/assets/images/home/welcome/bottom-icon.webp"
-                    alt="Physiotherapy at Rapharehab"
-                    fill
-                    sizes="40px"
-                    style={{ objectFit: "contain" }}
+                    alt="Physiotherapy Icon"
+                    width={80}
+                    height={80}
+                    sizes="80px"
                     loading="lazy"
+                    decoding="async"
+                    style={{ objectFit: "contain", display: "block" }}
                   />
                 </div>
               </div>
             </div>
           </div>
 
-          {/* Content Column */}
+          {/* Right: Text Column */}
           <div className="col-lg-6 col-md-12 col-sm-12 content-column">
             <div className="content_block_one">
               <div className="content-box ml_30">
@@ -113,24 +166,20 @@ export default function AboutSection() {
 
                 <div className="text-box mb_40">
                   <p>
-                    At Rapha Rehab, we specialize in evidence-based
-                    physiotherapy tailored to your needs. Our expert care helps
-                    you recover, relieve pain, and regain strength for a better
-                    quality of life.
+                    At Rapha Rehab, we specialize in evidence-based physiotherapy tailored to
+                    your needs. Our expert care helps you recover, relieve pain, and regain
+                    strength for a better quality of life.
                   </p>
                   <ul className="list-style-one clearfix">
-                    <li>Chronic pain (back, neck, joints).</li>
-                    <li>Sports injuries (sprains, strains, post-surgery rehab).</li>
-                    <li>Work-related injuries (WCB claims supported).</li>
-                    <li>Movement disorders (stroke rehab, mobility issues).</li>
+                    <li>Chronic pain (back, neck, joints)</li>
+                    <li>Sports injuries (sprains, strains, post-surgery rehab)</li>
+                    <li>Work-related injuries (WCB claims supported)</li>
+                    <li>Movement disorders (stroke rehab, mobility issues)</li>
                   </ul>
                 </div>
 
                 <div className="btn-box">
-                  <Link
-                    href="/etobicoke-treatment-service"
-                    className="theme-btn btn-one"
-                  >
+                  <Link href="/etobicoke-treatment-service" className="theme-btn btn-one" aria-label="Explore our service">
                     <span>Explore Our Service</span>
                   </Link>
                 </div>

components/sections/home/AreaOfInjury.js

@@ -1,88 +1,115 @@
-import React from 'react';
+"use client";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
-import Image from 'next/image';
-import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils';
+import Image from "next/image";
+import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";
 
 export default function AreaOfInjury() {
-    const teamMembers = [
-        { name: 'Black Marvin', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
-        { name: 'Eleanor Pena', role: 'Doctor', image: 'assets/images/team/team-2.jpg' },
-        { name: 'Arlene Maccy', role: 'Nursing Assistant', image: 'assets/images/team/team-3.jpg' },
-        { name: 'Jenny Wilson', role: 'Senior Doctor', image: 'assets/images/team/team-4.jpg' },
-        { name: 'Black Marvin', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
-        { name: 'Eleanor Pena', role: 'Doctor', image: 'assets/images/team/team-2.jpg' },
-        { name: 'Arlene Maccy', role: 'Nursing Assistant', image: 'assets/images/team/team-3.jpg' },
-        { name: 'Jenny Wilson', role: 'Senior Doctor', image: 'assets/images/team/team-4.jpg' },
-    ];
+  const [isMobile, setIsMobile] = useState(false);
 
-    return (
-        <section className="team-section sec-pad centred bg-color-1">
-            <div className="pattern-layer">
-                <div className="pattern-1">
-                    <Image
-                        src="/assets/images/shape/shape-13.webp"
-                        alt="Physiotherapy at Rapharehab"
-                        fill
-                        style={{ objectFit: "cover" }}
-                    />
-                </div>
+  // ✅ Detect mobile screen (same logic as Header2)
+  useEffect(() => {
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
 
-                <div className="pattern-2">
-                    <Image
-                        src="/assets/images/shape/shape-14.webp"
-                        alt="Physiotherapy at Rapharehab"
-                        fill
-                        style={{ objectFit: "cover" }}
-                    />
-                </div>
+  return (
+    <section className="team-section sec-pad centred bg-color-1">
+      {/* ===== Background Patterns ===== */}
+      <div className="pattern-layer">
+        <div className="pattern-1">
+          <Image
+            src="/assets/images/shape/shape-13.webp"
+            alt="Physiotherapy Background"
+            fill
+            style={{ objectFit: "cover" }}
+          />
+        </div>
+        <div className="pattern-2">
+          <Image
+            src="/assets/images/shape/shape-14.webp"
+            alt="Physiotherapy Background"
+            fill
+            style={{ objectFit: "cover" }}
+          />
+        </div>
+      </div>
 
+      <div className="shape">
+        <div className="shape-2"></div>
+      </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-2 mb_50">
-                    <span className="sub-title-1 text-white">Start Your Treatment Today! <br /> Visit our healthcare team in Etobicoke.</span>
-                    <h2 className='h3-white' style={{ fontWeight: "bold" }}>
-                        Area Of Injury
-                    </h2>
-                </div>
-                <div className="row clearfix">
-                    {areaOfInjuryData.slice(0, 8).map((area, index) => (
-                        <div key={index} className="col-lg-3 col-md-6 col-6 team-block d-flex">
-                            <div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1"
-                            // data-wow-delay={`${index * 50}ms`} data-wow-duration="500ms"
-                            >
-                                <div className="inner-box d-flex flex-column flex-grow-1">
-                                    <div className="image-box">
-                                        <figure className="image">
-                                            <img src={area.image} alt={area.title.toUpperCase()} />
-                                        </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 mt-auto">
-                                        <h3><Link href={`/area-of-injury/${area.slug}`}>{area.title}</Link></h3>
-                                        {/* <span className="designation">{member.role}</span> */}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                    <div className='col-12 text-center'>
-                        <div className="btn-box">
-                            <Link href="/area-of-injury" className="theme-btn btn-one-new"><span>View All</span></Link>
-                        </div>
+      {/* ===== Section Header ===== */}
+      <div className="auto-container">
+        <div className="sec-title mb_50 centred">
+          <span className="sub-title-1 new-color2">
+            Start Your Treatment Today! <br /> Visit our healthcare team in
+            Etobicoke.
+          </span>
+          <h2 className="tex-color-1">Area Of Injury</h2>
+        </div>
+
+        {/* ===== Injuries Grid ===== */}
+        <div className="row clearfix">
+          {areaOfInjuryData.slice(0, 8).map((area, index) => {
+            // ✅ Same concept as Header logo switching
+            const imageSrc = isMobile
+              ? area.mobileImage || area.image // if mobile image exists, use it
+              : area.image;
+
+            return (
+              <div
+                key={index}
+                className="col-lg-3 col-md-6 col-6 team-block d-flex"
+              >
+                <div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1">
+                  <div className="inner-box d-flex flex-column flex-grow-1">
+                    <div className="image-box">
+                      <figure className="image">
+                        {/* ✅ Using Next/Image for automatic optimization */}
+                        <Image
+                          src={imageSrc}
+                          alt={area.title}
+                          width={400}
+                          height={400}
+                          quality={75}
+                          priority={index < 4} // first few load faster
+                          sizes="(max-width: 768px) 100vw, 33vw"
+                          style={{
+                            width: "100%",
+                            height: "auto",
+                            objectFit: "cover",
+                            borderRadius: "10px",
+                          }}
+                        />
+                      </figure>
                     </div>
+
+                    <div className="lower-content mt-auto">
+                      <h3>
+                        <Link href={`/area-of-injury/${area.slug}`} aria-label="Area of injury title">
+                          {area.title}
+                        </Link>
+                      </h3>
+                    </div>
+                  </div>
                 </div>
+              </div>
+            );
+          })}
+
+          {/* ===== View All Button ===== */}
+          <div className="col-12 text-center">
+            <div className="btn-box">
+              <Link href="/area-of-injury" className="theme-btn btn-one-new" aria-label="View all">
+                <span>View All</span>
+              </Link>
             </div>
-        </section>
-    );
-};
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/sections/home/FaqSection.js

@@ -1,7 +1,9 @@
 'use client'
 import Layout from "@/components/layout/Layout"
 import Link from "next/link"
-import Image from "next/image"
+import Image from "next/image";
+
+
 import { useState } from 'react'
 export default function FaqSection() {
     const [isActive, setIsActive] = useState({
@@ -36,6 +38,7 @@ export default function FaqSection() {
                                 <div className="image-shape">
                                     <div className="shape-1 rotate-me">
                                         <Image
+                                            // loader={exportableLoader}
                                             src="/assets/images/shape/shape-8.webp"
                                             alt="Physiotherapy at Rapharehab"
                                             fill
@@ -45,6 +48,7 @@ export default function FaqSection() {
 
                                     <div className="shape-2">
                                         <Image
+                                            // loader={exportableLoader}
                                             src="/assets/images/shape/shape-33.png"
                                             alt="Physiotherapy at Rapharehab"
                                             fill
@@ -63,6 +67,7 @@ export default function FaqSection() {
 
                                     <div className="shape-4">
                                         <Image
+                                            // loader={exportableLoader}
                                             src="/assets/images/shape/shape-34.png"
                                             alt="Physiotherapy at Rapharehab"
                                             fill
@@ -72,6 +77,7 @@ export default function FaqSection() {
 
                                     <div className="shape-5">
                                         <Image
+                                            // loader={exportableLoader}
                                             src="/assets/images/shape/shape-11.webp"
                                             alt="Physiotherapy at Rapharehab"
                                             fill
@@ -93,7 +99,7 @@ export default function FaqSection() {
                                 <li className="accordion block active-block">
                                     <div className={isActive.key == 1 ? "acc-btn active" : "acc-btn"} onClick={() => handleToggle(1)}>
                                         <div className="icon-box"><i className="icon-34"></i></div>
-                                        <h5>About Us</h5>
+                                        <h3>About Us</h3>
                                     </div>
                                     <div className={isActive.key == 1 ? "acc-content current" : "acc-content"}>
                                         <div className="content">
@@ -101,14 +107,14 @@ export default function FaqSection() {
                                             </div>
                                         </div>
                                         <div className="btn-box mt-3">
-                                            <Link href="/contact" className="theme-btn btn-one"><span>Book Appointment</span></Link>
+                                            <Link href="/contact" className="theme-btn btn-one" aria-label="Book Appointment"><span>Book Appointment</span></Link>
                                         </div>
                                     </div>
                                 </li>
                                 <li className="accordion block active-block">
                                     <div className={isActive.key == 2 ? "acc-btn active" : "acc-btn"} onClick={() => handleToggle(2)}>
                                         <div className="icon-box"><i className="icon-34"></i></div>
-                                        <h5>Vision</h5>
+                                        <h3>Vision</h3>
                                     </div>
                                     <div className={isActive.key == 2 ? "acc-content current" : "acc-content"}>
                                         <div className="content">
@@ -120,7 +126,7 @@ export default function FaqSection() {
                                 <li className="accordion block active-block">
                                     <div className={isActive.key == 3 ? "acc-btn active" : "acc-btn"} onClick={() => handleToggle(3)}>
                                         <div className="icon-box"><i className="icon-34"></i></div>
-                                        <h5>Mission</h5>
+                                        <h3>Mission</h3>
                                     </div>
                                     <div className={isActive.key == 3 ? "acc-content current" : "acc-content"}>
                                         <div className="content">
@@ -132,7 +138,7 @@ export default function FaqSection() {
                                 <li className="accordion block active-block">
                                     <div className={isActive.key == 4 ? "acc-btn active" : "acc-btn"} onClick={() => handleToggle(4)}>
                                         <div className="icon-box"><i className="icon-34"></i></div>
-                                        <h5>Why Choose Us</h5>
+                                        <h3>Why Choose Us</h3>
                                     </div>
                                     <div className={isActive.key == 4 ? "acc-content current" : "acc-content"}>
                                         <div className="content">
@@ -140,7 +146,7 @@ export default function FaqSection() {
                                             </div>
                                         </div>
                                         <div className="btn-box mt-3">
-                                            <Link href="/contact" className="theme-btn btn-one"><span>Book Appointment</span></Link>
+                                            <Link href="/contact" className="theme-btn btn-one" aria-label="Book Appointment"><span>Book Appointment</span></Link>
                                         </div>
                                     </div>
                                 </li>

components/sections/home/MobileFeatureCard.js

@@ -14,7 +14,7 @@ export default function MobileFeatureCard() {
                                 <div className="icon-box">
                                     <img src="/assets/images/home/icons/experienced.webp" alt="Experienced Professionals" />
                                 </div>
-                                <h3><Link href="/">Experienced <br /> Professionals</Link></h3>
+                                <h3><Link href="/" aria-label="Experienced professionals">Experienced <br /> Professionals</Link></h3>
                                 {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
                             </div>
                         </div>
@@ -26,7 +26,7 @@ export default function MobileFeatureCard() {
                                 <div className="icon-box">
                                     <img src="/assets/images/home/icons/walk-in.webp" alt="Walk-in Appointments" />
                                 </div>
-                                <h3><Link href="/">Walk-in<br /> Appointments</Link></h3>
+                                <h3><Link href="/" aria-label="Walk in appointments">Walk-in<br /> Appointments</Link></h3>
                                 {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
                             </div>
                         </div>
@@ -38,7 +38,7 @@ export default function MobileFeatureCard() {
                                 <div className="icon-box">
                                     <img src="/assets/images/home/icons/state.webp" alt="State-of-the-Art Technology" />
                                 </div>
-                                <h3><Link href="/">State-of-the-Art Technology</Link></h3>
+                                <h3><Link href="/" aria-label="State of the art technology">State-of-the-Art Technology</Link></h3>
                                 {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
                             </div>
                         </div>
@@ -50,7 +50,7 @@ export default function MobileFeatureCard() {
                                 <div className="icon-box">
                                     <img src="/assets/images/home/icons/one.webp" alt="One-on-One care" />
                                 </div>
-                                <h3><Link href="/">One-on-One <br /> Care</Link></h3>
+                                <h3><Link href="/" aria-label="One-on-One care">One-on-One <br /> Care</Link></h3>
                                 {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
                             </div>
                         </div>

components/sections/home/MobileServicesSection.js

@@ -1,6 +1,7 @@
 import { servicesList } from "@/utils/Services.utils"
 import Link from "next/link"
-import Image from "next/image"
+import Image from "next/image";
+
 
 
 export default function MobileServices() {
@@ -10,6 +11,7 @@ export default function MobileServices() {
                 <div className="pattern-layer">
                     <div className="pattern-1 ">
                         <Image
+                            // loader={exportableLoader}
                             src="/assets/images/home/our-services/top-right.webp"
                             alt="Physiotherapy at Rapharehab"
                             fill
@@ -45,12 +47,12 @@ export default function MobileServices() {
                                                         src={service.icon2}
                                                         alt={`${service.alt}`}
                                                     />
-                                                </div>                                                <h3><Link href="/">     {service?.shortTitle}</Link></h3>
+                                                </div>                                                <h3><Link href="/" aria-label="Service Title">     {service?.shortTitle}</Link></h3>
                                                 <div className="btn-box">
                                                     <Link
                                                         href={`/etobicoke-treatment-service/${service.slug}`}
                                                         className="theme-btn-2 btn-one"
-                                                    >
+                                                        aria-label="View Service">
                                                         <span>View Service</span>
                                                     </Link>
                                                 </div>
@@ -64,7 +66,7 @@ export default function MobileServices() {
 
                         <div className='col-12 text-center'>
                             <div className="btn-box">
-                                <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new"><span>View All Services</span></Link>
+                                <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new" aria-label="View all service"><span>View All Services</span></Link>
                             </div>
                         </div>
                     </div>

components/sections/home/ProcessSection.js

@@ -1,17 +1,20 @@
 import React from 'react';
-import Image from 'next/image';
+import Image from "next/image";
+
+
 
 export default function ProcessSection() {
     return (
         <section className="process-section sec-pad bg-color-1">
-             <div className="pattern-layer">
-                                      <Image
-                                        src="/assets/images/shape/shape-19.png"
-                                        alt="Physiotherapy at Rapharehab"
-                                        fill
-                                        style={{ objectFit: "cover" }}
-                                      />
-                                    </div>
+            <div className="pattern-layer">
+                <Image
+                    // loader={exportableLoader}
+                    src="/assets/images/shape/shape-19.png"
+                    alt="Physiotherapy at Rapharehab"
+                    fill
+                    style={{ objectFit: "cover" }}
+                />
+            </div>
             {/* <div className="shape">
                 <div className="shape-1 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-20.png)' }}></div>
                 <div className="shape-2 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div>
@@ -23,14 +26,15 @@ export default function ProcessSection() {
                     <h2>How Physiotherapy Helps You Heal <br />and Stay Strong</h2>
                 </div>
                 <div className="inner-container">
-                     <div className="arrow-shape">
-                                 <Image
-                                   src="/assets/images/shape/shape-18.webp"
-                                   alt="Physiotherapy at Rapharehab"
-                                   fill
-                                   style={{ objectFit: "cover" }}
-                                 />
-                               </div>
+                    <div className="arrow-shape">
+                        <Image
+                            // loader={exportableLoader}
+                            src="/assets/images/shape/shape-18.webp"
+                            alt="Physiotherapy at Rapharehab"
+                            fill
+                            style={{ objectFit: "cover" }}
+                        />
+                    </div>
                     {/* Step 01 */}
                     <div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                         <div className="inner-box">

components/sections/home/ServicesSection.js

@@ -1,7 +1,9 @@
 import { servicesList } from '@/utils/Services.utils';
 import Link from 'next/link';
 import React from 'react';
-import Image from 'next/image';
+import Image from "next/image";
+
+
 
 export default function ServicesSection() {
     return (
@@ -9,6 +11,7 @@ export default function ServicesSection() {
             <div className="pattern-layer">
                 <div className="pattern-1 ">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/home/our-services/top-right.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -18,6 +21,7 @@ export default function ServicesSection() {
 
                 <div className="pattern-2 ">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/home/our-services/bottom-left.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -38,7 +42,7 @@ export default function ServicesSection() {
                                 <div className="inner-box d-flex flex-column flex-grow-1">
                                     <div className="image-box">
                                         <figure className="image">
-                                            <Link href={`/etobicoke-treatment-service/${service.slug}`}>
+                                            <Link href={`/etobicoke-treatment-service/${service.slug}`} aria-label="Etobicoke treatment service">
                                                 <img src={service?.image} alt={service.alt} />
                                             </Link>
                                         </figure>
@@ -48,7 +52,7 @@ export default function ServicesSection() {
                                             <img src={service?.icon} alt={service.alt} />
                                         </div>
                                         <h3 className='text-start'>
-                                            <Link href={`/etobicoke-treatment-service/${service.slug}`}>
+                                            <Link href={`/etobicoke-treatment-service/${service.slug}`} aria-label="Etobicoke treatment service">
                                                 {service?.shortTitle}
                                             </Link>
                                         </h3>
@@ -71,7 +75,7 @@ export default function ServicesSection() {
                     ))}
                     <div className='col-12 text-center'>
                         <div className="btn-box">
-                            <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new"><span>View All Services</span></Link>
+                            <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new" aria-label="Etobicoke treatment service"><span>View All Services</span></Link>
                         </div>
                     </div>
                 </div>

components/sections/home/WhyChooseusSection.js

@@ -1,12 +1,15 @@
 import Link from 'next/link';
 import React from 'react';
-import Image from 'next/image';
+import Image from "next/image";
+
+
 
 export default function WhyChooseUsSection() {
   return (
     <section className="chooseus-section">
       <div className="bg-layer">
         <Image
+          // loader={exportableLoader}
           src="/assets/images/home/why-choose/why-choose-right.webp"
           alt="Physiotherapy at Rapharehab"
           fill
@@ -17,6 +20,7 @@ export default function WhyChooseUsSection() {
 
       <div className="pattern-layer">
         <Image
+          // loader={exportableLoader}
           src="/assets/images/shape/shape-12.webp"
           alt="Physiotherapy at Rapharehab"
           fill

components/sections/home1/News.js

@@ -40,19 +40,19 @@ export default function News() {
               <div className="news-block-one">
                 <div className="inner-box">
                   <figure className="image-box">
-                    <Link href={`/blog/${blog.slug}`}>
+                    <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
                       <img src={blog.thumbnail} alt={blog.title} />
                     </Link>
                   </figure>
                   <div className="lower-content">
                     <h3>
-                      <Link href={`/blog/${blog.slug}`}>
+                      <Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
                         {blog.title.length > 40 ? blog.title.slice(0, 40) + "..." : blog.title}
                       </Link>
                     </h3>
                     <p>{blog.shortDesc}</p>
                     <div className="link">
-                      <Link href={`/blog/${blog.slug}`}>
+                      <Link href={`/blog/${blog.slug}`} aria-label="Read More">
                         <span>Read More</span>
                       </Link>
                     </div>

components/sections/home1/Testimonial.js

@@ -1,6 +1,8 @@
 import TestimonialSlider1 from '@/components/slider/TestimonialSlider1'
 import Link from "next/link";
-import Image from 'next/image';
+import Image from "next/image";
+
+
 
 export default function Testimonial() {
     return (
@@ -8,6 +10,7 @@ export default function Testimonial() {
             <section className="testimonial-section sec-pad bg-color-1">
                 <div className="bg-layer">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/home/testimonial-left.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -17,6 +20,7 @@ export default function Testimonial() {
 
                 <div className="pattern-layer">
                     <Image
+                        // loader={exportableLoader}
                         src="/assets/images/shape/shape-21.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -52,7 +56,7 @@ export default function Testimonial() {
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         className="theme-btn btn-one-new-raw"
-                                    >
+                                     aria-label="Review us on google">
                                         <span>Review us on Google</span>
                                     </Link>
                                 </div>

components/sections/home1/Video.js

@@ -1,7 +1,9 @@
 'use client'
 import React, { useState } from 'react';
 import Link from "next/link";
-import Image from 'next/image';
+import Image from "next/image";
+
+
 import ModalVideo from 'react-modal-video'
 export default function Video() {
   const [isOpen, setOpen] = useState(false)
@@ -10,6 +12,7 @@ export default function Video() {
       <section className="video-section p_relative">
         <div className="bg-layer parallax-bg" data-parallax='{"y": 100}'>
           <Image
+            // loader={exportableLoader}
             src="/assets/images/home/make-an-appointment/make-an-appopintment-bg.webp"
             alt="Physiotherapy at Rapharehab"
             fill
@@ -31,7 +34,7 @@ export default function Video() {
             </div> */}
             <h2>Expert Online Consultations <br />with our therapists.</h2>
             <div className="btn-box">
-              <Link href="/contact" className="theme-btn btn-one"><span>Schedule Your Consultation</span></Link>
+              <Link href="/contact" className="theme-btn btn-one" aria-label="Schedule your consultation"><span>Schedule Your Consultation</span></Link>
             </div>
           </div>
         </div>

components/sections/home2/Banner.js

@@ -142,18 +142,31 @@ export default function Banner() {
                             }}
                         >
                             <span className="upper-text mb-2" style={{ fontSize: "22px" }}>{s.upper}</span>
-                            <h1
-                                style={{
-                                    color: "#bc0000",
-                                    fontWeight: "bold",
-                                    fontSize: "64px",
-                                }}
-                            >
-                                {s.title}
-                            </h1>
+                            {/* ✅ Use <h1> for first slide only */}
+                            {s.id === 0 ? (
+                                <h1
+                                    style={{
+                                        color: "#bc0000",
+                                        fontWeight: "bold",
+                                        fontSize: "64px",
+                                    }}
+                                >
+                                    {s.title}
+                                </h1>
+                            ) : (
+                                <h3
+                                    style={{
+                                        color: "#bc0000",
+                                        fontWeight: "bold",
+                                        fontSize: "64px",
+                                    }}
+                                >
+                                    {s.title}
+                                </h3>
+                            )}
                             <p style={{ color: "#fff" }}>{s.desc}</p>
                             <div className="btn-box mt-3">
-                                <Link href={s.btn.link} className="theme-btn btn-one">
+                                <Link href={s.btn.link} className="theme-btn btn-one" aria-label="Banner Button">
                                     <span>{s.btn.text}</span>
                                 </Link>
                             </div>

components/sections/home2/Features.js

@@ -15,7 +15,7 @@ export default function Features() {
                     <div className="icon-box">
                       <img src="/assets/images/home/icons/experienced.webp" alt="Experienced Professionals" />
                     </div>
-                    <h3><Link href="/">Experienced <br/> Professionals</Link></h3>
+                    <h3><Link href="/" aria-label="Experienced professionals">Experienced <br/> Professionals</Link></h3>
                     {/* <p>Skilled experts deliver trusted professional healthcare with years of proven experience.</p> */}
                   </div>
                 </div>
@@ -27,7 +27,7 @@ export default function Features() {
                     <div className="icon-box">
                       <img src="/assets/images/home/icons/walk-in.webp" alt="Walk-in Appointments" />
                     </div>
-                    <h3><Link href="/">Walk-in<br/> Appointments</Link></h3>
+                    <h3><Link href="/" aria-label="Walk-in Appointments">Walk-in<br/> Appointments</Link></h3>
                     {/* <p>Get quick appointments with hassle-free, convenient scheduling today.</p> */}
                   </div>
                 </div>
@@ -39,7 +39,7 @@ export default function Features() {
                     <div className="icon-box">
                       <img src="/assets/images/home/icons/state.webp" alt="State-of-the-Art Technology" />
                     </div>
-                    <h3><Link href="/">State-of-the-Art Technology</Link></h3>
+                    <h3><Link href="/" aria-label="State-of-the-Art Technology">State-of-the-Art Technology</Link></h3>
                     {/* <p>Advanced tools ensure accurate results with modern, innovative solutions.</p> */}
                   </div>
                 </div>
@@ -51,7 +51,7 @@ export default function Features() {
                     <div className="icon-box">
                       <img src="/assets/images/home/icons/one.webp" alt="One-on-One care" />
                     </div>
-                    <h3><Link href="/">One-on-One <br /> Care</Link></h3>
+                    <h3><Link href="/" aria-label="One-on-One care">One-on-One <br /> Care</Link></h3>
                     {/* <p>Tailored attention provides focused treatments designed for unique needs.</p> */}
                   </div>
                 </div>

components/sections/home2/MobileBanner.js

@@ -124,7 +124,7 @@ export default function MobileBanner() {
             >
               <div className="content-box custom-content-box">
                 <span className="upper-text mb-2">{slide.upperText}</span>
-                <h2
+                <h1
                   style={{
                     fontSize: "32px",
                     lineHeight: "42px",
@@ -133,14 +133,14 @@ export default function MobileBanner() {
                   }}
                 >
                   {slide.title}
-                </h2>
+                </h1>
                 {/* {slide.subtitle && <p>{slide.subtitle}</p>} */}
                 {/* <p>{slide.description}</p> */}
                 <div className="btn-box mt-3">
                   <Link
                     href={slide.buttonLink}
                     className="theme-btn btn-one-new"
-                  >
+                   aria-label="Mobile Banner Button">
                     <span>{slide.buttonText}</span>
                   </Link>
                 </div>

components/sections/home2/Solution.js

@@ -1,49 +1,92 @@
-import React from 'react';
-import Link from "next/link"
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+// ✅ Progress bar (optional)
 const ProgressBar = ({ label, percent }) => (
   <div className="progress-box">
     <p>{label}</p>
     <div className="bar">
-      <div className="bar-inner count-bar" style={{ width: `${percent}%` }}></div>
+      <div
+        className="bar-inner count-bar"
+        style={{ width: `${percent}%` }}
+      ></div>
       <div className="count-text">{`${percent}%`}</div>
     </div>
   </div>
 );
+
 export default function Solution() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  // ✅ Image source changes by screen size
+  const imageSrc = isMobile
+    ? "/assets/images/home/trusted/trusted-physiotherapy-care-mbl.webp"
+    : "/assets/images/home/trusted/trusted-physiotherapy-care.webp";
+
   return (
     <section className="solutions-section p_relative">
       <div className="auto-container">
         <div className="row clearfix">
+          {/* ===== Left Column (Text) ===== */}
           <div className="col-lg-6 col-md-12 col-sm-12 content-column">
             <div className="content-box">
               <div className="sec-title mb-3">
                 <span className="sub-title">Association With</span>
                 <h2>Trusted Physiotherapy Care in Etobicoke</h2>
               </div>
-              <p className='pr_50'>
-                Our highly skilled physiotherapy team in Etobicoke is dedicated to helping you
-                restore mobility, relieve pain, and achieve your long-term health goals.
-                With a personalized treatment approach and patient-focused care, we are here
-                to support your journey toward better health and well-being.
+
+              <p className="pr_50">
+                Our highly skilled physiotherapy team in Etobicoke is dedicated
+                to helping you restore mobility, relieve pain, and achieve your
+                long-term health goals. With a personalized treatment approach
+                and patient-focused care, we are here to support your journey
+                toward better health and well-being.
               </p>
+
+              {/* ✅ Optional Progress Bars */}
               {/* <div className="progress-inner mb_50">
-              
-              <ProgressBar label="Skilled Doctor" percent={85} />
-              <ProgressBar label="Modernized Equipment" percent={90} />
-              <ProgressBar label="Dedicated Team" percent={80} />
-            </div> */}
+                <ProgressBar label="Skilled Doctor" percent={85} />
+                <ProgressBar label="Modernized Equipment" percent={90} />
+                <ProgressBar label="Dedicated Team" percent={80} />
+              </div> */}
 
               <div className="btn-box mt_50">
-                <Link href="/contact" className="theme-btn btn-one"><span>Contact Us</span></Link>
+                <Link href="/contact" className="theme-btn btn-one" aria-label="Contact-Us">
+                  <span>Contact Us</span>
+                </Link>
               </div>
             </div>
           </div>
+
+          {/* ===== Right Column (Image) ===== */}
           <div className="col-lg-6 col-md-12 col-sm-12 image-column">
             <div className="image_block_tw">
               <div className="image-box text-center">
-                <img
-                  src="/assets/images/home/trusted/trusted-physiotherapy-care.webp"
+                <Image
+                  src={imageSrc}
                   alt="Trusted Physiotherapy"
+                  width={600}
+                  height={400}
+                  priority
+                  quality={70}
+                  placeholder="blur"
+                  blurDataURL={imageSrc}
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  style={{
+                    width: "100%",
+                    height: "auto",
+                    borderRadius: "10px",
+                    objectFit: "cover",
+                  }}
                 />
               </div>
             </div>
@@ -51,7 +94,5 @@ export default function Solution() {
         </div>
       </div>
     </section>
-  )
-};
-
-
+  );
+}

next.config.js

@@ -11,6 +11,44 @@ const nextConfig = {
   //   modern: true,              // ✅ enable modern build (ES6+ for modern browsers)
   //   polyfillsOptimization: true // ✅ remove unnecessary polyfills
   // },
+  async headers() {
+    return [
+      {
+        // ✅ Cache static assets for 1 year
+        source: "/:all*(woff2|ttf|eot|otf|jpg|jpeg|png|webp|svg|gif|css|js)",
+        headers: [
+          { key: "Cache-Control", value: "public, max-age=31536000, immutable" },
+        ],
+      },
+      {
+        // ✅ Cache HTML for 10 mins
+        source: "/:all*(html)",
+        headers: [
+          { key: "Cache-Control", value: "public, max-age=600, must-revalidate" },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;
+
+// next.config.js
+// /** @type {import('next').NextConfig} */
+// const nextConfig = {
+//   output: 'export', // static HTML export
+//   trailingSlash: true,
+//   images: {
+//     // loader: 'custom', // required by next-image-export-optimizer
+//     unoptimized: true, // prevents runtime optimization
+//   },
+//   transpilePackages: ['next-image-export-optimizer'],
+//   env: {
+//     nextImageExportOptimizer_imageFolderPath: '/assets/images',
+//     nextImageExportOptimizer_exportFolderPath: 'out',
+//     nextImageExportOptimizer_quality: '65',
+//     nextImageExportOptimizer_storePicturesInWEBP: 'true',
+//   },
+// };
+
+// module.exports = nextConfig;

package-lock.json

@@ -27,6 +27,7 @@
         "wowjs": "^1.1.3"
       },
       "devDependencies": {
+        "next-export-optimize-images": "^4.7.0",
         "sitemap": "^8.0.0"
       }
     },
@@ -59,6 +60,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -167,6 +178,23 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-libvips-linux-s390x": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
@@ -275,6 +303,29 @@
         "@img/sharp-libvips-linux-arm64": "1.0.4"
       }
     },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
+      }
+    },
     "node_modules/@img/sharp-linux-s390x": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
@@ -382,6 +433,26 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-win32-ia32": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
@@ -988,6 +1059,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-wrap": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
@@ -997,6 +1078,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/app-root-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.1.0.tgz",
+      "integrity": "sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/arch": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -1925,6 +2016,19 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2419,6 +2523,13 @@
       "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -2934,6 +3045,21 @@
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
       "license": "MIT"
     },
+    "node_modules/fs-extra": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
+      "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3488,6 +3614,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3677,6 +3813,19 @@
       "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==",
       "license": "MIT"
     },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/junk": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/junk/-/junk-4.0.1.tgz",
@@ -3704,6 +3853,13 @@
         "json-buffer": "3.0.0"
       }
     },
+    "node_modules/lodash.uniqwith": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqwith/-/lodash.uniqwith-4.5.0.tgz",
+      "integrity": "sha512-7lYL8bLopMoy4CTICbxygAUq6CdRJ36vFc80DucPueUee+d5NBRxz3FdT9Pes/HEx5mPoT9jwnsEJWz1N7uq7Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3948,6 +4104,489 @@
         }
       }
     },
+    "node_modules/next-export-optimize-images": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/next-export-optimize-images/-/next-export-optimize-images-4.7.0.tgz",
+      "integrity": "sha512-j4DlEg50emzcB6bxIswSqNtOtqiR0Gno0BvmI3ndk2owca6vvzipThXcKEtKGjp0JuswkuPbWosbn3yb+8rC2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.3",
+        "app-root-path": "^3.1.0",
+        "cli-progress": "^3.12.0",
+        "fs-extra": "^11.3.1",
+        "lodash.uniqwith": "^4.5.0",
+        "recursive-readdir": "^2.2.3",
+        "sharp": "^0.34.3"
+      },
+      "bin": {
+        "next-export-optimize-images": "bin/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "next": "14.x || 15.x",
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0",
+        "react-dom": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-wasm32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.5.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/next-export-optimize-images/node_modules/sharp": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -4571,6 +5210,19 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/recursive-readdir": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/reserved-identifiers": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/reserved-identifiers/-/reserved-identifiers-1.0.0.tgz",
@@ -4947,6 +5599,34 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-dirs": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
@@ -5274,6 +5954,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/url-parse-lax": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "wowjs": "^1.1.3"
   },
   "devDependencies": {
+    "next-export-optimize-images": "^4.7.0",
     "sitemap": "^8.0.0"
   },
   "browserslist": [
@@ -40,4 +41,4 @@
     "last 2 Safari versions",
     "last 2 Edge versions"
   ]
-}
+}

public/assets/css/bootstrap.css

@@ -141,15 +141,32 @@ h3, .h3 {
   }
 }
 
+.recuression{
+
+  font-size: 1.25rem !important;
+
+}
+
 h4, .h4 {
   font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   h4, .h4 {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
   }
 }
 
+h3, .h3 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h3, .h3 {
+    font-size: 1.25rem;
+  }
+}
+
+
+
 h5, .h5 {
   font-size: 1.25rem;
 }

public/assets/css/color/crimson.css

@@ -8,6 +8,7 @@
 .sec-title .sub-title,
 .list-style-one li:before,
 .service-block-one .inner-box .lower-content h3 a:hover,
+.service-block-one .inner-box .lower-content h2 a:hover,
 .team-block-one .inner-box .lower-content h3 a:hover,
 .pricing-block-one .pricing-table .table-header h5,
 .pricing-block-one.active-block .pricing-table .table-header h2,

public/assets/css/color/orange.css

@@ -9,6 +9,7 @@
 .sec-title .sub-title,
 .list-style-one li:before,
 .service-block-one .inner-box .lower-content h3 a:hover,
+.service-block-one .inner-box .lower-content h2 a:hover,
 .team-block-one .inner-box .lower-content h3 a:hover,
 .pricing-block-one .pricing-table .table-header h5,
 .pricing-block-one.active-block .pricing-table .table-header h2,

public/assets/css/color/pink.css

@@ -8,6 +8,7 @@
 .sec-title .sub-title,
 .list-style-one li:before,
 .service-block-one .inner-box .lower-content h3 a:hover,
+.service-block-one .inner-box .lower-content h2 a:hover,
 .team-block-one .inner-box .lower-content h3 a:hover,
 .pricing-block-one .pricing-table .table-header h5,
 .pricing-block-one.active-block .pricing-table .table-header h2,

public/assets/css/color/theme-color.css

@@ -8,6 +8,7 @@
 .sec-title .sub-title,
 .list-style-one li:before,
 .service-block-one .inner-box .lower-content h3 a:hover,
+.service-block-one .inner-box .lower-content h2 a:hover,
 .team-block-one .inner-box .lower-content h3 a:hover,
 .pricing-block-one .pricing-table .table-header h5,
 .pricing-block-one.active-block .pricing-table .table-header h2,

public/assets/css/color/violet.css

@@ -8,6 +8,7 @@
 .sec-title .sub-title,
 .list-style-one li:before,
 .service-block-one .inner-box .lower-content h3 a:hover,
+.service-block-one .inner-box .lower-content h2 a:hover,
 .team-block-one .inner-box .lower-content h3 a:hover,
 .pricing-block-one .pricing-table .table-header h5,
 .pricing-block-one.active-block .pricing-table .table-header h2,

public/assets/css/flaticon.css

@@ -1,16 +1,18 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?tin97q');
-  src:  url('../fonts/icomoon.eot?tin97q#iefix') format('embedded-opentype'),
+  src: url('../fonts/icomoon.eot?tin97q');
+  src: url('../fonts/icomoon.eot?tin97q#iefix') format('embedded-opentype'),
     url('../fonts/icomoon.ttf?tin97q') format('truetype'),
     url('../fonts/icomoon.woff?tin97q') format('woff'),
     url('../fonts/icomoon.svg?tin97q#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
-  font-display: block;
+  /* font-display: block; */
+  font-display: swap;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: never;
@@ -28,114 +30,151 @@
 .icon-1:before {
   content: "\e900";
 }
+
 .icon-2:before {
   content: "\e901";
 }
+
 .icon-3:before {
   content: "\e902";
 }
+
 .icon-4:before {
   content: "\e903";
 }
+
 .icon-5:before {
   content: "\e904";
 }
+
 .icon-6:before {
   content: "\e905";
 }
+
 .icon-7:before {
   content: "\e906";
 }
+
 .icon-8:before {
   content: "\e907";
 }
+
 .icon-9:before {
   content: "\e908";
 }
+
 .icon-10:before {
   content: "\e909";
 }
+
 .icon-11:before {
   content: "\e90a";
 }
+
 .icon-12:before {
   content: "\e90b";
 }
+
 .icon-13:before {
   content: "\e90c";
 }
+
 .icon-14:before {
   content: "\e90d";
 }
+
 .icon-15:before {
   content: "\e90e";
 }
+
 .icon-16:before {
   content: "\e90f";
 }
+
 .icon-17:before {
   content: "\e910";
 }
+
 .icon-18:before {
   content: "\e911";
 }
+
 .icon-19:before {
   content: "\e912";
 }
+
 .icon-20:before {
   content: "\e913";
 }
+
 .icon-21:before {
   content: "\e914";
 }
+
 .icon-22:before {
   content: "\e915";
 }
+
 .icon-23:before {
   content: "\e916";
 }
+
 .icon-24:before {
   content: "\e917";
 }
+
 .icon-25:before {
   content: "\e918";
 }
+
 .icon-26:before {
   content: "\e919";
 }
+
 .icon-27:before {
   content: "\e91a";
 }
+
 .icon-28:before {
   content: "\e91b";
 }
+
 .icon-29:before {
   content: "\e91c";
 }
+
 .icon-30:before {
   content: "\e91d";
 }
+
 .icon-31:before {
   content: "\e91e";
 }
+
 .icon-32:before {
   content: "\e91f";
 }
+
 .icon-33:before {
   content: "\e920";
 }
+
 .icon-34:before {
   content: "\e921";
 }
+
 .icon-35:before {
   content: "\e922";
 }
+
 .icon-36:before {
   content: "\e923";
 }
+
 .icon-37:before {
   content: "\e924";
 }
+
 .icon-38:before {
   content: "\e925";
 }

public/assets/css/module-css/about.css

@@ -772,24 +772,47 @@
 }
 
 @media only screen and (max-width: 376px) and (min-width: 200px) {
-  
-  .image_block_three .image-box .icon-box{
+
+  .image_block_three .image-box .icon-box {
 
     display: none !important;
 
 
   }
 
-  .image_block_two .image-box .icon-box{
+  .image_block_two .image-box .icon-box {
 
-      display: none !important;
+    display: none !important;
 
   }
 
-  .image_block_three .image-box{
+  .image_block_three .image-box {
 
     margin-right: 0px !important;
 
   }
 
+}
+
+.about-main-image {
+  min-height: 420px
+}
+
+.welcome-image-home {
+  width: 600px;
+  height: 420px;
+}
+
+@media (max-width:768px) {
+
+  .about-main-image {
+    min-height: 300px
+  }
+}
+
+@media (max-width:500px) {
+  .welcome-image-home {
+    width: 382px !important;
+    height: 358px !important;
+  }
 }

public/assets/css/module-css/banner.css

@@ -778,4 +778,55 @@
     padding: 15px 20px !important;
   }
 } */
- 
+ 
+
+.new .logo-box {
+
+  width:8%
+}
+
+.logo-box{
+  width:10%
+}
+
+@media (max-width:1500px) {
+.logo-box{
+  width:9%
+}
+.new .logo-box {
+  width:8%
+}
+
+}
+
+
+@media (max-width:1450px) {
+.logo-box{
+  width:8%
+}
+.new .logo-box {
+  width:8%
+}
+
+}
+
+@media (max-width:992px) {
+.logo-box{
+  width:15%
+}
+.new .logo-box {
+  width:12%
+}
+
+}
+
+@media (max-width:500px) {
+.logo-box{
+  width:30%
+}
+.new .logo-box {
+  width:30%
+}
+
+
+}

public/assets/css/module-css/contact.css

@@ -45,6 +45,15 @@
   margin-bottom: 16px;
 }
 
+.info-block-one h2{
+  display: block;
+  font-size: 22px;
+  line-height: 22px;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+
+
 .info-block-one .inner-box{
   position: relative;
   display: block;

public/assets/css/module-css/faq.css

@@ -27,6 +27,20 @@
   font-weight: 600;
 }
 
+.accordion .acc-btn h4 {
+  display: block;
+  font-size: 18px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
+.accordion .acc-btn h3 {
+  display: block;
+  font-size: 18px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
 .accordion .acc-btn.active {
   background: var(--theme-color);
 }
@@ -35,6 +49,15 @@
   color: #fff;
 }
 
+.accordion .acc-btn.active h4 {
+  color: #fff;
+}
+
+.accordion .acc-btn.active h3 {
+  color: #fff;
+}
+
+
 .accordion .acc-btn .icon-box {
   position: absolute;
   display: inline-block;
@@ -110,6 +133,20 @@
   font-weight: 600;
 }
 
+  .accordion .acc-btn h4 {
+  display: block;
+  font-size: 15px !important;
+  line-height: 30px;
+  font-weight: 600;
+}
+
+  .accordion .acc-btn h3 {
+  display: block;
+  font-size: 15px !important;
+  line-height: 30px;
+  font-weight: 600;
+}
+
   .accordion .acc-btn {
     position: relative;
     padding: 20px 20px 20px 20px !important;

public/assets/css/module-css/service.css

@@ -192,6 +192,15 @@
   margin-bottom: 15px;
 }
 
+.service-block-one .inner-box .lower-content h2 {
+  position: relative;
+  display: block;
+  font-size: 26px;
+  line-height: 36px;
+  font-weight: 600;
+  margin-bottom: 15px;
+}
+
 .service-block-one .inner-box .lower-content-new h3 {
   position: relative;
   display: block;
@@ -201,6 +210,15 @@
   margin-bottom: 10px;
 }
 
+.service-block-one .inner-box .lower-content-new h2 {
+  position: relative;
+  display: block;
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
 .service-block-one .inner-box .lower-content h3 a {
   display: inline-block;
   color: var(--title-color);
@@ -216,10 +234,36 @@
 
 }
 
+.service-block-one .inner-box .lower-content-new h2 a {
+  display: inline-block;
+  color: var(--title-color);
+  transition: color 300ms ease;
+  font-size: 22px;
+  line-height: 28px;
+
+}
+
+.service-block-one .inner-box .lower-content-new h2 a {
+  display: inline-block;
+  color: var(--title-color);
+  transition: color 300ms ease;
+  font-size: 22px;
+  line-height: 28px;
+
+}
+
 .service-block-one .inner-box .lower-content-new h3 a:hover {
   color: var(--theme-color);
 }
 
+.service-block-one .inner-box .lower-content-new h2 a:hover {
+  color: var(--theme-color);
+}
+
+.service-block-one .inner-box .lower-content-new h2 a:hover {
+  color: var(--theme-color);
+}
+
 .service-block-one .inner-box .lower-content h3 a:hover {
   color: var(--theme-color);
 }
@@ -345,6 +389,23 @@
   line-height: 28px !important;
 }
 
+.service-block-one .inner-box .lower-content-new h2 a {
+  display: inline-block;
+  color: var(--title-color);
+  transition: color 300ms ease;
+  font-size: 23px !important;
+  line-height: 28px !important;
+}
+
+.service-block-one .inner-box .lower-content-new h2 a {
+  display: inline-block;
+  color: var(--title-color);
+  transition: color 300ms ease;
+  font-size: 23px !important;
+  line-height: 28px !important;
+}
+
+
 }
 
 
@@ -371,6 +432,20 @@
 
 }
 
+.service-block-one .inner-box .lower-content-new h2 a {
+
+  font-size: 20px !important;
+  line-height: 22px !important;
+
+}
+
+.service-block-one .inner-box .lower-content-new h2 a {
+
+  font-size: 20px !important;
+  line-height: 22px !important;
+
+}
+
 
 
 .text-start{
@@ -400,6 +475,20 @@
   font-size: 17px !important;
   line-height: 30px !important;
 
+}
+
+ .service-block-one .inner-box .lower-content-new h2 a {
+
+  font-size: 17px !important;
+  line-height: 30px !important;
+
+}
+
+ .service-block-one .inner-box .lower-content-new h2 a {
+
+  font-size: 17px !important;
+  line-height: 30px !important;
+
 }
 
 .text-start{
@@ -445,6 +534,20 @@
   font-size: 17px !important;
   line-height: 20px !important;
 
+}
+
+  .service-block-one .inner-box .lower-content-new h2 a {
+
+  font-size: 17px !important;
+  line-height: 20px !important;
+
+}
+
+  .service-block-one .inner-box .lower-content-new h2 a {
+
+  font-size: 17px !important;
+  line-height: 20px !important;
+
 }
 }
 
@@ -463,6 +566,10 @@
   .default-sidebar .widget-title h3 {
     font-size: 30px !important;
   }
+
+    .default-sidebar .widget-title h2 {
+    font-size: 30px !important;
+  }
 }
 @media (min-width: 992px) and (max-width: 992px) {
   .service-block-one .inner-box .lower-content h3 {

public/assets/css/module-css/sidebar.css

@@ -36,6 +36,13 @@
   font-weight: 600;
 }
 
+.default-sidebar .widget-title h2 {
+  display: block;
+  font-size: 36px;
+  line-height: 46px;
+  font-weight: 600;
+}
+
 .default-sidebar .widget-content {
   position: relative;
   padding: 30px 30px 40px 45px;

public/assets/css/style.css

@@ -854,10 +854,7 @@
    color: #fff !important;
  }
 
- .new-color2 {
-   color: #fff !important;
-   font-size: 18px;
- }
+
 
  .sec-title h2 {
    position: relative;
@@ -3343,6 +3340,11 @@
    background: #bc0000;
  }
 
+  .new-color2 {
+   color: #fff !important;
+   font-size: 18px;
+ }
+
 
  .theme-btn-2:before,
  .theme-btn-2:after {
@@ -3760,6 +3762,11 @@
      font-size: 26px !important;
      line-height: 32px;
    }
+
+   .new-color2 {
+     color: #fff !important;
+     font-size: 18px !important;
+   }
  }
 
  @media (max-width: 768px) {
@@ -3894,4 +3901,8 @@
      margin-bottom: 17px;
    }
 
+ }
+ .chat-form {
+  width: 100%;
+  height: 46px;
  }