performance issues fixed

.gitignore

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

app/about-us/AboutClient.js

@@ -4,7 +4,10 @@ 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 Image from 'next-image-export-optimizer';;
+import exportableLoader from 'next-image-export-optimizer';
+
+
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import 'swiper/css';
@@ -81,6 +84,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 +95,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 +105,7 @@ export default function Home() {
 
                     <div className="shape-5">
                       <Image
+                       loader={exportableLoader}
                         src="/assets/images/shape/shape-11.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -139,6 +145,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 +167,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
@@ -299,6 +307,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 +318,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/caregivers/CaregiversPage.js

@@ -2,7 +2,10 @@
 import Layout from "@/components/layout/Layout";
 import Link from "next/link";
 import { useState } from 'react';
-import Image from "next/image";
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 import { teamMembers } from "@/utils/constant.utils";
 
 export default function Home() {
@@ -30,6 +33,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

app/layout.js

@@ -22,10 +22,17 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en" className={`${poppins.variable}`}>
 
-
-
       <head>
 
+        {/* ✅ Preload critical font */}
+        <link
+          rel="preload"
+          href="/fonts/poppins.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+
         {/* ✅ Canonical Tag */}
         <link rel="canonical" href="https://rapharehab.ca/" />
 

app/ourapproach-physiotherapy-etobicoke/page.js

@@ -1,6 +1,9 @@
 import Link from "next/link"
 import Layout from "@/components/layout/Layout"
-import Image from "next/image";
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 
 export const metadata = {
   title: "Our Healing Approach – Rapharehab’s Proven Methods",
@@ -18,6 +21,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 +40,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 +50,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 +69,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 +79,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/shortcodes/ShortcodesClient.js

@@ -5,7 +5,10 @@ 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-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 import { teamMembers } from "@/utils/constant.utils";
 
 export default function Home() {
@@ -349,6 +352,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 +368,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
@@ -486,6 +491,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 +501,7 @@ export default function Home() {
 
                 <div className="pattern-layer">
                     <Image
+                        loader={exportableLoader}
                         src="/assets/images/shape/shape-21.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill

app/what-to-expect/page.js

@@ -1,6 +1,9 @@
 import Link from "next/link"
 import Layout from "@/components/layout/Layout"
-import Image from "next/image";
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 
 export const metadata = {
     title: "What to expect at Physiotherapy Etobicoke - Rapha Physiotherapy etobicoke",
@@ -24,6 +27,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 +37,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 +56,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 +66,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,7 +1,11 @@
 'use client';
 import Layout from "@/components/layout/Layout";
 import Link from "next/link";
-import Image from "next/image";
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
+
 export default function Team() {
     const teamMembers = [
         // { name: 'Musculoskeletal Physiotherapy', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
@@ -24,6 +28,7 @@ export default function Team() {
                 <div className="pattern-layer">
                     <div className="pattern-1">
                         <Image
+                            loader={exportableLoader}
                             src="/assets/images/shape/shape-13.webp"
                             alt="Physiotherapy at Rapharehab"
                             fill
@@ -33,6 +38,7 @@ export default function Team() {
 
                     <div className="pattern-2">
                         <Image
+                            loader={exportableLoader}
                             src="/assets/images/shape/shape-14.webp"
                             alt="Physiotherapy at Rapharehab"
                             fill
@@ -82,6 +88,7 @@ export default function Team() {
             <section className="testimonial-style-two pb_90 p_relative">
                 <div className="pattern-layer">
                     <Image
+                        loader={exportableLoader}
                         src="/assets/images/shape/shape-19.png"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -163,6 +170,7 @@ export default function Team() {
             <section className="video-section p_relative">
                 <div className="bg-layer parallax-bg" data-parallax='{"y": 100}'>
                     <Image
+                        loader={exportableLoader}
                         src="/assets/images/why-us/bg.webp"
                         alt=" Physiotherapy at Rapharehab "
                         fill
@@ -175,6 +183,7 @@ export default function Team() {
                     <div className="inner-box">
                         <div className="shape new-arrow">
                             <Image
+                                loader={exportableLoader}
                                 src="/assets/images/shape/shape-17.png"
                                 alt="Physiotherapy at Rapharehab"
                                 fill

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]')
+    const elements = document.querySelectorAll("[data-bg]");
 
+    requestAnimationFrame(() => {
       elements.forEach((element) => {
-            element.style.backgroundImage = `url(${element.getAttribute('data-bg')})`
-        })
-    }, [])
-    return (
-        <>
+        const bg = element.getAttribute("data-bg");
+        if (bg) element.style.backgroundImage = `url(${bg})`;
+      });
+    });
+  }, []);
 
-        </>
-    )
+  return null;
 }

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/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} />

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

@@ -1,33 +0,0 @@
-import Link from "next/link"
-// import { useRouter } from "next/router"
-
-export default function Menu() {
-    // const router = useRouter()
-
-    return (
-        <>
-
-            {/* <ul className="sub-menu">
-                <Link className={router.pathname == "/" ? "active" : ""}>Home Default</Link>
-                <Link className={router.pathname == "/index-2" ? "active" : ""}>Home Interior</Link>
-            </ul> */}
-
-            <ul className="navigation clearfix">
-                <li className=" dropdown"><Link href="/">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>
-                    </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> 
-            </ul>
-
-        </>
-    )
-}

components/layout/Sidebar.js

@@ -1,59 +0,0 @@
-import Link from "next/link"
-
-export default function Sidebar({ isSidebar, handleSidebar }) {
-    return (
-        <>
-
-
-            <div className={`xs-sidebar-group info-group info-sidebar ${isSidebar ? "isActive" : ""}`} >
-            <div className="xs-overlay xs-bg-black"></div>
-            <div className="xs-overlay xs-overlay-2 xs-bg-black" onClick={handleSidebar}></div>
-            <div className="xs-overlay xs-overlay-3 xs-bg-black" onClick={handleSidebar}></div>
-            <div className="xs-overlay xs-overlay-4 xs-bg-black" onClick={handleSidebar}></div>
-            <div className="xs-overlay xs-overlay-5 xs-bg-black" onClick={handleSidebar}></div>
-            <div className="xs-sidebar-widget">
-                <div className="sidebar-widget-container">
-                    <div className="widget-heading">
-                        <a className="close-side-widget" onClick={handleSidebar}><i className="fa fa-times"></i></a>
-                    </div>
-                    <div className="sidebar-textwidget">
-                        <div className="sidebar-info-contents">
-                            <div className="content-inner">
-                                <div className="logo">
-                                    <Link href="/"><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>
-                                </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>
-                                    </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>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-
-
-
-
-        </>
-    )
-}

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,169 @@
-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-optimizer";
+import exportableLoader from "next-image-export-optimizer";
 
 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
+            loader={exportableLoader}
             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
+            loader={exportableLoader}
             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
+            loader={exportableLoader}
             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
+                    loader={exportableLoader}
                     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"
+                    loading="lazy"
+                    decoding="async"
+                    style={{ objectFit: "contain", display: "block" }}
                   />
                 </div>
 
-                {/* Main Hero Image (LCP) */}
-                <figure className="image-2 relative min-h-[420px]">
+                {/* Main Hero Image */}
+                <figure
+                  className="image-2 relative about-main-image"
+                  style={{
+                    width: "100%",
+                    maxWidth: "600px",
+                    aspectRatio: "3 / 3",
+                    overflow: "hidden",
+                  }}
+                >
                   <Image
+                    loader={exportableLoader}
                     src="/assets/images/home/welcome/home-welcome.webp"
-                    alt="Physiotherapy"
+                    alt="Physiotherapy at Rapha Rehab"
                     width={600}
                     height={420}
                     priority
-                    sizes="(max-width: 768px) 100vw, 50vw"
+                    fetchPriority="high"
+                   sizes="(max-width: 768px) 100vw, 382px"
                     placeholder="blur"
                     blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
                     style={{
                       borderRadius: "8px",
                       width: "100%",
                       height: "auto",
+                      display: "block",
                     }}
                   />
                 </figure>
 
                 {/* 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
+                    loader={exportableLoader}
                     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
+                    loader={exportableLoader}
                     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 +174,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">
                     <span>Explore Our Service</span>
                   </Link>
                 </div>

components/sections/home/AreaOfInjury.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import Link from "next/link";
-import Image from 'next/image';
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils';
 
 export default function AreaOfInjury() {
@@ -20,6 +23,7 @@ export default function AreaOfInjury() {
             <div className="pattern-layer">
                 <div className="pattern-1">
                     <Image
+                        loader={exportableLoader}
                         src="/assets/images/shape/shape-13.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill
@@ -29,6 +33,7 @@ export default function AreaOfInjury() {
 
                 <div className="pattern-2">
                     <Image
+                        loader={exportableLoader}
                         src="/assets/images/shape/shape-14.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill

components/sections/home/FaqSection.js

@@ -1,7 +1,10 @@
 'use client'
 import Layout from "@/components/layout/Layout"
 import Link from "next/link"
-import Image from "next/image"
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 import { useState } from 'react'
 export default function FaqSection() {
     const [isActive, setIsActive] = useState({
@@ -36,6 +39,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 +49,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 +68,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 +78,7 @@ export default function FaqSection() {
 
                                     <div className="shape-5">
                                         <Image
+                                            loader={exportableLoader}
                                             src="/assets/images/shape/shape-11.webp"
                                             alt="Physiotherapy at Rapharehab"
                                             fill

components/sections/home/MobileServicesSection.js

@@ -1,6 +1,8 @@
 import { servicesList } from "@/utils/Services.utils"
 import Link from "next/link"
-import Image from "next/image"
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
 
 
 export default function MobileServices() {
@@ -10,6 +12,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

components/sections/home/ProcessSection.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import Image from 'next/image';
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 
 export default function ProcessSection() {
     return (
         <section className="process-section sec-pad bg-color-1">
             <div className="pattern-layer">
                 <Image
+                    loader={exportableLoader}
                     src="/assets/images/shape/shape-19.png"
                     alt="Physiotherapy at Rapharehab"
                     fill
@@ -25,6 +29,7 @@ export default function ProcessSection() {
                 <div className="inner-container">
                     <div className="arrow-shape">
                         <Image
+                            loader={exportableLoader}
                             src="/assets/images/shape/shape-18.webp"
                             alt="Physiotherapy at Rapharehab"
                             fill

components/sections/home/ServicesSection.js

@@ -1,7 +1,10 @@
 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-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 
 export default function ServicesSection() {
     return (
@@ -9,6 +12,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 +22,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

components/sections/home/WhyChooseusSection.js

@@ -1,12 +1,16 @@
 import Link from 'next/link';
 import React from 'react';
-import Image from 'next/image';
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 
 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 +21,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/Testimonial.js

@@ -1,6 +1,9 @@
 import TestimonialSlider1 from '@/components/slider/TestimonialSlider1'
 import Link from "next/link";
-import Image from 'next/image';
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 
 export default function Testimonial() {
     return (
@@ -8,6 +11,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 +21,7 @@ export default function Testimonial() {
 
                 <div className="pattern-layer">
                     <Image
+                        loader={exportableLoader}
                         src="/assets/images/shape/shape-21.webp"
                         alt="Physiotherapy at Rapharehab"
                         fill

components/sections/home1/Video.js

@@ -1,7 +1,10 @@
 'use client'
 import React, { useState } from 'react';
 import Link from "next/link";
-import Image from 'next/image';
+import Image from 'next-image-export-optimizer';
+import exportableLoader from 'next-image-export-optimizer';
+
+
 import ModalVideo from 'react-modal-video'
 export default function Video() {
   const [isOpen, setOpen] = useState(false)
@@ -10,6 +13,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

next.config.js

@@ -1,16 +1,35 @@
+// /** @type {import('next').NextConfig} */
+// const nextConfig = {
+//   output: "export",            // keep: needed for next export
+//   trailingSlash: true,
+//   images: {
+//     unoptimized: true,         // ✅ needed
+//   },
+//   swcMinify: true,             // explicit SWC minify
+//   // experimental: {
+//   //   forceSwcTransforms: true,  // use SWC only
+//   //   modern: true,              // ✅ enable modern build (ES6+ for modern browsers)
+//   //   polyfillsOptimization: true // ✅ remove unnecessary polyfills
+//   // },
+// };
+
+// module.exports = nextConfig;
+// next.config.js
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export",            // keep: needed for next export
+  output: 'export', // static HTML export
   trailingSlash: true,
   images: {
-    unoptimized: true,         // ✅ needed
+    // loader: 'custom', // required by next-image-export-optimizer
+    unoptimized: true, // prevents runtime optimization
+  },
+  transpilePackages: ['next-image-export-optimizer'],
+  env: {
+    nextImageExportOptimizer_imageFolderPath: 'public/assets/images',
+    nextImageExportOptimizer_exportFolderPath: 'out',
+    nextImageExportOptimizer_quality: '65',
+    nextImageExportOptimizer_storePicturesInWEBP: 'true',
   },
-  swcMinify: true,             // explicit SWC minify
-  // experimental: {
-  //   forceSwcTransforms: true,  // use SWC only
-  //   modern: true,              // ✅ enable modern build (ES6+ for modern browsers)
-  //   polyfillsOptimization: true // ✅ remove unnecessary polyfills
-  // },
 };
 
 module.exports = nextConfig;

package-lock.json

@@ -18,6 +18,7 @@
         "isotope-layout": "^3.0.6",
         "keen-slider": "^6.8.6",
         "next": "^14.0.4-canary.36",
+        "next-image-export-optimizer": "^1.19.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-google-recaptcha": "^3.1.0",
@@ -3948,6 +3949,26 @@
         }
       }
     },
+    "node_modules/next-image-export-optimizer": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/next-image-export-optimizer/-/next-image-export-optimizer-1.19.0.tgz",
+      "integrity": "sha512-DHecMn1FE3xPyABXf9CUelJwzFrHgGt2RQIQLIB9kN1wUfm+6lEjZD4beku8T9NXG2heWHku3AU+ohZV+tGYFw==",
+      "license": "MIT",
+      "dependencies": {
+        "sharp": "^0.33.1",
+        "typescript": "^5.2.2"
+      },
+      "bin": {
+        "next-image-export-optimizer": "dist/optimizeImages.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "next": "^14.2.18 || ^15.0.3",
+        "react": "^18.2.0 || ^19.0.0-0"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -5240,6 +5261,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/uint8array-extras": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.5.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "isotope-layout": "^3.0.6",
     "keen-slider": "^6.8.6",
     "next": "^14.0.4-canary.36",
+    "next-image-export-optimizer": "^1.19.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^3.1.0",

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

@@ -793,3 +793,14 @@
   }
 
 }
+
+.about-main-image {
+  min-height: 420px
+}
+
+@media (max-width:768px) {
+
+  .about-main-image {
+    min-height: 300px
+  }
+}

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

@@ -779,3 +779,54 @@
   }
 } */
  
+
+.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%
+}
+
+
+}