From 4f5c99bced8d4ceb7c1fd428f255fa32219a1165 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 4 Nov 2023 10:08:09 +0100
Subject: [PATCH] banner section layout

---
 src/assets/css/main.css   | 61 +++++++++++++++++++++++++++++
 src/components/lnd/Lnd.js | 82 ++++++++++++++++++++-------------------
 src/lib/localImgLoad.js   |  2 +
 3 files changed, 106 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/localImgLoad.js

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 5afa7cf..113d9ee 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -8457,4 +8457,65 @@ blockquote cite {
   animation-timing-function: linear;
   animation-duration: .5s;
   animation-fill-mode: forwards; */
+}
+
+
+
+/*
+LND PAGE STYLE STARTS HERE
+*/
+
+/* 1.0 BANNER SECTION */
+.banner_section{
+  background: linear-gradient(to left top, #0e1133, #15233d);
+}
+.banner_shape1{
+  left: 0;
+  top: 50%;
+  transform: rotate(45deg);
+}
+.banner_shape2{
+  top: 40%;
+  left: 90%;
+  transform: rotate(180deg);
+}
+.banner_shape3{
+  bottom: 0;
+  right: 0;
+  transform: rotate(40deg);
+}
+.banner_text h1{
+  font-size: 50px;
+  line-height: normal;
+}
+.banner_text p{
+  font-size: 16px;
+}
+.yt_video .play-button{
+  cursor: pointer;
+}
+.yt_video .play_btn{
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255,255,255,0.1);
+}
+.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{
+    font-size: 20px;
+  }
+  .banner_images img{
+    width: 80%;
+  }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+  .banner_text h1{
+    font-size: 30px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/lnd/Lnd.js b/src/components/lnd/Lnd.js
index 66e5b22..bb7d451 100644
--- a/src/components/lnd/Lnd.js
+++ b/src/components/lnd/Lnd.js
@@ -39,6 +39,8 @@ import Faq from './LndParts/Faq/Main'
 import Download from './LndParts/Download/Main'
 import Story from './LndParts/Story/Main'
 
+import localImgLoad from '../../lib/localImgLoad'
+
 
 const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
 
@@ -133,65 +135,67 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
             </div>
         </header>
         </div>  */}
-            <section className="banner_section homedark-banner">
+            <section className="banner_section homedark-banner min-vh-100">
                 <div className="container">
-                    <div className="row">
-                        <span className="banner_shape1"> <img src="assets/images/banner-shape-one1.png" alt="image" /> </span>
-                        <span className="banner_shape2"> <img src="assets/images/banner-shape2two.png" alt="image" /> </span>
-                        <span className="banner_shape3"> <img src="assets/images/banner-shapethree3.png" alt="image" /> </span>
+                    <div className="row position-relative">
+                        <span className="position-absolute banner_shape1"> <img src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape2"> <img src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape3"> <img src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
 
-                        <div className="col-lg-8 col-md-12 mx-auto"  data-aos="fade-right" data-aos-duration="1500">
-                            <div className="banner_text">
-                                <h1>Best way to manage your customers easily.</h1>
-                                <p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.
-                                </p>
+                        <div className="col-12 col-lg-6 mx-auto text-center"  data-aos="fade-right" data-aos-duration="1500">
+                            <div className="banner_text my-3 p-4">
+                                <h1 className='text-white my-2'>Best way to manage your customers easily.</h1>
+                                <p className='text-white my-2'>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.</p>
                             </div>
                             <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
                                 <div className="thumbnil">
                                     <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
-                        <span className="play_btn">
-                            <img src="assets/images/play_icon.png" alt="image" />
-                            <div className="waves-block">
-                            <div className="waves wave-1"></div>
-                            <div className="waves wave-2"></div>
-                            <div className="waves wave-3"></div>
-                            </div>
-                        </span>
+                                        {/* <span className="play_btn position-relative">
+                                            <img src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
+                                            <div className="waves-block">
+                                                <div className="waves wave-1"></div>
+                                                <div className="waves wave-2"></div>
+                                                <div className="waves wave-3"></div>
+                                            </div>
+                                        </span> */}
+                                        <span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
+                                            <img src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
+                                        </span>
                                     </a>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div className="container-fluid"  data-aos="fade-in" data-aos-duration="1500">
+                <div className="container-fluid p-3 p-lg-5"  data-aos="fade-in" data-aos-duration="1500">
                     <div className="banner_images">
-                        <div className="row d-flex justify-content-center">
-                            <div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
-                                <div className="banner_screen screen1">
-                                    <img className="moving_position_animatin" src="assets/images/hero-image-5.png" alt="image" />
+                        <div className="img-con row text-center">
+                            <div className="col-md-2 col-xl-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-md-4 col-lg-2 col-sm-4 col-xs-4">
-                                <div className="banner_screen screen2">
-                                    <img className="moving_animation" src="assets/images/hero-image-4.png" alt="image" />
+                            <div className="col-12 col-md-4 col-xl-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-md-4 col-lg-3 col-sm-4 col-xs-4">
-                                <div className="banner_screen screen3">
-                                    <img className="moving_position_animatin" src="assets/images/hero-image-1.png" alt="image" />
+                            <div className="col-12 col-md-4 col-xl-2">
+                                <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-md-4 col-lg-2 col-sm-4 col-xs-4">
-                                <div className="banner_screen screen4">
-                                    <img className="moving_animation" src="assets/images/hero-image-2.png" alt="image" />
+                            <div className="col-12 col-md-4 col-xl-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-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
-                                <div className="banner_screen screen5">
-                                    <img className="moving_position_animatin" src="assets/images/hero-image-3.png" alt="image" />
+                            <div className="col-md-2 col-xl-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>
                             </div>
                         </div>
@@ -204,14 +208,14 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                     <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
                         <li>
                             <a href="#" className="app_store">
-                                <img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
-                                <img className="white_img" src="assets/images/appstore_white.png" alt="image" />
+                                <img className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
+                                <img className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
                             </a>
                         </li>
                         <li>
                             <a href="#">
-                                <img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
-                                <img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
+                                <img className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
+                                <img className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
                             </a>
                         </li>
                     </ul>
diff --git a/src/lib/localImgLoad.js b/src/lib/localImgLoad.js
new file mode 100644
index 0000000..2d33975
--- /dev/null
+++ b/src/lib/localImgLoad.js
@@ -0,0 +1,2 @@
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad
\ No newline at end of file