banner section updated

components/sections/home1/Banner.js

@@ -36,14 +36,14 @@ export default function Banner() {
 
         {/* Banner Section */}
         <section className="banner-section">
-            <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/main-slider/pattern-1.png)' }} ></div>
+            <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/main-slider/pattern-1.png)' }} ></div>
             <Swiper {...swiperOptions} className="main-slider-carousel ">
                 
                 {/* Slide */}
                 <SwiperSlide>
                 <div className="slide">
-                    <div className="icon-layer-one" style={{ backgroundImage: 'url(assets/images/main-slider/icon-1.png)' }} ></div>
+                    <div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-1.webp)' }} ></div>
-                    <div className="icon-layer-two" style={{ backgroundImage: 'url(assets/images/main-slider/icon-2.png)' }} ></div>
+                    <div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-1.webp)' }} ></div>
                     <div className="auto-container">
                         <div className="row clearfix">
                         
@@ -66,7 +66,7 @@ export default function Banner() {
                                 <div className="inner-column">
                                     <div className="icon-layer-three" style={{ backgroundImage: 'url(assets/images/main-slider/icon-3.png)' }} ></div>
                                     <div className="image">
-                                        <img src="assets/images/main-slider/content-image-1.png" alt="" />
+                                        <img src="/assets/images/banner/banner-1.webp" alt="" />
                                     </div>
                                 </div>
                             </div>
@@ -79,8 +79,8 @@ export default function Banner() {
                 {/* Slide */}
                 <SwiperSlide>
                 <div className="slide">
-                    <div className="icon-layer-one" style={{ backgroundImage: 'url(assets/images/main-slider/icon-1.png)' }} ></div>
+                    <div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-2.webp)' }} ></div>
-                    <div className="icon-layer-two" style={{ backgroundImage: 'url(assets/images/main-slider/icon-6.png)' }} ></div>
+                    <div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-2.webp)' }} ></div>
                     <div className="auto-container">
                         <div className="row clearfix">
                         
@@ -101,9 +101,9 @@ export default function Banner() {
                             {/* Image Column */}
                             <div className="image-column col-lg-6 col-md-12 col-sm-12">
                                 <div className="inner-column">
-                                    <div className="icon-layer-three" style={{ backgroundImage: 'url(assets/images/main-slider/icon-3.png)' }} ></div>
+                                    <div className="icon-layer-three" style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }} ></div>
                                     <div className="image">
-                                        <img src="assets/images/main-slider/content-image-2.png" alt="" />
+                                        <img src="/assets/images/banner/banner-2.webp" alt="" />
                                     </div>
                                 </div>
                             </div>
@@ -115,8 +115,8 @@ export default function Banner() {
                 {/* Slide */}
                 <SwiperSlide>
                 <div className="slide style-two">
-                    <div className="icon-layer-one" style={{ backgroundImage: 'url(assets/images/main-slider/icon-1.png)' }} ></div>
+                    <div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-3.webp)' }} ></div>
-                    <div className="icon-layer-two" style={{ backgroundImage: 'url(assets/images/main-slider/icon-7.png)' }} ></div>
+                    <div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-3.webp)' }} ></div>
                     <div className="auto-container">
                         <div className="row clearfix">
                         
@@ -137,9 +137,9 @@ export default function Banner() {
                             {/* Image Column */}
                             <div className="image-column col-lg-6 col-md-12 col-sm-12">
                                 <div className="inner-column">
-                                    <div className="icon-layer-three" style={{ backgroundImage: 'url(assets/images/main-slider/icon-3.png)' }} ></div>
+                                    <div className="icon-layer-three" style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }} ></div>
                                     <div className="image">
-                                        <img src="assets/images/main-slider/content-image-3.png" alt="" />
+                                        <img src="/assets/images/banner/banner-3.webp" alt="" />
                                     </div>
                                 </div>
                             </div>