Compare commits

...

5 Commits

4 changed files with 179 additions and 257 deletions
+19 -10
View File
@@ -20,20 +20,13 @@ import GetStarted from './pages/GetStarted';
import FindEv from "./pages/FindEv";
import FindMobility from "./pages/FindMobility";
// import {
// BrowserRouter as Router,
// Routes,
// Route
// } from "react-router-dom";
import { Routes, Route } from "react-router-dom";
import { useState, useEffect } from "react";
import SiteService from "./svs/SiteService";
function App() {
const [blogData, setBlogData] = useState([]) // for holding
const [faqData, setFaqData] = useState([]) // for holding
const siteApi = new SiteService(); // instantiating the API SERVICE
const getBlogData = async () => {
try {
@@ -48,8 +41,24 @@ function App() {
}
};
const getFaqData = async () => {
try {
const res = await siteApi.faqData();
if(res.status == 200 /* && res.data.status > 0*/){
let data = await res.data
console.log(data);
setFaqData(data)
return
}
} catch (error) {
console.log(error)
}
}
useEffect(() => {
getBlogData();
getFaqData();
}, []);
return (
@@ -57,9 +66,9 @@ function App() {
<Header/>
<Routes>
<Route path="/" element={<FloatHome blogData={blogData} />} />
<Route path="/" element={<FloatHome blogData={blogData} faqData={faqData} />} />
<Route path="/about" element={<About/>} />
<Route path="/faqs" element={<Faqs/>} />
<Route path="/faqs" element={<Faqs faqData={faqData}/>} />
<Route path="/features" element={<Features/>} />
<Route path="/pricing" element={<Pricing/>} />
<Route path="/reviews" element={<Reviews/>} />
+89 -18
View File
@@ -1,25 +1,94 @@
import React, {Component} from 'react';
import React, {Component, useState, useEffect} from 'react';
import SiteService from '../svs/SiteService';
class Contacts extends React.Component {
class Contacts extends Component {
constructor(props){
super(props)
this.state = {
formData: {
name: '',
email: '',
country: '',
phone: '',
message: ''
},
loading: false,
submitError: null,
submitSuccess: false,
};
}
handleInputChange = (event) => {
const { name, value } = event.target;
this.setState((prevState) => ({
formData: {
...prevState.formData,
[name]: value,
},
}));
};
handleSubmit = async(e) => {
e.preventDefault();
const apiCall = new SiteService();
const { formData } = this.state;
this.setState({ loading: true });
if(!formData.name && !formData.email && !formData.message) return;
console.log(formData)
try {
await apiCall.contactData(formData)
console.log('Success')
this.setState({
formData: {
name: '',
email: '',
country: '',
phone: '',
message: ''
},
loading: false,
submitError: null,
submitSuccess: false,
});
// if(res.status == 200){
// } else {
// throw new Error('Error submitting form');
// }
} catch (error) {
this.setState({
loading: false,
submitSuccess: false,
submitError: error,
});
console.log(error)
}
}
render() {
const {formData, loading, submitError, submitSuccess} = this.state
console.log(submitSuccess)
return(
<div>
{/* PRELOADER SPINNER
============================================= */}
{/* PRELOADER SPINNER */}
<div id="loader-wrapper">
<div id="loading">
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
</div>
</div>
{/* PAGE CONTENT
============================================= */}
{/* PAGE CONTENT */}
<div id="page" className="page">
{/* HEADER
============================================= */}
{/* CONTACTS-2
============================================= */}
{/* HEADER */}
{/* CONTACTS-2 */}
<section id="contacts-2" className="bg_whitesmoke hero-offset-nav pb-50 contacts-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -39,7 +108,7 @@ class Contacts extends React.Component {
<div className="row">
<div className="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
<div className="form-holder">
<form name="contactform" className="row contact-form">
<form name="contactform" className="row contact-form" onSubmit={this.handleSubmit}>
{/* Form Select */}
<div id="input-subject" className="col-md-12 input-subject">
<p className="p-lg">This question is about: </p>
@@ -57,21 +126,23 @@ class Contacts extends React.Component {
<div id="input-name" className="col-md-12">
<p className="p-lg">Your Name: </p>
<span>Please enter your real name: </span>
<input type="text" name="name" className="form-control name" placeholder="Your Name*" />
<input type="text" name="name" className="form-control name" placeholder="Your Name*" value={formData.name} onChange={this.handleInputChange} />
</div>
<div id="input-email" className="col-md-12">
<p className="p-lg">Your Email Address: </p>
<span>Please carefully check your email address for accuracy</span>
<input type="text" name="email" className="form-control email" placeholder="Email Address*" />
<input type="text" name="email" className="form-control email" placeholder="Email Address*" value={formData.email} onChange={this.handleInputChange} />
</div>
<div id="input-message" className="col-md-12 input-message">
<p className="p-lg">Explain your question in details: </p>
<span>Your OS version, NordEx version &amp; build, steps you did. Be VERY precise!</span>
<textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." defaultValue={""} />
<span>Your OS version, steps you did. Be VERY precise!</span>
<textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." value={formData.message} onChange={this.handleInputChange} />
</div>
{/* Contact Form Button */}
<div className="col-md-12 mt-15 form-btn text-right">
<button type="submit" className="btn btn-skyblue tra-skyblue-hover submit">Submit Request</button>
<button type="submit" className="btn btn-skyblue tra-skyblue-hover submit" disabled={loading}>
{loading ? 'Submitting...' : 'Submit Request'}
</button>
</div>
{/* Contact Form Message */}
<div className="col-lg-12 contact-form-msg">
+36 -131
View File
@@ -1,26 +1,24 @@
import React, {Component} from 'react';
import React, {Component, useState} from 'react';
class Faqs extends Component {
constructor(props){
super(props)
}
class Faqs extends React.Component {
render() {
const data = this.props.faqData
return(
<div>
{/* PRELOADER SPINNER
============================================= */}
{/* PRELOADER SPINNER */}
<div id="loader-wrapper">
<div id="loading">
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
</div>
</div>
{/* PAGE CONTENT
============================================= */}
{/* PAGE CONTENT */}
<div id="page" className="page">
{/* HEADER
============================================= */}
{/* FAQs-2
============================================= */}
{/* HEADER */}
{/* FAQs-2 */}
<section id="faqs-2" className="bg_whitesmoke hero-offset-nav pb-100 faqs-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -42,128 +40,40 @@ class Faqs extends React.Component {
{/* QUESTIONS HOLDER */}
<div className="col-lg-6">
<div className="questions-holder pc-10">
{/* QUESTION #1 */}
<div className="question wow fadeInUp" data-wow-delay="0.4s">
{data.map((item, idx) => {
let delay = 0.2
if(idx % 2 === 0){
delay *= Math.floor(idx / 2); // multiply delay by 2 for every odd idx
return (
<div className="question wow fadeInUp" data-wow-delay={delay} key={idx}>
{/* Question */}
<h5 className="h5-sm">How do I get started?</h5>
<h5 className="h5-sm">{item.title}</h5>
{/* Answer */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet
augue luctus
</p>
</li>
</ul>
<p className="p-lg">{item.text}</p>
</div>
{/* QUESTION #2 */}
<div className="question wow fadeInUp" data-wow-delay="0.6s">
{/* Question */}
<h5 className="h5-sm">Can I see Float in action before purchasing it?</h5>
{/* Answer */}
<p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit
ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
</p>
</div>
{/* QUESTION #3 */}
<div className="question wow fadeInUp" data-wow-delay="0.8s">
{/* Question */}
<h5 className="h5-sm">What are the requirements for using Float?</h5>
{/* Answer */}
<p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna
vitae auctor integer congue undo magna at pretium purus pretium ligula
</p>
</div>
{/* QUESTION #4 */}
<div className="question wow fadeInUp" data-wow-delay="1s">
{/* Question */}
<h5 className="h5-sm">Can I use Float on different devices?</h5>
{/* Answer */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus ligula euismod pretium purus
pretium rutrum tempor sapien
</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus
</p>
</li>
</ul>
</div>
{/* QUESTION #5 */}
<div className="question wow fadeInUp" data-wow-delay="1.2s">
{/* Question */}
<h5 className="h5-sm">Do you have a free trial?</h5>
{/* Answer */}
<p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and
quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
</p>
</div>
)
}
})}
</div>
</div> {/* END QUESTIONS HOLDER */}
{/* QUESTIONS HOLDER */}
<div className="col-lg-6">
<div className="questions-holder pc-10">
{/* QUESTION #6 */}
<div className="question wow fadeInUp" data-wow-delay="0.4s">
{data.map((item, idx) => {
let delay = 0.2
if(idx % 2 === 1){
delay *= Math.floor(idx / 2); // multiply delay by 2 for every even idx
return (
<div className="question wow fadeInUp" data-wow-delay={delay} key={idx}>
{/* Question */}
<h5 className="h5-sm">Troubles with verification</h5>
<h5 className="h5-sm">{item.title}</h5>
{/* Answer */}
<p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and
quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
</p>
</div>
{/* QUESTION #7 */}
<div className="question wow fadeInUp" data-wow-delay="0.6s">
{/* Question */}
<h5 className="h5-sm">How does Float handle my privacy?</h5>
{/* Answer */}
<p className="p-lg">Etiam amet mauris suscipit sit amet in odio. Integer congue leo metus. Vitae arcu mollis
blandit ultrice ligula
</p>
{/* Answer */}
<p className="p-lg">An enim nullam tempor sapien gravida donec congue leo metus. Vitae arcu mollis blandit
integer at velna
</p>
</div>
{/* QUESTION #8 */}
<div className="question wow fadeInUp" data-wow-delay="0.8s">
{/* Question */}
<h5 className="h5-sm">I have an issue with my account</h5>
{/* Answer */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet
augue luctus
</p>
</li>
</ul>
</div>
{/* QUESTION #9 */}
<div className="question wow fadeInUp" data-wow-delay="1s">
{/* Question */}
<h5 className="h5-sm">What is the Float Membership?</h5>
{/* Answer */}
<p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit
ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
</p>
<p className="p-lg">{item.text}</p>
</div>
{/* QUESTION #10 */}
<div className="question wow fadeInUp" data-wow-delay="1.2s">
{/* Question */}
<h5 className="h5-sm">How do I cancel my Membership?</h5>
{/* Answer */}
<p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna
vitae auctor integer congue undo magna at pretium purus pretium ligula
</p>
</div>
)
}
})}
</div>
</div> {/* END QUESTIONS HOLDER */}
</div> {/* End row */}
@@ -182,8 +92,7 @@ class Faqs extends React.Component {
{/* GEOMETRIC OVERLAY */}
<div className="bg_fixed geometric_overlay" />
</section> {/* END FAQs-2 */}
{/* DOWNLOAD-2
============================================= */}
{/* DOWNLOAD-2 */}
<section id="download-2" className="bg_whitesmoke pb-20 download-section division">
<div className="container white-color">
<div className="rel purple_gradient bg_shape_01 downloads-2-wrapper">
@@ -219,12 +128,8 @@ class Faqs extends React.Component {
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END DOWNLOAD-2 */}
</div> {/* END PAGE CONTENT */}
</div>
</div>
)
}
}
+35 -98
View File
@@ -27,6 +27,8 @@ class FloatHome extends React.Component {
}
render() {
const faqData = this.props.faqData
console.log(faqData)
return(
<div>
{/* PRELOADER SPINNER ============================================= */}
@@ -882,114 +884,49 @@ class FloatHome extends React.Component {
{/* QUESTIONS ACCORDION */}
<div className="col-lg-8">
<div id="accordion" role="tablist" className="pc-20">
{/* QUESTION #1 */}
<div className="card grey-color">
{faqData.map((item, idx) => {
if(idx == 0){
return(
<div className="card grey-color" key={idx}>
{/* Question */}
<div className="card-header" role="tab" id="headingOne">
<h5 className="h5-sm">
<a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
{item.title}
</a>
</h5>
</div>
{/* Answer */}
<div id="collapseOne" className="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div className="card-body">
{/* Text */}
<p className="p-lg">{item.text}</p>
</div>
</div>
</div>
)
}else{
return(
<div className="card grey-color" key={idx}>
{/* Question */}
<div className="card-header" role="tab" id="headingOne">
<div className="card-header" role="tab" id={`heading${idx}`}>
<h5 className="h5-sm">
<a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
Can I see Float in action before purchasing it?
<a className="collapsed" data-toggle="collapse" href={`#collapse${idx}`} role="button" aria-expanded="false" aria-controls={`collapse${idx}`}>
{item.title}
</a>
</h5>
</div>
{/* Answer */}
<div id="collapseOne" className="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div id={`collapse${idx}`} className="collapse" role="tabpanel" aria-labelledby={`heading${idx}`} data-parent="#accordion">
<div className="card-body">
{/* Text */}
<p className="p-lg">Maecenas gravida porttitor quis vehicula magna luctus tempor. Quisque vel laoreet
turpis. Viverra urna augue, a augue dictum tempor. Sed pulvinar nibh consectetur varius viverra.
Laoreet augue ac massa lorem nulla
</p>
<p className="p-lg">{item.text}</p>
</div>
</div>
</div> {/* END QUESTION #1 */}
{/* QUESTION #2 */}
<div className="card grey-color">
{/* Question */}
<div className="card-header" role="tab" id="headingTwo">
<h5 className="h5-sm">
<a className="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
Ive got iPhone 5. Is Float compatible with it?
</a>
</h5>
</div>
{/* Answer */}
<div id="collapseTwo" className="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div className="card-body">
{/* Text */}
<p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum
vitae purus an efficitur ipsum primis in cubilia laoreet augue egestas luctus donec curabitur
dapibus libero tempor
</p>
</div>
</div>
</div> {/* END QUESTION #2 */}
{/* QUESTION #3 */}
<div className="card grey-color">
{/* Question */}
<div className="card-header" role="tab" id="headingThree">
<h5 className="h5-sm">
<a className="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
What are the requirements for using Float?
</a>
</h5>
</div>
{/* Answer */}
<div id="collapseThree" className="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div className="card-body">
{/* Text */}
<p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas and magna
ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
</p>
{/* Text */}
<p className="p-lg">Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus laoreet
gestas neque vitae auctor eros dolor luctus placerat a magna cursus congue magna nihil mpedit
ligula sem congue tempor gravida
</p>
</div>
</div>
</div> {/* END QUESTION #3 */}
{/* QUESTION #4 */}
<div className="card grey-color">
{/* Question */}
<div className="card-header" role="tab" id="headingFour">
<h5 className="h5-sm">
<a className="collapsed" data-toggle="collapse" href="#collapseFour" role="button" aria-expanded="false" aria-controls="collapseFour">
How does Float handle my privacy?
</a>
</h5>
</div>
{/* Answer */}
<div id="collapseFour" className="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordion">
<div className="card-body">
{/* Text */}
<p className="p-lg">An augue cubilia laoreet and magna suscipit egestas magna ipsum purus ipsum primis
and augue ultrice ligula egestas suscipit lectus gestas integer congue a lectus porta tristique phasellus neque blandit and tristique
</p>
</div>
</div>
</div> {/* END QUESTION #4 */}
{/* QUESTION #5 */}
<div className="card last-card grey-color">
{/* Question */}
<div className="card-header" role="tab" id="headingFive">
<h5 className="h5-sm">
<a className="collapsed" data-toggle="collapse" href="#collapseFive" role="button" aria-expanded="false" aria-controls="collapseFive">
How can I cancel my account?
</a>
</h5>
</div>
{/* Answer */}
<div id="collapseFive" className="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordion">
<div className="card-body">
{/* Text */}
<p className="p-lg">Curabitur ac dapibus libero. Quisque eu congue tristique neque. Phasellus blandit
tristique justo undo aliquam. Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non
molestie sed purus, venenatis sem tempor
</p>
</div>
</div>
</div> {/* END QUESTION #5 */}
</div>
)
}
})}
</div> {/* END ACCORDION */}
{/* MORE QUESTIONS BUTTON */}
<div className="more-questions pc-20 mt-35">