Compare commits

..

1 Commits

Author SHA1 Message Date
ChineseChikki c1531f333d updated 3 easy step 2023-01-13 00:48:59 +01:00
2 changed files with 301 additions and 314 deletions
+108 -201
View File
@@ -1,210 +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";
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 }) => {
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>
myFit has powerful connectivity, fitness, health, and
safety features <br />
Also makes provision Fitness tracking,Workout tracking,Heart
rate monitoring
</p>
{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>myFit has powerful connectivity, fitness, health, and safety features <br/>
Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring</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>
<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>
Fitness Integration with your health plan in your pocket
bolsters
<br /> healthier life by tracking and experiencing life-changing
results
</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 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="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 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>
<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>
)}
</>
);
};
<div className="right_data feature_box">
<div className="data_block" data-aos="fade-left" data-aos-duration="1500">
export default Main;
<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
+193 -113
View File
@@ -1,119 +1,199 @@
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'
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)
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={process.env.REACT_APP_ANDROID_URL}><i className="icofont-brand-android-robot"></i></Link>
<Link to={process.env.REACT_APP_IOS_URL}><i className="icofont-brand-apple"></i></Link>
</div>
<p>Download App either for 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>Its 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>
Lets see virtually how it works
<span>Watch video 1</span>
</Link>
</div>
</div> :
null}
<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>
myFit has powerful connectivity, fitness, health, and safety
features,
<br /> Also makes provision Fitness tracking,Workout
tracking,Heart rate monitoring.
</p>
</div>
</section>
{ytShow &&
<>
</>}
</>
)
}
<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={process.env.REACT_APP_ANDROID_URL}>
<i className="icofont-brand-android-robot"></i>
</Link>
<Link to={process.env.REACT_APP_IOS_URL}>
<i className="icofont-brand-apple"></i>
</Link>
</div>
<p>Download App either for 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>Its 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>
export default Main
{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>
Lets see virtually how it works
<span>Watch video 1</span>
</Link>
</div>
</div>
) : null}
</div>
</section>
{ytShow && <></>}
</>
);
};
export default Main;