separate banner img updated

app/rehabilitation/[slug]/page.js

@@ -11,7 +11,7 @@ export default function RehabilitationDetailsPage() {
   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/rehabilitation/page.js

@@ -5,7 +5,7 @@ import Rehabilitation from "@/utils/Rehabilitation.utils";
 
 export default function RehabilitationPage() {
   return (
-    <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Rehabilitation">
+    <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Rehabilitation" bannerImage="/assets/images/rehabilitation/rehabilation-banner.webp">
       <section className="service-section sec-pad-2">
         <div className="auto-container">
           <div className="row clearfix">
@@ -23,7 +23,12 @@ export default function RehabilitationPage() {
                           <img src={service.mainImage} alt={service.title} />
                         </Link>
                       </figure>
-                      <div className="icon-box"><i className="icon-30"></i></div>
+                      <div className="icon-box">
+                        <img
+                          src={service.icon}
+                          alt={`${service.title} Icon`}
+                        />
+                      </div>
                     </div>
                     <div className="lower-content">
                       <h3>

app/what-to-expect/page.js

@@ -5,7 +5,7 @@ import Layout from "@/components/layout/Layout"
 export default function About() {
     return (
         <>
-            <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Why Choose Us">
+            <Layout headerStyle={2} footerStyle={1} breadcrumbTitle=" What To Expect">
                 {/* chooseus-section */}
                 <section className="about-style-three pt_120 pb_120">
                     <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-35.png)' }}></div>
@@ -31,7 +31,7 @@ export default function About() {
                                 <div className="content_block_one">
                                     <div className="content-box">
                                         <div className="sec-title mb_15">
-                                            <span className="sub-title">Why Choose Us</span>
+                                            <span className="sub-title"> What To Expect</span>
                                             <h2>What to Expect – Physiotherapy Etobicoke</h2>
                                         </div>
                                         <div className="text-box mb_40">

app/why-rapha-physiotherapy-etobicoke/page.js

@@ -31,7 +31,7 @@ export default function Team() {
                 </div>
                 <div className="auto-container">
                     <div className="sec-title mb_50">
-                        <span className="sub-title">Our Team</span>
+                        <span className="sub-title">Why Choose Us</span>
                         <h2>We have licensed and experienced therapists with particular interests and expertise in</h2>
                     </div>
                     <div className="row clearfix">

components/layout/Breadcrumb.js

@@ -1,11 +1,16 @@
 import Link from "next/link"
 
-export default function Breadcrumb({ breadcrumbTitle }) {
+export default function Breadcrumb({ breadcrumbTitle, bannerImage }) {
     return (
         <>
 
             <section className="page-title p_relative centred">
-                <div className="bg-layer" style={{ backgroundImage: 'url(assets/images/background/page-title.jpg)' }}></div>
+                <div
+                    className="bg-layer"
+                    style={{
+                        backgroundImage: `url(${bannerImage || '/assets/images/background/page-title.jpg'})`
+                    }}
+                />
                 <div className="pattern-layer">
                     <div className="pattern-1" style={{ backgroundImage: 'url(assets/images/shape/shape-14.png)' }}></div>
                     <div className="pattern-2" style={{ backgroundImage: 'url(assets/images/shape/shape-14.png)' }}></div>

components/layout/Layout.js

@@ -18,7 +18,7 @@ import Header2 from './header/Header2';
 import Header3 from "./header/Header3";
 import Header4 from "./header/Header4";
 
-export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, children, wrapperCls }) {
+export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, bannerImage, children, wrapperCls }) {
     const [scroll, setScroll] = useState(0);
     const [isMobileMenu, setMobileMenu] = useState(false);
     const handleMobileMenu = () => {
@@ -57,7 +57,9 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
                 <Sidebar isSidebar={isSidebar} handleSidebar={handleSidebar} />
                 <SearchPopup isPopup={isPopup} handlePopup={handlePopup} />
 
-                {breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}
+                {breadcrumbTitle && (
+                    <Breadcrumb breadcrumbTitle={breadcrumbTitle} bannerImage={bannerImage} />
+                )}
 
                 {children}
 

utils/Rehabilitation.utils.js

@@ -4,7 +4,9 @@ const Rehabilitation = [
     slug: "spinalcord-rehabilitation-clinic-etobicoke",
     title: "SPINAL CORD INJURY REHABILITATION",
     shortDesc: "Spinal cord injury rehabilitation restores mobility, strength, and independence for a better quality of life.",
-    mainImage: "/assets/images/service/service-4.jpg",
+    mainImage: "/assets/images/rehabilitation/spinal.webp",
+    icon: "/assets/images/rehabilitation/icons/spinal.webp",
+    bannerImage:"/assets/images/rehabilitation/rehabilation-banner.webp",
     content: `  
       <div class="content-one mb_30">
         <figure class="image-box mb_40" style="text-align:center;">
@@ -81,7 +83,8 @@ const Rehabilitation = [
     slug: "amputee-rehabilitation-clinic-etobicoke",
     title: "AMPUTEE REHABILITATION",
     shortDesc: "Amputee rehabilitation helps restore mobility, independence, and quality of life.",
-    mainImage: "/assets/images/service/service-4.jpg",
+    mainImage: "/assets/images/rehabilitation/amputee.webp",
+    icon: "/assets/images/rehabilitation/icons/amputee.webp",
     content: `
       <div class="content-one mb_30">
         <figure class="image-box mb_40" style="text-align:center;">
@@ -135,7 +138,8 @@ const Rehabilitation = [
     slug: "fracture-rehabilitation-clinic-etobicoke",
     title: "FRACTURE REHABILITATION",
     shortDesc: "Fracture rehabilitation helps relieve pain, restore movement, strengthen muscles, and regain normal function after injury.",
-    mainImage: "/assets/images/service/service-4.jpg",
+    mainImage: "/assets/images/rehabilitation/fracture.webp",
+    icon: "/assets/images/rehabilitation/icons/fracture.webp",
     content: `
             <div class="content-one mb_30">
         <figure class="image-box mb_40" style="text-align:center;">
@@ -245,7 +249,8 @@ Your treatment will depend very much on the problems identified during your init
     slug: "neurological-rehabilitation-clinic-etobicoke",
     title: "NEUROLOGICAL INJURY REHABILITATION",
     shortDesc: "Neurological rehabilitation improves movement, strength, balance, and independence for better quality of life.",
-    mainImage: "/assets/images/service/service-4.jpg",
+    mainImage: "/assets/images/rehabilitation/neurological.webp",
+    icon: "/assets/images/rehabilitation/icons/neurological.webp",
     content: `
             <div class="content-one mb_30">
         <figure class="image-box mb_40" style="text-align:center;">