myfit starter commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,327 @@
|
||||
import React, { useState , useEffect} from 'react'
|
||||
import Trusted from '../HomeMain/Trusted/Main'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Bredcrumb from '../Bredcrumb/Main'
|
||||
import BGImg from "../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
const [ytShow , setytShow] = useState (false)
|
||||
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="About Us"
|
||||
tag="About us"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b2 &&
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="About Us"
|
||||
tag="About us"
|
||||
bgimg={BGImg1}/>}
|
||||
|
||||
{brdcum.b5 &&
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="About Us"
|
||||
tag="About us"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
|
||||
{brdcum.b3 &&
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="About Us"
|
||||
tag="About us" />}
|
||||
|
||||
{brdcum.b4 &&
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="About Us"
|
||||
tag="About us"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
<section className="row_am app_solution_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="app_text">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2><span>Providing innovative app solution</span> to make customer
|
||||
life easy to grow.</h2>
|
||||
</div>
|
||||
<p data-aos="fade-up" data-aos-duration="1500">
|
||||
Lorem Ipsum is simply dummy text of the printing and type
|
||||
setting industry lorem Ipsum has been the industrys standard dummy text ever since the when an unknown
|
||||
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
|
||||
five centuries, but also the leap into electronic typesetting, remaining to make a type speci
|
||||
men book. It has survived essentially unchanged.
|
||||
</p>
|
||||
<p data-aos="fade-up" data-aos-duration="1500">
|
||||
Standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specien book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="app_images" data-aos="fade-in" data-aos-duration="1500">
|
||||
<ul>
|
||||
<li><img src="assets/images/abt_01.png" alt="" /></li>
|
||||
<li>
|
||||
<a data-url="#" onClick = {() => setytShow(true)} className="popup-youtube play-button"
|
||||
data-toggle="modal"
|
||||
data-target="#myModal" title="About Video">
|
||||
<img src="assets/images/abt_02.png" alt="" />
|
||||
<div className="waves-block">
|
||||
<div className="waves wave-1"></div>
|
||||
<div className="waves wave-2"></div>
|
||||
<div className="waves wave-3"></div>
|
||||
</div>
|
||||
<span className="play_icon"><img src="assets/images/play_black.png" alt="image"/></span>
|
||||
</a>
|
||||
</li>
|
||||
<li><img src="assets/images/abt_03.png" alt="" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am why_we_section" data-aos="fade-in">
|
||||
<div className="why_inner">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2><span>Why we are different</span> from others!</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="row">
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<div className="icon">
|
||||
<img src="assets/images/secure.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Secure code</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type
|
||||
setting indus ideas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_functional.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Fully functional</h3>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<div className="icon">
|
||||
<img src="assets/images/communication.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Best communication</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type
|
||||
setting indus ideas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_support.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>24-7 Support</h3>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am about_app_section about_page_sectino">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="abt_img" data-aos="fade-in" data-aos-duration="1500">
|
||||
<img src="assets/images/about_main.png" alt="image"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="about_text">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2> <span>We focus on quality,</span> never
|
||||
focus on quantity</h2>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industrys standard dummy text ever since the when an unknown printer took a galley of type and.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
|
||||
<li>
|
||||
<div className="icon">
|
||||
<img src="assets/images/download.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
|
||||
<p>Download</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="icon">
|
||||
<img src="assets/images/followers.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
|
||||
<p>Followers</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="icon">
|
||||
<img src="assets/images/reviews.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
|
||||
<p>Reviews</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="icon">
|
||||
<img src="assets/images/countries.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="150">0</span><span>+</span></p>
|
||||
<p>Countries</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am experts_team_section">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2> Meet our <span> experts </span></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="row">
|
||||
<div className="col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<div className="experts_box">
|
||||
<img src="assets/images/experts_01.png" alt="image"/>
|
||||
<div className="text">
|
||||
<h3>Steav Joe</h3>
|
||||
<span>CEO & Co-Founder</span>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
|
||||
<div className="experts_box">
|
||||
<img src="assets/images/experts_02.png" alt="image"/>
|
||||
<div className="text">
|
||||
<h3>Mark Dele</h3>
|
||||
<span>Co-Founder</span>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<div className="experts_box">
|
||||
<img src="assets/images/experts_03.png" alt="image"/>
|
||||
<div className="text">
|
||||
<h3>Jolley Sihe</h3>
|
||||
<span>Business Developer</span>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
|
||||
<div className="experts_box">
|
||||
<img src="assets/images/experts_04.png" alt="image"/>
|
||||
<div className="text">
|
||||
<h3>Rimy Nail</h3>
|
||||
<span>Marketing & Sales</span>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am query_section">
|
||||
<div className="query_inner" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="section_title">
|
||||
<h2>Have any query about ?</h2>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
|
||||
</div>
|
||||
<Link to="/contact" className="btn white_btn">CONTACT US NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Trusted />
|
||||
|
||||
{ytShow &&
|
||||
<>
|
||||
<div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
|
||||
<i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
|
||||
</button>
|
||||
<div className="modal-body">
|
||||
<div id="video-container" className="video-container">
|
||||
<iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="purple_backdrop"></div>
|
||||
</>}
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,347 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum,bgimg}) => {
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${BGImg})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>Latest blog post</h1>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/blog">Blog list</Link></li>
|
||||
</ul>
|
||||
{/* <div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{brdcum.b2 &&
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${BGImg1})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>Latest blog post</h1>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/blog">Blog list</Link></li>
|
||||
</ul>
|
||||
<div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{brdcum.b5 &&
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${BGImg})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>Latest blog post</h1>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/blog">Blog list</Link></li>
|
||||
</ul>
|
||||
<div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{brdcum.b3 &&
|
||||
<div className="bred_crumb gredient-bg">
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shapev.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shapev2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shapev3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>Latest blog post</h1>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/blog">Blog list</Link></li>
|
||||
</ul>
|
||||
<div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{brdcum.b4 &&
|
||||
<div className="bred_crumb video" style={{ backgroundImage : `url(${BGImg2})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>Latest blog post</h1>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/blog">Blog list</Link></li>
|
||||
</ul>
|
||||
<div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
<section className="row_am blog_list_main">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="blog_img">
|
||||
<img src="assets/images/blod-detail.png" alt="image"/>
|
||||
<span>20 min ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<span className="choice_badge">EDITOR CHOICE</span>
|
||||
<div className="section_title">
|
||||
<h2>Top rated app of the year!</h2>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in
|
||||
dustry lorem Ipsum has been the industrys standard dummy text ev
|
||||
er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am latest_story blog_list_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story01.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Cool features added!</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story02.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Top rated app! Yupp.</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story03.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Creative ideas on app.</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story04.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Excellence UI design</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story05.png" alt="image"/>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Quick and easy Search</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story06.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Chat function eded</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story07.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Cool features added!</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story08.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Top rated app! Yupp.</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story09.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Creative ideas on app.</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story01.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Excellence UI design</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story02.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Quick and easy Search</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story03.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Chat function eded</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="pagination_block">
|
||||
<ul>
|
||||
<li><Link to="#" className="prev"><i className="icofont-arrow-left"></i> Prev</Link></li>
|
||||
<li><Link to="#">1</Link></li>
|
||||
<li><Link to="#" className="active">2</Link></li>
|
||||
<li><Link to="#">3</Link></li>
|
||||
<li><Link to="#">4</Link></li>
|
||||
<li><Link to="#">5</Link></li>
|
||||
<li><Link to="#">6</Link></li>
|
||||
<li><Link to="#" className="next">Next <i className="icofont-arrow-right"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,275 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Bredcrumb from '../../Bredcrumb/Main'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{brdcum.b1 &&
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b2 &&
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg1}/>}
|
||||
|
||||
{brdcum.b5 &&
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b3 &&
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Blog details"
|
||||
tag="Blog single" />}
|
||||
|
||||
{brdcum.b4 &&
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
<section className="blog_detail_section">
|
||||
<div className="container">
|
||||
<div className="blog_inner_pannel">
|
||||
<div className="review">
|
||||
<span>Review</span>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="section_title">
|
||||
<h2>Top rated app of the year!</h2>
|
||||
</div>
|
||||
<div className="main_img">
|
||||
<img src="assets/images/blog_detail_main.png" alt="image" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
|
||||
<p>Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.</p>
|
||||
<h3>Why we are best</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
|
||||
<ul>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing and typesetting in </p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only five centuries, but also the leap into electronic.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only.</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="two_img">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<img src="assets/images/blog_sub_01.png" alt="image" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<img src="assets/images/blog_sub_02.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3>Why we are best</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
|
||||
</div>
|
||||
<div className="quote_block">
|
||||
<span className="q_icon"><img src="assets/images/quote_icon.png" alt="image" /></span>
|
||||
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.</h2>
|
||||
<p><span className="name">Mr. John Doe,</span> Apper Inc</p>
|
||||
</div>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.</p>
|
||||
<div className="blog_authore">
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d02.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>By: John Dow</h3>
|
||||
<span>July 25, 2022</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social_media">
|
||||
<ul>
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog_tags">
|
||||
<ul>
|
||||
<li className="tags"><p>Tags:</p></li>
|
||||
<li><span>app,</span></li>
|
||||
<li><span>rating,</span></li>
|
||||
<li><span>development</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am comment_section">
|
||||
<div className="container">
|
||||
<div className="section_title">
|
||||
<h2>3 Comments</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d01.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>30 min ago</span>
|
||||
<h4>Dolly Shell</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
|
||||
dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen. </p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="replay_comment">
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d02.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>15 min ago</span>
|
||||
<h4>Devil Joe</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the when.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d03.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>2 days ago</span>
|
||||
<h4>Sherly Shie</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
|
||||
dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen. </p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="row_am comment_form_section">
|
||||
<div className="container">
|
||||
<div className="section_title">
|
||||
<h2>Leave a <span>comment</span></h2>
|
||||
<p>Your email address will not be published. Required fields are marked *</p>
|
||||
</div>
|
||||
<form action="">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Name *" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="email" className="form-control" placeholder="Email *" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Phone" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Website " />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="form-group">
|
||||
<textarea className="form-control" placeholder="Comments"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 text-center">
|
||||
<button className="btn puprple_btn" type="submit">POST COMMENTS</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="row_am latest_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Read latest <span>story</span></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="row">
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story01.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Cool features added!</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="#">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story02.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Top rated app! Yupp.</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="#">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story03.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Creative ideas on app.</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="#">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,110 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const Main = ({title,tag,bgimg,paragraph,no}) => {
|
||||
|
||||
return (
|
||||
|
||||
<>
|
||||
{no === 1 &&
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${bgimg})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>{title}</h1>
|
||||
<p>{paragraph}</p>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/about">{tag}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{no === 2 &&
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${bgimg})`}}>
|
||||
<div className="container">
|
||||
<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="bred_text">
|
||||
<h1>{title}</h1>
|
||||
<p>{paragraph}</p>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/about">{tag}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{no === 3 &&
|
||||
<div className="bred_crumb gredient-bg">
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shapev.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shapev2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shapev3.png" alt="image" /> </span>
|
||||
<div className="bred_text">
|
||||
<h1>{title}</h1>
|
||||
<p>{paragraph}</p>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/about">{tag}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{no === 4 &&
|
||||
<div className="bred_crumb video" style={{ backgroundImage : `url(${bgimg})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>{title}</h1>
|
||||
<p>{paragraph}</p>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/about">{tag}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{no === 5 &&
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${bgimg})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>{title}</h1>
|
||||
<p>{paragraph}</p>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/about">{tag}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,174 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import Bredcrumb from "../Bredcrumb/Main";
|
||||
import BGImg from "../../assets/images/bread_crumb_bg.png";
|
||||
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
|
||||
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
|
||||
|
||||
const Main = ({ brdcum }) => {
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 && (
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Contact Us"
|
||||
paragraph="Ib you have an query, please get in touch with us, we will revert back quickly."
|
||||
tag="Contact us"
|
||||
bgimg={BGImg}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b2 && (
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Contact Us"
|
||||
paragraph="If you have an query, please get in touch with us, we will revert back quickly."
|
||||
tag="Contact us"
|
||||
bgimg={BGImg1}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b5 && (
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Contact Us"
|
||||
paragraph="If you have an query, please get in touch with us, we will revert back quickly."
|
||||
tag="Contact us"
|
||||
bgimg={BGImg}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b3 && (
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Contact Us"
|
||||
paragraph="If you have an query, please get in touch with us, we will revert back quickly."
|
||||
tag="Contact us"
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b4 && (
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Contact Us"
|
||||
paragraph="If you have an query, please get in touch with us, we will revert back quickly."
|
||||
tag="Contact us"
|
||||
bgimg={BGImg2}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="contact_page_section" id="contact">
|
||||
<div className="container">
|
||||
<div className="contact_inner">
|
||||
<div className="contact_form">
|
||||
<div className="section_title">
|
||||
<h2>
|
||||
Leave a <span>message</span>
|
||||
</h2>
|
||||
<p>Fill up form below, our team will get back soon</p>
|
||||
</div>
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<select className="form-control">
|
||||
<option value="">Country</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Phone"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
className="form-control"
|
||||
placeholder="Your message"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="form-group term_check">
|
||||
<input type="checkbox" id="term" />
|
||||
<label htmlFor="term">
|
||||
I agree to the terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group mb-0">
|
||||
<button type="submit" className="btn puprple_btn">
|
||||
SEND MESSAGE
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="contact_info">
|
||||
<div className="icon">
|
||||
<img src="assets/images/contact_message_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="section_title">
|
||||
<h2>
|
||||
Have any <span>question?</span>
|
||||
</h2>
|
||||
<p>
|
||||
If you have any question about our product, service, payment
|
||||
or company, Visit our <Link to="/faq">FAQs page.</Link>
|
||||
</p>
|
||||
</div>
|
||||
<Link to="/faq" className="btn puprple_btn">
|
||||
READ FAQ
|
||||
</Link>
|
||||
<ul className="contact_info_list">
|
||||
<li>
|
||||
<div className="img">
|
||||
<img src="assets/images/mail_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Email Us</span>
|
||||
<Link to="#">example@gmail.com</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="img">
|
||||
<img src="assets/images/call_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Call Us</span>
|
||||
<Link to="#">+1 (888) 553-46-11</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="img">
|
||||
<img src="assets/images/location_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Visit Us</span>
|
||||
<p>5687, Business Avenue, New York, USA 5687</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am map_section">
|
||||
<div className="container"></div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
@@ -0,0 +1,444 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React from 'react'
|
||||
import line from '../../assets/images/anim_line.png'
|
||||
import blueapp from '../../assets/images/appstore_blue.png'
|
||||
import blue from '../../assets/images/googleplay_blue.png'
|
||||
import logo from '../../assets/images/logo_white.png'
|
||||
import top from '../../assets/images/go_top.png'
|
||||
|
||||
const Main = ({footer}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{footer.f1 &&
|
||||
<footer>
|
||||
<div className="top_footer" id="contact">
|
||||
<div className="anim_line dark_bg">
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6 col-12">
|
||||
<div className="abt_side">
|
||||
<div className="logo"> <img src={logo} alt="image" /></div>
|
||||
<ul>
|
||||
<li><Link to="#">support@mermsemr.com</Link></li>
|
||||
<li><Link to="#">+1-900-123 4567</Link></li>
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Useful Links</h3>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/about">About us</Link></li>
|
||||
<li><Link to="/blog">Blog</Link></li>
|
||||
<li><Link to="/contact">Contact us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li><Link to="/faq">FAQs</Link></li>
|
||||
<li><Link to="/#how_it_work">How it works</Link></li>
|
||||
<li><Link to="#">Terms & conditions</Link></li>
|
||||
<li><Link to="#">Privacy policy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6 col-12">
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blueapp} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blue} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom_footer">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<p>© Copyrights {process.env.APP_YEAR}. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="developer_text">.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="go_top">
|
||||
<span><img src={top} alt="image" /></span>
|
||||
</div>
|
||||
</footer> }
|
||||
|
||||
{footer.f2 &&
|
||||
<footer>
|
||||
<div className="top_footer top_footer-dark" id="contact">
|
||||
<div className="container">
|
||||
<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">
|
||||
<div className="col-lg-4 col-md-6 col-12">
|
||||
<div className="abt_side">
|
||||
<div className="logo"> <img src="assets/images/footer_logo.png" alt="image" /></div>
|
||||
<ul>
|
||||
<li><Link to="#">support@mermsemr.com</Link></li>
|
||||
<li><Link to="#">+1-900-123 4567</Link></li>
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Useful Links</h3>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/about">About us</Link></li>
|
||||
<li><Link to="#">Services</Link></li>
|
||||
<li><Link to="/blog">Blog</Link></li>
|
||||
<li><Link to="/contact">Contact us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li><Link to="/faq">FAQs</Link></li>
|
||||
<li><Link to="#">Support</Link></li>
|
||||
<li><Link to="/#how_it_work">How it works</Link></li>
|
||||
<li><Link to="#">Terms & conditions</Link></li>
|
||||
<li><Link to="#">Privacy policy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6 col-12">
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom_footer bottom_footer-dark">
|
||||
<div className="container">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<p>© Copyrights {process.env.APP_YEAR}. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="developer_text">.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="go_top">
|
||||
<span><img src="assets/images/go_top.png" alt="image" /></span>
|
||||
</div>
|
||||
</footer> }
|
||||
|
||||
{footer.f3 &&
|
||||
<footer className="gredient-footer">
|
||||
<div className="footer_bg"> <img src="assets/images/section-bg.png" alt="image" /> </div>
|
||||
<div className="top_footer" id="contact">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6 col-12">
|
||||
<div className="abt_side">
|
||||
<div className="logo"> <img src="assets/images/footer_logo-one.png" alt="image" /></div>
|
||||
<ul>
|
||||
<li><Link to="#">support@mermsemr.com</Link></li>
|
||||
<li><Link to="#">+1-900-123 4567</Link></li>
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Useful Links</h3>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/about">About us</Link></li>
|
||||
<li><Link to="#">Services</Link></li>
|
||||
<li><Link to="/blog">Blog</Link></li>
|
||||
<li><Link to="/contact">Contact us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li><Link to="/faq">FAQs</Link></li>
|
||||
<li><Link to="#">Support</Link></li>
|
||||
<li><Link to="/work">How it works</Link></li>
|
||||
<li><Link to="#">Terms & conditions</Link></li>
|
||||
<li><Link to="#">Privacy policy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-2 col-md-6 col-12">
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom_footer">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<p>© Copyrights {process.env.APP_YEAR}. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="developer_text">.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="go_top">
|
||||
<span><img src="assets/images/go_top-one.png" alt="image" /></span>
|
||||
</div>
|
||||
</footer> }
|
||||
|
||||
{footer.f4 &&
|
||||
<footer className="video-footer-two">
|
||||
<div className="top_footer" id="contact">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6 col-12">
|
||||
<div className="abt_side">
|
||||
<div className="logo"> <img src="assets/images/footer_logo.png" alt="image" /></div>
|
||||
<ul>
|
||||
<li><Link to="#">support@mermsemr.com</Link></li>
|
||||
<li><Link to="#">+1-900-123 4567</Link></li>
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Useful Links</h3>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/about">About us</Link></li>
|
||||
<li><Link to="#">Services</Link></li>
|
||||
<li><Link to="/blog">Blog</Link></li>
|
||||
<li><Link to="/contact">Contact us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li><Link to="/faq">FAQs</Link></li>
|
||||
<li><Link to="#">Support</Link></li>
|
||||
<li><Link to="/work">How it works</Link></li>
|
||||
<li><Link to="#">Terms & conditions</Link></li>
|
||||
<li><Link to="#">Privacy policy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-2 col-md-6 col-12">
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom_footer">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<p>© Copyrights {process.env.APP_YEAR}. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="developer_text">.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="go_top">
|
||||
<span><img src="assets/images/go_top-one.png" alt="image" /></span>
|
||||
</div>
|
||||
</footer> }
|
||||
|
||||
{footer.f5 &&
|
||||
<footer>
|
||||
<div className="top_footer footer-wave" id="contact">
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image"/> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image"/> </span>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6 col-12">
|
||||
<div className="abt_side">
|
||||
<div className="logo"> <img src="assets/images/footer_logo.png" alt="image" /></div>
|
||||
<ul>
|
||||
<li><Link to="#">support@mermsemr.com</Link></li>
|
||||
<li><Link to="#">+1-900-123 4567</Link></li>
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Useful Links</h3>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/about">About us</Link></li>
|
||||
<li><Link to="#">Services</Link></li>
|
||||
<li><Link to="/blog">Blog</Link></li>
|
||||
<li><Link to="/contact">Contact us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li><Link to="/faq">FAQs</Link></li>
|
||||
<li><Link to="#">Support</Link></li>
|
||||
<li><Link to="/work">How it works</Link></li>
|
||||
<li><Link to="#">Terms & conditions</Link></li>
|
||||
<li><Link to="#">Privacy policy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6 col-12">
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom_footer">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<p>© Copyrights {process.env.APP_YEAR}. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<p className="developer_text">.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="go_top">
|
||||
<span><img src="assets/images/go_top.png" alt="image" /></span>
|
||||
</div>
|
||||
</footer> }
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,153 @@
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import React , {useEffect, useState} from 'react'
|
||||
import AOS from "aos";
|
||||
import OwlCarousel from 'react-owl-carousel'
|
||||
import Trusted from '../HomeMain/Trusted/Main'
|
||||
import Features from '../HomeMain/Features/Main'
|
||||
import AboutApp from '../HomeMain/AboutApp/Main'
|
||||
import Design from '../HomeMain/Design/Main'
|
||||
import Work from '../HomeMain/Work/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 anim from '../../assets/images/anim_line.png'
|
||||
import blueapp from '../../assets/images/appstore_blue.png'
|
||||
import whiteapp from '../../assets/images/appstore_white.png'
|
||||
import blue from '../../assets/images/googleplay_blue.png'
|
||||
import white from '../../assets/images/googleplay_white.png'
|
||||
import used1 from '../../assets/images/used01.png'
|
||||
import used2 from '../../assets/images/used02.png'
|
||||
import used3 from '../../assets/images/used03.png'
|
||||
import used4 from '../../assets/images/used04.png'
|
||||
import msg from '../../assets/images/message_icon.png'
|
||||
import shield from '../../assets/images/shield_icon.png'
|
||||
import screen from '../../assets/images/screen.png'
|
||||
import frame from '../../assets/images/mobile_frame_svg.svg'
|
||||
|
||||
|
||||
const Main = ({setfooter , setnavbar ,setbrdcum}) => {
|
||||
|
||||
useEffect(() => {
|
||||
AOS.init();
|
||||
AOS.refresh();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setfooter({f1 : true})
|
||||
setnavbar({n2 : true})
|
||||
setbrdcum({b1 : true})
|
||||
localStorage.setItem("navbar","home")
|
||||
|
||||
}, [])
|
||||
|
||||
const frmae_slider = {
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:false,
|
||||
autoplay: true,
|
||||
smartSpeed: 1500,
|
||||
dots: true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
600:{
|
||||
items:1
|
||||
},
|
||||
1000:{
|
||||
items:1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="banner_section home-banner">
|
||||
<div className="container">
|
||||
<div className="anim_line">
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
<span><img src={anim} alt="anim_line"/></span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-12" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="banner_text">
|
||||
<h1>your Personal<span> health care platform.</span></h1>
|
||||
<p>myFit is your personal health care concierge. this app helps you to manage the intricacies of your daily and long term health activities. With myFit, your health record is yours at all point, you decide your provider access as needed from time to time.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img className="blue_img" src={blueapp} alt="image" />
|
||||
<img className="white_img" src={whiteapp} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img className="blue_img" src={blue} alt="image" />
|
||||
<img className="white_img" src={white} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-12" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="banner_slider">
|
||||
<div className="left_icon">
|
||||
<img src={msg} alt="image" />
|
||||
</div>
|
||||
<div className="right_icon">
|
||||
<img src={shield} alt="image" />
|
||||
</div>
|
||||
<OwlCarousel id="frmae_slider" className="owl-carousel owl-theme owl-loaded owl-drag" {...frmae_slider}>
|
||||
<div className="item">
|
||||
<div className="slider_img">
|
||||
<img src={screen} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="slider_img">
|
||||
<img src={screen} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="slider_img">
|
||||
<img src={screen} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</OwlCarousel>
|
||||
<div className="slider_frame">
|
||||
<img src={frame} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/*<Trusted /> */}
|
||||
<Features />
|
||||
{ /* <AboutApp />
|
||||
<Design /> */}
|
||||
<Work />
|
||||
{/* <Testimonial />
|
||||
<Pricing />*/}
|
||||
<Faq/>
|
||||
<Interface/>
|
||||
<Download />
|
||||
<Story/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,331 @@
|
||||
import React , {useState, useEffect} from 'react'
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import Design from '../HomeMain/Design/Main'
|
||||
import Work from '../HomeMain/Work/Main'
|
||||
import Testimonial from '../HomeMain/Testimonial/Main'
|
||||
import AboutApp from '../HomeMain/AboutApp/Main'
|
||||
import Trusted from '../HomeMain/Trusted/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'
|
||||
|
||||
|
||||
const Main = ({setnavbar,setfooter,setbrdcum}) => {
|
||||
|
||||
const [ytShow , setytShow] = useState (false)
|
||||
useEffect(() => {
|
||||
setfooter({f2 : true})
|
||||
setnavbar({n3 : true})
|
||||
setbrdcum({b2 : true})
|
||||
localStorage.setItem("navbar","darkhome")
|
||||
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
{/* <div className="home-dark-block">
|
||||
<header style={{position : "fixed"}}>
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/logo.png" alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick = {() => setmobile(true)}>
|
||||
<span className="toggle-bar" onClick = {() => setmobile(false)}></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className={`collapse navbar-collapse ${mobile && "show"}`}>
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown">
|
||||
<Link to="#" className="nav-link" >Home</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
<li><Link to="/home-dark">Home Dark Hero</Link></li>
|
||||
<li><Link to="/home-wave">Home Wave </Link></li>
|
||||
<li><Link to="/home-gredient">Home Gredient</Link></li>
|
||||
<li><Link to="/home-video">Home Video</Link></li>
|
||||
<li><Link to="/home-video2">Home Video 2</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown">
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown">
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</div> */}
|
||||
<section className="banner_section homedark-banner">
|
||||
<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="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>
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid" 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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am download_section homedark-download">
|
||||
<div className="container">
|
||||
<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" />
|
||||
</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" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am statistic_section">
|
||||
<div className="container">
|
||||
<ul className="app_statstic" id="counter" >
|
||||
<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" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
|
||||
<p>Download</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
|
||||
<p>Followers</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
|
||||
<p>Reviews</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="150">0</span><span>+</span></p>
|
||||
<p>Countries</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am features_section homedark-features" id="features">
|
||||
<div className="container">
|
||||
<div className="features_inner">
|
||||
<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-4">
|
||||
<div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="image">
|
||||
<img src="assets/images/features1.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Secure data</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Automate everything</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Secure data</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
< AboutApp dark = {true}/>
|
||||
<Design />
|
||||
<Work dark = {true}/>
|
||||
<Testimonial />
|
||||
<Trusted />
|
||||
<Pricing />
|
||||
<Faq/>
|
||||
<Interface/>
|
||||
<Download />
|
||||
<Story />
|
||||
{ytShow &&
|
||||
<>
|
||||
<div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
|
||||
<i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
|
||||
</button>
|
||||
<div className="modal-body">
|
||||
<div id="video-container" className="video-container">
|
||||
<iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="purple_backdrop"></div>
|
||||
</>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,241 @@
|
||||
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
|
||||
@@ -0,0 +1,103 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React from 'react'
|
||||
import frame from '../../../assets/images/about-frame.png'
|
||||
import screen from '../../../assets/images/about-screen.png'
|
||||
import img1 from '../../../assets/images/download.png'
|
||||
import img2 from '../../../assets/images/followers.png'
|
||||
import img3 from '../../../assets/images/reviews.png'
|
||||
import img4 from '../../../assets/images/countries.png'
|
||||
|
||||
const Main = ({video , dark}) => {
|
||||
return (
|
||||
<>
|
||||
<section className="row_am about_app_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="about_img" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="frame_img">
|
||||
<img className="moving_position_animatin" src={frame} alt="image"/>
|
||||
</div>
|
||||
<div className="screen_img">
|
||||
<img className="moving_animation" src={screen} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="about_text">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Some awesome words <span>about app.</span></h2>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and. Lorem
|
||||
ipsum dolor sit amet.
|
||||
</p>
|
||||
</div>
|
||||
{dark ?
|
||||
<ul className="list">
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<i className="icofont-verification-check"></i> Simply dummy text of the printing and
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<i className="icofont-verification-check"></i> Industrys standard dummy text
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<i className="icofont-verification-check"></i> Simply dummy text of the printing and
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the
|
||||
</li>
|
||||
</ul>
|
||||
:
|
||||
<ul className="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
|
||||
<li>
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/download-one.png" alt="image" /> : <img src={img1} alt="image" />}
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
|
||||
<p>Download</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/followers-one.png" alt="image" /> : <img src={img2} alt="image" /> }
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
|
||||
<p>Followers</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/reviews-one.png" alt="image" /> : <img src={img3} alt="image" /> }
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
|
||||
<p>Reviews</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/countries-one.png" alt="image" /> : <img src={img4} alt="image" /> }
|
||||
</div>
|
||||
<div className="text">
|
||||
<p><span className="counter-value" data-count="150">0</span><span>+</span></p>
|
||||
<p>Countries</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>}
|
||||
<Link to="/contact" className="btn puprple_btn" data-aos="fade-in" data-aos-duration="1500">START FREE TRIAL</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,60 @@
|
||||
import React from 'react'
|
||||
import img1 from '../../../assets/images/modern01.png'
|
||||
import img2 from '../../../assets/images/secure_data.png'
|
||||
import img3 from '../../../assets/images/modern02.png'
|
||||
import img4 from '../../../assets/images/modern03.png'
|
||||
|
||||
const Main = ({gredient}) => {
|
||||
return (
|
||||
<>
|
||||
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
|
||||
{gredient &&
|
||||
<div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_text">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Beautiful design with <span>modern UI</span></h2>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="design_block">
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Carefully designed</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Seamless Sync</h4>
|
||||
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Access Drive</h4>
|
||||
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
|
||||
setting.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="left_img">
|
||||
<img className="moving_position_animatin" src={img1} alt="image" />
|
||||
</div>
|
||||
<div className="right_img">
|
||||
<img className="moving_position_animatin" src={img2} alt="image" />
|
||||
<img className="moving_position_animatin" src={img3} alt="image" />
|
||||
<img className="moving_position_animatin" src={img4} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React, {useState} from 'react'
|
||||
import img from '../../../assets/images/anim_line.png'
|
||||
import blueapp from '../../../assets/images/appstore_blue.png'
|
||||
import blue from '../../../assets/images/googleplay_blue.png'
|
||||
import screen from '../../../assets/images/download-screen01.png'
|
||||
import screen1 from '../../../assets/images/download-screen02.png'
|
||||
|
||||
|
||||
const Main = () => {
|
||||
const [animate, setanimate] = useState()
|
||||
|
||||
|
||||
const [purple, setpurple] = useState()
|
||||
window.addEventListener('scroll', function() {
|
||||
const element = document.getElementsByClassName('free_text');
|
||||
const position = element[0].getBoundingClientRect();
|
||||
|
||||
if(position.top < window.innerHeight && position.bottom >= 0) {
|
||||
const elm = document.getElementsByClassName("purple_backdrop");
|
||||
elm[0].style.opacity = "1";
|
||||
}else{
|
||||
const elm = document.getElementsByClassName("purple_backdrop");
|
||||
elm[0].style.opacity = "0";
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="row_am free_app_section review_freeapp" id="getstarted">
|
||||
<div className="container">
|
||||
<div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<div className="anim_line dark_bg">
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
<span><img src={img} alt="anim_line" /></span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="free_text">
|
||||
<div className="section_title">
|
||||
<h2>Let’s download free from apple and play store</h2>
|
||||
<p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
|
||||
and typese tting indus orem Ipsum has beenthe standard</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blueapp} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blue} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="free_img">
|
||||
<img src={screen} alt="image" />
|
||||
<img className="mobile_mockup" src={screen1} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="purple_backdrop"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,93 @@
|
||||
import React ,{ useState } from 'react'
|
||||
|
||||
const Main = ({gredient}) => {
|
||||
|
||||
const[activeFaq, setActiveFaq] = useState({a : true})
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="row_am faq_section">
|
||||
{gredient && <div className="faq_bg"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<h2><span>FAQ</span> - Frequently Asked Questions</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="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
<div className="card" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="card-header" id="headingOne">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
|
||||
{activeFaq.a ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>} How can i pay ?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="card-header" id="headingTwo">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
|
||||
data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="card-header" id="headingThree">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
|
||||
data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}What is process to get refund
|
||||
?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="card-header" id="headingFour">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
|
||||
data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}What is process to get refund
|
||||
?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,117 @@
|
||||
import React from 'react'
|
||||
import img1 from '../../../assets/images/secure_data.png'
|
||||
import img2 from '../../../assets/images/functional.png'
|
||||
import img3 from '../../../assets/images/live-chat.png'
|
||||
import img4 from '../../../assets/images/support.png'
|
||||
import img5 from '../../../assets/images/features_frame.png'
|
||||
|
||||
const Main = ({video}) => {
|
||||
return (
|
||||
<>
|
||||
{video ?
|
||||
<section className="row_am features_section video-features" id="features">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<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="feature_detail">
|
||||
<div className="left_data feature_box">
|
||||
<div className="data_block" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<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 className="data_block" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_functional.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Fully functional</h4>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right_data feature_box">
|
||||
<div className="data_block" data-aos="fade-left" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<img src="assets/images/communication.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Live chat</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data_block" data-aos="fade-left" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_support.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>24-7 Support</h4>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<img src="assets/images/features_frame.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
:
|
||||
<section className="row_am features_section" id="features">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<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="feature_detail">
|
||||
<div className="left_data feature_box">
|
||||
<div className="data_block" data-aos="fade-right" data-aos-duration="1500">
|
||||
|
||||
<div className="text">
|
||||
<h4>Health Tips</h4>
|
||||
<p>myFit continuously help you organize both general and the few health questions relevant to you. We can privately help you find answer in our communities to new questions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data_block" data-aos="fade-right" data-aos-duration="1500">
|
||||
|
||||
<div className="text">
|
||||
<h4>Health Statistics</h4>
|
||||
<p>Collect your health statistics yourself, weight changes, blood pressure, blood glucose data all helps to ensure that your provider is creating plans that fits you specifically..</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right_data feature_box">
|
||||
<div className="data_block" data-aos="fade-left" data-aos-duration="1500">
|
||||
|
||||
<div className="text">
|
||||
<h4>Reminders</h4>
|
||||
<p>Miss no appointment, medication schedule and more with myFit reminders. Allow your provider or simply set up whatever you needed reminding for.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data_block" data-aos="fade-left" data-aos-duration="1500">
|
||||
|
||||
<div className="text">
|
||||
<h4>Health Plan</h4>
|
||||
<p>Your health plan your way - myFit assist you organizing your prescription, health routines, your providers treatment plans in one place.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<img src={img5} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,81 @@
|
||||
import OwlCarousel from 'react-owl-carousel'
|
||||
import React from 'react'
|
||||
import img1 from '../../../assets/images/screen-1.png'
|
||||
import img2 from '../../../assets/images/screen-2.png'
|
||||
import img3 from '../../../assets/images/screen-3.png'
|
||||
import img4 from '../../../assets/images/screen-4.png'
|
||||
import img5 from '../../../assets/images/screen-5.png'
|
||||
|
||||
const Main = () => {
|
||||
|
||||
const screen_slider = {
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:false,
|
||||
autoplay: true,
|
||||
smartSpeed: 1500,
|
||||
center: true,
|
||||
dots: true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<section className="row_am interface_section">
|
||||
<div className="container-fluid">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<h2>Beautifull <span>interface</span></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="screen_slider" >
|
||||
<OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
<img src={img1} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
<img src={img2} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
<img src={img3} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
<img src={img4} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
<img src={img5} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
<img src={img3} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</OwlCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,442 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React , { useState} from 'react'
|
||||
import img1 from '../../../assets/images/standard.png'
|
||||
import img2 from '../../../assets/images/unlimited.png'
|
||||
import img3 from '../../../assets/images/premium.png'
|
||||
|
||||
const Main = ({gredient , video}) => {
|
||||
|
||||
const[tog, setTog] = useState()
|
||||
|
||||
return (
|
||||
<>
|
||||
{gredient ?
|
||||
<section className="row_am pricing_section gredient-pricing" id="pricing">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<h2>Best & simple <span>pricing</span></h2>
|
||||
<p className="gredient-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="toggle_block" data-aos="fade-up" data-aos-duration="1500">
|
||||
<span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
|
||||
<div className="tog_block">
|
||||
<span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
|
||||
</div>
|
||||
<span className="years">Yearly</span>
|
||||
<span className="offer">50% off</span>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/standard-one.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$15</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 5 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>50 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/unlimited-one.png" alt="image"/>
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$99</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/premium-one.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$55</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>15 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/standard.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$150</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/unlimited.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$999</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>400 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>40 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/premium.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$550</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 20 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>8 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
|
||||
</div>
|
||||
</section>
|
||||
:
|
||||
<section className="row_am pricing_section" id="pricing">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<h2>Best & simple <span>pricing</span></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="toggle_block" data-aos="fade-up" data-aos-duration="1500">
|
||||
<span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
|
||||
<div className="tog_block">
|
||||
<span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
|
||||
</div>
|
||||
<span className="years">Yearly</span>
|
||||
<span className="offer">50% off</span>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$15</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 5 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>50 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$99</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$55</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>15 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$150</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$999</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>400 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>40 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$550</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 20 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>8 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React from 'react'
|
||||
import story1 from '../../../assets/images/story01.png'
|
||||
import story2 from '../../../assets/images/story02.png'
|
||||
import story3 from '../../../assets/images/story03.png'
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="row_am latest_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Read latest <span>story</span></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="row">
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src={story1} alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Cool features added!</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src={story2} alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Top rated app! Yupp.</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src={story3} alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Creative ideas on app.</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,126 @@
|
||||
import OwlCarousel from 'react-owl-carousel'
|
||||
import { Link } from 'react-router-dom'
|
||||
import React from 'react'
|
||||
import user1 from '../../../assets/images/testimonial_user1.png'
|
||||
import user2 from '../../../assets/images/testimonial_user2.png'
|
||||
import user3 from '../../../assets/images/testimonial_user3.png'
|
||||
import user4 from '../../../assets/images/avtar_testimonial.png'
|
||||
|
||||
const Main = () => {
|
||||
|
||||
const testimonial_slider = {
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:false,
|
||||
autoplay: true,
|
||||
smartSpeed: 1500,
|
||||
dots: true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
600:{
|
||||
items:1
|
||||
},
|
||||
1000:{
|
||||
items:1
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<section className="row_am testimonial_section">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
<h2>What our <span>customer say</span></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="testimonial_block" data-aos="fade-in" data-aos-duration="1500">
|
||||
<OwlCarousel id="testimonial_slider" {...testimonial_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
|
||||
<div className="item">
|
||||
<div className="testimonial_slide_box">
|
||||
<div className="rating">
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
</div>
|
||||
<p className="review">
|
||||
“ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
|
||||
beenthe standar dummy. ”
|
||||
</p>
|
||||
<div className="testimonial_img">
|
||||
<img src={user1} alt="image" />
|
||||
</div>
|
||||
<h3>Shayna John</h3>
|
||||
<span className="designation">Careative inc</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="testimonial_slide_box">
|
||||
<div className="rating">
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
</div>
|
||||
<p className="review">
|
||||
“ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
|
||||
beenthe standar dummy. ”
|
||||
</p>
|
||||
<div className="testimonial_img">
|
||||
<img src={user2} alt="image" />
|
||||
</div>
|
||||
<h3>Willium Den</h3>
|
||||
<span className="designation">Careative inc</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="testimonial_slide_box">
|
||||
<div className="rating">
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
</div>
|
||||
<p className="review">
|
||||
“ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
|
||||
beenthe standar dummy. ”
|
||||
</p>
|
||||
<div className="testimonial_img">
|
||||
<img src={user3} alt="image" />
|
||||
</div>
|
||||
<h3>Cyrus Stephen</h3>
|
||||
<span className="designation">Careative inc</span>
|
||||
</div>
|
||||
</div>
|
||||
</OwlCarousel>
|
||||
|
||||
<div className="total_review">
|
||||
<div className="rating">
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<span><i className="icofont-star"></i></span>
|
||||
<p>5.0 / 5.0</p>
|
||||
</div>
|
||||
<h3>2578</h3>
|
||||
<Link to="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
|
||||
</div>
|
||||
|
||||
<div className="avtar_faces">
|
||||
<img src={user4} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,89 @@
|
||||
import OwlCarousel from 'react-owl-carousel'
|
||||
import React from 'react'
|
||||
import img1 from '../../../assets/images/paypal.png'
|
||||
import img2 from '../../../assets/images/spoty.png'
|
||||
import img3 from '../../../assets/images/shopboat.png'
|
||||
import img4 from '../../../assets/images/slack.png'
|
||||
import img5 from '../../../assets/images/envato.png'
|
||||
|
||||
const Main = () => {
|
||||
const company_slider = {
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:false,
|
||||
autoplay: true,
|
||||
smartSpeed: 1500,
|
||||
dots: true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="row_am trusted_section">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Trusted by <span>150+</span> companies</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="company_logos" >
|
||||
<OwlCarousel id="company_slider" {...company_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img1} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img2} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img3} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img4} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img5} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img1} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img2} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="logo">
|
||||
<img src={img3} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</OwlCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,167 @@
|
||||
import React , {useState} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import img from '../../../assets/images/download_app.jpg'
|
||||
import img1 from '../../../assets/images/create_account.jpg'
|
||||
import img2 from '../../../assets/images/enjoy_app.jpg'
|
||||
import line from '../../../assets/images/anim_line.png'
|
||||
import banner from '../../../assets/images/banner-shape1.png'
|
||||
import banner1 from '../../../assets/images/banner-shape2.png'
|
||||
import banner2 from '../../../assets/images/banner-shape3.png'
|
||||
import video from '../../../assets/images/play_icon.png'
|
||||
import ytvideo from '../../../assets/images/yt_thumb.png'
|
||||
|
||||
const Main = ({dark}) => {
|
||||
const [ytShow , setytShow] = useState (false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="row_am how_it_works" id="how_it_work">
|
||||
<div className="container">
|
||||
<div className={`how_it_inner ${dark && "dark"}`}>
|
||||
<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">
|
||||
<Link to="#"><i className="icofont-brand-android-robot"></i></Link>
|
||||
<Link to="#"><i className="icofont-brand-apple"></i></Link>
|
||||
<Link to="#"><i className="icofont-brand-windows"></i></Link>
|
||||
</div>
|
||||
<p>Download App either for Windows, Mac or Android</p>
|
||||
</div>
|
||||
<div className="step_number">
|
||||
<h3>01</h3>
|
||||
</div>
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src={img} 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">
|
||||
<h3>02</h3>
|
||||
</div>
|
||||
<div className="step_img" data-aos="fade-right" data-aos-duration="1500">
|
||||
<img src={img1} 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 <Link to="#">FAQs</Link></span>
|
||||
<p>Get most amazing app experience,Explore and share the app</p>
|
||||
</div>
|
||||
<div className="step_number">
|
||||
<h3>03</h3>
|
||||
</div>
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src={img2} alt="image" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dark ?
|
||||
<div className="yt_video" style={{display: "none"}} data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="anim_line dark_bg">
|
||||
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
</div>
|
||||
<div className="thumbnil">
|
||||
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image"/> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image"/> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image"/> </span>
|
||||
<img src="assets/images/yt_thumb.png" alt="image" />
|
||||
<Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
|
||||
<span className="play_btn">
|
||||
<img src={video} 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>
|
||||
</Link>
|
||||
</div>
|
||||
</div> :
|
||||
<div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="anim_line dark_bg">
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
<span><img src={line} alt="anim_line" /></span>
|
||||
|
||||
</div>
|
||||
<div className="thumbnil">
|
||||
<span className="banner_shape1"> <img src={banner} alt="image"/> </span>
|
||||
<span className="banner_shape2"> <img src={banner1} alt="image"/> </span>
|
||||
<span className="banner_shape3"> <img src={banner2} alt="image"/> </span>
|
||||
<img src={ytvideo} alt="image" />
|
||||
<Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
|
||||
<span className="play_btn">
|
||||
<img src={video} 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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</section>
|
||||
{ytShow &&
|
||||
<>
|
||||
<div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
|
||||
<i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
|
||||
</button>
|
||||
<div className="modal-body">
|
||||
<div id="video-container" className="video-container">
|
||||
<iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="purple_backdrop"></div>
|
||||
</>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,197 @@
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import React , {useState,useEffect} from 'react'
|
||||
import Trusted from '../HomeMain/Trusted/Main'
|
||||
import Features from '../HomeMain/Features/Main'
|
||||
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'
|
||||
|
||||
const Main = ({setnavbar,setfooter,setbrdcum}) => {
|
||||
const [ytShow , setytShow] = useState (false)
|
||||
|
||||
useEffect(() => {
|
||||
setfooter({f1 : true})
|
||||
setnavbar({n6 : true})
|
||||
setbrdcum({b3 : true})
|
||||
localStorage.setItem("navbar","homevideo")
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="banner_section home-video">
|
||||
<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>apper</h1>
|
||||
<h2>Best way to <span>manage your customers.</span></h2>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/appstore_white.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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-6 col-md-12" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="banner_image">
|
||||
<img src="assets/images/hero-image.png" alt="image" />
|
||||
<div className="yt_video" >
|
||||
<div className="thumbnil">
|
||||
<a className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} 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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Trusted />
|
||||
<Features video = {true} />
|
||||
<AboutApp video = {true}/>
|
||||
<Design />
|
||||
<section className="row_am how_it_works video-work" id="how_it_work">
|
||||
<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">
|
||||
|
||||
<div className="row ">
|
||||
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="step_box">
|
||||
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src="assets/images/secure.png" alt="image" />
|
||||
<div className="step_number">
|
||||
<h3>01</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="step_text" data-aos="fade-right" data-aos-duration="1500">
|
||||
<h4>Download app</h4>
|
||||
<div className="app_icon">
|
||||
<Link to="#"><i className="icofont-brand-android-robot"></i></Link>
|
||||
<Link to="#"><i className="icofont-brand-apple"></i></Link>
|
||||
<Link to="#"><i className="icofont-brand-windows"></i></Link>
|
||||
</div>
|
||||
<p>Download App either for Windows, Mac or Android</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="step_box">
|
||||
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src="assets/images/abt_functional.png" alt="image" />
|
||||
<div className="step_number">
|
||||
<h3>02</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="step_text step2" data-aos="fade-right" 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>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="step_box">
|
||||
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src="assets/images/communication.png" alt="image" />
|
||||
<div className="step_number">
|
||||
<h3>03</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="step_text step3" data-aos="fade-right" data-aos-duration="1500">
|
||||
<h4>It’s done, enjoy the app</h4>
|
||||
<span>Have any questions check our FAQs</span>
|
||||
<p>Get most amazing app experience, Explore and share the app</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<Testimonial />
|
||||
<Pricing video = {true}/>
|
||||
<Faq/>
|
||||
<Interface/>
|
||||
<Download />
|
||||
<Story/>
|
||||
{ytShow &&
|
||||
<>
|
||||
<div className="modal fade youtube-video show" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
|
||||
<i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
|
||||
</button>
|
||||
<div className="modal-body">
|
||||
<div id="video-container" className="video-container">
|
||||
<iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="640" height="360" frameBorder="0" allowFullScreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="purple_backdrop"></div>
|
||||
</>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,240 @@
|
||||
import React , { useState , useEffect} from 'react'
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import Trusted from '../HomeMain/Trusted/Main'
|
||||
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'
|
||||
|
||||
const Main = ({setfooter,setnavbar,setbrdcum}) => {
|
||||
|
||||
const [ytShow , setytShow] = useState (false)
|
||||
useEffect(() => {
|
||||
setfooter({f4 : true})
|
||||
setnavbar({n4 : true})
|
||||
setbrdcum({b4 : true})
|
||||
localStorage.setItem("navbar","homevideotwo")
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="banner_section home-video-two">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7 col-md-12" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="banner_text">
|
||||
<h1>Best way to manage your customers.</h1>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/appstore_white.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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-4 col-md-12" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="banner_image">
|
||||
<div className="yt_video" >
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am features_section features-video" id="features">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<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="feature_detail">
|
||||
<div className="left_data feature_box">
|
||||
<div className="data_block block1" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<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 className="data_block block2" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<img src="assets/images/step2.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Fully functional</h4>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="right_data feature_box">
|
||||
<div className="data_block block3" data-aos="fade-left" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<img src="assets/images/step3.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>Live chat</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="data_block block4" data-aos="fade-left" data-aos-duration="1500">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_support.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h4>24-7 Support</h4>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<img src="assets/images/features_frame.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<AboutApp video = {true} />
|
||||
<Design />
|
||||
<section className="row_am how_it_works video-work-two" id="how_it_work">
|
||||
<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>How it works - 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">
|
||||
<div className="row ">
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="step_box">
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src="assets/images/step1.png" alt="image"/>
|
||||
<div className="step_number">
|
||||
<h3>01</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step_text" data-aos="fade-right" data-aos-duration="1500">
|
||||
<h4>Download app</h4>
|
||||
<div className="app_icon">
|
||||
<Link to="#"><i className="icofont-brand-android-robot"></i></Link>
|
||||
<Link to="#"><i className="icofont-brand-apple"></i></Link>
|
||||
<Link to="#"><i className="icofont-brand-windows"></i></Link>
|
||||
</div>
|
||||
<p>Download App either for Windows, Mac or Android</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="step_box">
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src="assets/images/step2.png" alt="image" />
|
||||
<div className="step_number">
|
||||
<h3>02</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step_text step2" data-aos="fade-right" 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>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4 col-sm-12">
|
||||
<div className="step_box">
|
||||
<div className="step_img" data-aos="fade-left" data-aos-duration="1500">
|
||||
<img src="assets/images/step3.png" alt="image" />
|
||||
<div className="step_number">
|
||||
<h3>03</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step_text step3" data-aos="fade-right" data-aos-duration="1500">
|
||||
<h4>It’s done, enjoy the app</h4>
|
||||
<span>Have any questions check our FAQs</span>
|
||||
<p>Get most amazing app experience, Explore and share the app</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<Testimonial />
|
||||
<Trusted />
|
||||
<Pricing video = {true}/>
|
||||
<Faq/>
|
||||
<Interface/>
|
||||
<Download />
|
||||
<Story/>
|
||||
{ytShow &&
|
||||
<>
|
||||
<div className="modal fade youtube-video show" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
|
||||
<i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
|
||||
</button>
|
||||
<div className="modal-body">
|
||||
<div id="video-container" className="video-container">
|
||||
<iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="640" height="360" frameBorder="0" allowFullScreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="purple_backdrop"></div>
|
||||
</>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,236 @@
|
||||
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import React , { useState ,useEffect } from 'react'
|
||||
import Trusted from '../HomeMain/Trusted/Main'
|
||||
import Features from '../HomeMain/Features/Main'
|
||||
import AboutApp from '../HomeMain/AboutApp/Main'
|
||||
import Design from '../HomeMain/Design/Main'
|
||||
import Work from '../HomeMain/Work/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'
|
||||
|
||||
const Main = ({setnavbar , setfooter , setbrdcum }) => {
|
||||
|
||||
useEffect(() => {
|
||||
setfooter({f5 : true})
|
||||
setbrdcum({b1 : true})
|
||||
setnavbar({n4 : true})
|
||||
localStorage.setItem("navbar","homewave")
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <header className="white_header fix_style fixed header-wave">
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/footer_logo.png" alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick={() => setmobile(mobile === true ? false : true)}>
|
||||
<span className="toggle-bar"></span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link" >Home</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
<li><Link to="/home-dark">Home Dark Hero</Link></li>
|
||||
<li><Link to="/home-wave">Home Wave </Link></li>
|
||||
<li><Link to="/home-gredient">Home Gredient</Link></li>
|
||||
<li><Link to="/home-video">Home Video</Link></li>
|
||||
<li><Link to="/home-video2">Home Video 2</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" >
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`collapse navbar-collapse mobile-screen ${mobile && "show"}`} >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow(show === true ? false : true)}>
|
||||
<Link to="#" className="nav-link" >Home</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
<li><Link to="/home-dark">Home Dark Hero</Link></li>
|
||||
<li><Link to="/home-wave">Home Wave </Link></li>
|
||||
<li><Link to="/home-gredient">Home Gredient</Link></li>
|
||||
<li><Link to="/home-video">Home Video</Link></li>
|
||||
<li><Link to="/home-video2">Home Video 2</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow1(show1 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show1 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow2(show2 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show2 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header> */}
|
||||
<section className="banner_section home-wave">
|
||||
<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 manage your customers.</h1>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/appstore_white.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<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-6 col-md-12" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="banner_image">
|
||||
<img className="moving_animation" src="assets/images/banner-image.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="home-wave-bottom">
|
||||
<svg className="waves" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
<use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#f6f4fe" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<Trusted />
|
||||
<Features />
|
||||
<AboutApp />
|
||||
<Design />
|
||||
<Work />
|
||||
<Testimonial />
|
||||
<Pricing/>
|
||||
<Faq/>
|
||||
<Interface/>
|
||||
<Download />
|
||||
<Story/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,596 @@
|
||||
import React , { useState, useEffect } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import logo from "../../assets/images/logo_white.png";
|
||||
import logo1 from "../../assets/images/logo.png";
|
||||
|
||||
const Main = ({navbar}) => {
|
||||
|
||||
const location = useLocation()
|
||||
const path = location.pathname
|
||||
|
||||
const [show, setShow] = useState()
|
||||
const [show1, setShow1] = useState()
|
||||
const [show2, setShow2] = useState()
|
||||
const [mobile, setmobile] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
window.scroll(0, 0)
|
||||
}, [path]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{path === "/" ?
|
||||
<>
|
||||
{navbar.n2 &&
|
||||
<header>
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src={logo1} alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick={() => setmobile(mobile === true ? false : true)}>
|
||||
<span className="toggle-bar"></span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item" >
|
||||
<Link to="#" className="nav-link" >Home 111</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item" >
|
||||
<Link to="/blog" className="nav-link">Blog</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`collapse navbar-collapse mobile-screen ${mobile && "show"}`} >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow(show === true ? false : true)}>
|
||||
<Link to="#" className="nav-link" >Home3</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow1(show1 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show1 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow2(show2 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show2 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
</>
|
||||
:
|
||||
<>
|
||||
{navbar.n2 &&
|
||||
<header className="white_header fix_style fixed">
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src={logo} alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick={() => setmobile(mobile === true ? false : true)}>
|
||||
<span className="toggle-bar"></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className={`collapse navbar-collapse ${mobile && "show"}`} >
|
||||
<div className="navbar-nav ml-auto">
|
||||
|
||||
<li className="nav-item" >
|
||||
<Link to="/#" className="nav-link" >Home4</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="/#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="/#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item" >
|
||||
<Link to="/blog" className="nav-link">Blog</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
|
||||
</div >
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>}
|
||||
</>
|
||||
}
|
||||
{navbar.n3 &&
|
||||
<div className="home-dark-block">
|
||||
<header style={{position : "fixed"}}>
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/logo.png" alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick = {() => setmobile(true)}>
|
||||
<span className="toggle-bar" onClick = {() => setmobile(false)}></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className={`collapse navbar-collapse ${mobile && "show"}`}>
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown">
|
||||
<Link to="#" className="nav-link" >Home5</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown">
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item has_dropdown">
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</div>}
|
||||
|
||||
{navbar.n4 &&
|
||||
<header className="white_header fix_style fixed header-wave">
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/footer_logo.png" alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick={() => setmobile(mobile === true ? false : true)}>
|
||||
<span className="toggle-bar"></span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link" >Home66</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" >
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`collapse navbar-collapse mobile-screen ${mobile && "show"}`} >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow(show === true ? false : true)}>
|
||||
<Link to="#" className="nav-link" >Home 9</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow1(show1 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show1 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow2(show2 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show2 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
|
||||
{navbar.n5 &&
|
||||
<header>
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/logo.png" alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick={() => setmobile(mobile === true ? false : true)}>
|
||||
<span className="toggle-bar"></span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link" >Home 99</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" >
|
||||
<ul>
|
||||
<li><Link to="#">Submenu 1</Link></li>
|
||||
<li><Link to="#">Another submenu 2</Link></li>
|
||||
<li><Link to="#">Submenu 3</Link></li>
|
||||
<li><Link to="#">Another submenu 4</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#blog" className="nav-link">Blog</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`collapse navbar-collapse mobile-screen ${mobile && "show"}`} >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow(show === true ? false : true)}>
|
||||
<Link to="#" className="nav-link" >Home 77</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow1(show1 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show1 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow2(show2 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show2 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>}
|
||||
|
||||
{navbar.n6 &&
|
||||
<header className="video-header" style={{position : "fixed"}}>
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/logo.png" alt="image" />
|
||||
</Link>
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<div className={`toggle-wrap ${mobile && "active"}`} onClick={() => setmobile(mobile === true ? false : true)}>
|
||||
<span className="toggle-bar"></span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link" >Home 55</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" >
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" >
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`collapse navbar-collapse mobile-screen ${mobile && "show"}`} >
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow(show === true ? false : true)}>
|
||||
<Link to="#" className="nav-link" >Home 33</Link>
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow1(show1 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Pages</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show1 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/about">About Us</Link></li>
|
||||
<li><Link to="/review">Reviews</Link></li>
|
||||
<li><Link to="/contact">Contact Us</Link></li>
|
||||
<li><Link to="/faq">Faq</Link></li>
|
||||
<li><Link to="/sign-in">Sign In</Link></li>
|
||||
<li><Link to="/sign-up">Sign Up</Link></li>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/pricing" className="nav-link">Pricing</Link>
|
||||
</li>
|
||||
<li className="nav-item has_dropdown" onClick={() => setShow2(show2 === true ? false : true)}>
|
||||
<Link to="#" className="nav-link">Blog</Link>
|
||||
<span className="drp_btn"><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show2 ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/blog">Blog List</Link></li>
|
||||
<li><Link to="/blog-single">Blog Single</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,237 @@
|
||||
import React , { useState , useEffect} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Bredcrumb from '../../Bredcrumb/Main'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
|
||||
const[activeFaq, setActiveFaq] = useState({a : true})
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Have questions? look here"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Faq"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b2 &&
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Have questions? look here"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Faq"
|
||||
bgimg={BGImg1}/>}
|
||||
|
||||
{brdcum.b5 &&
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Have questions? look here"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Faq"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b3 &&
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Have questions? look here"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Faq" />}
|
||||
|
||||
{brdcum.b4 &&
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Have questions? look here"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Faq"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
|
||||
<section className="row_am faq_section">
|
||||
<div className="container">
|
||||
<div className="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingOne">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
|
||||
{activeFaq.a ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}How can i pay ?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingTwo">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
|
||||
data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingThree">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
|
||||
data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}What is process to get refund
|
||||
?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingFour">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
|
||||
data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}What is process to get refund ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingFive">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.e && "active"}`} onClick= {() => setActiveFaq(activeFaq.e ? {e : false} : {e : true})} data-toggle="collapse"
|
||||
data-target="#collapseFive">{activeFaq.e ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}Can i get code bug support for customization ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseFive" className="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingSix">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.f && "active"}`} onClick= {() => setActiveFaq(activeFaq.f ? {f : false} : {f : true})} data-toggle="collapse"
|
||||
data-target="#collapseSix">{activeFaq.f ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}Lorem Ipsum is simply dummy text of the printing and typesetting ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseSix" className="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingSeven">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.g && "active"}`} onClick= {() => setActiveFaq(activeFaq.g ? {g : false} : {g : true})} data-toggle="collapse"
|
||||
data-target="#collapseSeven">{activeFaq.g ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}Lorem Ipsum is simply dummy text of the printing and typesetting ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseSeven" className="collapse" aria-labelledby="headingSeven" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am free_app_section review_freeapp" id="getstarted">
|
||||
<div className="container">
|
||||
<div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<div className="anim_line dark_bg">
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="free_text">
|
||||
<div className="section_title">
|
||||
<h2>Let’s download free from apple and play store</h2>
|
||||
<p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
|
||||
and typese tting indus orem Ipsum has beenthe standard</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="free_img">
|
||||
<img src="assets/images/download-screen01.png" alt="image" />
|
||||
<img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,360 @@
|
||||
import React,{useEffect} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Bredcrumb from '../../Bredcrumb/Main'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Reviews"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Reviews"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b2 &&
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Reviews"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Reviews"
|
||||
bgimg={BGImg1}/>}
|
||||
|
||||
{brdcum.b5 &&
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Reviews"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Reviews"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b3 &&
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Reviews"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Reviews"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
{brdcum.b4 &&
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Reviews"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Reviews"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
<section className="row_am review_list_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>App working smoothly fast</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_01.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Shayna John</h3>
|
||||
<span>Careative inc</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>UI and UX is excellence !</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_02.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Jolly Shie</h3>
|
||||
<span>CEO - abc agency</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Service support on time.</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_03.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Steve Joe</h3>
|
||||
<span>Vybo Creative</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Easy documentation.</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_04.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Shayna John</h3>
|
||||
<span>Careative inc</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>UI and UX is excellence !</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_05.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Jolly Shie</h3>
|
||||
<span>CEO - abc agency</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Service support on time.</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_06.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Steve Joe</h3>
|
||||
<span>Vybo Creative</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>App working smoothly fast</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_07.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Shayna John</h3>
|
||||
<span>Careative inc</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>UI and UX is excellence !</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_08.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Jolly Shie</h3>
|
||||
<span>CEO - abc agency</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="review_box">
|
||||
<div className="rating">
|
||||
<ul>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
<li><span><i className="icofont-star"></i></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Service support on time.</h3>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting ndus
|
||||
try lorem Ipsum hasbeen the trysan
|
||||
dard dummy text here.
|
||||
</p>
|
||||
<div className="reviewer">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/review_09.png" alt="image"/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>Steve Joe</h3>
|
||||
<span>Vybo Creative</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am free_app_section review_freeapp" id="getstarted">
|
||||
<div className="container">
|
||||
<div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<div className="anim_line dark_bg">
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="free_text">
|
||||
<div className="section_title">
|
||||
<h2>Let’s download free from apple and play store</h2>
|
||||
<p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
|
||||
and typese tting indus orem Ipsum has beenthe standard</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="free_img">
|
||||
<img src="assets/images/download-screen01.png" alt="image" />
|
||||
<img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<div className="page_wrapper">
|
||||
<div className="full_bg">
|
||||
<div className="container">
|
||||
<section className="signup_section">
|
||||
<div className="top_part">
|
||||
<Link to="/" className="back_btn"><i className="icofont-arrow-left"></i> Back</Link>
|
||||
<Link to="/" className="navbar-brand">
|
||||
<img src="assets/images/footer_logo.png" alt="image"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="signup_form">
|
||||
<div className="section_title">
|
||||
<h2> Welcom to <span>Apper</span> </h2>
|
||||
<p>Fill all fields so we can get some info about you. <br/> We'll never send you spam</p>
|
||||
</div>
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="email" className="form-control" placeholder="Email"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="password" className="form-control" placeholder="Password"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<button className="btn puprple_btn" type="submit">SIGN IN</button>
|
||||
</div>
|
||||
</form>
|
||||
<p className="or_block">
|
||||
<span>OR</span>
|
||||
</p>
|
||||
<div className="or_option">
|
||||
<p>Sign In with your work email</p>
|
||||
<Link to="#" className="btn google_btn"><img src="assets/images/google.png" alt="image"/> <span>Sign Up with Google</span> </Link>
|
||||
<p>Don't have an account? <Link to="/sign-up">Sign Up here</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="page_wrapper">
|
||||
<div className="full_bg">
|
||||
<div className="container">
|
||||
<section className="signup_section">
|
||||
<div className="top_part">
|
||||
<Link to="/" className="back_btn"><i className="icofont-arrow-left"></i> Back</Link>
|
||||
<Link to="/"className="navbar-brand">
|
||||
<img src="assets/images/footer_logo.png" alt="image"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="signup_form">
|
||||
<div className="section_title">
|
||||
<h2> <span>Create</span> an account</h2>
|
||||
<p>Fill all fields so we can get some info about you. <br/> We'll never send you spam</p>
|
||||
</div>
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Name"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="email" className="form-control" placeholder="Email"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="password" className="form-control" placeholder="Password"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<button className="btn puprple_btn" type="submit">SIGN UP</button>
|
||||
</div>
|
||||
</form>
|
||||
<p className="or_block">
|
||||
<span>OR</span>
|
||||
</p>
|
||||
<div className="or_option">
|
||||
<p>Sign up with your work email</p>
|
||||
<Link to="#" className="btn google_btn"><img src="assets/images/google.png" alt="image"/> <span>Sign Up with Google</span> </Link>
|
||||
<p>Already have an account? <Link to="/sign-in">Sign In here</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -0,0 +1,241 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React , {useState ,useEffect} from 'react'
|
||||
import Pricing from '../HomeMain/Pricing/Main'
|
||||
import Bredcrumb from '../Bredcrumb/Main'
|
||||
import BGImg from "../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
const[activeFaq, setActiveFaq] = useState({a : true})
|
||||
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Our Pricing & Plans"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Our Pricing & Plans"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b2 &&
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Our Pricing & Plans"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Our Pricing & Plans"
|
||||
bgimg={BGImg1}/>}
|
||||
|
||||
{brdcum.b5 &&
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Our Pricing & Plans"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Our Pricing & Plans"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
|
||||
{brdcum.b3 &&
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Our Pricing & Plans"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Our Pricing & Plans" />}
|
||||
|
||||
{brdcum.b4 &&
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Our Pricing & Plans"
|
||||
paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
|
||||
tag="Our Pricing & Plans"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
<Pricing/>
|
||||
<section className="row_am faq_section">
|
||||
<div className="container">
|
||||
<div className="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingOne">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
|
||||
{activeFaq.a ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}
|
||||
How can i pay ?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingTwo">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
|
||||
data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingThree">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
|
||||
data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}What is process to get refund
|
||||
?</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingFour">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
|
||||
data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}What is process to get refund ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingFive">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.e && "active"}`} onClick= {() => setActiveFaq(activeFaq.e ? {e : false} : {e : true})} data-toggle="collapse"
|
||||
data-target="#collapseFive">{activeFaq.e ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}Can i get code bug support for customization ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseFive" className="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingSix">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.f && "active"}`} onClick= {() => setActiveFaq(activeFaq.f ? {f : false} : {f : true})} data-toggle="collapse"
|
||||
data-target="#collapseSix">{activeFaq.f ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}Lorem Ipsum is simply dummy text of the printing and typesetting ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseSix" className="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingSeven">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.g && "active"}`} onClick= {() => setActiveFaq(activeFaq.g ? {g : false} : {g : true})} data-toggle="collapse"
|
||||
data-target="#collapseSeven">{activeFaq.g ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}Lorem Ipsum is simply dummy text of the printing and typesetting ?
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseSeven" className="collapse" aria-labelledby="headingSeven" data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen book. It has survived not only five cen turies but also the
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am free_app_section review_freeapp" id="getstarted">
|
||||
<div className="container">
|
||||
<div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<div className="anim_line dark_bg">
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
<span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="free_text">
|
||||
<div className="section_title">
|
||||
<h2>Let’s download free from apple and play store</h2>
|
||||
<p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
|
||||
and typese tting indus orem Ipsum has beenthe standard</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="free_img">
|
||||
<img src="assets/images/download-screen01.png" alt="image" />
|
||||
<img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
Reference in New Issue
Block a user