Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ChineseChikki
|
09bec5e545 |
@@ -8,12 +8,6 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my
|
||||
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_APPSITE="http://localhost:7012"
|
||||
|
||||
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/"
|
||||
|
||||
|
||||
@@ -3521,108 +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
|
||||
@@ -4687,55 +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: 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 |
+51
-226
@@ -1,128 +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 }));
|
||||
};
|
||||
console.log(values);
|
||||
|
||||
// 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(() => {
|
||||
console.log(myData);
|
||||
}, [myData]);
|
||||
useEffect(()=>{
|
||||
allCountry().then((data)=> setCountries(Object.values(data.data)))
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -175,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>
|
||||
@@ -355,7 +180,7 @@ const Main = ({ brdcum }) => {
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am map_section">
|
||||
<div className="container" />
|
||||
<div className="container"></div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
@@ -29,7 +16,7 @@ const Main = ({gredient}) => {
|
||||
</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">
|
||||
@@ -94,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;
|
||||
|
||||
@@ -1,30 +1,13 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import React , { useState, useEffect} from 'react'
|
||||
import AOS from "aos";
|
||||
import React , { useState} from 'react'
|
||||
import img1 from '../../../assets/images/standard.png'
|
||||
import img2 from '../../../assets/images/unlimited.png'
|
||||
import img3 from '../../../assets/images/premium.png'
|
||||
|
||||
import SiteService from '../../../vendors/service/siteService'
|
||||
|
||||
const Main = ({gredient , video}) => {
|
||||
|
||||
const[tog, setTog] = useState()
|
||||
|
||||
const [prices, setPrices] = useState([]); // initial state for FAQs before API call
|
||||
|
||||
let priceServices = new SiteService(); // instantiating the class
|
||||
|
||||
const getAllPriceData = () => {
|
||||
return priceServices.priceData();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getAllPriceData().then((data) => setPrices(data.data));
|
||||
AOS.init();
|
||||
AOS.refresh();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{gredient ?
|
||||
@@ -46,52 +29,37 @@ const Main = ({gredient , video}) => {
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
{/* <div className="col-md-4">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/standard-one.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$15</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 5 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>50 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/unlimited-one.png" alt="image"/>
|
||||
@@ -118,60 +86,136 @@ const Main = ({gredient , video}) => {
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/premium-one.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$55</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>15 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/standard.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$150</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/unlimited.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$999</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>400 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>40 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
<img src="assets/images/premium.png" alt="image" />
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$550</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 20 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>8 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -197,101 +241,193 @@ const Main = ({gredient , video}) => {
|
||||
|
||||
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
|
||||
<div className="row">
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$15</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 5 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>50 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$99</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>10 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$55</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>15 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Standard</h3>
|
||||
<span>For the basics</span>
|
||||
</div>
|
||||
<span className="price">$150</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 10 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>100 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support on request</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{prices.length > 0 &&
|
||||
prices.map((price, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>{price.title}</h3>
|
||||
<span>{price.text}</span>
|
||||
</div>
|
||||
<span className="price">{price.price}</span>
|
||||
<ul className="benifits">
|
||||
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
|
||||
</ul>
|
||||
<Link to="/" className="btn white_btn">Start Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block highlited_block">
|
||||
<div className="icon">
|
||||
{ video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Unlimited</h3>
|
||||
<span>For the professionals</span>
|
||||
</div>
|
||||
<span className="price">$999</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Unlimited Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>400 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>40 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>20 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="pricing_block">
|
||||
<div className="icon">
|
||||
{video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
|
||||
</div>
|
||||
<div className="pkg_name">
|
||||
<h3>Premium</h3>
|
||||
<span>For small team</span>
|
||||
</div>
|
||||
<span className="price">$550</span>
|
||||
<ul className="benifits">
|
||||
<li>
|
||||
<p>Up to 20 Website</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>200 GB disk space</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>25 Customize sub pages</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>8 Domains access</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>24/7 Customer support</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -5,23 +5,9 @@ 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[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 &&
|
||||
@@ -68,8 +54,7 @@ const Main = ({brdcum}) => {
|
||||
<div className="container">
|
||||
<div className="faq_panel">
|
||||
<div className="accordion" id="accordionExample">
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingOne">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
|
||||
@@ -84,9 +69,8 @@ const Main = ({brdcum}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
</div>
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingTwo">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
|
||||
@@ -101,9 +85,9 @@ const Main = ({brdcum}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingThree">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
|
||||
@@ -119,9 +103,9 @@ const Main = ({brdcum}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingFour">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
|
||||
@@ -138,9 +122,9 @@ const Main = ({brdcum}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingFive">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.e && "active"}`} onClick= {() => setActiveFaq(activeFaq.e ? {e : false} : {e : true})} data-toggle="collapse"
|
||||
@@ -157,9 +141,9 @@ const Main = ({brdcum}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingSix">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.f && "active"}`} onClick= {() => setActiveFaq(activeFaq.f ? {f : false} : {f : true})} data-toggle="collapse"
|
||||
@@ -176,9 +160,9 @@ const Main = ({brdcum}) => {
|
||||
leap into electronic typesetting, remaining essentially unchanged.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="card" data-aos="fade-up" >
|
||||
<div className="card" data-aos="fade-up" >
|
||||
<div className="card-header" id="headingSeven">
|
||||
<h2 className="mb-0">
|
||||
<button type="button" className={`btn btn-link collapsed ${activeFaq.g && "active"}`} onClick= {() => setActiveFaq(activeFaq.g ? {g : false} : {g : true})} data-toggle="collapse"
|
||||
@@ -195,33 +179,7 @@ const Main = ({brdcum}) => {
|
||||
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.b && "active"}`} data-toggle="collapse"
|
||||
data-target={`#${target}`}>{activeFaq.b ? <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>
|
||||
|
||||
Vendored
+2
-15
@@ -5,28 +5,15 @@ class SiteService {
|
||||
constructor() {
|
||||
console.log("Er are here anyway");
|
||||
}
|
||||
// Blog Data {Get}
|
||||
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