myfit starter commit
This commit is contained in:
Olu Amey
@@ -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
|
||||
Reference in New Issue
Block a user