From 601c3b4da0e9fdda46a8757bd49d85e909f226d1 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 4 Nov 2023 17:41:44 +0100
Subject: [PATCH] banner section layout

---
 src/assets/css/main.css   |  3 ---
 src/components/lnd/Lnd.js | 26 +++++++++++++-------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 113d9ee..a9aabbe 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -8502,9 +8502,6 @@ LND PAGE STYLE STARTS HERE
 .yt_video .play_btn img{
   background-color: rgba(255,255,255,0.3);
 }
-.banner_images .img-con{
- /* gap: 10px; */
-}
 
 @media (max-width: 767px) {
   .banner_text h1{
diff --git a/src/components/lnd/Lnd.js b/src/components/lnd/Lnd.js
index bb7d451..f5a9bec 100644
--- a/src/components/lnd/Lnd.js
+++ b/src/components/lnd/Lnd.js
@@ -169,31 +169,31 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                 </div>
                 <div className="container-fluid p-3 p-lg-5"  data-aos="fade-in" data-aos-duration="1500">
                     <div className="banner_images">
-                        <div className="img-con row text-center">
-                            <div className="col-md-2 col-xl-2 d-none d-lg-block">
+                        <div className="img-con d-block d-sm-flex justify-content-around align-items-center gap-5">
+                            <div className="col-lg-2 d-none d-lg-block">
                                 <div className="banner_screen screen1 text-center">
                                     <img className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
                                 </div>
                             </div>
 
-                            <div className="col-12 col-md-4 col-xl-2">
+                            <div className="col-12 col-sm-4 col-lg-2">
                                 <div className="banner_screen screen2 text-center">
                                     <img className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
                                 </div>
                             </div>
 
-                            <div className="col-12 col-md-4 col-xl-2">
+                            <div className="my-4 my-md-0 col-12 col-sm-4 col-lg-3">
                                 <div className="banner_screen screen3 text-center">
                                     <img className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
                                 </div>
                             </div>
 
-                            <div className="col-12 col-md-4 col-xl-2">
+                            <div className="col-12 col-sm-4 col-lg-2">
                                 <div className="banner_screen screen4 text-center">
                                     <img className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
                                 </div>
                             </div>
-                            <div className="col-md-2 col-xl-2 d-none d-lg-block">
+                            <div className="col-lg-2 d-none d-lg-block">
                                 <div className="banner_screen screen5 text-center">
                                     <img className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
                                 </div>
@@ -227,7 +227,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
                             <li>
                                 <div className="icon">
-                                    <img src="assets/images/download-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/download-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
@@ -239,7 +239,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
                             <li>
                                 <div className="icon">
-                                    <img src="assets/images/followers-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/followers-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
@@ -251,7 +251,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
                             <li>
                                 <div className="icon">
-                                    <img src="assets/images/reviews-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/reviews-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
@@ -263,7 +263,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
                             <li>
                                 <div className="icon">
-                                    <img src="assets/images/countries-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/countries-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
@@ -286,7 +286,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
                                         <div className="image">
-                                            <img src="assets/images/features1.png" alt="image" />
+                                            <img src={localImgLoad('images/features1.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Secure data</h4>
@@ -298,7 +298,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
                                         <div className="image">
-                                            <img src="assets/images/features2.png" alt="image" />
+                                            <img src={localImgLoad('images/features2.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Automate everything</h4>
@@ -310,7 +310,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                         <div className="image">
-                                            <img src="assets/images/features3.png" alt="image" />
+                                            <img src={localImgLoad('images/features3.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Secure data</h4>
-- 
2.34.1