Merge branch 'api-configurations-for-faq-and-contact' into api-config-for-faqs-amd-contact

.env

@@ -10,3 +10,4 @@ REACT_APP_GOOGLE_PLAY_LINK='https://apps.apple.com/us/app/float-mobility/id14653
 
 REACT_APP_AUX_ENDPOINT='https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/'
 
+REACT_APP_IMAGE_LINK='https://blog.float.sg/wp-content/uploads/'

public/assets/css/style.css

@@ -4714,8 +4714,8 @@ h5.posts-category {
 .featured-badge {
   z-index: 70;
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 10px;
+  right: 10px;
   width: 45px;
   height: 45px;
   -webkit-border-radius: 100%;

src/App.js

@@ -20,36 +20,45 @@ 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 {
 			const res = await siteApi.blogData();
 			if(res.status == 200 /* && res.data.status > 0*/){
-				console.log(res.data.payload, res.data);
+				console.log(res.data);
 				setBlogData(res.data)
 				return
 			}
 		}catch(error) {
-			setBlogData({payload: {blogdata: []}})
+			setBlogData({blogdata: []})
 		}
 	};
 
+	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/>} />

src/components/BlogItems.js

@@ -27,23 +27,27 @@ const BlogItems = ({blogData}) => {
   return (
     <div className="row">
         {
-            blogData?.payload == undefined ? // API CALL IN PROGRESS
-            <div className='col-12 text-center display-4'>Loading...</div>
+            blogData?.blogdata == undefined ? // API CALL IN PROGRESS
+            // <div className='col-12 text-center display-4'>Loading...</div>
+            <div className="col-12 text-center">
+                <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+                </div>
+            </div>
             :
             // API CALL FINISHED
             (
-                blogData?.payload?.blogdata.length < 1 ?
+                blogData?.blogdata.length < 1 ?
                 <div className='col-12 text-center display-4'>No Blog Currently Found!</div>
                 :
-                blogData?.payload?.blogdata.map((blog, index) => {
+                blogData?.blogdata.map((blog, index) => {
                     if(location == '/blogs'){
                         return(
                             <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
                                 <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
                                 {/* BLOG POST IMAGE */}
                                 <div className="blog-post-img rounded">
-                                    <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
-                                    {/* <img className="img-fluid" src={blog.meta_value} alt="blog-post-image" /> */}
+                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
+                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
                                 </div>
                                 {/* BLOG POST TEXT */}
                                 <div className="blog-post-txt">
@@ -73,7 +77,8 @@ const BlogItems = ({blogData}) => {
                                 <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
                                 {/* BLOG POST IMAGE */}
                                 <div className="blog-post-img rounded">
-                                    <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
+                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
+                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
                                 </div>
                                 {/* BLOG POST TEXT */}
                                 <div className="blog-post-txt">

src/pages/Blog_listing.js

@@ -12,8 +12,8 @@ class Blog_listing extends React.Component {
     console.log("OLU-AMEY BLOG LISTING ",props.blogData);
   }
 
-
-    render() {
+  
+  render() {
      // const [blogData, setBlogData] = useState([]) // for holding
       //const siteApi = new SiteService(); // instantiating the API SERVICE
 
@@ -53,35 +53,45 @@ class Blog_listing extends React.Component {
                 </div>
               </div>
               {/* FEATURED POST */}
-              <div className="rel blog-post featured-post wide-post">
-                <div className="row d-flex align-items-center">
-                  <div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
-                    <span className="flaticon-star" />
-                  </div>
-                  {/* BLOG POST IMAGE */}
-                  <div className="col-lg-7 blog-post-img">
-                    <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />	
-                  </div>
-                  {/* BLOG POST TEXT */}
-                  <div className="col-lg-5 blog-post-txt">
-                    {/* Post Tag */}
-                    <p className="p-md post-tag">NordEx News</p>	
-                    {/* Post Link */}
-                    <h5 className="h5-xl">
-                      <a href="single-post.html">Tempor sapien donec gravida a suscipit and porta justo vitae</a>
-                    </h5>
-                    {/* Text */}
-                    <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 
-                      undo velna dolor in cubilia laoreet
-                    </p>
-                    {/* Post Meta */}
-                    <div className="post-meta">
-                      <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
-                      <p>12 min read</p>
-                    </div>	
-                  </div>	{/* END BLOG POST TEXT */}
-                </div>   {/* End row */}
-              </div>	{/* END FEATURED POST */}
+              {
+                this.props.blogData?.featured == undefined ?  // API CALL IN PROGRESS
+                <div className="text-center">
+                    <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+                    </div>
+                </div>
+                :
+                <div className="rel blog-post featured-post wide-post">
+                  <div className="row d-flex align-items-center">
+                    <div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
+                      <span className="flaticon-star" />
+                    </div>
+                    {/* BLOG POST IMAGE */}
+                    <div className="col-lg-7 blog-post-img">
+                      <img className="w-auto h-100" src={process.env.REACT_APP_IMAGE_LINK + this.props.blogData?.featured.meta_value} alt="blog-post-image" />
+                    </div>
+                    {/* BLOG POST TEXT */}
+                    <div className="col-lg-5 blog-post-txt">
+                      {/* Post Tag */}
+                      <p className="p-2 post-tag">Float News</p>	
+                      {/* Post Link */}
+                      <h5 className="h5-xl">
+                        <a href="single-post.html">{this.props.blogData?.featured.post_title}</a>
+                      </h5>
+                      {/* Text */}
+                      {/* <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 
+                        undo velna dolor in cubilia laoreet
+                      </p> */}
+                      <div className="p-2" dangerouslySetInnerHTML={{__html: this.props.blogData?.featured.post_content.substring(0,300)+'  . . .'}}></div>
+                      {/* Post Meta */}
+                      <div className="post-meta">
+                        <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                        <p>12 min read</p>
+                      </div>	
+                    </div>	{/* END BLOG POST TEXT */}
+                  </div>   {/* End row */}
+                </div>	
+              } {/* END FEATURED POST */}
+
               {/* POSTS WRAPPER */}
               <div className="posts-wrapper">
                 {/* BLOG POSTS CATEGORY */} 

src/pages/Contacts.js

@@ -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">

src/pages/Faqs.js

@@ -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>
         )
     }
 }

src/pages/FloatHome.js

@@ -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">
-                            I’ve 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">

src/pages/assests/data/about.js

@@ -50,13 +50,13 @@ export const Testimonial = [
     }
    },
    {
-    name: 'Chelse Smith',
+    name: 'Toks Law',
     title: 'Project Management',
     desc: 'Chelsea has just moved into a new house in central Auckland, NZ so she can be closer to EVERYTHING; restaurants, bars and public transport. She loves exploring the many transit options that come with the new territory.',
     image: 'assets/images/team-8.jpg',
     link: {
         href: '#',
-        domain: 'matthewanderson'
+        domain: 'tokslaw'
     }
    }
 ]

src/svs/SiteService.js

@@ -8,7 +8,7 @@ class SiteService {
     }
     // Blog Data {Get}
     blogData() {
-        return this.getAuxEnd("/blogdata/10", null);
+        return this.getAuxEnd("/blogdata", null);
     }
 
     // Country Data {GET}