about section performance updated

components/sections/home/AboutSection.js

@@ -5,33 +5,35 @@ import React from "react";
 export default function AboutSection() {
   return (
     <section className="about-style-two pt_90 pb_90 relative overflow-hidden">
-      {/* Pattern Layers */}
+      {/* Pattern Layers with fixed sizes */}
       <div className="pattern-layer">
-        <div className="pattern-1 rotate-me absolute">
+        <div className="pattern-1 rotate-me absolute w-[120px] h-[120px]">
           <Image
             src="/assets/images/shape/shape-8.webp"
             alt="Decorative shape"
             fill
-            priority={false}
+            sizes="120px"
-            sizes="15vw"
             style={{ objectFit: "contain" }}
+            priority={false}
           />
         </div>
-        <div className="pattern-2 rotate-me absolute">
+
+        <div className="pattern-2 rotate-me absolute w-[140px] h-[140px]">
           <Image
             src="/assets/images/shape/shape-9.webp"
             alt="Decorative shape"
             fill
-            sizes="15vw"
+            sizes="140px"
             style={{ objectFit: "contain" }}
           />
         </div>
-        <div className="pattern-3 absolute">
+
+        <div className="pattern-3 absolute w-[150px] h-[150px]">
           <Image
             src="/assets/images/shape/shape-11.webp"
             alt="Decorative shape"
             fill
-            sizes="15vw"
+            sizes="150px"
             style={{ objectFit: "contain" }}
           />
         </div>
@@ -44,7 +46,7 @@ export default function AboutSection() {
             <div className="image_block_one relative">
               <div className="image-box relative">
                 {/* Background Shape */}
-                <div className="image-shape absolute inset-0 -z-10">
+                <div className="image-shape absolute inset-0 -z-10 w-[600px] h-[500px]">
                   <Image
                     src="/assets/images/shape/shape-26.webp"
                     alt="Background shape"
@@ -55,7 +57,7 @@ export default function AboutSection() {
                 </div>
 
                 {/* Main Hero Image (LCP) */}
-                <figure className="image-2 relative">
+                <figure className="image-2 relative min-h-[420px]">
                   <Image
                     src="/assets/images/home/welcome/home-welcome.webp"
                     alt="Physiotherapy"
@@ -65,28 +67,34 @@ export default function AboutSection() {
                     sizes="(max-width: 768px) 100vw, 50vw"
                     placeholder="blur"
                     blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
-                    style={{ borderRadius: "8px", width: "100%", height: "auto" }}
+                    style={{
+                      borderRadius: "8px",
+                      width: "100%",
+                      height: "auto",
+                    }}
                   />
                 </figure>
 
                 {/* Top Icon */}
-                <div className="icon-one absolute top-0 left-0">
+                <div className="icon-one absolute top-0 left-0 w-[40px] h-[40px]">
                   <Image
                     src="/assets/images/home/welcome/top-icon.webp"
                     alt="Top decorative icon"
-                    width={40}
+                    fill
-                    height={40}
+                    sizes="40px"
+                    style={{ objectFit: "contain" }}
                     loading="lazy"
                   />
                 </div>
 
                 {/* Bottom Icon */}
-                <div className="icon-two absolute bottom-0 right-0">
+                <div className="icon-two absolute bottom-0 right-0 w-[40px] h-[40px]">
                   <Image
                     src="/assets/images/home/welcome/bottom-icon.webp"
                     alt="Bottom decorative icon"
-                    width={40}
+                    fill
-                    height={40}
+                    sizes="40px"
+                    style={{ objectFit: "contain" }}
                     loading="lazy"
                   />
                 </div>
@@ -105,8 +113,10 @@ export default function AboutSection() {
 
                 <div className="text-box mb_40">
                   <p>
-                    At Rapha Rehab, we specialize in evidence-based physiotherapy tailored to your needs.
+                    At Rapha Rehab, we specialize in evidence-based
-                    Our expert care helps you recover, relieve pain, and regain strength for a better quality of life.
+                    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>
@@ -117,7 +127,10 @@ export default function AboutSection() {
                 </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>