api calls for faq and contact
This commit is contained in:
Ebube
+27
-139
@@ -1,36 +1,12 @@
|
||||
import React, {Component} from 'react';
|
||||
import SiteService from './assests/utils/SiteService';
|
||||
import React, {Component, useState} from 'react';
|
||||
|
||||
class Faqs extends Component {
|
||||
constructor({data, loading, error}){
|
||||
super({data, loading, error})
|
||||
this.state = {
|
||||
data: null,
|
||||
loading: true,
|
||||
error: null
|
||||
}
|
||||
constructor(props){
|
||||
super(props)
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const apiCall = new SiteService
|
||||
try {
|
||||
const data = await apiCall.faqData();
|
||||
|
||||
this.setState = {
|
||||
data: data,
|
||||
loading: false
|
||||
}
|
||||
} catch (error) {
|
||||
this.setState = {
|
||||
error: error,
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const {data, loading, error} = this.state
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
const data = this.props.faqData
|
||||
return(
|
||||
<div>
|
||||
{/* PRELOADER SPINNER */}
|
||||
@@ -64,128 +40,40 @@ class Faqs extends 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 */}
|
||||
|
||||
Reference in New Issue
Block a user