Olu Amey
241 lines
12 KiB
JavaScript
241 lines
12 KiB
JavaScript
import React , { useEffect ,useState } from 'react'
|
||
import { HashLink as Link } from 'react-router-hash-link';
|
||
import AOS from "aos";
|
||
import AboutApp from '../HomeMain/AboutApp/Main'
|
||
import Design from '../HomeMain/Design/Main'
|
||
import Testimonial from '../HomeMain/Testimonial/Main'
|
||
import Pricing from '../HomeMain/Pricing/Main'
|
||
import Faq from '../HomeMain/Faq/Main'
|
||
import Interface from '../HomeMain/Interface/Main'
|
||
import Download from '../HomeMain/Download/Main'
|
||
import Story from '../HomeMain/Story/Main'
|
||
import Trusted from '../HomeMain/Trusted/Main'
|
||
|
||
const Main = ({setnavbar,setfooter}) => {
|
||
useEffect(() => {
|
||
AOS.init();
|
||
AOS.refresh();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setfooter({f3 : true})
|
||
setnavbar({n5 : true})
|
||
localStorage.setItem("navbar","homegredient")
|
||
|
||
}, [])
|
||
|
||
return (
|
||
<>
|
||
<section className="banner_section home-gredient">
|
||
<div className="hero_bg"> <img src="assets/images/hero-bg.png" alt="image" /> </div>
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-6 col-md-12" data-aos="fade-right" data-aos-duration="1500">
|
||
<div className="banner_text">
|
||
<h1>Best way to <span>manage your customers.</span></h1>
|
||
<p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="trial_box">
|
||
<form action="" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||
<div className="form-group">
|
||
<input type="email" className="form-control" placeholder="Enter your email"/>
|
||
</div>
|
||
<div className="form-group">
|
||
<button className="btn">SUBMIT</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div className="trial_box_list">
|
||
<ul>
|
||
<li><i className="icofont-check-circled"></i> Free trial 14 days</li>
|
||
<li><i className="icofont-check-circled"></i> No credit card require</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="used_app">
|
||
<ul>
|
||
<li><img src="assets/images/used01.png" alt="image" /></li>
|
||
<li><img src="assets/images/used02.png" alt="image" /></li>
|
||
<li><img src="assets/images/used03.png" alt="image" /></li>
|
||
<li><img src="assets/images/used04.png" alt="image" /></li>
|
||
</ul>
|
||
<p>12M + <br/> used this app</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6" data-aos="fade-in" data-aos-duration="1500">
|
||
<div className="banner_images image_box1">
|
||
<span className="banner_image1"> <img className="moving_position_animatin" src="assets/images/bannerimage1.png" alt="image" /> </span>
|
||
<span className="banner_image2"> <img className="moving_animation" src="assets/images/bannerimage2.png" alt="image" /> </span>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-md-6" data-aos="fade-in" data-aos-duration="1500">
|
||
<div className="banner_images image_box2">
|
||
<span className="banner_image3"> <img className="moving_animation" src="assets/images/bannerimage3.png" alt="image" /> </span>
|
||
<span className="banner_image4"> <img className="moving_position_animatin" src="assets/images/bannerimage4.png" alt="image" /> </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="row_am features_section features-gredient" id="features">
|
||
<div className="feature_section_bg"> <img src="assets/images/section-bg.png" alt="image" /> </div>
|
||
<div className="container">
|
||
<div className="features_inner">
|
||
<div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||
<img src="assets/images/device-feature.png" alt="image" />
|
||
</div>
|
||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||
<h2><span>Features</span> that makes app different!</h2>
|
||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
|
||
</div>
|
||
<div className="features_block">
|
||
<div className="row">
|
||
<div className="col-md-3">
|
||
<div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
|
||
<div className="image">
|
||
<img src="assets/images/secure.png" alt="image" />
|
||
</div>
|
||
<div className="text">
|
||
<h4>Secure data</h4>
|
||
<p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-3">
|
||
<div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
|
||
<div className="image">
|
||
<img src="assets/images/abt_functional.png" alt="image" />
|
||
</div>
|
||
<div className="text">
|
||
<h4>Automate everything</h4>
|
||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-3">
|
||
<div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
|
||
<div className="image">
|
||
<img src="assets/images/communication.png" alt="image" />
|
||
</div>
|
||
<div className="text">
|
||
<h4>Secure data</h4>
|
||
<p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-3">
|
||
<div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
|
||
<div className="image">
|
||
<img src="assets/images/abt_support.png" alt="image" />
|
||
</div>
|
||
<div className="text">
|
||
<h4>Secure data</h4>
|
||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
< AboutApp />
|
||
< Design gredient = {true} />
|
||
<section className="row_am how_it_works gredient-work" id="how_it_work">
|
||
<div className="how_section_bg"> <img src="assets/images/section-bg.png" alt="image" /> </div>
|
||
<div className="container">
|
||
<div className="how_it_inner">
|
||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||
<h2><span>How it works</span> - 3 easy steps</h2>
|
||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
|
||
standard dummy.</p>
|
||
</div>
|
||
<div className="step_block">
|
||
<ul>
|
||
<li>
|
||
<div className="step_text" data-aos="fade-right" data-aos-duration="1500">
|
||
<h4>Download app</h4>
|
||
<div className="app_icon">
|
||
<a href="#"><i className="icofont-brand-android-robot"></i></a>
|
||
<a href="#"><i className="icofont-brand-apple"></i></a>
|
||
<a href="#"><i className="icofont-brand-windows"></i></a>
|
||
</div>
|
||
<p>Download App either for Windows, Mac or Android</p>
|
||
</div>
|
||
<div className="step_number number1">
|
||
<h3>01</h3>
|
||
</div>
|
||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||
<img src="assets/images/download_app.jpg" alt="image" />
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div className="step_text" data-aos="fade-left" data-aos-duration="1500">
|
||
<h4>Create account</h4>
|
||
<span>14 days free trial</span>
|
||
<p>Sign up free for App account. One account for all devices.</p>
|
||
</div>
|
||
<div className="step_number number2">
|
||
<h3>02</h3>
|
||
</div>
|
||
<div className="step_img" data-aos="fade-right" data-aos-duration="1500">
|
||
<img src="assets/images/create_account.jpg" alt="image" />
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div className="step_text" data-aos="fade-right" data-aos-duration="1500">
|
||
<h4>It’s done, enjoy the app</h4>
|
||
<span>Have any questions check our <a href="#">FAQs</a></span>
|
||
<p>Get most amazing app experience,Explore and share the app</p>
|
||
</div>
|
||
<div className="step_number number3">
|
||
<h3>03</h3>
|
||
</div>
|
||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||
<img src="assets/images/enjoy_app.jpg" alt="image" />
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
|
||
<div className="thumbnil">
|
||
<img src="assets/images/yt_thumb.png" alt="image" />
|
||
<a className="popup-youtube play-button" data-url="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" 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>
|
||
Let’s see virtually how it works
|
||
<span>Watch video</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
< Testimonial />
|
||
< Pricing gredient = {true}/>
|
||
< Faq gredient = {true}/>
|
||
< Interface />
|
||
< Download />
|
||
< Story />
|
||
< Trusted />
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Main |