From 3b28c6907d85c0ab8d4c10ed338bc85e19e63288 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Wed, 29 Oct 2025 17:01:27 +0530
Subject: [PATCH] performance issues fixed

---
 app/layout.js                            |   2 +-
 app/page.js                              | 101 ++++++++++++-----------
 components/sections/home/AboutSection.js |  13 ++-
 public/assets/css/module-css/about.css   |  12 +++
 4 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/app/layout.js b/app/layout.js
index af301e0..a60710e 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -10,7 +10,7 @@ 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 }) {
diff --git a/app/page.js b/app/page.js
index 3f5b881..1707b9f 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,53 +1,58 @@
-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";
+import { useState, useEffect } from "react";
+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";
 
-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.",
-};
+// 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.",
+// };
 
 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(() => {
+    // Run only in browser
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
 
-            </Layout>
-        </>
-    )
-} 
\ No newline at end of file
+  return (
+    <Layout headerStyle={2} footerStyle={2}>
+      {/* Prevent layout shift */}
+      <section style={{ minHeight: "100vh", position: "relative" }}>
+        {isMobile ? <MobileBanner /> : <Banner />}
+      </section>
+
+      <AboutSection />
+
+      {isMobile ? <MobileServices /> : <ServicesSection />}
+
+      <MobileFeatureCard />
+      <Features />
+      <FaqSection />
+      <AreaOfInjury />
+      <WhyChooseUsSection />
+      <CounterSection />
+      <Testimonial />
+      <Solution />
+      <Video />
+    </Layout>
+  );
+}
diff --git a/components/sections/home/AboutSection.js b/components/sections/home/AboutSection.js
index a11ece1..5778cff 100644
--- a/components/sections/home/AboutSection.js
+++ b/components/sections/home/AboutSection.js
@@ -110,18 +110,15 @@ export default function AboutSection() {
                     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
-                    fetchPriority="high"
-                   sizes="(max-width: 768px) 100vw, 382px"
+                    quality={70}  // ✅ reduce file size without visible loss
                     placeholder="blur"
                     blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
-                    style={{
-                      borderRadius: "8px",
-                      width: "100%",
-                      height: "auto",
-                      display: "block",
-                    }}
+                    style={{ width: "100%", height: "auto", borderRadius: "8px", display: "block" }}
                   />
+
                 </figure>
 
                 {/* Top Icon */}
diff --git a/public/assets/css/module-css/about.css b/public/assets/css/module-css/about.css
index 66be13e..ab99f06 100644
--- a/public/assets/css/module-css/about.css
+++ b/public/assets/css/module-css/about.css
@@ -798,9 +798,21 @@
   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;
+  }
 }
\ No newline at end of file