Merge branch 'api-config-and-links' of FloatSystems/float-www into master

Merge branch 'footer-social-links' of into api-config-and-links
Merge branch 'api-configurations-for-faq-and-contact' into api-config-and-links
2023-04-12 14:47:32 +00:00 · 2023-04-11 17:15:25 +01:00 · 2023-04-11 17:10:47 +01:00 · 2023-04-11 09:00:22 -04:00 · 2023-04-11 09:00:01 -04:00 · 2023-04-11 12:40:22 +00:00
137 changed files with 694 additions and 1077 deletions
@@ -7,3 +7,7 @@ REACT_APP_APIGATE='http://float-gat.dev.chiefsoft.net'

 REACT_APP_APPLE_LINK='https://apps.apple.com/us/app/float-mobility/id1465369130'
 REACT_APP_GOOGLE_PLAY_LINK='https://apps.apple.com/us/app/float-mobility/id1465369130'
+
+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/'
@@ -1,6 +1,6 @@
 {
  "name": "wwww-float",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
@@ -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%;
@@ -5,7 +5,6 @@
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-
 	<meta name="author" content="Float Mobility">
    <meta name="description" content="Travel smarter with Float's ride sharing, hailing and budgeting app. Avaliable on IOS and Android." />
    <meta name="title" content="Ride Sharing, Hailing & Budgeting App by Float" />
@@ -54,8 +53,8 @@
 		<!-- RESPONSIVE CSS -->
 		<link href="/assets/css/responsive.css" rel="stylesheet">

-    
-    <title>Float</title>
+
+	  <title> Ride Sharing, Hailing & Budgeting App by Float</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -79,5 +78,24 @@
 		<script src="/assets/js/wow.js"></script>
 		<!-- Custom Script -->		
 		<script src="/assets/js/custom.js"></script>
+	<script>
+		function initFreshChat() {
+			window.fcWidget.init({
+				token: "e14dfaf8-473b-4882-a83f-e88f192f763d",
+				host: "https://wchat.freshchat.com"
+			});
+		}
+		function initialize(i,t){
+			var e;
+			i.getElementById(t) ? initFreshChat() :
+					((e=i.createElement("script")).id=t,
+							e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",
+							e.onload=initFreshChat,i.head.appendChild(e))
+		}
+		function initiateCall() {
+			initialize(document,"freshchat-js-sdk")
+		}
+		window.addEventListener ? window.addEventListener("load",initiateCall,!1): window.attachEvent("load",initiateCall,!1);
+	</script>
  </body>
 </html>
@@ -20,26 +20,55 @@ 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);
+				setBlogData(res.data)
+				return
+			}
+		}catch(error) {
+			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 (
    <div className="App">

 	 <Header/>
   	    <Routes>
-			<Route path="/" element={<FloatHome/>} />
+			<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/>} />
@@ -48,12 +77,12 @@ function App() {
 			<Route path="/demo" element={<Demo/>} />
 			<Route path="/about" element={<About/>} />
 			<Route path="/blog_listing" element={<Blog_listing/>} />
-			<Route path="/blogs" element={<Blog_listing/>} />
+			<Route path="/blogs" element={<Blog_listing blogData={blogData} />} />
 			<Route path="/contacts" element={<Contacts/>} />
-			<Route path="/users" element={<Users/>} />
+			<Route path="/users" element={<Users blogData={blogData} />} />
 			<Route path="/business" element={<Fleet/>} />
 			<Route path="/privacy" element={<Privacy/>} />
-			<Route path="/getstarted" element={<GetStarted />} />
+			<Route path="/getstarted" element={<GetStarted blogData={blogData} />} />
 			<Route path="/findev" element={<FindEv />} />
 			<Route path="/findmobility" element={<FindMobility />} />
 		</Routes>
@@ -0,0 +1,114 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+// import SiteService from '../svs/SiteService';
+
+const BlogItems = ({blogData}) => {
+
+    let location = useLocation().pathname
+    // const [blogData, setBlogData] = useState({}) // for holding blogs
+    // console.log(blogData.payload)
+	// const blogApi = new SiteService(); // instantiating the API SERVICE
+	// const getBlogData = async () => {
+	// 	try {
+	// 		const res = await blogApi.blogData();
+	// 		if(res.status == 200 /* && res.data.status > 0*/){
+	// 			console.log('blogitem',res.data.payload, res.data);
+	// 			setBlogData(res.data)
+	// 			return
+	// 		}
+	// 	}catch(error) {
+	// 	}
+	// };
+
+	// useEffect(() => {
+	// 	getBlogData();
+	// }, []);
+
+  return (
+    <div className="row">
+        {
+            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?.blogdata.length < 1 ?
+                <div className='col-12 text-center display-4'>No Blog Currently Found!</div>
+                :
+                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 rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
+                                </div>
+                                {/* BLOG POST TEXT */}
+                                <div className="blog-post-txt">
+                                    {/* Post Tag */}
+                                    <p className="p-md post-tag">Float News</p>
+                                    {/* Post Link */}
+                                    <h5 className="h5-sm">
+                                    <a href="single-post.html">{blog.post_title.substring(0,40)+'  . . .'}</a>
+                                    </h5>
+                                    {/* Text */}
+                                    <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
+                                    {/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                                    congue
+                                    </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>
+                                </div>
+                            </div>
+                        )
+                    }else if (location != 'blogs' && index <= 5) {
+                        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 rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
+                                </div>
+                                {/* BLOG POST TEXT */}
+                                <div className="blog-post-txt">
+                                    {/* Post Tag */}
+                                    <p className="p-md post-tag">Float News</p>
+                                    {/* Post Link */}
+                                    <h5 className="h5-sm">
+                                    <a href="single-post.html">{blog.post_title.substring(0,40)+'  . . .'}</a>
+                                    </h5>
+                                    {/* Text */}
+                                    <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
+                                    {/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                                    congue
+                                    </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>
+                                </div>
+                            </div>
+                        )
+                    }
+                })
+            )
+
+        }
+    </div>
+  )
+}
+
+export default BlogItems
@@ -12,21 +12,22 @@ class Footer extends React.Component {
 							<div className="row">
 								<div className="col-sm-6 col-md-4 col-lg-3">
 									<div className="footer-links mb-40">
-										<ul className="foo-links clearfix">									
-
-											<li><p className="p-md"><Link to="/#">Users</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Fleet Mangers</Link></p></li>
+										<ul className="foo-links clearfix">
+											<li><p className="p-md"><Link to="#">Stop the Surge</Link></p></li>
+											<li><p className="p-md"><Link to="/blogs">Travel Guide</Link></p></li>
 											<li><p className="p-md"><Link to="/findev">Find Ev Charge</Link></p></li>
 											<li><p className="p-md"><Link to="/findmobility">Find Options</Link></p></li>
+
+
 										</ul>
 									</div>
 								</div>
 								<div className="col-sm-6 col-md-4 col-lg-3">
 									<div className="footer-links mb-40">
-										<ul className="foo-links clearfix">													
-											<li><p className="p-md"><Link to="/blogs">Our Blog</Link></p></li>	
+										<ul className="foo-links clearfix">
+											<li><p className="p-md"><Link to="/#">Users</Link></p></li>
+											<li><p className="p-md"><Link to="/#">Fleet Mangers</Link></p></li>
 											<li><p className="p-md"><Link to="/contacts">Customer Stories</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>	
 											<li><p className="p-md"><Link to="/#">Resources</Link></p></li>
 										</ul>
 									</div>
@@ -35,7 +36,8 @@ class Footer extends React.Component {
 									<div className="footer-links mb-40">
 										<ul className="foo-links clearfix">
 											<li><p className="p-md"><Link to="/about">About Us</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Press & Media</Link></p></li>	
+											<li><p className="p-md"><Link to="/blogs">Our Blog</Link></p></li>
+											<li><p className="p-md"><Link to="/#">Press Kit (Download)</Link></p></li>
 											<li><p className="p-md"><Link to="/privacy">Privacy Policy</Link></p></li>
 											<li><p className="p-md"><Link to="/terms">Terms & Privacy</Link></p></li>					
 										</ul>
@@ -43,10 +45,10 @@ class Footer extends React.Component {
 								</div>
 								<div className="col-sm-6 col-md-8 col-lg-3">
 									<div className="footer-store-badges text-right mb-40">
-										<Link to="/#" className="store">
+										<Link to={process.env.REACT_APP_APPLE_LINK} className="store">
 											<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
 										</Link>
-										<Link to="/#" className="store">
+										<Link to={process.env.REACT_APP_GOOGLE_PLAY_LINK} className="store">
 											<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
 										</Link> 
 									</div>
@@ -1,18 +1,18 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

 import { BrowserRouter } from "react-router-dom";

-ReactDOM.render(
- // basename='/usr/src/app/build'
+const rootElement = document.getElementById('root');
+const root = ReactDOM.createRoot(rootElement);
+
+root.render(
  <BrowserRouter>
    <App />
-  </BrowserRouter>,
-
-  document.getElementById('root')
+  </BrowserRouter>
 );

 // If you want to start measuring performance in your app, pass a function
@@ -5,21 +5,16 @@ class About extends React.Component {
    render() {
        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">
          
-          {/* PAGE HERO
-			============================================= */}	
+          {/* PAGE HERO */}	
          <div id="about-page" className="rel purple_gradient bg_shape_01 page-hero-section division">
            <div className="container">	
              <div className="row">	
@@ -34,8 +29,7 @@ class About extends React.Component {
              </div>	  {/* End row */}
            </div>	   {/* End container */} 
          </div>	{/* END PAGE HERO */}	
-          {/* ABOUT-2
-			============================================= */}
+          {/* ABOUT-2 */}
          <div id="about-2" className="wide-90 about-section division">
            <div className="container">
              {/* TEXT BLOCK */}	
@@ -111,111 +105,8 @@ class About extends React.Component {
                </div>
              </div>	{/* END BUTTON */}
            </div>	   {/* End container */}	
-          </div>	{/* END ABOUT-2 */}
-          {/* TESTIMONIALS-1
-			============================================= */}
-          <section id="reviews-1" className="rel bg_whitesmoke wide-100 reviews-section division">
-            <div className="container">
-              {/* SECTION TITLE */}	
-              <div className="row">	
-                <div className="col-lg-10 offset-lg-1">
-                  <div className="section-title text-center mb-60">	
-                  <p>{testimonials.tag}</p>	
-                    {/* Title */}	
-                    <h2 className="h2-md">{testimonials.title}</h2>	
-                    {/* Text */}	
-                    {/* <p className="p-xl">Our Team is as vibrating and diversified as your urban life. */}
-                    {/* </p> */}
-                  </div>	
-                </div>
-              </div>
-              {/* TESTIMONIALS CONTENT */}
-              <div className="row">
-                <div className="col-md-12">					
-                  <div className="owl-carousel owl-theme reviews-1-wrapper">
-                    {Testimonial.map(({title, desc, name, image}, idx) => (
-                      <>
-                    {/* TESTIMONIAL #1 */}
-                    <div className="review-1 radius-08" key={idx}>
-                      {/* App Rating */}
-                      {/* <div className="app-rating ico-20 yellow-color">
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                      </div> */}
-                      <div style={{         
-                        width: '50px',
-                        marginInline: 'auto',
-                        padding: 3,
-                      }}>
-                      <img src={image} style={{
-                        borderRadius: '100%'
-                      }} />
-                      </div>
-                      {/* Title */}
-                      <h5 className="h5-sm">{title}</h5>
-                      {/* Testimonial Text */}
-                      <div className="review-1-txt">
-                        {/* Text */}
-                        <p className="p-lg grey-color">{desc}				   
-                        </p>
-                        {/* Testimonial Author */}
-                        <h5 className="h5-xs">{name}</h5>	
-                      </div>	
-                    </div>	{/* END TESTIMONIAL #1 */}
-                      </>
-                    ))}
-                  </div>
-                </div>									
-              </div>
-            </div>     {/* End container */}
-          </section>	{/* END TESTIMONIALS-1 */}
-          {/* CONTENT-2
-			============================================= */}
-          <section id="content-2" className="wide-50 content-section division">
-            <div className="container">
-              <div className="row d-flex align-items-center">
-                {/* IMAGE BLOCK */}
-                <div className="col-md-5 col-lg-6">
-                  <div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/about-annouce.jpg" alt="content-image" />
-                  </div>
-                </div>
-                {/* TEXT BLOCK */}	
-                <div className="col-md-7 col-lg-6">
-                  <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
-                    {/* Section ID */}	
-                    <span className="section-id grey-color">{valueInfo.id}</span>
-                    <div>
-                    {/* Title */}	
-                    <h3 className="h2-xs">{valueInfo.title1}</h3>
-                    {/* Text */}	
-                    <p className="p-lg">{valueInfo.text1}</p>
-                    </div>
-                    <div>
-                    {/* Title */}	
-                    <h3 className="h2-xs">{valueInfo.title2}</h3>
-                    {/* Text */}	
-                    <p className="p-lg">{valueInfo.text2}</p>
-                    </div>
-                    <div>
-                    {/* Title */}	
-                    <h3 className="h2-xs">{valueInfo.title3}</h3>
-                    {/* Text */}	
-                    <p className="p-lg">{valueInfo.text3}</p>
-                    </div>
-                  </div>
-                </div>	{/* END TEXT BLOCK */}	
-              </div>	   {/* End row */}
-            </div>	   {/* End container */}
-          </section>	{/* END CONTENT-2 */}
-          {/* SECTION DIVIDER
-			============================================= */}
-          <div className="divider-wrapper text-center"><div className="section-divider" /></div>
-          {/* TEAM-1
-			============================================= */}
+          </div>	{/* END ABOUT-2 */}     
+          {/* TEAM-1 */}
          <section id="team-1" className="wide-60 team-section division">
            <div className="container">
              {/* SECTION TITLE */}	
@@ -233,8 +124,6 @@ class About extends React.Component {
              <div className="team-members-holder pc-20 text-center">
                <div className="row justify-content-center">
                  {Testimonial.map(({name, title, image, link: {domain, href}}, idx) => (
-                    <>
-                    {/* TEAM MEMBER #1 */}
                    <div className="col-sm-6 col-lg-3" key={idx}>
                      <div className="team-member wow fadeInUp" data-wow-delay="0.4s">
                        {/* Team Member Photo */}
@@ -248,16 +137,13 @@ class About extends React.Component {
                          <span><a href={href} className="grey-color">@{domain}</a></span>
                        </div>	
                      </div>									
-                    </div>	
-                    {/* END TEAM MEMBER #1 */}
-                    </>
+                    </div>
                  ))}
                </div>   {/* End row */}
              </div>	{/* TEAM MEMBERS HOLDER */}	   
            </div>	    {/* End container */}
          </section>	{/* END TEAM-1 */}
-          {/* NEWSLETTER-1
-			============================================= */}
+          {/* NEWSLETTER-1 */}
          <section id="newsletter-1" className="pb-20 newsletter-section division">
            <div className="container">
              <div className="newsletter-wrapper bg-white">
@@ -287,8 +173,7 @@ class About extends React.Component {
                </div>	  {/* End row */}
              </div>    {/* End newsletter-holder */}
            </div>	   {/* End container */}	
-          </section>	{/* END NEWSLETTER-1 */}
-         
+          </section>	{/* END NEWSLETTER-1 */}       
        </div>	{/* END PAGE CONTENT */}
            </div>
        )
@@ -336,7 +221,7 @@ let aboutDesc = {

 // Testimonials Section
 let testimonials = {
-  tag: 'MADE FOR US',
+  tag: 'MADE FROM US',
  title:'Created from urbanists'
 }

@@ -1,7 +1,23 @@
-import React, {Component} from 'react';
+import React, {Component,useState, useEffect} from 'react';
+import BlogItems from '../components/BlogItems';
+import SiteService from "../svs/SiteService";

 class Blog_listing extends React.Component {
-    render() {
+
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+    // this.state = { counter: 0 };
+    // this.handleClick = this.handleClick.bind(this);
+    console.log("OLU-AMEY BLOG LISTING ",props.blogData);
+  }
+
+  
+  render() {
+     // const [blogData, setBlogData] = useState([]) // for holding
+      //const siteApi = new SiteService(); // instantiating the API SERVICE
+
+
        return(
            <div>

@@ -37,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 */} 
@@ -74,172 +100,8 @@ class Blog_listing extends React.Component {
                    <h5 className="h5-lg posts-category">Latest Articles</h5>
                  </div>
                </div>
-                <div className="row">
-                  {/* BLOG POST #1 */}
-                  <div 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">
-                        <img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
-                      </div>
-                      {/* BLOG POST TEXT */}
-                      <div className="blog-post-txt">
-                        {/* Post Tag */}
-                        <p className="p-md post-tag">NordEx News</p>	
-                        {/* Post Link */}
-                        <h5 className="h5-xs">
-                          <a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
-                        </h5>
-                        {/* Text */}
-                        <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida 
-                          porta undo velna dolor
-                        </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>
-                    </div>
-                  </div>	{/* END  BLOG POST #1 */}
-                  {/* BLOG POST #2 */}
-                  <div className="col-md-6 col-lg-4">
-                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">	
-                      {/* BLOG POST IMAGE */}
-                      <div className="blog-post-img">
-                        <img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
-                      </div>
-                      {/* BLOG POST TEXT */}
-                      <div className="blog-post-txt">
-                        {/* Post Tag */}
-                        <p className="p-md post-tag">Inspiration</p>	
-                        {/* Post Link */}
-                        <h5 className="h5-xs">
-                          <a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
-                        </h5>
-                        {/* Text */}
-                        <p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
-                          dolor vitae auctor
-                        </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>8 min read</p>
-                        </div>	
-                      </div>	{/* END BLOG POST TEXT */}
-                    </div>
-                  </div>	{/* END  BLOG POST #2 */}
-                  {/* BLOG POST #3 */}
-                  <div className="col-md-6 col-lg-4">
-                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">	
-                      {/* BLOG POST IMAGE */}
-                      <div className="blog-post-img">
-                        <img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />
-                      </div>
-                      {/* BLOG POST TEXT */}
-                      <div className="blog-post-txt">
-                        {/* Post Tag */}
-                        <p className="p-md post-tag">Tutorials</p>	
-                        {/* Post Link */}
-                        <h5 className="h5-xs">
-                          <a href="single-post.html">Tempor sapien donec gravida ipsum and porta justo</a>
-                        </h5>
-                        {/* Text */}
-                        <p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
-                          dolor vitae auctor
-                        </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>22 min read</p>
-                        </div>	
-                      </div>	{/* END BLOG POST TEXT */}
-                    </div>
-                  </div>	{/* END  BLOG POST #3 */}
-                  {/* BLOG POST #4 */}
-                  <div 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">
-                        <img className="img-fluid" src="assets/images/blog/post-5-img.jpg" alt="blog-post-image" />
-                      </div>
-                      {/* BLOG POST TEXT */}
-                      <div className="blog-post-txt">
-                        {/* Post Tag */}
-                        <p className="p-md post-tag">Extensions</p>	
-                        {/* Post Link */}
-                        <h5 className="h5-xs">
-                          <a href="single-post.html">Neque purus an ipsum neque and dolor libero risus mullam blandit at tempor sapien</a>
-                        </h5>
-                        {/* Text */}
-                        <p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
-                          dolor vitae auctor
-                        </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>1 day read</p>
-                        </div>	
-                      </div>
-                    </div>
-                  </div>	{/* END  BLOG POST #4 */}
-                  {/* BLOG POST #5 */}
-                  <div className="col-md-6 col-lg-4">
-                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">	
-                      {/* BLOG POST IMAGE */}
-                      <div className="blog-post-img">
-                        <img className="img-fluid" src="assets/images/blog/post-6-img.jpg" alt="blog-post-image" />
-                      </div>
-                      {/* BLOG POST TEXT */}
-                      <div className="blog-post-txt">
-                        {/* Post Tag */}
-                        <p className="p-md post-tag">Community</p>	
-                        {/* Post Link */}
-                        <h5 className="h5-xs">
-                          <a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
-                        </h5>
-                        {/* Text */}
-                        <p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
-                          dolor vitae auctor
-                        </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>54 min read</p>
-                        </div>	
-                      </div>	{/* END BLOG POST TEXT */}
-                    </div>
-                  </div>	{/* END  BLOG POST #5 */}
-                  {/* BLOG POST #6 */}
-                  <div className="col-md-6 col-lg-4">
-                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">	
-                      {/* BLOG POST IMAGE */}
-                      <div className="blog-post-img">
-                        <img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />
-                      </div>
-                      {/* BLOG POST TEXT */}
-                      <div className="blog-post-txt">
-                        {/* Post Tag */}
-                        <p className="p-md post-tag">Extensions</p>	
-                        {/* Post Link */}
-                        <h5 className="h5-xs">
-                          <a href="single-post.html">Lipsum gravida porta velna NordEx, donec gravida ipsum a 
-                            porta justo tempor
-                          </a>
-                        </h5>
-                        {/* Text */}
-                        <p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
-                          dolor vitae auctor
-                        </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>4 hours read</p>
-                        </div>	
-                      </div>	{/* END BLOG POST TEXT */}
-                    </div>
-                  </div>	{/* END  BLOG POST #6 */}
-                </div>  {/* End row */}
+                <BlogItems blogData={this.props.blogData} />
+                {/* End row */}
              </div>	{/* END POSTS WRAPPER */}
            </div>     {/* End container */}
            {/* GEOMETRIC OVERLAY */}	
@@ -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">
@@ -1,26 +1,25 @@
-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 */}	
+          {/* 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 +41,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 +93,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">
@@ -206,11 +116,11 @@ class Faqs extends React.Component {
                  <div className="col-lg-5 text-right">
                    <div className="stores-badge">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore-white.png" alt="appstore-logo" />
                      </a>
                      {/* Google Play */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_GOOGLE_PLAY_LINK} className="store">
                        <img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-logo" />
                      </a>
                    </div>	
@@ -219,11 +129,7 @@ class Faqs extends React.Component {
              </div>    {/* End row */}
            </div>	   {/* End container */}	
          </section>	{/* END DOWNLOAD-2 */}
-         
        </div>	{/* END PAGE CONTENT */}
-  
-
-
            </div>
        )
    }
@@ -4,7 +4,7 @@ class FindEv extends React.Component {
    render() {
        let subheadSection = {
            leadTitle: `Subscribe to Our Newsletter`,
-            title: `Stay up to date with our news, ideas and updates`,
+            title: `Somehow we will allow users to be able to find EV Charging locations, DESIGN coming up`,
            btn: 'Filter'
        }

@@ -22,29 +22,15 @@ class FindEv extends React.Component {
                {/* PAGE CONTENT
 		============================================= */}
                <div id="page" className="page">
-
-
-                    <section id="newsletter-1" className="pb-20 newsletter-section division">
-                        <div className="container">
-
-
-
-                        </div>	   {/* End container */}
-                    </section>	{/* END NEWSLETTER-1 */}
-
-
                    <section id="content-11" className="pb-100 content-section division">
                        <div className="container">
                            {/* SECTION TITLE */}
-                            <div className="row">
+                            <div className="row"  style={{ marginTop: '150px'}} >
                                <div className="col-lg-10 offset-lg-1">
                                    <div className="section-title text-center mb-60">
                                        {/* Title */}
                                        <h2 className="h2-md">Find EV Charging Spot</h2>
                                        {/* Text */}
-                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                                            tempus, blandit and cursus varius magna tempus a dolor
-                                        </p>

                                        <div className="newsletter-wrapper bg_white">
                                            <div className="row d-flex align-items-center">
@@ -54,7 +40,7 @@ class FindEv extends React.Component {
                                                        {/* Section ID */}
                                                        {/*<span className="section-id">{subheadSection.leadTitle}</span>*/}
                                                        {/* Title */}
-                                                        <h4 className="h4-xl">{subheadSection.title}</h4>
+                                                        <p className="p-xl">{subheadSection.title}</p>
                                                    </div>
                                                </div>
                                                {/* NEWSLETTER FORM */}
@@ -87,7 +73,7 @@ class FindEv extends React.Component {
                                </div>
                            </div>
                            {/* DOWNLOAD BUTTON */}
-                  
+

                        </div>	   {/* End container */}
                    </section>	{/* END CONTENT-11 */}
@@ -2,6 +2,11 @@ import React, {Component} from 'react';

 class FindMobility extends React.Component {
    render() {
+        let subheadSection = {
+            leadTitle: `Subscribe to Our Newsletter`,
+            title: `Somehow we will allow users to be able to find Mobility Options locations, DESIGN coming up`,
+            btn: 'Filter'
+        }
        return(
            <div>

@@ -22,15 +27,39 @@ class FindMobility extends React.Component {
                    <section id="content-11" className="pb-100 content-section division">
                        <div className="container">
                            {/* SECTION TITLE */}
-                            <div className="row">
+                            <div className="row"  style={{ marginTop: '150px'}} >
                                <div className="col-lg-10 offset-lg-1">
                                    <div className="section-title text-center mb-60">
                                        {/* Title */}
-                                        <h2 className="h2-md">Chat with Your Friends Easily</h2>
+                                        <h2 className="h2-md">Find Scooters, Cars, Buses ...</h2>
                                        {/* Text */}
-                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                                            tempus, blandit and cursus varius magna tempus a dolor
-                                        </p>
+
+                                        <div className="newsletter-wrapper bg_white">
+                                            <div className="row d-flex align-items-center">
+                                                {/* SECTION TITLE */}
+                                                <div className="col-lg-10">
+                                                    <div className="newsletter-txt">
+                                                        {/* Section ID */}
+                                                        {/*<span className="section-id">{subheadSection.leadTitle}</span>*/}
+                                                        {/* Title */}
+                                                        <p className="p-xl">{subheadSection.title}</p>
+                                                    </div>
+                                                </div>
+                                                {/* NEWSLETTER FORM */}
+                                                <div className="col-lg-2">
+                                                    <form className="newsletter-form">
+                                                        <div className="input-group">
+
+                                                            <span className="input-group-btn">
+                          <button type="submit" className="btn btn-md btn-rose tra-rose-hover">{subheadSection.btn}</button>
+                        </span>
+                                                        </div>
+                                                        {/* Newsletter Form Notification */}
+                                                        <label htmlFor="s-email" className="form-notification" />
+                                                    </form>
+                                                </div>	  {/* END NEWSLETTER FORM */}
+                                            </div>	  {/* End row */}
+                                        </div>    {/* End newsletter-holder */}
                                    </div>
                                </div>
                            </div>
@@ -1,4 +1,16 @@
 import React, {Component} from 'react';
+import Motivated from '../pages/assests/images/motivated.ico'
+import Instruction from '../pages/assests/images/instructions.ico'
+import UserFriendly from '../pages/assests/images/user-friendly.ico'
+import Guide from '../pages/assests/images/guide-book.ico'
+import Tracking from '../pages/assests/images/tracking3.ico'
+import Support from '../pages/assests/images/support.ico'
+import QuickAccess from '../pages/assests/images/access.ico'
+import Metrics from '../pages/assests/images/metrics.ico'
+import SmartLoc from '../pages/assests/images/ev-driving-range.ico'
+import Follow from '../pages/assests/images/self-driving-vehicle.ico'
+import Func from '../pages/assests/images/server-room.ico'
+import TrackAnalyze from '../pages/assests/images/road-infographic.ico'

 class Fleet extends React.Component {
    render() {
@@ -82,7 +94,7 @@ class Fleet extends React.Component {
                        {/* FEATURE BOX #1 */}
                        <div id="fb-13-1" className="fbox-13 mt-50 mb-30 wow fadeInUp" data-wow-delay="0.4s">
                          {/* Icon */}
-                          <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-clock" /></div>
+                          <div className="fbox-13-ico ico-75 skyblue-color"><img src={Metrics} /></div>
                          {/* Title */}
                          <h5 className="h5-sm">{statsSection.metrics.title}</h5>
                          {/* Text */}
@@ -91,7 +103,7 @@ class Fleet extends React.Component {
                        {/* FEATURE BOX #2 */}
                        <div id="fb-13-2" className="fbox-13 wow fadeInUp" data-wow-delay="0.6s">
                          {/* Icon */}
-                          <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-exercise" /></div>
+                          <div className="fbox-13-ico ico-75 skyblue-color"><img src={Guide} /></div>
                          {/* Title */}
                          <h5 className="h5-sm">{statsSection.guide.title}</h5>
                          {/* Text */}
@@ -102,7 +114,7 @@ class Fleet extends React.Component {
                        {/* FEATURE BOX #3 */}
                        <div id="fb-13-3" className="fbox-13 mb-30 wow fadeInUp" data-wow-delay="0.8s">
                          {/* Icon */}
-                          <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-salad" /></div>
+                          <div className="fbox-13-ico ico-75 skyblue-color"><img src={QuickAccess} /></div>
                          {/* Title */}
                          <h5 className="h5-sm">{statsSection.access.title}</h5>
                          {/* Text */}
@@ -111,7 +123,7 @@ class Fleet extends React.Component {
                        {/* FEATURE BOX #4 */}
                        <div id="fb-13-4" className="fbox-13 wow fadeInUp" data-wow-delay="1s">
                          {/* Icon */}
-                          <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-lose-weight" /></div>
+                          <div className="fbox-13-ico ico-75 skyblue-color"><img src={Motivated} /></div>
                          {/* Title */}
                          <h5 className="h5-sm">{statsSection.motivated.title}</h5>
                          {/* Text */}
@@ -160,7 +172,7 @@ class Fleet extends React.Component {
                      {/* CONTENT BOX #1 */}
                      <div className="cbox mb-30">
                        {/* Icon */}
-                        <div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-video-player-2" /></div> 
+                        <div className="cbox-ico ico-65 skyblue-color"><img src={Instruction} /></div> 
                        {/* Text */}
                        <div className="cbox-txt">
                          <h5 className="h5-sm">{specialFeaturesSection.firstFeature.title}</h5>
@@ -170,7 +182,7 @@ class Fleet extends React.Component {
                      {/* CONTENT BOX #2 */}
                      <div className="cbox mb-30">
                        {/* Icon */}
-                        <div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-percentage" /></div> 
+                        <div className="cbox-ico ico-65 skyblue-color"><img src={SmartLoc} /></div> 
                        {/* Text */}
                        <div className="cbox-txt">
                          <h5 className="h5-sm">{specialFeaturesSection.secondFeature.title}</h5>
@@ -180,7 +192,7 @@ class Fleet extends React.Component {
                      {/* CONTENT BOX #3 */}
                      <div className="cbox">
                        {/* Icon */}
-                        <div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-smartphone-9" /></div> 
+                        <div className="cbox-ico ico-65 skyblue-color"><img src={Tracking} /></div> 
                        {/* Text */}
                        <div className="cbox-txt">
                          <h5 className="h5-sm">{specialFeaturesSection.thirdFeature.title}</h5>
@@ -221,7 +233,7 @@ class Fleet extends React.Component {
                  <div id="fb-5-1" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.4s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-ads" /></div>
+                      <div className="fbox-ico ico-70 skyblue-color"><img src={UserFriendly} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -235,7 +247,7 @@ class Fleet extends React.Component {
                  <div id="fb-5-2" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.6s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-switch" /></div>
+                      <div className="fbox-ico ico-70 skyblue-color"><img src={Func} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -249,7 +261,7 @@ class Fleet extends React.Component {
                  <div id="fb-5-3" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.8s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-call" /></div>
+                      <div className="fbox-ico ico-70 skyblue-color"><img src={QuickAccess} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -263,7 +275,7 @@ class Fleet extends React.Component {
                  <div id="fb-5-4" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-analytics-3" /></div>
+                      <div className="fbox-ico ico-70 skyblue-color"><img src={TrackAnalyze} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -277,7 +289,7 @@ class Fleet extends React.Component {
                  <div id="fb-5-5" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.2s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-weight" /></div>
+                      <div className="fbox-ico ico-70 skyblue-color"><img src={Follow} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -291,7 +303,7 @@ class Fleet extends React.Component {
                  <div id="fb-5-6" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.4s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-conversation" /></div>
+                      <div className="fbox-ico ico-70 skyblue-color"><img src={Support} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -1154,6 +1166,6 @@ let subscribeSection = {

 // Download Section
 let downloadSection = {
-  header: 'Take your fleet to the next level',
+  header: 'Your Fleet in Full Speed Mode',
  text: 'Augue egestas volutpat egestas augue purus cubilia laoreet and magna suscipit luctus dolor tempus'
 }
@@ -1,11 +1,34 @@
 import React, {Component} from 'react';
-import SaveMoney from '../pages/assests/images/save-money.png' 
-import GetReward from '../pages/assests/images/get-rewarded.png' 
-import Access from '../pages/assests/images/navigation.png' 
+import SaveMoney from '../pages/assests/images/save-money.ico' 
+import GetReward from '../pages/assests/images/earn-reward.ico' 
+import Access from '../pages/assests/images/smart-display.ico' 
+import Multiple from '../pages/assests/images/multiple-accounts.ico'
+import Service from '../pages/assests/images/service-options.ico'
+import Options from '../pages/assests/images/server-access-point.ico'
+import Connectivity from '../pages/assests/images/interactive-display.ico'
+import Connect from '../pages/assests/images/biometric-technology.ico'
+import Functionality from '../pages/assests/images/unlock-functionality.ico'
+import Analytics from '../pages/assests/images/analytics (5).ico'
+import Analysis from '../pages/assests/images/analytics.ico'
+import Monitoring from '../pages/assests/images/monitoring.ico'
+import Assistant from '../pages/assests/images/assistant (2).ico'
+
+import BlogItems from '../components/BlogItems';


 class FloatHome extends React.Component {
+
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+   // this.state = { counter: 0 };
+    // this.handleClick = this.handleClick.bind(this);
+    // console.log("OLU-AMEY 22",props.blogData);
+  }
+
    render() {
+      const faqData = this.props.faqData
+      console.log(faqData)
        return(
            <div>
        {/* PRELOADER SPINNER	============================================= */}	
@@ -223,7 +246,7 @@ class FloatHome extends React.Component {
                  <div id="fb-11-1" className="col-lg-4">
                    <div className="fbox-11 mb-40 wow fadeInUp" data-wow-delay="0.4s">
                      {/* Icon */}
-                      <div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-user-1" /></div>
+                      <div className="fbox-11-ico ico-60 bg_slateblue white-color"><img src={Multiple} /><span className="flaticon-user-1" /></div>
                      {/* Title */}
                      <h5 className="h5-md">{tryFloatSec.accounts.title}</h5>
                      {/* Text */}
@@ -234,7 +257,7 @@ class FloatHome extends React.Component {
                  <div id="fb-11-2" className="col-lg-4">
                    <div className="fbox-11 mb-40 wow fadeInUp" data-wow-delay="0.6s">
                      {/* Icon */}
-                      <div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-smiley" /></div>
+                      <div className="fbox-11-ico ico-60 bg_slateblue white-color"><img src={Service} /><span className="flaticon-smiley" /></div>
                      {/* Title */}
                      <h5 className="h5-md">{tryFloatSec.emojis.title}</h5>
                      {/* Text */}
@@ -245,7 +268,7 @@ class FloatHome extends React.Component {
                  <div id="fb-11-3" className="col-lg-4">
                    <div className="fbox-11 mb-40 wow fadeInUp" data-wow-delay="0.8s">
                      {/* Icon */}
-                      <div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-image" /></div>
+                      <div className="fbox-11-ico ico-60 bg_slateblue white-color"><img src={Connectivity} /><span className="flaticon-image" /></div>
                      {/* Title */}
                      <h5 className="h5-md">{tryFloatSec.files.title}</h5>
                      {/* Text */}
@@ -294,7 +317,7 @@ class FloatHome extends React.Component {
                    {/* CONTENT BOX #1 */}
                    <div className="cbox mb-30">
                      {/* Icon */}
-                      <div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-video-player" /></div> 
+                      <div className="cbox-ico ico-65 stateblue-color"><img src={Analytics} /></div> 
                      {/* Text */}
                      <div className="cbox-txt">
                        <h5 className="h5-sm">{customDeals.text.title}</h5>
@@ -304,7 +327,7 @@ class FloatHome extends React.Component {
                    {/* CONTENT BOX #2 */}
                    <div className="cbox mb-30">
                      {/* Icon */}
-                      <div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-smiley" /></div> 
+                      <div className="cbox-ico ico-65 stateblue-color"><img src={Options} /></div> 
                      {/* Text */}
                      <div className="cbox-txt">
                        <h5 className="h5-sm">{customDeals.stickers.title}</h5>
@@ -314,7 +337,7 @@ class FloatHome extends React.Component {
                    {/* CONTENT BOX #3 */}
                    <div className="cbox">
                      {/* Icon */}
-                      <div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-image" /></div> 
+                      <div className="cbox-ico ico-65 stateblue-color"><img src={Connect} /></div> 
                      {/* Text */}
                      <div className="cbox-txt">
                        <h5 className="h5-sm">{customDeals.media.title}</h5>
@@ -370,8 +393,7 @@ class FloatHome extends React.Component {
                        </div>
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
-                          <div className="fbox-4-ico ico-100 grey-color text-center">
-                            <span className="flaticon-paint-brush" />
+                          <div className="fbox-4-ico ico-100 grey-color text-center"><img src={Monitoring} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -392,8 +414,7 @@ class FloatHome extends React.Component {
                        </div>
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
-                          <div className="fbox-4-ico ico-100 stateblue-color text-center">
-                            <span className="flaticon-smartphone-8" />
+                          <div className="fbox-4-ico ico-100 stateblue-color text-center"><img src={Analysis} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -414,8 +435,7 @@ class FloatHome extends React.Component {
                        </div>
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
-                          <div className="fbox-4-ico ico-100 stateblue-color text-center">
-                            <span className="flaticon-mobile-1" />
+                          <div className="fbox-4-ico ico-100 stateblue-color text-center"><img src={Functionality} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -437,7 +457,7 @@ class FloatHome extends React.Component {
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
                          <div className="fbox-4-ico ico-100 grey-color text-center">
-                            <span className="flaticon-voice-message-1" />
+                          <img src={Assistant} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -557,54 +577,7 @@ class FloatHome extends React.Component {
              </div>	  {/* End row */}
            </div>	   {/* End container */}
          </section>	{/* END CONTENT-13 */}
-          {/* BRANDS-1
-			============================================= */}
-          <div id="brands-1" className="bg_whitesmoke brands-section division">
-            <div className="container">					
-              <div className="row">
-                <div className="col text-center pc-25">	
-                  <div className="owl-carousel brands-carousel">
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-1.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-2.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-3.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-4.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-5.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-6.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-7.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-8.png" alt="brand-logo" />
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <img className="img-fluid" src="assets/images/brand-9.png" alt="brand-logo" />
-                    </div>
-                  </div>
-                </div>
-              </div>      {/* End row */}
-            </div>	    {/* End container */}
-          </div>	{/* END BRANDS-1 */}
+         
          {/* CONTENT-11
 			============================================= */}
          <section id="content-11" className="wide-100 content-section division">
@@ -911,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">
@@ -1080,89 +988,8 @@ class FloatHome extends React.Component {
                </div>
              </div>
              {/* BLOG POSTS */}
-              <div className="row">
-                {/* BLOG POST #1 */}
-                <div 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">
-                      <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="blog-post-txt">
-                      {/* Post Tag */}
-                      <p className="p-md post-tag">Float News</p>	
-                      {/* Post Link */}
-                      <h5 className="h5-sm">
-                        <a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
-                      </h5>
-                      {/* Text */}
-                      <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                        congue 
-                      </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>
-                  </div>
-                </div>	{/* END  BLOG POST #1 */}
-                {/* BLOG POST #2 */}
-                <div id="b-post-2" className="col-md-6 col-lg-4">
-                  <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">	
-                    {/* BLOG POST IMAGE */}
-                    <div className="blog-post-img">
-                      <img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="blog-post-txt">
-                      {/* Post Tag */}
-                      <p className="p-md post-tag">Inspiration</p>	
-                      {/* Post Link */}
-                      <h5 className="h5-sm">
-                        <a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
-                      </h5>
-                      {/* Text */}
-                      <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                        congue 
-                      </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>8 min read</p>
-                      </div>	
-                    </div>	{/* END BLOG POST TEXT */}
-                  </div>
-                </div>	{/* END  BLOG POST #2 */}
-                {/* BLOG POST #3 */}
-                <div id="b-post-3" className="col-md-6 col-lg-4">
-                  <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">	
-                    {/* BLOG POST IMAGE */}
-                    <div className="blog-post-img">
-                      <img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="blog-post-txt">
-                      {/* Post Tag */}
-                      <p className="p-md post-tag">Tutorials</p>	
-                      {/* Post Link */}
-                      <h5 className="h5-sm">
-                        <a href="single-post.html">Tempor sapien Float, donec gravida ipsum a porta justo</a>
-                      </h5>
-                      {/* Text */}
-                      <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                        congue 
-                      </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>22 min read</p>
-                      </div>	
-                    </div>	{/* END BLOG POST TEXT */}
-                  </div>
-                </div>	{/* END  BLOG POST #3 */}
-              </div>	{/* END BLOG POSTS */}
+              	<BlogItems blogData={this.props.blogData}/>
+              {/* END BLOG POSTS */}
            </div>	   {/* End container */}		
          </section>	{/* END BLOG-1 */}
          {/* DOWNLOAD-5
@@ -1391,7 +1218,7 @@ export default FloatHome
  //BULIT FOR SPEED
  let floatForSpeed = {
    leadTitle: `Built For Speed`,
-    title: `Easy Navigation`,
+    title: `Your Fleet with Convienence`,
    desc: `Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit 
    posuere orci auctor purus euismod an aliquam quaerat purus`
  }
@@ -1,6 +1,20 @@
 import React, {Component} from 'react';
+import UserFriendly from '../pages/assests/images/user-friendly.ico'
+import FleetMgr from '../pages/assests/images/multiple-accounts.ico'
+import ChargeFinder from '../pages/assests/images/charger-location.ico'
+import Options from '../pages/assests/images/options1.ico'
+
+import BlogItems from '../components/BlogItems';
+

 class GetStarted extends React.Component {
+    constructor(props) {
+        super(props);
+        // Don't call this.setState() here!
+       // this.state = { counter: 0 };
+        // this.handleClick = this.handleClick.bind(this);
+        // console.log("OLU-AMEY 22",props.blogData);
+      }
    render() {
        return(
            <div>
@@ -36,47 +50,47 @@ class GetStarted extends React.Component {
                                <div className="row">
                                    {/* FEATURE BOX #1 */}
                                    <div id="fb-3-1" className="col-md-6 col-lg-3">
-                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.4s">
+                                        <a href={process.env.REACT_APP_USERS} target="_blank"><div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.4s">
                                            {/* Icon */}
-                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-streaming" /></div>
+                                            <div className="fbox-3-ico grey-color ico-65"><img src={UserFriendly} /></div>
                                            {/* Title */}
                                            <h5 className="h5-sm">Users</h5>
                                            {/* Text */}
                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
-                                        </div>
+                                        </div></a>
                                    </div>
                                    {/* FEATURE BOX #2 */}
                                    <div id="fb-3-2" className="col-md-6 col-lg-3">
-                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.6s">
+                                        <a href={process.env.REACT_APP_FLEET}  target="_blank"><div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.6s">
                                            {/* Icon */}
-                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-user-1" /></div>
+                                            <div className="fbox-3-ico grey-color ico-65"><img src={FleetMgr} /></div>
                                            {/* Title */}
                                            <h5 className="h5-sm">Fleet Managers</h5>
                                            {/* Text */}
                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
-                                        </div>
+                                        </div></a>
                                    </div>
                                    {/* FEATURE BOX #3 */}
                                    <div id="fb-3-3" className="col-md-6 col-lg-3">
-                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.8s">
+                                        <a href="/findev"><div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.8s">
                                            {/* Icon */}
-                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-echo-dot" /></div>
+                                            <div className="fbox-3-ico grey-color ico-65"><img src={ChargeFinder} /></div>
                                            {/* Title */}
                                            <h5 className="h5-sm">Ev Charge Finder</h5>
                                            {/* Text */}
                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
-                                        </div>
+                                        </div></a>
                                    </div>
                                    {/* FEATURE BOX #4 */}
                                    <div id="fb-3-4" className="col-md-6 col-lg-3">
-                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="1s">
+                                        <a href="/findmobility"><div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="1s">
                                            {/* Icon */}
-                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-notes" /></div>
+                                            <div className="fbox-3-ico grey-color ico-65"><img src={Options} /></div>
                                            {/* Title */}
                                            <h5 className="h5-sm">Find Options</h5>
                                            {/* Text */}
                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
-                                        </div>
+                                        </div></a>
                                    </div>
                                </div>  {/* End row */}
                            </div>	{/* END FEATURES-3 WRAPPER */}
@@ -99,7 +113,7 @@ class GetStarted extends React.Component {
                                        {/* Section ID */}
                                        <span className="section-id grey-color">Perfect Integration</span>
                                        {/* Title */}
-                                        <h2 className="h2-md">Makes your address book lite and user friendly</h2>
+                                        <h2 className="h2-md">Custom Preferences and User friendly</h2>
                                        {/* Text */}
                                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
                                            luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
@@ -123,7 +137,7 @@ class GetStarted extends React.Component {
                                            {/* Section ID */}
                                            <span className="section-id grey-color">Handling with Ease</span>
                                            {/* Title */}
-                                            <h2 className="h2-md">Sync all contacts with social profiles</h2>
+                                            <h2 className="h2-md">Sync all Fleet in One Platform</h2>
                                            {/* Text */}
                                            <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
                                                luctus magna dolor luctus and egestas sapien egestas vitae nemo volute
@@ -166,7 +180,7 @@ class GetStarted extends React.Component {
                                            {/* Section ID */}
                                            <span className="section-id grey-color">Register in 30 Seconds</span>
                                            {/* Title */}
-                                            <h2 className="h2-md">Lightning fast and super powerful</h2>
+                                            <h2 className="h2-md">Professional Fleet</h2>
                                            {/* Text */}
                                            <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
                                                luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
@@ -189,7 +203,7 @@ class GetStarted extends React.Component {
                                        {/* Section ID */}
                                        <span className="section-id grey-color">Beauty of Simplicity</span>
                                        {/* Title */}
-                                        <h2 className="h2-md">Beautiful, award-winning design</h2>
+                                        <h2 className="h2-md">Which, Is Right for You?</h2>
                                        {/* List */}
                                        <ul className="simple-list">
                                            <li className="list-item">
@@ -354,89 +368,8 @@ class GetStarted extends React.Component {
                                </div>
                            </div>
                            {/* BLOG POSTS */}
-                            <div className="row">
-                                {/* BLOG POST #1 */}
-                                <div 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">
-                                            <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
-                                        </div>
-                                        {/* BLOG POST TEXT */}
-                                        <div className="blog-post-txt">
-                                            {/* Post Tag */}
-                                            <p className="p-md post-tag">Float News</p>
-                                            {/* Post Link */}
-                                            <h5 className="h5-sm">
-                                                <a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
-                                            </h5>
-                                            {/* Text */}
-                                            <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                                                congue
-                                            </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>
-                                    </div>
-                                </div>	{/* END  BLOG POST #1 */}
-                                {/* BLOG POST #2 */}
-                                <div id="b-post-2" className="col-md-6 col-lg-4">
-                                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
-                                        {/* BLOG POST IMAGE */}
-                                        <div className="blog-post-img">
-                                            <img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
-                                        </div>
-                                        {/* BLOG POST TEXT */}
-                                        <div className="blog-post-txt">
-                                            {/* Post Tag */}
-                                            <p className="p-md post-tag">Inspiration</p>
-                                            {/* Post Link */}
-                                            <h5 className="h5-sm">
-                                                <a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
-                                            </h5>
-                                            {/* Text */}
-                                            <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                                                congue
-                                            </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>8 min read</p>
-                                            </div>
-                                        </div>	{/* END BLOG POST TEXT */}
-                                    </div>
-                                </div>	{/* END  BLOG POST #2 */}
-                                {/* BLOG POST #3 */}
-                                <div id="b-post-3" className="col-md-6 col-lg-4">
-                                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
-                                        {/* BLOG POST IMAGE */}
-                                        <div className="blog-post-img">
-                                            <img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
-                                        </div>
-                                        {/* BLOG POST TEXT */}
-                                        <div className="blog-post-txt">
-                                            {/* Post Tag */}
-                                            <p className="p-md post-tag">Tutorials</p>
-                                            {/* Post Link */}
-                                            <h5 className="h5-sm">
-                                                <a href="single-post.html">Tempor sapien Float, donec gravida ipsum a porta justo</a>
-                                            </h5>
-                                            {/* Text */}
-                                            <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                                                congue
-                                            </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>22 min read</p>
-                                            </div>
-                                        </div>	{/* END BLOG POST TEXT */}
-                                    </div>
-                                </div>	{/* END  BLOG POST #3 */}
-                            </div>	{/* END BLOG POSTS */}
+                            <BlogItems blogData={this.props.blogData} />
+                        	{/* END BLOG POSTS */}
                        </div>	   {/* End container */}
                    </section>	{/* END BLOG-1 */}
                    {/* NEWSLETTER-1
@@ -1,6 +1,25 @@
 import React, {Component} from 'react';
+import Multiple from '../pages/assests/images/multiple-accounts.ico'
+import Connect from '../pages/assests/images/biometric-technology.ico'
+import Analytics from '../pages/assests/images/analytics (5).ico'
+import Schedule from '../pages/assests/images/schedule-management.ico'
+import Monitoring from '../pages/assests/images/monitoring.ico'
+import Assistant from '../pages/assests/images/assistant.ico'
+import Verify from '../pages/assests/images/online-verification.ico'
+import Perks from '../pages/assests/images/perks.ico'
+import Charging from '../pages/assests/images/charging-station.ico'
+import Fleet from '../pages/assests/images/fleet-signal.ico'
+
+import BlogItems from '../components/BlogItems';

 class Users extends React.Component {
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+   // this.state = { counter: 0 };
+    // this.handleClick = this.handleClick.bind(this);
+    // console.log("OLU-AMEY 22",props.blogData);
+  }
    render() {
        return(
            <div>
@@ -69,7 +88,7 @@ class Users extends React.Component {
                  <div id="fb-5-1" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.4s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 grey-color"><span className="flaticon-user-1" /></div>
+                      <div className="fbox-ico ico-70 grey-color"><img src={Multiple} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -83,7 +102,7 @@ class Users extends React.Component {
                  <div id="fb-5-2" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.6s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 grey-color"><span className="flaticon-smartphone-1" /></div>
+                      <div className="fbox-ico ico-70 grey-color"><img src={Analytics} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -97,7 +116,7 @@ class Users extends React.Component {
                  <div id="fb-5-3" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.8s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 grey-color"><span className="flaticon-image" /></div>
+                      <div className="fbox-ico ico-70 grey-color"><img src={Connect} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -111,7 +130,7 @@ class Users extends React.Component {
                  <div id="fb-5-4" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 grey-color"><span className="flaticon-chat-4" /></div>
+                      <div className="fbox-ico ico-70 grey-color"><img src={Monitoring} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -125,7 +144,7 @@ class Users extends React.Component {
                  <div id="fb-5-5" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.2s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 grey-color"><span className="flaticon-fingerprint" /></div>
+                      <div className="fbox-ico ico-70 grey-color"><img src={Verify} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -139,7 +158,7 @@ class Users extends React.Component {
                  <div id="fb-5-6" className="col-md-6">
                    <div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.4s">
                      {/* Icon */}
-                      <div className="fbox-ico ico-70 grey-color"><span className="flaticon-spam" /></div>
+                      <div className="fbox-ico ico-70 grey-color"><img src={Perks} /></div>
                      {/* Text */}
                      <div className="fbox-txt">
                        {/* Title */}
@@ -276,7 +295,7 @@ class Users extends React.Component {
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
                          <div className="fbox-4-ico ico-100 grey-color text-center">
-                            <span className="flaticon-paint-brush" />
+                          <img src={Charging} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -298,7 +317,7 @@ class Users extends React.Component {
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
                          <div className="fbox-4-ico ico-100 grey-color text-center">
-                            <span className="flaticon-smartphone-8" />
+                          <img src={Fleet} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -320,7 +339,7 @@ class Users extends React.Component {
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
                          <div className="fbox-4-ico ico-100 grey-color text-center">
-                            <span className="flaticon-voice-message-1" />
+                          <img src={Assistant} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -342,7 +361,7 @@ class Users extends React.Component {
                        {/* ICON */}
                        <div className="col-lg-4 m-top">
                          <div className="fbox-4-ico ico-100 grey-color text-center">
-                            <span className="flaticon-tasks" />
+                          <img src={Schedule} />
                          </div>
                        </div>
                      </div>	{/* End row */}
@@ -627,90 +646,7 @@ class Users extends React.Component {
              </div>	   {/* End row */}
            </div>	   {/* End container */}
          </section>	{/* END CONTENT-1 */}
-          {/* BRANDS-2
-			============================================= */}
-          <section id="brands-2" className="pb-70 brands-section division">
-            <div className="container">	
-              {/* BRANDS TITLE */}
-              <div className="row">
-                <div className="col-lg-8 offset-lg-2">
-                  <div className="brands-title text-center">
-                    <h4 className="h4-sm">{partners.title}</h4>
-                  </div>
-                </div>
-              </div>
-              {/* BRANDS-2 WRAPPER */}
-              <div className="brands-2-wrapper">
-                <div className="row">
-                  <div className="col-md-12">
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-1.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-2.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-3.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-4.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-5.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-6.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-7.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-8.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-9.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-10.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>  {/* END BRANDS-2 WRAPPER */}
-            </div>     {/* End container */}
-          </section>	{/* END BRANDS-2 */}
-          {/* SECTION DIVIDER
-			============================================= */}
-          <div className="divider-wrapper text-center"><div className="section-divider" /></div>
+          
          {/* BLOG-1
 			============================================= */}
          <section id="blog-1" className="wide-60 blog-section division">				
@@ -729,89 +665,8 @@ class Users extends React.Component {
                </div>
              </div>
              {/* BLOG POSTS */}
-              <div className="row">
-                {/* BLOG POST #1 */}
-                <div 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">
-                      <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="blog-post-txt">
-                      {/* Post Tag */}
-                      <p className="p-md post-tag">Float News</p>	
-                      {/* Post Link */}
-                      <h5 className="h5-sm">
-                        <a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
-                      </h5>
-                      {/* Text */}
-                      <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                        congue 
-                      </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>
-                  </div>
-                </div>	{/* END  BLOG POST #1 */}
-                {/* BLOG POST #2 */}
-                <div id="b-post-2" className="col-md-6 col-lg-4">
-                  <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">	
-                    {/* BLOG POST IMAGE */}
-                    <div className="blog-post-img">
-                      <img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="blog-post-txt">
-                      {/* Post Tag */}
-                      <p className="p-md post-tag">Inspiration</p>	
-                      {/* Post Link */}
-                      <h5 className="h5-sm">
-                        <a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
-                      </h5>
-                      {/* Text */}
-                      <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                        congue 
-                      </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>8 min read</p>
-                      </div>	
-                    </div>	{/* END BLOG POST TEXT */}
-                  </div>
-                </div>	{/* END  BLOG POST #2 */}
-                {/* BLOG POST #3 */}
-                <div id="b-post-3" className="col-md-6 col-lg-4">
-                  <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">	
-                    {/* BLOG POST IMAGE */}
-                    <div className="blog-post-img">
-                      <img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="blog-post-txt">
-                      {/* Post Tag */}
-                      <p className="p-md post-tag">Tutorials</p>	
-                      {/* Post Link */}
-                      <h5 className="h5-sm">
-                        <a href="single-post.html">Tempor sapien Float, donec gravida ipsum a porta justo</a>
-                      </h5>
-                      {/* Text */}
-                      <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
-                        congue 
-                      </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>22 min read</p>
-                      </div>	
-                    </div>	{/* END BLOG POST TEXT */}
-                  </div>
-                </div>	{/* END  BLOG POST #3 */}
-              </div>	{/* END BLOG POSTS */}
+              <BlogItems blogData={this.props.blogData} />
+            	{/* END BLOG POSTS */}
            </div>	   {/* End container */}		
          </section>	{/* END BLOG-1 */}
          {/* NEWSLETTER-1
@@ -863,8 +718,8 @@ export default Users
 //HERO SECTION
 let heroSection = {
  leadTitle: `Float`,
-  title: `Your Activity Feed`,
-  desc: `Stay Connected with Your Friends`,
+  title: `Your Mobility Made Smarter`,
+  desc: `Stay Connected with Your World`,
  mainSiteLink: 'This leads to users PORTAL',
 };

@@ -903,7 +758,7 @@ let automate = {
 // UNLIMITED ACCESS SECTION
 let accessUnlimited = {
  leadTitle: `Unlimited Access`,
-  title: `Spend your time with loved ones`,
+  title: `Your Mobility with Rewards`,
  desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
  luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat 
  sodales a sapien`,
@@ -914,7 +769,7 @@ let accessUnlimited = {
 // FAST MESSAGING SECTION
 let fastMes = {
  leadTitle: `Fastest Messaging`,
-  title: `Unlimited calling, texting and picture messaging`,
+  title: `Unlimited Charging Spot, EV Location Find and AutomationSync`,
  desc: `Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor 
  congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium 
  enim gravida purus ligula`,
@@ -943,7 +798,7 @@ let fastMes = {
 //BULIT FOR SPEED SECTION
 let floatForSpeed = {
  leadTitle: `Built For Speed`,
-  title: `Keep Your Favorite People Close to You`,
+  title: `Your Fleet with Convienence`,
  desc: `Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit 
  posuere orci auctor purus euismod an aliquam quaerat purus`,
 }
@@ -951,7 +806,7 @@ let floatForSpeed = {
 // DESIGN SECTION
 let floatMap = {
  leadTitle: `Beauty of Simplicity`,
-  title: `Beautiful, award-winning design`,
+  title: `Which, Is Right for You?`,
  desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
  ligula rutrum tempor sapien`,
  descTwo: `Quaerat sodales sapien euismod purus blandit`,
@@ -979,8 +834,8 @@ let optimization = {
 // LIGHT & POWERFUL
 let floatMight = {
  leadTitle: `Register in 30 Seconds`,
-  title: `Lightning Fast. Super Powerful`,
-  desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
+  title: `Small Fleet Program `,
+  desc: `Family , group of friends sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
  luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat 
  sodales a sapien`,
 }
@@ -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'
    }
   }
 ]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tokslaw	e0a4517ffc	Merge branch 'api-config-and-links' of FloatSystems/float-www into master	2023-04-12 14:47:32 +00:00
Ebube	59a4d3009b	Merge branch 'footer-social-links' of into api-config-and-links	2023-04-11 17:15:25 +01:00
Ebube	391c0a7eaa	Merge branch 'api-configurations-for-faq-and-contact' into api-config-and-links	2023-04-11 17:10:47 +01:00
jenkins	5dbe5f0b5a	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www	2023-04-11 09:00:22 -04:00
jenkins	0f7e2a6bdb	name text change	2023-04-11 09:00:01 -04:00
tokslaw	07031203ee	Merge branch 'blog_image' of FloatSystems/float-www into master	2023-04-11 12:40:22 +00:00
victorAnumudu	477f47ef80	image and featured blog implemented	2023-04-10 21:47:08 +01:00
Ebube	dc26150ac4	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into footer-social-links	2023-04-10 21:16:11 +01:00
Ebube	d81157f5ea	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into api-configurations-for-faq-and-contact	2023-04-10 21:14:29 +01:00
Ebube	01d93f9054	api calls for faq and contact	2023-04-10 21:12:02 +01:00
tokslaw	ab1618cdab	Merge branch 'blog_implementation' of FloatSystems/float-www into master	2023-04-10 16:09:02 +00:00
victorAnumudu	bc2e6f36b4	added blogitem component and rendered	2023-04-10 15:53:09 +01:00
Ebube	43fa698c43	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into api-configurations	2023-04-10 12:07:00 +01:00
Ebube	8d12fc6445	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into footer-social-links	2023-04-10 12:04:26 +01:00
Ebube	cfa177eaa9	added the endpoint	2023-04-10 12:01:59 +01:00
Ebube	186bfa6d8f	Footer Links added	2023-04-10 02:46:56 +01:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	1428ddd925	Footer update	2023-04-09 20:33:14 -04:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	163a29698f	service added	2023-04-08 20:47:18 -04:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	f652304468	chat added	2023-04-08 14:57:55 -04:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	929a1b316f	fix links	2023-04-08 14:46:02 -04:00
jenkins	a9f382eef7	texts RM	2023-04-08 13:28:54 -04:00
jenkins	dfdb881db7	texts added	2023-04-08 13:01:35 -04:00
jenkins	202132e7a5	Users text added	2023-04-08 12:52:23 -04:00
jenkins	f6c803024c	getstarted text	2023-04-08 12:31:10 -04:00
jenkins	b1a0cbab6b	Flt-mgr icons added	2023-04-08 12:05:25 -04:00
jenkins	c2b4273512	getstarted iocns added	2023-04-08 11:10:52 -04:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	3272b60965	Fix page	2023-04-08 09:11:12 -04:00
jenkins	4695e934e6	Dash-Icons added	2023-04-08 05:03:46 -04:00
tokslaw	dee383efb5	Merge branch 'Add-links-to-App-Download' of FloatSystems/float-www into master	2023-04-08 07:34:54 +00:00
jenkins	43b79a7aa6	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www	2023-04-08 02:35:30 -04:00
jenkins	5bc8ef4667	Home and users Icons added	2023-04-08 02:35:08 -04:00