Home responsive added

app/about-us/AboutClient.js

@@ -84,9 +84,9 @@ export default function Home() {
                       <div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
                       <div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
                     </div>
-                    <figure className="image image-1"><img src="/assets/images/about-us/section1/about-right.webp" alt="About us" /></figure>
+                    <figure className="image image-1-ho"><img src="/assets/images/about-us/section1/about-right.webp" alt="About us" /></figure>
                     <figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="About us" /></figure>
-                    <div className="icon-box"><img src="/assets/images/about-us/section1/about-icon.webp" alt="About us" /></div>
+                    <div className="icon-box new-ho"><img src="/assets/images/about-us/section1/about-icon.webp" alt="About us" /></div>
                   </div>
                 </div>
               </div>

app/ourapproach-physiotherapy-etobicoke/page.js

@@ -31,9 +31,9 @@ export default function About() {
                       <div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
                       <div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
                     </div>
-                    <figure className="image image-1"><img src="/assets/images/our-approach/right.webp" alt="Our Approach" /></figure>
+                    <figure className="image image-1-ho"><img src="/assets/images/our-approach/right.webp" alt="Our Approach" /></figure>
                     <figure className="image image-2"><img src="/assets/images/our-approach/left.webp" alt="Our Approach" /></figure>
-                    <div className="icon-box"><img src="/assets/images/our-approach/icon.webp" alt="Our Approach" /></div>
+                    <div className="icon-box new-ho"><img src="/assets/images/our-approach/icon.webp" alt="Our Approach" /></div>
                   </div>
                 </div>
               </div>

app/payment-insurance/page.js

@@ -35,9 +35,9 @@ export default function About() {
                             <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                                 <div className="image_block_two">
                                     <div className="image-box">
-                                        <figure className="image image-1"><img src="/assets/images/payment-insurance/back.webp" alt="Payment and Insurance" /></figure>
+                                        <figure className="image image-1-ho"><img src="/assets/images/payment-insurance/back.webp" alt="Payment and Insurance" /></figure>
-                                        <figure className="image image-2"><img src="/assets/images/payment-insurance/front.webp" alt="Payment and Insurance" /></figure>
+                                        <figure className="image image-2-new"><img src="/assets/images/payment-insurance/front.webp" alt="Payment and Insurance" /></figure>
-                                        <div className="icon-box"><img src="/assets/images/payment-insurance/icon.webp" alt="Payment and Insurance" /></div>
+                                        <div className="icon-box cart-icon"><img src="/assets/images/payment-insurance/icon.webp" alt="Payment and Insurance" /></div>
                                     </div>
                                 </div>
                             </div>

app/what-to-expect/page.js

@@ -27,7 +27,7 @@ export default function About() {
                                             <div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
                                             <div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
                                         </div>
-                                        <figure className="image image-1"><img src="/assets/images/what-we-expect/right.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
+                                        <figure className="image image-1-ho"><img src="/assets/images/what-we-expect/right.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
                                         <figure className="image image-2"><img src="/assets/images/what-we-expect/left.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
                                         <div className="icon-box"><img src="/assets/images/what-we-expect/icon.webp" alt="What to Expect – Physiotherapy Etobicoke" /></div>
                                     </div>

components/sections/home2/Banner.js

@@ -16,7 +16,9 @@ const swiperOptions = {
     autoplay: {
         delay: 5000,
         disableOnInteraction: false,
+        pauseOnMouseEnter: true, // stops on hover for smooth UX
     },
+    speed: 1500, // increase speed for smoother sliding
     loop: true,
     navigation: {
         nextEl: '.h1n',
@@ -26,6 +28,7 @@ const swiperOptions = {
         el: '.swiper-pagination',
         clickable: true,
     },
+    effect: "slide", // ensures smooth slide effect
 };
 
 const variants = {
@@ -91,17 +94,7 @@ export default function Banner() {
                                 <div className="bg-layer bg-slide-0"
                                      style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-1.webp)' }}>
                                 </div>
-                                <div className="auto-container" style={{height:"600px"}}>
+                                <div className="auto-container" style={{ height: "600px" }}>
-                                    {/* <div className="content-box custom-content-box">
-                                        <span className="upper-text">Begin Your Health Journey</span>
-                                        <h2>Better <span>health</span> Forever</h2>
-                                        <p>Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.</p>
-                                        <div className="btn-box mt-3">
-                                            <Link href="tel:+647-722-3434" className="theme-btn btn-one">
-                                                <span>Book Your Appointment</span>
-                                            </Link>
-                                        </div>
-                                    </div> */}
                                 </div>
                             </motion.div>
                         )}
@@ -124,7 +117,7 @@ export default function Banner() {
                                 <div className="bg-layer"
                                      style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-2.webp)' }}>
                                 </div>
-                                <div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
+                                <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
                                     <div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
                                         <span className="upper-text">Care That Heals Gently</span>
                                         <h2>Relaxing <span>Massage</span> Therapy</h2>
@@ -157,7 +150,7 @@ export default function Banner() {
                                 <div className="bg-layer"
                                      style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-3.webp)' }}>
                                 </div>
-                                <div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
+                                <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
                                     <div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
                                         <span className="upper-text">Wellness Near You Always</span>
                                         <h2>Trusted <span>Physio</span> Experts</h2>
@@ -190,7 +183,7 @@ export default function Banner() {
                                 <div className="bg-layer"
                                      style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-4.webp)' }}>
                                 </div>
-                                <div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
+                                <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
                                     <div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
                                         <span className="upper-text">Healing With Caring Hands</span>
                                         <h2>Holistic <span>Wellness</span> Care</h2>

public/assets/css/module-css/about.css

@@ -328,12 +328,23 @@
   border-radius: 20px;
   z-index: 1;
 }
+.image_block_three .image-box .image-1-ho{
+  position: relative;
+  filter: drop-shadow(-10px 20px 50px rgba(75, 183, 241, 0.3));
+  border-radius: 20px;
+  z-index: 1;
+}
 
 .image_block_three .image-box .image-1 img{
   width: 100%;
   border-radius: 20px;
 }
 
+.image_block_three .image-box .image-1-ho img{
+  width: 100%;
+  border-radius: 20px;
+}
+
 .image_block_three .image-box .image-2{
   position: absolute;
   left: -10px;
@@ -570,6 +581,10 @@
     margin: 0 auto;
   }
 
+    .image_block_three .image-box .image-1-ho{
+    max-width: 306px;
+    margin: 0 auto;
+  }
   .image_block_three .image-box .image-2{
     position: relative;
     left: 0px;
@@ -620,6 +635,54 @@
   transform: rotate(-15deg);
 }
 
+.image_block_three .image-box .image-1-ho {
+    position: relative;
+    filter: drop-shadow(-10px 20px 50px rgba(75, 183, 241, 0.3));
+    border-radius: 20px;
+    z-index: 1;
+    margin-right: -134px;
+    left: -104px;
+}
+
+
+.image_block_three .image-box .new-ho{
+
+top: 309px;
+    left: 279px;
+
+}
+
+}
+
+
+@media only screen and (max-width: 768px) {
+  
+    .image_block_three .image-box .image-1-ho {
+        position: relative;
+        filter: drop-shadow(-10px 20px 50px rgba(75, 183, 241, 0.3));
+        border-radius: 20px;
+        z-index: 1;
+        margin-right: 0px !important;
+        left: 0px !important;
+    }
+
+
+    .image_block_three .image-box .new-ho{
+
+
+    top: 337px;
+    left: 239px;
+}
+}
+
+@media only screen and (max-width: 500px) {
+  
+  .image_block_three .image-box .image-1-ho img{
+
+    display: none;
+
+  }
+
 }
 
 @media only screen and (max-width: 499px){
@@ -644,6 +707,12 @@
   display: none !important;
 }
 
+    .image_block_three .image-box .image-1-ho img{
+  width: 100%;
+  border-radius: 20px;
+  display: none !important;
+}
+
 }
 
 @media only screen and (max-width: 426px) {
@@ -666,6 +735,16 @@
 
 }
 
+@media screen and (max-width: 376px) {
+  
+  .image_block_three .image-box .new-ho{
+
+    left: 200px;
+
+  }
+
+}
+
 
 
 

public/assets/css/module-css/feature.css

@@ -11,7 +11,7 @@
   box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   overflow: hidden;
-  padding: 34px;
+  padding: 20px;
   z-index: 1;
   margin-bottom: 30px;
   transition: all 500ms ease;
@@ -284,4 +284,10 @@
   .feature-section.mobile-only .feature-block {
     width: 50%;
   }
+}
+
+@media (max-width: 992px) {
+  .team-block-one .inner-box .lower-content {
+    padding: 15px 10px 0px 10px;
+  }
 }

public/assets/css/module-css/solutions.css

@@ -20,6 +20,9 @@
 .solutions-section .progress-inner{
   max-width: none;
 }
+
+
+
 }
 
 
@@ -42,6 +45,9 @@
   display: block;
   border-radius: 20px;
   overflow: hidden;
+
+      top: -164px;
+    left: -12px;
 }
 
 .image_block_two .image-box .image-1-new{
@@ -57,9 +63,9 @@
 
 .image_block_two .image-box .image-2{
   position: absolute;
-  left: -50px;
+  left: -21px;
   bottom: 0px;
-  background: #fff;
+  /* background: #fff; */
   padding: 10px;
   border-radius: 20px;
   filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
@@ -69,7 +75,7 @@
   position: absolute;
   left: -50px;
   bottom: 0px;
-  background: #fff;
+  /* background: #fff; */
   padding: 10px;
   border-radius: 20px;
   filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
@@ -145,7 +151,7 @@
   position: absolute;
   left: 14px !important;
   bottom: -86px !important;
-  background: #fff;
+  /* background: #fff; */
   padding: 10px;
   border-radius: 20px;
   filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
@@ -187,12 +193,19 @@
         position: absolute;
         left: 14px !important;
         bottom: -36px !important;
-        background: #fff;
+        /* background: #fff; */
         padding: 10px;
         border-radius: 20px;
         filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
     }
 
+    .image_block_two .image-box .cart-icon{
+
+  left: 302px;
+    top: 412px;
+
+}
+
     .image_block_two .image-box .my-icon{
 
   position: absolute;
@@ -250,9 +263,17 @@
   }
 }
 
-@media only screen and (max-width: 499px){
+@media only screen and (max-width: 500px){
 
-  
+      .image_block_two .image-box .cart-icon{
+
+  /* left: 292px;
+    top: 312px; */
+
+
+    display: none;
+
+}
 
 }