Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ChineseChikki
|
c1531f333d |
@@ -68,7 +68,8 @@ const Main = ({video}) => {
|
||||
<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>
|
||||
<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">
|
||||
|
||||
@@ -1,30 +1,13 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React , { useState, useEffect} from 'react'
|
||||
import AOS from "aos";
|
||||
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'
|
||||
|
||||
import SiteService from '../../../vendors/service/siteService'
|
||||
|
||||
const Main = ({gredient , video}) => {
|
||||
|
||||
const[tog, setTog] = useState()
|
||||
|
||||
const [prices, setPrices] = useState([]); // initial state for FAQs before API call
|
||||
|
||||
let priceServices = new SiteService(); // instantiating the class
|
||||
|
||||
const getAllPriceData = () => {
|
||||
return priceServices.priceData();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getAllPriceData().then((data) => setPrices(data.data));
|
||||
AOS.init();
|
||||
AOS.refresh();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{gredient ?
|
||||
@@ -46,52 +29,37 @@ const Main = ({gredient , video}) => {
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
{/* <div className="col-md-4">
|
||||
<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"/>
|
||||
@@ -118,60 +86,136 @@ const Main = ({gredient , video}) => {
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start 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>
|
||||
|
||||
@@ -197,101 +241,193 @@ const Main = ({gredient , video}) => {
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
<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>
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start 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>
|
||||
|
||||
|
||||
+193
-112
@@ -1,118 +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>myFit has powerful connectivity, fitness, health, and safety features,<br/> Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring.</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>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 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>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>
|
||||
|
||||
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>
|
||||
Let’s see virtually how it works
|
||||
<span>Watch video 1</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
{ytShow && <></>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
|
||||
Vendored
-4
@@ -16,10 +16,6 @@ class SiteService {
|
||||
faqData() {
|
||||
return this.getAuxEnd("/faq", null);
|
||||
}
|
||||
|
||||
priceData() {
|
||||
return this.getAuxEnd("/pricing", null);
|
||||
}
|
||||
|
||||
//---------------------------------------- -----
|
||||
//---------------------------------------- -----
|
||||
|
||||
Reference in New Issue
Block a user