Images icon and banners updated for area of injury page

app/area-of-injury/[slug]/page.js

@@ -12,7 +12,7 @@ export default function AreaOfInjuryDetails() {
     if (!service) return notFound();
 
     return (
-        <Layout headerStyle={2} footerStyle={1} breadcrumbTitle={service.title}>
+        <Layout headerStyle={2} footerStyle={1} breadcrumbTitle={service.title} bannerImage={service.bannerImage}>
             <section className="service-details pt_120 pb_110">
                 <div className="auto-container">
                     <div className="row clearfix">

app/area-of-injury/page.js

@@ -5,7 +5,7 @@ import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
 
 export default function AreaOfInjury() {
     return (
-        <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Areas of Injury">
+        <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Areas of Injury" bannerImage="/assets/images/areas-of-injury/area-of-injury-banner.webp">
             <section className="service-section sec-pad-2">
                 <div className="auto-container">
                     <div className="row clearfix">
@@ -19,7 +19,12 @@ export default function AreaOfInjury() {
                                                     <img src={item.image} alt={item.title} />
                                                 </Link>
                                             </figure>
-                                            <div className="icon-box"><i className={item.icon}></i></div>
+                                            <div className="icon-box">
+                                                <img
+                                                    src={item.icon}
+                                                    alt={`${item.title} Icon`}
+                                                />
+                                            </div>
                                         </div>
                                         <div className="lower-content">
                                             <h3>

public/assets/css/module-css/video.css

@@ -128,7 +128,15 @@ font-size: 18px;
 }
 
 
-
+.video-section .inner-box .shape{
+  position: absolute;
+  right: 566px;
+  top: 174px;
+  bottom: 0px;
+  width: 278px;
+  height: 139px;
+  background-repeat: no-repeat;
+}
 
 
 @media only screen and (max-width: 1440px){

utils/AreaOfInjery.utils.js

@@ -4,9 +4,10 @@ export const areaOfInjuryData = [
         slug: "head-injury-physiotherapy-management-etobicoke",
         title: "HEAD INJURIES",
         shortDescription: "Recover faster from head injuries with expert physiotherapy and personalized care.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/head-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        bannerImage:"/assets/images/areas-of-injury/head-injury/head-injury-banner.webp",
-        icon: "icon-30",
+        mainImage: "/assets/images/areas-of-injury/head-injury/big-img.webp",
+        icon: "/assets/images/areas-of-injury/icon/head.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat conditions like</p>
@@ -21,12 +22,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/head-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/head-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -40,9 +41,10 @@ export const areaOfInjuryData = [
         slug: "neck-injury-physiotherapy-management-etobicokeneck-injury-physiotherapy-management-etobicoke",
         title: "NECK INJURIES",
         shortDescription: "Relieve neck pain, restore flexibility, and strengthen muscles with professional physiotherapy.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/neck-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        bannerImage:"/assets/images/areas-of-injury/neck-injury/neck-injury-banner.webp",
-        icon: "icon-31",
+        mainImage: "/assets/images/areas-of-injury/neck-injury/big-img.webp",
+        icon: "/assets/images/areas-of-injury/icon/neck.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat conditions like</p>
@@ -58,12 +60,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/neck-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/neck-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -77,9 +79,10 @@ export const areaOfInjuryData = [
         slug: "shoulder-injury-physiotherapy-management-etobicoke",
         title: "SHOULDER INJURIES",
         shortDescription: "Improve shoulder mobility and heal injuries effectively through advanced physiotherapy sessions.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/shoulder-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        mainImage: "/assets/images/areas-of-injury/shoulder-injury/big-img.webp",
-        icon: "icon-31",
+        bannerImage: "/assets/images/areas-of-injury/shoulder-injury/shoulder-injury-banner.webp",
+        icon: "/assets/images/areas-of-injury/icon/shoulder.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat conditions like</p>
@@ -95,12 +98,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/shoulder-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/shoulder-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -114,9 +117,10 @@ export const areaOfInjuryData = [
         slug: "elbow-injury-physiotherapy-management-etobicoke",
         title: "ELBOW INJURIES",
         shortDescription: "Overcome elbow injuries with targeted treatments ensuring strength and faster recovery.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/elbo-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        bannerImage: "/assets/images/areas-of-injury/elbo-injury/elbow-injury-banner.webp",
-        icon: "icon-31",
+        icon: "/assets/images/areas-of-injury/icon/elbow.webp",
+        mainImage: "/assets/images/areas-of-injury/elbo-injury/big-img.webp",
         content: `
       <div class="content-one mb_60">
       <p>At Etobicoke Physiotherapy, we treat conditions like</p>
@@ -132,12 +136,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/elbo-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/elbo-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -151,9 +155,10 @@ export const areaOfInjuryData = [
         slug: "wristhand-injury-physiotherapy-management-etobicoke",
         title: "WRIST AND HAND INJURIES",
         shortDescription: "Restore hand strength and mobility with physiotherapy designed for you.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/wrist-hand-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        mainImage: "/assets/images/areas-of-injury/wrist-hand-injury/big-img.webp",
-        icon: "icon-31",
+        bannerImage: "/assets/images/areas-of-injury/wrist-hand-injury/wrist-hand-injury-banner.webp",
+        icon: "/assets/images/areas-of-injury/icon/wrist.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat conditions like</p>
@@ -169,12 +174,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/wrist-hand-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/wrist-hand-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -188,9 +193,11 @@ export const areaOfInjuryData = [
         slug: "lowback-injury-physiotherapy-management-etobicoke",
         title: "LOW BACK INJURY",
         shortDescription: "Reduce back pain, improve posture, and enhance recovery with expert physiotherapy.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/low-back-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        mainImage: "/assets/images/areas-of-injury/low-back-injury/big-img.webp",
-        icon: "icon-31",
+        bannerImage: "/assets/images/areas-of-injury/low-back-injury/low-back-injury-banner.webp",
+
+        icon: "/assets/images/areas-of-injury/icon/low-back.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat conditions like</p>
@@ -206,12 +213,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/low-back-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/low-back-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -225,9 +232,10 @@ export const areaOfInjuryData = [
         slug: "hip-injury-physiotherapy-management-etobicoke",
         title: "HIP INJURIES",
         shortDescription: "Rebuild hip strength, improve stability, and recover mobility with personalized care.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/hip-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        mainImage: "/assets/images/areas-of-injury/hip-injury/big-img.webp",
-        icon: "icon-31",
+        bannerImage: "/assets/images/areas-of-injury/hip-injury/hip-injury-banner.webp",
+        icon: "/assets/images/areas-of-injury/icon/hip.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat conditions like</p>
@@ -243,12 +251,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/hip-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/hip-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -262,9 +270,10 @@ export const areaOfInjuryData = [
         slug: "legknee-injury-physiotherapy-management-etobicoke",
         title: "LEG & KNEE INJURIES",
         shortDescription: "Heal knee injuries faster, regain strength, and restore balance with advanced physiotherapy.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/leg-knee-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        bannerImage: "/assets/images/areas-of-injury/leg-knee-injury/leg-knee-injury-banner.webp",
-        icon: "icon-31",
+        mainImage: "/assets/images/areas-of-injury/leg-knee-injury/big-img.webp",
+        icon: "/assets/images/areas-of-injury/icon/knee.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat knee physiotherapy conditions like</p>
@@ -280,12 +289,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/leg-knee-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/leg-knee-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>
@@ -299,9 +308,10 @@ export const areaOfInjuryData = [
         slug: "anklefoot-injury-physiotherapy-management-etobicoke",
         title: "ANKLE & FOOT INJURIES",
         shortDescription: "Recover from ankle injuries quickly with physiotherapy improving movement and strength.",
-        image: "/assets/images/service/service-5.jpg",
+        image: "/assets/images/areas-of-injury/ankle-foot-injury/left.webp",
-        mainImage: "/assets/images/service/service-7.jpg",
+        mainImage: "/assets/images/areas-of-injury/ankle-foot-injury/big-img.webp",
-        icon: "icon-31",
+        bannerImage: "/assets/images/areas-of-injury/ankle-foot-injury/ankle-foot-injury-banner.webp",
+        icon: "/assets/images/areas-of-injury/icon/ankle.webp",
         content: `
       <div class="content-one mb_60">
       <p>We treat knee physiotherapy conditions like</p>
@@ -317,12 +327,12 @@ export const areaOfInjuryData = [
           <div class="row clearfix">
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-8.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/ankle-foot-injury/1.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 image-column">
               <figure class="image-box mb_30" style="text-align:center;">
-                <img src="/assets/images/service/service-9.jpg" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
+                <img src="/assets/images/areas-of-injury/ankle-foot-injury/2.webp" alt="Cardiology Extra" style="max-width:100%;height:auto;" />
               </figure>
             </div>
           </div>