Compare commits

...

14 Commits

Author SHA1 Message Date
Chukwumdiebube 116917bdb3 Contact page almost complete 2023-01-15 17:16:52 +01:00
Chukwumdiebube a0ae955e2e contact page task almost done 2023-01-15 02:55:41 +01:00
Chukwumdiebube 0f34385f13 Success in the api call 2023-01-14 15:57:02 +01:00
Chukwumdiebube 2bc9ed0fdb Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myFit--ContactPageForm 2023-01-14 01:26:41 +01:00
Chukwumdiebube f452bb90ff form validation complete 2023-01-14 01:22:37 +01:00
Chukwumdiebube 1834077952 form validations part 2023-01-13 21:16:31 +01:00
chief-bube ada9203824 Form Validation for Contact Form 2023-01-13 09:55:01 -08:00
tokslaw 6545922b6a Merge branch 'myfit_pricing_page_implementation' of MyFit/www-myfit into master 2023-01-13 17:47:16 +00:00
chief-bube a5eb1f2edf Worked on the form validation 2023-01-13 09:07:03 -08:00
VICTOR\anumu ce1879d0a2 Rendered the pricing list from the api call to th pricing_page 2023-01-13 15:03:38 +01:00
tokslaw c0d589a115 Merge branch 'myfit_feature_and_easy_step_text' of MyFit/www-myfit into master 2023-01-13 12:04:55 +00:00
ChineseChikki 89fc6adfdd updated features details and easy steps text 2023-01-13 01:39:03 +01:00
tokslaw 6323b86c6b Merge branch 'myfit_FAQs_Page' of MyFit/www-myfit into master 2023-01-12 21:59:14 +00:00
VICTOR\anumu d946417490 populated FAQs with data from api 2023-01-12 20:53:38 +01:00
8 changed files with 628 additions and 405 deletions
+2 -1
View File
@@ -8,6 +8,7 @@ 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=" https://myfitapp.mermsemr.com"
REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
REACT_APP_FORM_TIMEOUT = 10000
+133
View File
@@ -3521,6 +3521,90 @@ header.fix_style.white_header {
margin-bottom: 20px;
}
.contact_page_section .contact_inner .contact_form form .form-group textarea {
resize: none;
}
.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
@@ -4585,6 +4669,55 @@ 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;
+223 -51
View File
@@ -1,24 +1,128 @@
/** @format */
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Link, useNavigate } 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 axios from "axios";
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 [countries, setCountries] = useState([]) // initial state for country dropdown
let countryClass = new SiteService() // instantiating the class
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
const allCountry = () => {
return countryClass.countryData();
}
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 /></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);
});
};
//CALLS THE API AFTER COMPONENT LOADS
useEffect(()=>{
allCountry().then((data)=> setCountries(Object.values(data.data)))
},[])
useEffect(() => {
allCountry().then((data) => setCountries(Object.values(data.data)));
}, []);
useEffect(() => {
console.log(myData);
}, [myData]);
return (
<>
@@ -71,107 +175,175 @@ 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">
<div
className="contact_form"
id="contact_body">
<div className="section_title">
<h2>
Leave a <span>message</span>
<span>Leave a</span> message
</h2>
<p>Fill up form below, our team will get back soon</p>
</div>
<form action="">
<div className="form-group">
<input
type="text"
placeholder="Name"
className="form-control"
/>
</div>
<div className="form-group">
<input
type="email"
placeholder="Email"
className="form-control"
/>
</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}
/>
<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
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="text"
placeholder="Phone"
className="form-control"
/>
</div>
<FormInput
name="phone"
type="text"
placeholder="Phone"
errorMessage="It should be a valid phone number!"
maxLenght={15}
value={values.phone}
onChange={onChange}
/>
<div className="form-group">
<textarea
name="msg"
className="form-control"
placeholder="Your message"
></textarea>
value={values.msg}
onChange={onChange}
maxLength={350}
/>
</div>
<div className="form-group term_check">
<input type="checkbox" id="term" />
<input
type="checkbox"
id="term"
onChange={onChange}
required
/>
<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">
SEND MESSAGE
<button
type="submit"
className="btn puprple_btn contact_btn"
aria-label="submit form"
id="contact_loader">
<p> SEND MESSAGE </p>
</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>
Have any <span>question?</span>
<span> Have any </span>question?
</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>
<Link to="#">example@gmail.com</Link>
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
{process.env.REACT_APP_SUPPORT_EMAIL}
</a>
</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>
<Link to="#">+1 (888) 553-46-11</Link>
<a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
{process.env.REACT_APP_US_PHONE}
</a>
</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>5687, Business Avenue, New York, USA 5687</p>
<p>{process.env.REACT_APP_US_ADDRESS}</p>
</div>
</li>
</ul>
@@ -180,7 +352,7 @@ const Main = ({ brdcum }) => {
</div>
</section>
<section className="row_am map_section">
<div className="container"></div>
<div className="container" />
</section>
</>
);
+1 -2
View File
@@ -68,8 +68,7 @@ const Main = ({video}) => {
<div className="container">
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<h2><span>Features</span> that makes app different!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
standard dummy.</p>
<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">
+198 -334
View File
@@ -1,13 +1,30 @@
import { Link } from 'react-router-dom'
import React , { useState} from 'react'
import React , { useState, useEffect} from 'react'
import AOS from "aos";
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 ?
@@ -29,37 +46,52 @@ const Main = ({gredient , video}) => {
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
<div className="row">
<div className="col-md-4">
<div className="pricing_block">
<div className="icon">
<img src="assets/images/standard-one.png" alt="image" />
</div>
<div className="pkg_name">
<h3>Standard</h3>
<span>For the basics</span>
</div>
<span className="price">$15</span>
<ul className="benifits">
<li>
<p>Up to 5 Website</p>
</li>
<li>
<p>50 GB disk space</p>
</li>
<li>
<p>10 Customize sub pages</p>
</li>
<li>
<p>2 Domains access</p>
</li>
<li>
<p>Support on request</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
<div className="col-md-4">
{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-one.png" alt="image"/>
@@ -86,136 +118,60 @@ const Main = ({gredient , video}) => {
<p>24/7 Customer support</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
<div className="col-md-4">
<div className="pricing_block">
<div className="icon">
<img src="assets/images/premium-one.png" alt="image" />
</div>
<div className="pkg_name">
<h3>Premium</h3>
<span>For small team</span>
</div>
<span className="price">$55</span>
<ul className="benifits">
<li>
<p>Up to 10 Website</p>
</li>
<li>
<p>100 GB disk space</p>
</li>
<li>
<p>15 Customize sub pages</p>
</li>
<li>
<p>4 Domains access</p>
</li>
<li>
<p>24/7 Customer support</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
</div> */}
</div>
</div>
<div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
<div className="row">
<div className="col-md-4">
<div className="pricing_block">
<div className="icon">
<img src="assets/images/standard.png" alt="image" />
</div>
<div className="pkg_name">
<h3>Standard</h3>
<span>For the basics</span>
</div>
<span className="price">$150</span>
<ul className="benifits">
<li>
<p>Up to 10 Website</p>
</li>
<li>
<p>100 GB disk space</p>
</li>
<li>
<p>25 Customize sub pages</p>
</li>
<li>
<p>4 Domains access</p>
</li>
<li>
<p>Support on request</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
<div className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
<img src="assets/images/unlimited.png" alt="image" />
</div>
<div className="pkg_name">
<h3>Unlimited</h3>
<span>For the professionals</span>
</div>
<span className="price">$999</span>
<ul className="benifits">
<li>
<p>Unlimited Website</p>
</li>
<li>
<p>400 GB disk space</p>
</li>
<li>
<p>40 Customize sub pages</p>
</li>
<li>
<p>20 Domains access</p>
</li>
<li>
<p>24/7 Customer support</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
{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">
<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>
@@ -241,193 +197,101 @@ const Main = ({gredient , video}) => {
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
<div className="row">
<div className="col-md-4">
<div className="pricing_block">
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
</div>
<div className="pkg_name">
<h3>Standard</h3>
<span>For the basics</span>
</div>
<span className="price">$15</span>
<ul className="benifits">
<li>
<p>Up to 5 Website</p>
</li>
<li>
<p>50 GB disk space</p>
</li>
<li>
<p>10 Customize sub pages</p>
</li>
<li>
<p>2 Domains access</p>
</li>
<li>
<p>Support on request</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
<div className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
{ video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
</div>
<div className="pkg_name">
<h3>Unlimited</h3>
<span>For the professionals</span>
</div>
<span className="price">$99</span>
<ul className="benifits">
<li>
<p>Unlimited Website</p>
</li>
<li>
<p>200 GB disk space</p>
</li>
<li>
<p>20 Customize sub pages</p>
</li>
<li>
<p>10 Domains access</p>
</li>
<li>
<p>24/7 Customer support</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
<div className="col-md-4">
<div className="pricing_block">
<div className="icon">
{video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
</div>
<div className="pkg_name">
<h3>Premium</h3>
<span>For small team</span>
</div>
<span className="price">$55</span>
<ul className="benifits">
<li>
<p>Up to 10 Website</p>
</li>
<li>
<p>100 GB disk space</p>
</li>
<li>
<p>15 Customize sub pages</p>
</li>
<li>
<p>4 Domains access</p>
</li>
<li>
<p>24/7 Customer support</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
{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>
</div>
<div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
<div className="row">
<div className="col-md-4">
<div className="pricing_block">
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
</div>
<div className="pkg_name">
<h3>Standard</h3>
<span>For the basics</span>
</div>
<span className="price">$150</span>
<ul className="benifits">
<li>
<p>Up to 10 Website</p>
</li>
<li>
<p>100 GB disk space</p>
</li>
<li>
<p>25 Customize sub pages</p>
</li>
<li>
<p>4 Domains access</p>
</li>
<li>
<p>Support on request</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
<div className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
{ video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
</div>
<div className="pkg_name">
<h3>Unlimited</h3>
<span>For the professionals</span>
</div>
<span className="price">$999</span>
<ul className="benifits">
<li>
<p>Unlimited Website</p>
</li>
<li>
<p>400 GB disk space</p>
</li>
<li>
<p>40 Customize sub pages</p>
</li>
<li>
<p>20 Domains access</p>
</li>
<li>
<p>24/7 Customer support</p>
</li>
</ul>
<Link to="/faq" className="btn white_btn">BUY NOW</Link>
</div>
</div>
{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/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 -2
View File
@@ -20,8 +20,7 @@ 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>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
standard dummy.</p>
<p>myFit has powerful connectivity, fitness, health, and safety features,<br/> Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring.</p>
</div>
<div className="step_block">
<ul>
+55 -13
View File
@@ -5,9 +5,23 @@ 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({a : true})
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));
}, []);
return (
<>
{brdcum.b1 &&
@@ -54,7 +68,8 @@ 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">
@@ -69,8 +84,9 @@ 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"
@@ -85,9 +101,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"
@@ -103,9 +119,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"
@@ -122,9 +138,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"
@@ -141,9 +157,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"
@@ -160,9 +176,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"
@@ -179,7 +195,33 @@ 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>
+15 -2
View File
@@ -5,15 +5,28 @@ 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);
}
faqData() {}
// Contact Data{POST}
contactData() {
return this.postAuxEnd("/contact", null)
}
faqData() {
return this.getAuxEnd("/faq", null);
}
priceData() {
return this.getAuxEnd("/pricing", null);
}
//---------------------------------------- -----
//---------------------------------------- -----
@@ -45,7 +58,7 @@ class SiteService {
postAuxEnd(uri, reqData) {
const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
Axios.post(endPoint)
return Axios.post(endPoint, reqData)
.then((response) => {
console.log(response);
// res = response;