performance updated

app/about-us/AboutClient.js

@@ -258,7 +258,7 @@ export default function Home() {
         </section>
         <section className="chooseus-section">
           <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/about-us/section4/why-choose-right.webp)' }}></div>
-          <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-12.png)' }}></div>
+          <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-12.webp)' }}></div>
           <div className="auto-container">
             <div className="row clearfix">
               <div className="col-lg-8 col-md-12 col-sm-12 content-column">

components/ContactFloat.js

@@ -12,13 +12,13 @@ export default function ContactFloat() {
   const extraIcons = [
     {
       href: "tel:647-722-3434",
-      src: "/assets/images/icons/call.png",
+      src: "/assets/images/icons/call.webp",
       label: "Call",
       newTab: true, 
     },
     {
       action: () => setShowChat(true),
-      src: "/assets/images/chat.png",
+      src: "/assets/images/chat.webp",
       label: "Chat",
     },
     {
@@ -29,13 +29,13 @@ export default function ContactFloat() {
     },
     {
       href: "https://www.instagram.com/elrapharehab/",
-      src: "/assets/images/insta.png",
+      src: "/assets/images/insta.webp",
       label: "Instagram",
       newTab: true,
     },
     {
       href: "https://www.facebook.com/ELRaphaRehabCenter/",
-      src: "/assets/images/fb.png",
+      src: "/assets/images/fb.webp",
       label: "Facebook",
       newTab: true,
     },
@@ -161,7 +161,7 @@ export default function ContactFloat() {
             src={
               open
                 ? "/assets/images/cancel.png"
-                : "/assets/images/icons/call.png"
+                : "/assets/images/icons/call.webp"
             }
             alt="Contact"
             style={{ width: "28px", height: "28px" }}

components/layout/header/Header1.js

@@ -14,7 +14,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
               <ul className="info-list clearfix">
                 <li>
                   <img
-                    src="/assets/images/icons/call.png"
+                    src="/assets/images/icons/call.webp"
                     alt="Phone"
                     style={{ marginRight: "8px" }}
                     className="red-icon"

components/layout/header/Header2.js

@@ -22,7 +22,7 @@ export default function Header2({
             <ul className="info-list clearfix">
               <li>
                 <img
-                  src="/assets/images/icons/call.png"
+                  src="/assets/images/icons/call.webp"
                   alt="Phone"
                   className="contact-icon"
                 />
@@ -30,7 +30,7 @@ export default function Header2({
               </li>
               <li>
                 <img
-                  src="/assets/images/icons/mail.png"
+                  src="/assets/images/icons/mail.webp"
                   alt="Mail"
                   className="contact-icon"
                 />

components/sections/home/AboutSection.js

@@ -17,7 +17,7 @@ export default function AboutSection() {
           <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.png)' }}></div>
+                <div className="image-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-26.webp)' }}></div>
 
                 {/* Main Hero Image */}
                 <figure className="image-2">

components/sections/home/WhyChooseusSection.js

@@ -5,7 +5,7 @@ export default function WhyChooseUsSection() {
   return (
     <section className="chooseus-section">
       <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/why-choose/why-choose-right.webp)' }}></div>
-      <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-12.png)' }}></div>
+      <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-12.webp)' }}></div>
       <div className="auto-container">
         <div className="row clearfix">
           <div className="col-lg-8 col-md-12 col-sm-12 content-column">

components/sections/home1/WhyChooseUs.js

@@ -5,7 +5,7 @@ export default function chooseus() {
   return (
     <section className="chooseus-section">
       <div className="bg-layer" style={{ backgroundImage: 'url(assets/images/background/chooseus-bg.jpg)' }}></div>
-      <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-12.png)' }}></div>
+      <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-12.webp)' }}></div>
       <div className="auto-container">
         <div className="row clearfix">
           <div className="col-lg-8 col-md-12 col-sm-12 content-column">

components/sections/home2/About.js

@@ -14,7 +14,7 @@ export default function About() {
             <div className="image_block_one">
               <div className="image-box">
                 <div className="shape float-bob-x" style={{ backgroundImage: 'url(assets/images/shape/shape-7.png)' }}></div>
-                <div className="image-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-26.png)' }}></div>
+                <div className="image-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-26.webp)' }}></div>
                 <figure className="image-2"><img src="assets/images/resource/about-1.png" alt="" /></figure>
                 <div className="icon-one"><i className="icon-13"></i></div>
                 <div className="icon-two"><i className="icon-14"></i></div>

components/sections/home2/Banner.js

@@ -55,7 +55,7 @@ export default function Banner() {
     const slides = [
         {
             id: 0,
-            bg: "/assets/images/banner/desktopBanner/banner-4.png",
+            bg: "/assets/images/banner/desktopBanner/banner-4.webp",
             upper: "Begin your",
             title: "Recovery",
             desc: "• Rehab • Strength Training • Personalized Care",
@@ -64,7 +64,7 @@ export default function Banner() {
         },
         {
             id: 1,
-            bg: "/assets/images/banner/desktopBanner/banner-1.png",
+            bg: "/assets/images/banner/desktopBanner/banner-1.webp",
             upper: "Build Your Strength &",
             title: "Endurance",
             desc: "• Physiotherapy • Sports Therapy • Injury Prevention",
@@ -82,7 +82,7 @@ export default function Banner() {
         },
         {
             id: 3,
-            bg: "/assets/images/banner/desktopBanner/banner-2.png",
+            bg: "/assets/images/banner/desktopBanner/banner-2.webp",
             upper: "Build your Core",
             title: "Performance",
             desc: "• Pain Relief • Active Care • Long-Term Result",

components/sections/home2/Chooseus.js

@@ -5,7 +5,7 @@ export default function Chooseus() {
   return (
     <section className="chooseus-style-two bg-color-1">
     <div className="bg-layer" style={{ backgroundImage: "url(assets/images/background/chooseus-bg-2.jpg)" }}></div>
-    <div className="pattern-layer" style={{ backgroundImage: "url(assets/images/shape/shape-12.png)" }}></div>
+    <div className="pattern-layer" style={{ backgroundImage: "url(assets/images/shape/shape-12.webp)" }}></div>
     <div className="auto-container">
       <div className="row clearfix">
         <div className="col-lg-8 col-md-12 col-sm-12 content-column offset-lg-4">

components/sections/onepage/WhyChooseUs.js

@@ -4,7 +4,7 @@ export default function chooseus() {
   return (
     <section className="chooseus-section">
     <div className="bg-layer" style={{ backgroundImage: 'url(assets/images/background/chooseus-bg.jpg)' }}></div>
-    <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-12.png)' }}></div>
+    <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-12.webp)' }}></div>
     <div className="auto-container">
       <div className="row clearfix">
         <div className="col-lg-8 col-md-12 col-sm-12 content-column">

next.config.js

@@ -6,11 +6,11 @@ const nextConfig = {
     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
-  },
+  // experimental: {
+  //   forceSwcTransforms: true,  // use SWC only
+  //   modern: true,              // ✅ enable modern build (ES6+ for modern browsers)
+  //   polyfillsOptimization: true // ✅ remove unnecessary polyfills
+  // },
 };
 
 module.exports = nextConfig;