New Desktop banner updated

components/layout/header/Header2.js

@@ -22,25 +22,22 @@ export default function Header2({
             <ul className="info-list clearfix">
               <li>
                 <img
-                  src="/assets/images/call.png"
+                  src="/assets/images/icons/call.png"
                   alt="Phone"
-                  style={{ marginRight: "8px" }}
-                  className="red-icon"
+                  className="contact-icon"
                 />
                 <Link href="tel:647-722-3434">647-722-3434</Link>
               </li>
               <li>
                 <img
-                  src="/assets/images/mail.png"
+                  src="/assets/images/icons/mail.png"
                   alt="Mail"
-                  style={{ marginRight: "8px", marginLeft: "8px" }}
-                  className="red-icon"
+                  className="contact-icon"
                 />
                 <Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>
               </li>
             </ul>
 
-
             <ul className="social-links clearfix">
               <li><Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link></li>
               <li><Link href="/faq-physiotherapy-etobicoke">Faq</Link></li>

components/sections/home2/Banner.js

@@ -92,13 +92,13 @@ export default function Banner() {
                                 transition={transition}
                             >
                                 <div className="bg-layer bg-slide-0"
-                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-1.webp)' }}>
+                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-1.png)' }}>
                                 </div>
                                 <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "center", textAlign: "center" }}>
                                     <div className="content-box custom-content-box">
                                         <span className="upper-text mb-2 ">Renew your</span>
-                                        <h2 style={{ color: "#bc0000" }}>Strength</h2>
-                                        <p className=' text-white'>Relaxing Massage Therapy</p>
+                                        <h2 style={{ color: "#bc0000" }}>STRENGTH</h2>
+                                        <p className=' text-white'>• Physiotherapy • Sports Therapy • Injury Prevention</p>
                                         <div className="btn-box mt-3">
                                             <Link href="tel:+647-722-3434" className="theme-btn btn-one">
                                                 <span>Book Your Appointment</span>
@@ -125,13 +125,13 @@ export default function Banner() {
                                 transition={transition}
                             >
                                 <div className="bg-layer"
-                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-2.webp)' }}>
+                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-2.png)' }}>
                                 </div>
                                 <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "end", textAlign: "center" }}>
                                     <div className="content-box custom-content-box">
                                         <span className="upper-text mb-3">Restore your</span>
                                         <h2 style={{ color: "#bc0000" }}>Mobility</h2>
-                                        <p className=' text-white'>Physiotherapist smiling with patient (currently “Trusted Physio Experts”)</p>
+                                        <p className=' text-white'>• Pain Relief • Active Care • Long-Term Result</p>
                                         <div className="btn-box mt-3">
                                             <Link href="/contact" className="theme-btn btn-one">
                                                 <span>Schedule a Massage</span>
@@ -158,13 +158,13 @@ export default function Banner() {
                                 transition={transition}
                             >
                                 <div className="bg-layer"
-                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-3.webp)' }}>
+                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-3.png)' }}>
                                 </div>
                                 <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
                                     <div className="content-box custom-content-box">
                                         <span className="upper-text mb-2">Reclaim your</span>
-                                        <h2 style={{ color: "#bc0000" }}>Wellness</h2>
-                                        <p className='text-white'>Hands massaging shoulder (currently “Holistic Wellness Care”)</p>
+                                        <h2 style={{ color: "#bc0000" }}>Wellnes</h2>
+                                        <p className='text-white'>• Pain Relief  • Strength Training • Active Care </p>
                                         <div className="btn-box mt-3">
                                             <Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
                                                 <span>Explore Our Service</span>
@@ -191,13 +191,13 @@ export default function Banner() {
                                 transition={transition}
                             >
                                 <div className="bg-layer"
-                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-4.webp)' }}>
+                                    style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-4.png)' }}>
                                 </div>
                                 <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end",justifyContent: "start", textAlign: "start"  }}>
                                     <div className="content-box custom-content-box">
                                         <span className="upper-text mb-2">Begin your</span>
                                         <h2 style={{ color: "#bc0000" }}>Recovery</h2>
-                                        <p className='text-white'>Your Path to Recovery Starts Today</p>
+                                        <p className='text-white'>• Rehab • Strength Training • Personalized Care </p>
                                         <div className="btn-box mt-3">
                                             <Link href="/contact" className="theme-btn btn-one">
                                                 <span>Visit Our Location</span>

components/sections/home2/MobileBanner.js

@@ -82,7 +82,7 @@ export default function MobileBanner() {
             variant: 'leftToRight',
             bgImage: '/assets/images/banner/mobile-banner/3.webp',
             upperText: 'Reclaim your',
-            title: 'Wellness',
+            title: 'Wellnes',
             // titleSpan: 'Physio',
             // titleEnd: 'Experts',
             // subtitle: 'Physiotherapy Etobicoke & Rehab Care.',

public/assets/css/module-css/banner.css

@@ -143,7 +143,7 @@
 .banner-carousel .swiper-slide:before {
   position: absolute;
   content: '';
-  background: rgb(0 0 0 / 67%) !important;
+  /* background: rgb(0 0 0 / 67%) !important; */
   width: 100%;
   height: 100%;
   left: 0px;

public/assets/css/style.css

@@ -1030,7 +1030,7 @@
 
  .header-style-two .header-top a,
  .header-style-two .header-top .logo {
-   color: #bc0000 !important;
+   color: #fff !important;
  }
 
  .header-style-two .header-top .top-inner {
@@ -1074,6 +1074,7 @@
  .header-top .top-inner .info-list li img {
    width: 18px;
    height: auto;
+   margin-left: 10px;
  }
 
  /* .red-icon {
@@ -1252,6 +1253,25 @@
 
 
  }
+ 
+
+@media screen and (max-width:768px) {
+  
+   .header-top .top-inner .info-list li a {
+   display: inline-block;
+   color: #bc0000 !important;
+   font-size: 15px;
+   text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+  .contact-icon {
+    filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(7476%) hue-rotate(356deg) brightness(94%) contrast(108%);
+  }
+}
+
+}
+
 
  @media only screen and (max-width: 1024px) {
    .header-top {
@@ -1265,6 +1285,13 @@
      gap: 8px;
    }
 
+      .header-top .top-inner .info-list li a {
+   display: inline-block;
+   color: #fff !important;
+   font-size: 15px;
+   text-decoration: none;
+ }
+
    .header-top .top-inner .info-list {
      justify-content: center;
      gap: 20px;
@@ -1291,6 +1318,21 @@
    }
  }
 
+ @media screen and (max-width: 992px) {
+
+   .header-top .top-inner .info-list li a {
+   display: inline-block;
+   color: #bc0000 !important;
+   font-size: 15px;
+   text-decoration: none;
+ }
+
+   .contact-icon {
+    filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(7476%) hue-rotate(356deg) brightness(94%) contrast(108%);
+  }
+  
+ }
+
  @media only screen and (max-width: 500px) {
    .header-top .top-inner .social-links {
      justify-content: center;
@@ -1536,7 +1578,7 @@
    font-family: var(--soleil);
    letter-spacing: 0.8px;
    opacity: 1;
-   color: #bc0000;
+   color: #fff;
    z-index: 1;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
@@ -1564,7 +1606,7 @@
 
  .main-menu .navigation>li.current>a,
  .main-menu .navigation>li:hover>a {
-   color: #bc0000;
+   color: #fff;
  }
 
  .main-menu .navigation>li>a:before {
@@ -2864,8 +2906,8 @@
    margin-left: 6px;
    width: 6px;
    height: 6px;
-   border-left: 2px solid #bc0000;
-   border-bottom: 2px solid #bc0000;
+   border-left: 2px solid #fff;
+   border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    vertical-align: middle;
  }