Merge branch 'slider-upgrade' of WrenchBoard/WrenchBoardMainSite into master

src/assets/css/main.css

@@ -8612,7 +8612,7 @@ LND PAGE STYLE STARTS HERE
 /* interface images */
 .interface_section .owl-item .screen_frame_img img {
   transform: scale(.9);
-  border: 2px solid #000;
+  /* border: 2px solid #000; */
   border-radius: 20px;
   transition: 1s all;
   margin: 0 auto;
@@ -8622,6 +8622,6 @@ LND PAGE STYLE STARTS HERE
 
 .interface_section .owl-item.center .screen_frame_img img {
   transform: scale(1);
-  border: 3px solid #000;
+  /* border: 3px solid #000; */
   padding: 5px;
 }

src/components/HomeOne/FeaturedScreen.js

@@ -4,6 +4,7 @@ import localImgLoad from '../../lib/localImgLoad'
 
 import 'owl.carousel/dist/assets/owl.carousel.css'
 import 'owl.carousel/dist/assets/owl.theme.default.css'
+import LazyImage from '../../lib/LazyImage'
 
 export default function FeaturedScreen() {
   
@@ -41,42 +42,55 @@ export default function FeaturedScreen() {
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-dash2-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-dash2-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-dash-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-dash-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-famcc-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-famcc-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-famprofile-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-famprofile-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-login-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-login-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_6.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-notification-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-notification-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
                                 <img src={localImgLoad('images/slider/new/slider-round-s1-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-s1-min.png')} alt='slider-image' /> */}
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/new/slider-round-dash3_new-min.png')} alt="image" />
+                                {/* <LazyImage src={localImgLoad('images/slider/new/slider-round-dash3_new-min.png')} alt='slider-image' /> */}
                             </div>
                         </div>
                     </OwlCarousel>