From 18bee619e9c1a38505d66985972c84421edc32fe Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Fri, 3 Oct 2025 17:18:55 +0530
Subject: [PATCH] about section updated for performance issues

---
 components/sections/home/AboutSection.js | 85 +++++++++++++++++-------
 1 file changed, 61 insertions(+), 24 deletions(-)

diff --git a/components/sections/home/AboutSection.js b/components/sections/home/AboutSection.js
index 1d92923..1094beb 100644
--- a/components/sections/home/AboutSection.js
+++ b/components/sections/home/AboutSection.js
@@ -1,56 +1,93 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import React from 'react';
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
 
 export default function AboutSection() {
   return (
-    <section className="about-style-two pt_90 pb_90">
+    <section className="about-style-two pt_90 pb_90 relative overflow-hidden">
+      {/* Pattern Layers */}
       <div className="pattern-layer">
-        <div className="pattern-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div>
-        <div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-9.webp)' }}></div>
-        <div className="pattern-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
+        <div className="pattern-1 rotate-me absolute">
+          <Image
+            src="/assets/images/shape/shape-8.webp"
+            alt="Decorative shape"
+            fill
+            priority={false}
+            sizes="15vw"
+            style={{ objectFit: "contain" }}
+          />
+        </div>
+        <div className="pattern-2 rotate-me absolute">
+          <Image
+            src="/assets/images/shape/shape-9.webp"
+            alt="Decorative shape"
+            fill
+            sizes="15vw"
+            style={{ objectFit: "contain" }}
+          />
+        </div>
+        <div className="pattern-3 absolute">
+          <Image
+            src="/assets/images/shape/shape-11.webp"
+            alt="Decorative shape"
+            fill
+            sizes="15vw"
+            style={{ objectFit: "contain" }}
+          />
+        </div>
       </div>
 
       <div className="auto-container">
         <div className="row clearfix">
           {/* Image Column */}
           <div className="col-lg-6 col-md-12 col-sm-12 image-column">
-            <div className="image_block_one">
-              <div className="image-box">
-                <div className="image-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-26.webp)' }}></div>
+            <div className="image_block_one relative">
+              <div className="image-box relative">
+                {/* Background Shape */}
+                <div className="image-shape absolute inset-0 -z-10">
+                  <Image
+                    src="/assets/images/shape/shape-26.webp"
+                    alt="Background shape"
+                    fill
+                    sizes="50vw"
+                    style={{ objectFit: "contain" }}
+                  />
+                </div>
 
-                {/* Main Hero Image */}
-                <figure className="image-2">
+                {/* Main Hero Image (LCP) */}
+                <figure className="image-2 relative">
                   <Image
                     src="/assets/images/home/welcome/home-welcome.webp"
                     alt="Physiotherapy"
-                    width={800}           // actual image width
-                    height={500}          // actual image height
+                    width={600}
+                    height={420}
                     priority
                     sizes="(max-width: 768px) 100vw, 50vw"
-                    style={{ display: 'block' }}
                     placeholder="blur"
-                    blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp" // optional
+                    blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
+                    style={{ borderRadius: "8px", width: "100%", height: "auto" }}
                   />
                 </figure>
 
                 {/* Top Icon */}
-                <div className="icon-one">
+                <div className="icon-one absolute top-0 left-0">
                   <Image
                     src="/assets/images/home/welcome/top-icon.webp"
-                    alt="Physiotherapy icon"
-                    width={50}
-                    height={50}
+                    alt="Top decorative icon"
+                    width={40}
+                    height={40}
+                    loading="lazy"
                   />
                 </div>
 
                 {/* Bottom Icon */}
-                <div className="icon-two">
+                <div className="icon-two absolute bottom-0 right-0">
                   <Image
                     src="/assets/images/home/welcome/bottom-icon.webp"
-                    alt="Physiotherapy icon"
-                    width={50}
-                    height={50}
+                    alt="Bottom decorative icon"
+                    width={40}
+                    height={40}
+                    loading="lazy"
                   />
                 </div>
               </div>