Compare commits

..

5 Commits

Author SHA1 Message Date
victorAnumudu 601c3b4da0 banner section layout 2023-11-04 17:41:44 +01:00
victorAnumudu 4f5c99bced banner section layout 2023-11-04 10:08:09 +01:00
ameye 77d97548e4 Merge branch 'images-resizing' of WrenchBoard/WrenchBoardMainSite into master 2023-11-03 17:53:12 +00:00
ameye 18f651f215 Merge branch 'lnd-bug' of WrenchBoard/WrenchBoardMainSite into master 2023-11-03 17:53:07 +00:00
Chief Bube 53e429468c added explicit sizes for the mentioned images 2023-11-03 09:56:00 -07:00
6 changed files with 113 additions and 48 deletions
+58
View File
@@ -8457,4 +8457,62 @@ 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);
}
@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;
}
}
+1 -1
View File
@@ -65,7 +65,7 @@ function HeroHomeOne() {
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<img src={heroThumbTwo} alt="" />
<img src={heroThumbTwo} alt="" width="100%" height="100%" />
</div>
</div>
</div>
+1 -1
View File
@@ -43,7 +43,7 @@ function TrafficHomeOne() {
data-wow-delay="200ms"
src={thumb}
alt=""
style={{ zIndex: "0", minHeight: "300", minWidth: "400" }}
style={{ zIndex: "0", minHeight: "300px", minWidth: "400px", width: "100%" }}
/>
</div>
</div>
@@ -39,6 +39,7 @@ function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
src={image}
alt="image"
style={{
width: "100%",
minWidth: "100%",
maxHeight: "695px",
height: "100%",
+50 -46
View File
@@ -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 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-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-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-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="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-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-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-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-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>
</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>
@@ -223,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>
@@ -235,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>
@@ -247,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>
@@ -259,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>
@@ -282,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>
@@ -294,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>
@@ -306,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
View File
@@ -0,0 +1,2 @@
const localImgLoad = (location) => require(`../assets/${location}`);
export default localImgLoad