Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ChineseChikki
|
09bec5e545 |
@@ -5,16 +5,9 @@ REACT_APP_YEAR=2023
|
||||
REACT_APP_ANDROID_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
|
||||
REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
|
||||
|
||||
|
||||
REACT_APP_APPSITE=" https://mermsemr.com"
|
||||
#REACT_APP_APPSITE="http://localhost:7012"
|
||||
|
||||
# Social Media Links
|
||||
REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
|
||||
REACT_APP_TWITTER="https://twitter.com/fluxtra"
|
||||
|
||||
REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
|
||||
|
||||
REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
|
||||
REACT_APP_FORM_TIMEOUT = 10000
|
||||
REACT_APP_MAX_MESSAGE_LENGHT =300
|
||||
REACT_APP_BLOGSITE="https://blog.mermsemr.com/"
|
||||
|
||||
Generated
-8
@@ -1,8 +0,0 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
Generated
-8
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/www-myfit.iml" filepath="$PROJECT_DIR$/.idea/www-myfit.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
Generated
-6
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
-8
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
+1
-1
@@ -6,7 +6,7 @@ services:
|
||||
dockerfile: Dockerfile
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 7010:3000
|
||||
- 9057:3000
|
||||
stdin_open: true
|
||||
working_dir: /usr/src/app
|
||||
volumes:
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@
|
||||
|
||||
<!-- favicons Icons -->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<meta name="description" content="Cloud-based electronic health record platform for all users. patient health record, family health record">
|
||||
<meta name="description" content="APPER:: App Landing Page" />
|
||||
|
||||
<!-- fonts -->
|
||||
<link rel="stylesheet" href="assets/css/icofont.min.css">
|
||||
|
||||
+19
-225
@@ -1119,7 +1119,7 @@ header.fixed .navbar {
|
||||
.how_it_works .how_it_inner {
|
||||
background-color: var(--bg-white);
|
||||
padding: 70px 0;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 250px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0px 4px 30px #ede9fe;
|
||||
}
|
||||
@@ -3008,17 +3008,11 @@ header.fix_style.white_header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blog_detail_section .blog_inner_pannel span.blog_date {
|
||||
.blog_detail_section .blog_inner_pannel .review span {
|
||||
line-height: 1;
|
||||
color: var(--purple);
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* .blog_detail_section .blog_inner_pannel .review span:first-child {
|
||||
.blog_detail_section .blog_inner_pannel .review span:first-child {
|
||||
color: var(--purple);
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
@@ -3030,7 +3024,7 @@ header.fix_style.white_header {
|
||||
margin-left: 15px;
|
||||
padding-left: 15px;
|
||||
border-left: 1px solid var(--dark-purple);
|
||||
} */
|
||||
}
|
||||
|
||||
.blog_detail_section .blog_inner_pannel .section_title {
|
||||
margin-bottom: 40px;
|
||||
@@ -3049,29 +3043,29 @@ header.fix_style.white_header {
|
||||
}
|
||||
|
||||
.blog_detail_section .blog_inner_pannel .info h3 {
|
||||
font-weight: 700;
|
||||
color: var(--dark-purple);
|
||||
margin-top: 30px;
|
||||
font-size: 25px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--dark-purple);
|
||||
margin-top: 30px;
|
||||
font-size: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* To highlight the link in the terms section */
|
||||
.blog_detail_section .blog_inner_pannel .info p span a {
|
||||
color: var(--dark-purple);
|
||||
text-decoration: underline;
|
||||
.blog_detail_section .blog_inner_pannel .info p span a{
|
||||
color: var(--dark-purple);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* To reduce the fonts for sub-headers */
|
||||
.blog_detail_section .blog_inner_pannel .info h4 {
|
||||
font-weight: 700;
|
||||
color: var(--dark-purple);
|
||||
margin-top: 30px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
font-weight: 700;
|
||||
color: var(--dark-purple);
|
||||
margin-top: 30px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* To align the text for proper readability */
|
||||
/* To align the text for proper readability */
|
||||
.blog_detail_section .blog_inner_pannel .info p {
|
||||
text-align: justify;
|
||||
}
|
||||
@@ -3527,156 +3521,6 @@ header.fix_style.white_header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contact_page_section .contact_inner .contact_form form .form-group textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* Textarea scrollbar */
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
textarea::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
textarea::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--body-text-purple);
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
.contact_btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
.contact_btn
|
||||
p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
.contact_btn
|
||||
> span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#contact_body {
|
||||
min-height: 48rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.contact_body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.animate.pop {
|
||||
animation-name: animate-pop;
|
||||
animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes animate-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* For the err msg */
|
||||
#errText {
|
||||
text-align: center;
|
||||
color: tomato;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact_page_section .contact_inner .contact_form form .form-group span {
|
||||
font-size: 12px;
|
||||
color: tomato;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
input:valid[focused="true"] {
|
||||
border: 1px solid var(--dark-purple);
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
input:invalid[focused="true"] {
|
||||
border: 1px solid tomato;
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
form
|
||||
.form-group
|
||||
input:invalid[focused="true"]
|
||||
~ span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact_page_section
|
||||
.contact_inner
|
||||
.contact_form
|
||||
@@ -4741,56 +4585,6 @@ header.fix_style.white_header {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
/* Loader */
|
||||
|
||||
.loader {
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader-sm {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* LOADER 1 */
|
||||
|
||||
#loader-1:before,
|
||||
#loader-1:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: 3.5px solid transparent;
|
||||
border-top-color: var(--body-text-purple);
|
||||
}
|
||||
|
||||
#loader-1:before {
|
||||
z-index: 100;
|
||||
animation: spin 1.5s infinite;
|
||||
}
|
||||
|
||||
#loader-1:after {
|
||||
border: 3.5px solid #ccc;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
|
||||
position: absolute !important;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 112 KiB |
@@ -9,17 +9,6 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"
|
||||
const Main = ({brdcum}) => {
|
||||
const [ytShow , setytShow] = useState (false)
|
||||
|
||||
// About us text variables
|
||||
let innovativeDesc = 'The team at myFit by Flxuxtra LLC works with you to achieve your health objectives without getting in your way. Do your health your way to get the best result for you and your family. We are you, always ready and always engaged with the users to help get the best out of our solution.'
|
||||
'We work with you to achieve your health and fitness goals by providing solutions that fit your goals.'
|
||||
let whyWeAreDiff = {
|
||||
desc:'We work with you to achieve your health and fitness goals by providing solutions that fit your goals.',
|
||||
title1: 'Secure',
|
||||
title2: 'Rich Features',
|
||||
title3: 'Ease of Use',
|
||||
title4: 'Support'
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
@@ -67,13 +56,17 @@ const Main = ({brdcum}) => {
|
||||
life easy to grow.</h2>
|
||||
</div>
|
||||
<p data-aos="fade-up" data-aos-duration="1500">
|
||||
{innovativeDesc}
|
||||
Lorem Ipsum is simply dummy text of the printing and type
|
||||
setting industry lorem Ipsum has been the industrys standard dummy text ever since the when an unknown
|
||||
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
|
||||
five centuries, but also the leap into electronic typesetting, remaining to make a type speci
|
||||
men book. It has survived essentially unchanged.
|
||||
</p>
|
||||
{/* <p data-aos="fade-up" data-aos-duration="1500">
|
||||
<p data-aos="fade-up" data-aos-duration="1500">
|
||||
Standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specien book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting.
|
||||
</p> */}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
@@ -105,16 +98,17 @@ const Main = ({brdcum}) => {
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2><span>Why we are different</span> from others!</h2>
|
||||
<p>{whyWeAreDiff.desc}</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="row">
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
{/* <div className="icon">
|
||||
<div className="icon">
|
||||
<img src="assets/images/secure.png" alt="image"/>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>{whyWeAreDiff.title1}</h3>
|
||||
<h3>Secure code</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type
|
||||
setting indus ideas.
|
||||
</p>
|
||||
@@ -123,22 +117,22 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
|
||||
{/* <div className="icon">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_functional.png" alt="image"/>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>{whyWeAreDiff.title2}</h3>
|
||||
<h3>Fully functional</h3>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
|
||||
{/* <div className="icon">
|
||||
<div className="icon">
|
||||
<img src="assets/images/communication.png" alt="image"/>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>{whyWeAreDiff.title3}</h3>
|
||||
<h3>Best communication</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type
|
||||
setting indus ideas.
|
||||
</p>
|
||||
@@ -147,11 +141,11 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-3">
|
||||
<div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
|
||||
{/* <div className="icon">
|
||||
<div className="icon">
|
||||
<img src="assets/images/abt_support.png" alt="image"/>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>{whyWeAreDiff.title4}</h3>
|
||||
<h3>24-7 Support</h3>
|
||||
<p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+147
-206
@@ -1,213 +1,154 @@
|
||||
/** @format */
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png";
|
||||
import SiteService from "../../../vendors/service/siteService";
|
||||
|
||||
const Main = ({ brdcum, bgimg }) => {
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
|
||||
let api = new SiteService();
|
||||
useEffect(() => {
|
||||
getBlogData();
|
||||
}, []);
|
||||
|
||||
const getBlogData = async () => {
|
||||
/*
|
||||
The reason for this, is because of the breaking I had when building the blog
|
||||
I decided to save to the local storage for an hour so that it won't need to be going to the server again but I can change this
|
||||
*/
|
||||
// Saving it locally to avoid interfering with server
|
||||
if (localStorage.getItem("myFit--blogData") == null) {
|
||||
try {
|
||||
let res = await api.blogData();
|
||||
|
||||
// Set the blog data to local storage
|
||||
localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
|
||||
setBlogData(res.data);
|
||||
// Set a time out for the blog data to be deleted from local storage
|
||||
setTimeout(() => {
|
||||
localStorage.removeItem("myFit--blogData");
|
||||
}, 3600);
|
||||
} catch (error) {
|
||||
console.log("Error from blog data ", error);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
let data = JSON.parse(localStorage.getItem("myFit--blogData"));
|
||||
setBlogData(data);
|
||||
} catch (error) {
|
||||
console.error("Error parsing JSON data: ", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum,bgimg}) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="bred_crumb"
|
||||
style={{ backgroundImage: `url(${BGImg})` }}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1">
|
||||
{" "}
|
||||
<img
|
||||
src="assets/images/banner-shape1.png"
|
||||
alt="image"
|
||||
/>{" "}
|
||||
</span>
|
||||
<span className="banner_shape2">
|
||||
{" "}
|
||||
<img
|
||||
src="assets/images/banner-shape2.png"
|
||||
alt="image"
|
||||
/>{" "}
|
||||
</span>
|
||||
<span className="banner_shape3">
|
||||
{" "}
|
||||
<img
|
||||
src="assets/images/banner-shape3.png"
|
||||
alt="image"
|
||||
/>{" "}
|
||||
</span>
|
||||
|
||||
<div className="bred_crumb" style={{ backgroundImage : `url(${BGImg})`}}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
|
||||
|
||||
<div className="bred_text">
|
||||
<h1>Latest Blog Post</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<span>»</span>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/blog">
|
||||
{blogData.map((item, idx) => {
|
||||
if (idx === 0) {
|
||||
return <span>{item.post_title}</span>;
|
||||
}
|
||||
})}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="row_am blog_list_main">
|
||||
{blogData.length < 1 && (
|
||||
<div
|
||||
className="loader loader-sm"
|
||||
id="loader-1"></div>
|
||||
)}
|
||||
{blogData.map((data, index) => {
|
||||
if (index == 0) {
|
||||
return (
|
||||
<div
|
||||
className="container"
|
||||
key={data.id}>
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-6"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500">
|
||||
<div className="blog_img">
|
||||
<img
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
|
||||
<span>{new Date(data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<div className="section_title">
|
||||
<h2>{data.post_title}</h2>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
data.post_content.substring(0, 400) + " . . .",
|
||||
}}></div>
|
||||
{/* Change the route name */}
|
||||
<Link
|
||||
to={`/blogdetails/${data.id}`}
|
||||
state={{ data }}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bred_text">
|
||||
<h1>Latest Blog Post</h1>
|
||||
<ul>
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><span>»</span></li>
|
||||
<li><Link to="/blog">Blog</Link></li>
|
||||
</ul>
|
||||
{/* <div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="row_am latest_story blog_list_story"
|
||||
id="blog">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{blogData.map((data, index) => {
|
||||
if (index > 0) {
|
||||
return (
|
||||
<div
|
||||
key={data.id}
|
||||
className="col-md-4">
|
||||
<div
|
||||
className="story_box"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
<span>
|
||||
{new Date(data && data.post_date).toDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{data.post_title}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
data &&
|
||||
data.post_content.substring(0, 100) + " . . .",
|
||||
}}></div>
|
||||
{/* Change the route name */}
|
||||
<Link
|
||||
to={`/blogdetails/${data.id}`}
|
||||
state={{ data }}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="pagination_block">
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
to={process.env.REACT_APP_BLOGSITE}
|
||||
className="prev">
|
||||
{" "}
|
||||
Visit our blog
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
|
||||
<section className="row_am blog_list_main">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="blog_img">
|
||||
<img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
|
||||
<span>20 min ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<div className="section_title">
|
||||
<h2>Top rated app of the year!</h2>
|
||||
<p>myFit has powerful connectivity, fitness, health, and safety features
|
||||
Also makes provision Fitness tracking,Workout tracking,Heart rate monitoringscrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am latest_story blog_list_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="https://picsum.photos/seed/picsum/505/378" 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="https://picsum.photos/seed/picsum/505/378" 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="https://picsum.photos/seed/picsum/505/378" alt="image"/>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Creative ideas on app.</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Excellence UI design</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Quick and easy Search</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Chat function eded</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pagination_block">
|
||||
<ul>
|
||||
<li><Link to="#" className="prev"> Visit our blog</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
@@ -1,201 +1,275 @@
|
||||
/** @format */
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import Bredcrumb from "../../Bredcrumb/Main";
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png";
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png";
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png";
|
||||
import SiteService from "../../../vendors/service/siteService";
|
||||
|
||||
const Main = ({ brdcum }) => {
|
||||
const location = useLocation();
|
||||
let data = location.state?.data;
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
|
||||
let api_call = new SiteService();
|
||||
useEffect(() => {
|
||||
getBlogData();
|
||||
}, []);
|
||||
|
||||
const getBlogData = async () => {
|
||||
/*
|
||||
The reason for this, is because of the breaking I had when building the blog
|
||||
I decided to save to the local storage for an hour so that it won't need to be going to the server again but I can change this
|
||||
*/
|
||||
// Saving it locally to avoid interfering with server
|
||||
if (localStorage.getItem("myFit--blogData") == null) {
|
||||
try {
|
||||
let res = await api_call.blogData();
|
||||
|
||||
// Set the blog data to local storage
|
||||
localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
|
||||
setBlogData(res.data);
|
||||
// Set a time out for the blog data to be deleted from local storage
|
||||
setTimeout(() => {
|
||||
localStorage.removeItem("myFit--blogData");
|
||||
}, 3600);
|
||||
} catch (error) {
|
||||
console.log("Error from blog data ", error);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
let data = JSON.parse(localStorage.getItem("myFit--blogData"));
|
||||
setBlogData(data);
|
||||
} catch (error) {
|
||||
console.error("Error parsing JSON data: ", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Bredcrumb from '../../Bredcrumb/Main'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 && (
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b1 &&
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b2 && (
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg1}
|
||||
/>
|
||||
)}
|
||||
{brdcum.b2 &&
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg1}/>}
|
||||
|
||||
{brdcum.b5 && (
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg}
|
||||
/>
|
||||
)}
|
||||
{brdcum.b5 &&
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg}/>}
|
||||
|
||||
{brdcum.b3 && (
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
/>
|
||||
)}
|
||||
{brdcum.b3 &&
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Blog details"
|
||||
tag="Blog single" />}
|
||||
|
||||
{brdcum.b4 && (
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg2}
|
||||
/>
|
||||
)}
|
||||
{brdcum.b4 &&
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Blog details"
|
||||
tag="Blog single"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
<section className="blog_detail_section">
|
||||
<div className="container">
|
||||
<div className="blog_inner_pannel">
|
||||
<span className="blog_date">
|
||||
{new Date(data && data.post_modified).toDateString()}
|
||||
</span>
|
||||
|
||||
<div className="section_title">
|
||||
<h2>{data && data.post_title}</h2>
|
||||
</div>
|
||||
<div className="main_img">
|
||||
<img
|
||||
src={data && data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3>{data && data.post_name}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: data && data.post_content,
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
<div className="blog_authore">
|
||||
<div className="authore_info">
|
||||
<div className="text">
|
||||
{/* <h3>{data && data.post_author}</h3> */}
|
||||
<span>{new Date(data && data.post_date).toDateString()}</span>
|
||||
<section className="blog_detail_section">
|
||||
<div className="container">
|
||||
<div className="blog_inner_pannel">
|
||||
<div className="review">
|
||||
<span>Review</span>
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="section_title">
|
||||
<h2>Top rated app of the year!</h2>
|
||||
</div>
|
||||
<div className="main_img">
|
||||
<img src="assets/images/blog_detail_main.png" alt="image" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
|
||||
<p>Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.</p>
|
||||
<h3>Why we are best</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
|
||||
<ul>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing and typesetting in </p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only five centuries, but also the leap into electronic.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only.</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="two_img">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<img src="assets/images/blog_sub_01.png" alt="image" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<img src="assets/images/blog_sub_02.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3>Why we are best</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
|
||||
</div>
|
||||
<div className="quote_block">
|
||||
<span className="q_icon"><img src="assets/images/quote_icon.png" alt="image" /></span>
|
||||
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.</h2>
|
||||
<p><span className="name">Mr. John Doe,</span> Apper Inc</p>
|
||||
</div>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.</p>
|
||||
<div className="blog_authore">
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d02.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h3>By: John Dow</h3>
|
||||
<span>July 25, 2022</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social_media">
|
||||
<ul>
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog_tags">
|
||||
<ul>
|
||||
<li className="tags"><p>Tags:</p></li>
|
||||
<li><span>app,</span></li>
|
||||
<li><span>rating,</span></li>
|
||||
<li><span>development</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am comment_section">
|
||||
<div className="container">
|
||||
<div className="section_title">
|
||||
<h2>3 Comments</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social_media">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_TWITTER}>
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d01.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>30 min ago</span>
|
||||
<h4>Dolly Shell</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
|
||||
dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen. </p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="replay_comment">
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d02.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>15 min ago</span>
|
||||
<h4>Devil Joe</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the when.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d03.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>2 days ago</span>
|
||||
<h4>Sherly Shie</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
|
||||
dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen. </p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog_tags">
|
||||
<a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="row_am latest_story"
|
||||
id="blog">
|
||||
<div className="container">
|
||||
{/* Latest Title */}
|
||||
<div
|
||||
className="section_title"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="100">
|
||||
<h2>
|
||||
Read latest <span>story</span>
|
||||
</h2>
|
||||
<br />
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="row">
|
||||
{blogData.slice(-4, -1).map((item, index) => (
|
||||
<div
|
||||
className="col-md-4"
|
||||
key={index}>
|
||||
<div
|
||||
className="story_box"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img
|
||||
src={item.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
<span>{new Date(item.post_date).toDateString()}</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{item.post_title}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.post_content.substring(0, 100) + " . . .",
|
||||
}}></div>
|
||||
<a href={`/blogdetails/${item.id}`}>READ MORE</a>
|
||||
{/* <Link to={`/blogdetails/${item.id}`}>READ MORE</Link> */}
|
||||
</div>
|
||||
<section className="row_am comment_form_section">
|
||||
<div className="container">
|
||||
<div className="section_title">
|
||||
<h2>Leave a <span>comment</span></h2>
|
||||
<p>Your email address will not be published. Required fields are marked *</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
<form action="">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Name *" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="email" className="form-control" placeholder="Email *" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Phone" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Website " />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="form-group">
|
||||
<textarea className="form-control" placeholder="Comments"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 text-center">
|
||||
<button className="btn puprple_btn" type="submit">POST COMMENTS</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
export default Main;
|
||||
<section className="row_am latest_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Read latest <span>story</span></h2>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story01.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Cool features added!</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry lorem Ipsum has.</p>
|
||||
<Link to="#">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story02.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Top rated app! Yupp.</h3>
|
||||
<p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
|
||||
<Link to="#">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src="assets/images/story03.png" alt="image" />
|
||||
<span>45 min ago</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>Creative ideas on app.</h3>
|
||||
<p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
|
||||
<Link to="#">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
+51
-225
@@ -1,127 +1,24 @@
|
||||
/** @format */
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import Bredcrumb from "../Bredcrumb/Main";
|
||||
import BGImg from "../../assets/images/bread_crumb_bg.png";
|
||||
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
|
||||
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
|
||||
import SuccessImg from "../../assets/images/experts_01.png"
|
||||
|
||||
import SiteService from "../../vendors/service/siteService";
|
||||
|
||||
// Form Inputs
|
||||
const FormInput = (props) => {
|
||||
let {
|
||||
name,
|
||||
type,
|
||||
placeholder,
|
||||
required,
|
||||
maxLenght,
|
||||
errorMessage,
|
||||
value,
|
||||
onChange,
|
||||
pattern,
|
||||
} = props;
|
||||
|
||||
const [focused, setFocused] = useState(false);
|
||||
const handleFocus = () => {
|
||||
return setFocused(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className="form-control"
|
||||
maxLength={maxLenght}
|
||||
required={required}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onBlur={handleFocus}
|
||||
pattern={pattern}
|
||||
focused={focused.toString()}
|
||||
/>
|
||||
<span>{errorMessage}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Main = ({ brdcum }) => {
|
||||
let response = document.getElementById("contact_loader");
|
||||
let contact_body = document.getElementById("contact_body");
|
||||
let errText = document.getElementById("errText");
|
||||
let navigate = useNavigate();
|
||||
|
||||
// Form Validation
|
||||
const [values, setValues] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
message: "",
|
||||
country: "",
|
||||
}); //initial state values
|
||||
const [countries, setCountries] = useState([]); // initial state for country dropdown
|
||||
const [myData, setMyData] = useState(null);
|
||||
// Gave a generic name for multiple calls
|
||||
const API_CALL = new SiteService(); // instantiating the class
|
||||
// API CALL
|
||||
let [countries, setCountries] = useState([]) // initial state for country dropdown
|
||||
let countryClass = new SiteService() // instantiating the class
|
||||
|
||||
const allCountry = () => {
|
||||
return API_CALL.countryData();
|
||||
};
|
||||
const contactForm = async (value) => {
|
||||
return await API_CALL.contactData(value);
|
||||
};
|
||||
|
||||
const onChange = (e) => {
|
||||
setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
};
|
||||
|
||||
// Submitting form
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
response.innerHTML = `<div
|
||||
class="loader loader-sm"
|
||||
id="loader-1" style='margin-right: 20px'></div>`;
|
||||
|
||||
contactForm(values)
|
||||
.then((contact) => {
|
||||
setMyData(contact);
|
||||
|
||||
// Checking for errors
|
||||
if (contact?.data?.status < 1 || contact?.data?.message_id == "")
|
||||
return (errText.textContent =
|
||||
"unable to send your message, please try able");
|
||||
else {
|
||||
response.innerHTML = `<p> SEND MESSAGE </p>`;
|
||||
|
||||
contact_body.innerHTML = `<div class='contact_body animate pop'>
|
||||
<div><img src=${SuccessImg} /></div>
|
||||
<p>We have received your message and will follow up promptly.</p>
|
||||
</div>`;
|
||||
setTimeout(() => {
|
||||
navigate("/");
|
||||
}, 10000);
|
||||
|
||||
setValues((prev) => ({ ...prev, [e.target.name]: "" }));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
return countryClass.countryData();
|
||||
}
|
||||
|
||||
//CALLS THE API AFTER COMPONENT LOADS
|
||||
useEffect(() => {
|
||||
allCountry().then((data) => setCountries(Object.values(data.data)));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
myData
|
||||
}, [myData]);
|
||||
useEffect(()=>{
|
||||
allCountry().then((data)=> setCountries(Object.values(data.data)))
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -174,178 +71,107 @@ const Main = ({ brdcum }) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<section
|
||||
className="contact_page_section"
|
||||
id="contact">
|
||||
<section className="contact_page_section" id="contact">
|
||||
<div className="container">
|
||||
<div className="contact_inner">
|
||||
<div
|
||||
className="contact_form"
|
||||
id="contact_body">
|
||||
<div className="contact_form">
|
||||
<div className="section_title">
|
||||
<h2>
|
||||
<span>Leave a</span> message
|
||||
Leave a <span>message</span>
|
||||
</h2>
|
||||
<p>Fill up form below, our team will get back soon</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<FormInput
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
errorMessage="Please enter your name"
|
||||
required={true}
|
||||
maxLenght={35}
|
||||
value={values.name}
|
||||
onChange={onChange}
|
||||
pattern="^[A-Za-z]{1,35}$"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
errorMessage="It should be a valid email address!"
|
||||
required={true}
|
||||
maxLenght={35}
|
||||
value={values.email}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<select
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
className="form-control"
|
||||
name="country"
|
||||
value={values.country}
|
||||
onChange={onChange}
|
||||
required>
|
||||
<option
|
||||
value={""}
|
||||
onCha>
|
||||
Country
|
||||
</option>
|
||||
{countries.length > 0 &&
|
||||
countries.map((country, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={country}>
|
||||
{country}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormInput
|
||||
name="phone"
|
||||
type="number"
|
||||
placeholder="Phone"
|
||||
errorMessage="It should be a valid phone number!"
|
||||
maxLenght={15}
|
||||
value={values.phone}
|
||||
onChange={onChange}
|
||||
pattern="^[0-9]{15}$"
|
||||
/>
|
||||
<div className="form-group">
|
||||
<select className="form-control">
|
||||
<option value="">Country</option>
|
||||
{countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Phone"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
name="msg"
|
||||
className="form-control"
|
||||
placeholder="Your message"
|
||||
value={values.msg}
|
||||
errorMessage='words have exceeded 350 characters!'
|
||||
onChange={onChange}
|
||||
maxLength={300}
|
||||
pattern="^[A-Za-z0-9]{5, 300}$"
|
||||
/>
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="form-group term_check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="term"
|
||||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
<input type="checkbox" id="term" />
|
||||
<label htmlFor="term">
|
||||
I agree to the terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group mb-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn puprple_btn contact_btn"
|
||||
aria-label="submit form"
|
||||
id="contact_loader">
|
||||
<p> SEND MESSAGE </p>
|
||||
<button type="submit" className="btn puprple_btn">
|
||||
SEND MESSAGE
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* Error Tag */}
|
||||
<p id="errText" />
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="contact_info">
|
||||
<div className="icon">
|
||||
<img
|
||||
src="assets/images/contact_message_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
<img src="assets/images/contact_message_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="section_title">
|
||||
<h2>
|
||||
<span> Have any </span>question?
|
||||
Have any <span>question?</span>
|
||||
</h2>
|
||||
<p>
|
||||
If you have any question about our product, service, payment
|
||||
or company, Visit our <Link to="/faq">FAQs page.</Link>
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/faq"
|
||||
className="btn puprple_btn">
|
||||
<Link to="/faq" className="btn puprple_btn">
|
||||
READ FAQ
|
||||
</Link>
|
||||
<ul className="contact_info_list">
|
||||
<li>
|
||||
<div className="img">
|
||||
<img
|
||||
src="assets/images/mail_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
<img src="assets/images/mail_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Email Us</span>
|
||||
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
|
||||
{process.env.REACT_APP_SUPPORT_EMAIL}
|
||||
</a>
|
||||
<Link to="#">example@gmail.com</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="img">
|
||||
<img
|
||||
src="assets/images/call_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
<img src="assets/images/call_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Call Us</span>
|
||||
<a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
|
||||
{process.env.REACT_APP_US_PHONE}
|
||||
</a>
|
||||
<Link to="#">+1 (888) 553-46-11</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="img">
|
||||
<img
|
||||
src="assets/images/location_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
<img src="assets/images/location_icon.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Visit Us</span>
|
||||
<p>{process.env.REACT_APP_US_ADDRESS}</p>
|
||||
<p>5687, Business Avenue, New York, USA 5687</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -354,7 +180,7 @@ const Main = ({ brdcum }) => {
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am map_section">
|
||||
<div className="container" />
|
||||
<div className="container"></div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -61,14 +61,14 @@ const Main = ({ footer }) => {
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<Link to="#">
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href ={process.env.REACT_APP_TWITTER}>
|
||||
<Link to="#">
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -94,13 +94,13 @@ const Main = ({ footer }) => {
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Support</h3>
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/faq">FAQs</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/how_it_work">How it works</Link>
|
||||
<Link to="/#how_it_work">How it works</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/terms">Terms & conditions</Link>
|
||||
@@ -116,14 +116,14 @@ const Main = ({ footer }) => {
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -197,15 +197,15 @@ const Main = ({ footer }) => {
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<i className="icofont-facebook"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href ={process.env.REACT_APP_TWITTER}>
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
<Link to="#">
|
||||
<i className="icofont-twitter"></i>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -231,13 +231,13 @@ const Main = ({ footer }) => {
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Support</h3>
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/faq">FAQs</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/how_it_work">How it works</Link>
|
||||
<Link to="/#how_it_work">How it works</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/terms">Terms & conditions</Link>
|
||||
@@ -253,14 +253,20 @@ const Main = ({ footer }) => {
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/appstore_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/googleplay_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -321,14 +327,14 @@ const Main = ({ footer }) => {
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<Link to="#">
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href ={process.env.REACT_APP_TWITTER}>
|
||||
<Link to="#">
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -367,7 +373,7 @@ const Main = ({ footer }) => {
|
||||
<Link to="#">Support</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/how_it_work">How it works</Link>
|
||||
<Link to="/work">How it works</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/terms">Terms & conditions</Link>
|
||||
@@ -383,15 +389,21 @@ const Main = ({ footer }) => {
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/appstore_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/googleplay_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -446,14 +458,14 @@ const Main = ({ footer }) => {
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<Link to="#">
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href ={process.env.REACT_APP_TWITTER}>
|
||||
<Link to="#">
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -483,7 +495,7 @@ const Main = ({ footer }) => {
|
||||
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Support</h3>
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/faq">FAQs</Link>
|
||||
@@ -492,7 +504,7 @@ const Main = ({ footer }) => {
|
||||
<Link to="#">Support</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/how_it_work">How it works</Link>
|
||||
<Link to="/work">How it works</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/terms">Terms & conditions</Link>
|
||||
@@ -509,14 +521,20 @@ const Main = ({ footer }) => {
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/appstore_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/googleplay_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -579,14 +597,14 @@ const Main = ({ footer }) => {
|
||||
</ul>
|
||||
<ul className="social_media">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<Link to="#">
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href ={process.env.REACT_APP_TWITTER}>
|
||||
<Link to="#">
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -615,7 +633,7 @@ const Main = ({ footer }) => {
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-12">
|
||||
<div className="links">
|
||||
<h3>Help & Support</h3>
|
||||
<h3>Help & Suport</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/faq">FAQs</Link>
|
||||
@@ -624,7 +642,7 @@ const Main = ({ footer }) => {
|
||||
<Link to="#">Support</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/how_it_work">How it works</Link>
|
||||
<Link to="/work">How it works</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/terms">Terms & conditions</Link>
|
||||
@@ -639,15 +657,21 @@ const Main = ({ footer }) => {
|
||||
<div className="try_out">
|
||||
<h3>Let’s Try Out</h3>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/appstore_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img
|
||||
src="assets/images/googleplay_blue.png"
|
||||
alt="image"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
+11
-19
@@ -2,17 +2,27 @@ import { HashLink as Link } from "react-router-hash-link";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import AOS from "aos";
|
||||
import OwlCarousel from "react-owl-carousel";
|
||||
//import Trusted from "../HomeMain/Trusted/Main";
|
||||
import Features from "../HomeMain/Features/Main";
|
||||
//import AboutApp from "../HomeMain/AboutApp/Main";
|
||||
//import Design from "../HomeMain/Design/Main";
|
||||
import Work from "../HomeMain/Work/Main";
|
||||
//import Testimonial from "../HomeMain/Testimonial/Main";
|
||||
//import Pricing from "../HomeMain/Pricing/Main";
|
||||
import Faq from "../HomeMain/Faq/Main";
|
||||
import Interface from "../HomeMain/Interface/Main";
|
||||
import Download from "../HomeMain/Download/Main";
|
||||
import Story from "../HomeMain/Story/Main";
|
||||
|
||||
import anim from "../../assets/images/anim_line.png";
|
||||
import blueapp from "../../assets/images/appstore_blue.png";
|
||||
import whiteapp from "../../assets/images/appstore_white.png";
|
||||
import blue from "../../assets/images/googleplay_blue.png";
|
||||
import white from "../../assets/images/googleplay_white.png";
|
||||
//import used1 from "../../assets/images/used01.png";
|
||||
//import used2 from "../../assets/images/used02.png";
|
||||
//import used3 from "../../assets/images/used03.png";
|
||||
//import used4 from "../../assets/images/used04.png";
|
||||
import msg from "../../assets/images/message_icon.png";
|
||||
import shield from "../../assets/images/shield_icon.png";
|
||||
import screen from "../../assets/images/screen.png";
|
||||
@@ -103,22 +113,6 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
|
||||
</p>
|
||||
</div>
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
<img className="white_img" src={whiteapp} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
<img className="white_img" src={white} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
{/* <ul className="app_btn">
|
||||
<li>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img className="blue_img" src={blueapp} alt="image" />
|
||||
@@ -131,9 +125,7 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
|
||||
<img className="white_img" src={white} alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul> */}
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-6 col-md-12"
|
||||
|
||||
@@ -47,18 +47,19 @@ const Main = () => {
|
||||
<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. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
|
||||
<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>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,8 @@
|
||||
import React ,{ useState, useEffect } from 'react'
|
||||
import SiteService from '../../../vendors/service/siteService'
|
||||
import React ,{ useState } from 'react'
|
||||
|
||||
const Main = ({gredient}) => {
|
||||
|
||||
const[activeFaq, setActiveFaq] = useState({btn0 : false})
|
||||
|
||||
const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
|
||||
|
||||
let faqServices = new SiteService(); // instantiating the class
|
||||
|
||||
const allFaqData = () => {
|
||||
return faqServices.faqData();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
allFaqData().then((data) => setFaqs(data.data));
|
||||
}, []);
|
||||
const[activeFaq, setActiveFaq] = useState({a : true})
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -24,11 +11,12 @@ const Main = ({gredient}) => {
|
||||
<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>Organizing all types of wellness activity you desire.<br/>Proven step to increase pleasure and commitment.</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="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{/* <div className="card" data-aos="fade-up" data-aos-duration="1500">
|
||||
<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">
|
||||
@@ -93,33 +81,7 @@ const Main = ({gredient}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* displays loading ... while the page fetches the FAQs */}
|
||||
{faqs.length < 1 && <h3>Loading...</h3>}
|
||||
|
||||
{faqs.length > 0 && faqs.map((faq, index) => {
|
||||
let id = `heading${index}`; //headingSeven
|
||||
let target = `collapse${index}`; //#collapseSeven
|
||||
|
||||
return(
|
||||
<div key={index} className="card" data-aos="fade-up">
|
||||
<div className="card-header" id={id}>
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq[`btn${index}`] && "active"}`} onClick= {() => setActiveFaq(activeFaq[`btn${index}`] ? {[`btn${index}`] : false} : {[`btn${index}`] : true})} data-toggle="collapse"
|
||||
data-target={`#${target}`}>{activeFaq[`btn${index}`] ? <i className="icon_faq icofont-minus"></i> : <i className="icon_faq icofont-plus"></i>}{faq.title}
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
|
||||
<div className="card-body">
|
||||
<p>{faq.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,116 +1,210 @@
|
||||
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>
|
||||
</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>
|
||||
{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>
|
||||
</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>
|
||||
<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 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>
|
||||
</section>}
|
||||
<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
|
||||
export default Main;
|
||||
|
||||
@@ -33,10 +33,9 @@ const Main = () => {
|
||||
<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>Beautiful <span>interface</span></h2>
|
||||
<h2>Beautifull <span>interface</span></h2>
|
||||
<p>
|
||||
myFit appends a fun yet simple process to keep you consistently<br/> motivated,engaged and moving again without any shrewdness.
|
||||
|
||||
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" >
|
||||
|
||||
@@ -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 ?
|
||||
@@ -41,36 +24,42 @@ const Main = ({gredient , video}) => {
|
||||
<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> */}
|
||||
<span className="offer">50% off</span>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className={`pricing_block ${index % 2 == 0? '' : '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)=> <li key={index}><p>{feature}</p></li>)}
|
||||
</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"/>
|
||||
@@ -97,39 +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) => {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className={`pricing_block ${index % 2 == 0? '' : '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_anual}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
|
||||
</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>
|
||||
|
||||
@@ -150,64 +236,198 @@ const Main = ({gredient , video}) => {
|
||||
<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> */}
|
||||
<span className="offer">50% off</span>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className={`pricing_block ${index % 2 == 0? '' : '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)=> <li key={index}><p>{feature}</p></li>)}
|
||||
</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) => {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className={`pricing_block ${index % 2 == 0? '' : '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_anual}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
|
||||
</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>
|
||||
|
||||
|
||||
@@ -1,64 +1,20 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from 'react-router-dom';
|
||||
// import story1 from '../../../assets/images/story01.png';
|
||||
// import story2 from '../../../assets/images/story02.png';
|
||||
// import story3 from '../../../assets/images/story03.png';
|
||||
import SiteService from "../../../vendors/service/siteService";
|
||||
|
||||
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 = () => {
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
|
||||
let api = new SiteService();
|
||||
useEffect(() => {
|
||||
getBlogData();
|
||||
}, []);
|
||||
|
||||
const getBlogData = async () => {
|
||||
try {
|
||||
let res = await api.blogData();
|
||||
setBlogData(res.data);
|
||||
|
||||
} catch (error) {
|
||||
console.log("Error from blog data ", error);
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
{blogData.slice(1, 4).map((item, index) => (
|
||||
<div
|
||||
className="col-md-4"
|
||||
key={index}>
|
||||
<div
|
||||
className="story_box"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img
|
||||
src={item.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
<span>{new Date(item.post_date).toDateString()}</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{item.post_title}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.post_content.substring(0, 100) + " . . .",
|
||||
}}></div>
|
||||
<Link to={`/blogdetails/${item.id}`}>READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* <div className="col-md-4">
|
||||
<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" />
|
||||
@@ -97,7 +53,7 @@ const Main = () => {
|
||||
<Link to="/blog-single">READ MORE</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React , {useState} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import img from '../../../assets/images/download_app1.png'
|
||||
import img1 from '../../../assets/images/create_account2.png'
|
||||
import img2 from '../../../assets/images/enjoy_app01.png'
|
||||
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'
|
||||
@@ -20,7 +20,8 @@ const Main = ({dark}) => {
|
||||
<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>
|
||||
<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>
|
||||
@@ -43,7 +44,7 @@ const Main = ({dark}) => {
|
||||
<li>
|
||||
<div className="step_text" data-aos="fade-left" data-aos-duration="1500">
|
||||
<h4>Create account</h4>
|
||||
<span>Free Account</span>
|
||||
<span>14 days free trial</span>
|
||||
<p>Sign up free for App account. One account for all devices.</p>
|
||||
</div>
|
||||
<div className="step_number">
|
||||
@@ -56,7 +57,7 @@ const Main = ({dark}) => {
|
||||
<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="/faq">FAQs</Link></span>
|
||||
<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">
|
||||
|
||||
@@ -55,7 +55,7 @@ const Main = ({navbar}) => {
|
||||
<Link to="/contact" className="nav-link" >Contact</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
|
||||
<Link to={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -134,7 +134,7 @@ const Main = ({navbar}) => {
|
||||
<Link smooth to="/#features" className="nav-link">Features</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link smooth to="#how_it_work" className="nav-link">How it works</Link>
|
||||
<Link smooth to="/#how_it_work" className="nav-link">How it works</Link>
|
||||
</li>
|
||||
<li className="nav-item" >
|
||||
<Link to="/blog" className="nav-link">Blog</Link>
|
||||
@@ -286,7 +286,7 @@ const Main = ({navbar}) => {
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
@@ -359,7 +359,7 @@ const Main = ({navbar}) => {
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
@@ -404,7 +404,7 @@ const Main = ({navbar}) => {
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
@@ -477,7 +477,7 @@ const Main = ({navbar}) => {
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu">
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
@@ -533,7 +533,7 @@ const Main = ({navbar}) => {
|
||||
<span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
|
||||
<div className="sub_menu" style={{ display: show ? "block" : "none" }}>
|
||||
<ul>
|
||||
<li><Link to="/">Home Default</Link></li>
|
||||
<li><Link to="/">Home Defoult</Link></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
@@ -1,30 +1,13 @@
|
||||
import React , { useState , useEffect} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import blueapp from "../../../assets/images/appstore_blue.png"
|
||||
import blue from "../../../assets/images/googleplay_blue.png"
|
||||
import Bredcrumb from '../../Bredcrumb/Main'
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
|
||||
import Faq from '../../HomeMain/Faq/Main'
|
||||
|
||||
import SiteService from '../../../vendors/service/siteService'
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
|
||||
// const[activeFaq, setActiveFaq] = useState({btn0 : false})
|
||||
|
||||
// const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
|
||||
|
||||
// let faqServices = new SiteService(); // instantiating the class
|
||||
|
||||
// const allFaqData = () => {
|
||||
// return faqServices.faqData();
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// allFaqData().then((data) => setFaqs(data.data));
|
||||
// }, []);
|
||||
const[activeFaq, setActiveFaq] = useState({a : true})
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 &&
|
||||
@@ -66,11 +49,11 @@ const Main = ({brdcum}) => {
|
||||
tag="Faq"
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
{/* <section className="row_am faq_section">
|
||||
|
||||
<section className="row_am faq_section">
|
||||
<div className="container">
|
||||
<div className="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingOne">
|
||||
<h2 className="mb-0">
|
||||
@@ -87,7 +70,6 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingTwo">
|
||||
<h2 className="mb-0">
|
||||
@@ -201,10 +183,7 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
<Faq />
|
||||
|
||||
</section>
|
||||
<section className="row_am free_app_section review_freeapp" id="getstarted">
|
||||
<div className="container">
|
||||
<div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
@@ -224,20 +203,20 @@ const Main = ({brdcum}) => {
|
||||
<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. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
|
||||
<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>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -326,18 +326,19 @@ const Main = ({brdcum}) => {
|
||||
<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. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
|
||||
<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">
|
||||
<ul className="app_btn">
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
<Link to="#">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
<Link to="#">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React , {useState ,useEffect} from 'react'
|
||||
import Pricing from '../HomeMain/Pricing/Main'
|
||||
import Faq from '../HomeMain/Faq/Main'
|
||||
import Bredcrumb from '../Bredcrumb/Main'
|
||||
import BGImg from "../../assets/images/bread_crumb_bg.png"
|
||||
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"
|
||||
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"
|
||||
import blueapp from "../../assets/images/appstore_blue.png";
|
||||
import blue from "../../assets/images/googleplay_blue.png";
|
||||
|
||||
|
||||
const Main = ({brdcum}) => {
|
||||
@@ -56,8 +53,7 @@ const Main = ({brdcum}) => {
|
||||
bgimg={BGImg2}/>}
|
||||
|
||||
<Pricing/>
|
||||
<Faq />
|
||||
{/* <section className="row_am faq_section">
|
||||
<section className="row_am faq_section">
|
||||
<div className="container">
|
||||
<div className="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
@@ -191,7 +187,7 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> */}
|
||||
</section>
|
||||
<section className="row_am free_app_section review_freeapp" id="getstarted">
|
||||
<div className="container">
|
||||
<div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
|
||||
@@ -211,20 +207,20 @@ const Main = ({brdcum}) => {
|
||||
<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. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
|
||||
<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>
|
||||
<a href={process.env.REACT_APP_ANDROID_URL}>
|
||||
<img src={blueapp} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_IOS_URL}>
|
||||
<img src={blue} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/appstore_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
<img src="assets/images/googleplay_blue.png" alt="image" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+1
-5
@@ -3,7 +3,6 @@ import { Route, Routes, useLocation } from "react-router-dom";
|
||||
import Navbar from "../component/Navbar/Main";
|
||||
import Footer from "../component/Footer/Main";
|
||||
import Home from "../component/Home/Main";
|
||||
import Work from "../component/HomeMain/Work/Main"
|
||||
import AboutUs from "../component/AboutUs/Main";
|
||||
import Review from "../component/Pages/Review/Main";
|
||||
import Contact from "../component/Contact/Main";
|
||||
@@ -14,7 +13,6 @@ import Pricing from "../component/Pricing/Main";
|
||||
import Blog from "../component/Blog/Blog/Main";
|
||||
import BlogSingle from "../component/Blog/BlogSingle/Main";
|
||||
|
||||
|
||||
import Terms from "../component/Terms/Main";
|
||||
import Privacy from "../component/Privacy/Main";
|
||||
|
||||
@@ -86,11 +84,9 @@ const Routing = () => {
|
||||
<Route path="/sign-up" element={<SignUp />} />
|
||||
<Route path="/pricing" element={<Pricing brdcum={brdcum} />} />
|
||||
<Route path="/blog" element={<Blog brdcum={brdcum} />} />
|
||||
<Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
|
||||
<Route path="/blog-single" element={<BlogSingle brdcum={brdcum} />} />
|
||||
<Route path="/terms" element={<Terms brdcum={brdcum} />} />
|
||||
<Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
|
||||
<Route path="/how_it_work" element={<Work brdcum={brdcum} />} />
|
||||
|
||||
</Routes>
|
||||
{footerpage && <Footer footer={footer} />}
|
||||
</>
|
||||
|
||||
Vendored
+4
-17
@@ -5,28 +5,15 @@ class SiteService {
|
||||
constructor() {
|
||||
console.log("Er are here anyway");
|
||||
}
|
||||
// Blog Data {Get}
|
||||
blogData(id) {
|
||||
return this.getAuxEnd("/blogdata", null);
|
||||
blogData() {
|
||||
return this.getAuxEnd("blogdata", null);
|
||||
}
|
||||
|
||||
// Country Data {GET}
|
||||
countryData() {
|
||||
return this.getAuxEnd("/country", null);
|
||||
}
|
||||
|
||||
// Contact Data{POST}
|
||||
contactData() {
|
||||
return this.postAuxEnd("/contact", null)
|
||||
}
|
||||
|
||||
faqData() {
|
||||
return this.getAuxEnd("/faq", null);
|
||||
}
|
||||
|
||||
priceData() {
|
||||
return this.getAuxEnd("/pricing", null);
|
||||
}
|
||||
faqData() {}
|
||||
|
||||
//---------------------------------------- -----
|
||||
//---------------------------------------- -----
|
||||
@@ -58,7 +45,7 @@ class SiteService {
|
||||
|
||||
postAuxEnd(uri, reqData) {
|
||||
const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
|
||||
return Axios.post(endPoint, reqData)
|
||||
Axios.post(endPoint)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
// res = response;
|
||||
|
||||
Reference in New Issue
Block a user