Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into footer-social-links

Merge branch 'blog_implementation' of FloatSystems/float-www into master
added blogitem component and rendered
2023-04-10 21:16:11 +01:00 · 2023-04-10 16:09:02 +00:00 · 2023-04-10 15:53:09 +01:00 · 2023-04-10 12:04:26 +01:00 · 2023-04-10 02:46:56 +01:00 · 2023-04-09 20:33:14 -04:00
151 changed files with 594 additions and 956 deletions
@@ -3,4 +3,14 @@ REACT_APP_EMAIL='support@float.sg'
 REACT_APP_WWW='http://float-www.dev.chiefsoft.net'
 REACT_APP_FLEET='http://float-flt.dev.chiefsoft.net'
 REACT_APP_USERS='http://float-usr.dev.chiefsoft.net'
-REACT_APP_APIGATE='http://float-gat.dev.chiefsoft.net'
+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_FACEBOOK_LINK='https://www.facebook.com/tryfloat'
+REACT_APP_TWITTER_LINK='https://twitter.com/tryfloat/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/float-mobility/"
+REACT_APP_INSTAGRAM_LINK="https://www.instagram.com/company/float-mobility/"
+
+REACT_APP_AUX_ENDPOINT='https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/'
@@ -1,6 +1,6 @@
 {
  "name": "wwww-float",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
@@ -58,7 +58,7 @@
 				$target = jQuery(target);

 			$('html, body').stop().animate({
-				'scrollTop': $target.offset().top - 60 // - 200px (nav-height)
+				'scrollTop': $target.offset()?.top - 60 // - 200px (nav-height)
 			}, 'slow', 'easeInSine', function () {
 				window.location.hash = '1' + target;
 			});
@@ -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>
@@ -29,15 +29,35 @@ import FindMobility from "./pages/FindMobility";
 // } 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 siteApi = new SiteService(); // instantiating the API SERVICE
+	const getBlogData = async () => {
+		try {
+			const res = await siteApi.blogData();
+			if(res.status == 200 /* && res.data.status > 0*/){
+				console.log(res.data.payload, res.data);
+				setBlogData(res.data)
+				return
+			}
+		}catch(error) {
+			setBlogData({payload: {blogdata: []}})
+		}
+	};
+
+	useEffect(() => {
+		getBlogData();
+	}, []);
+
  return (
    <div className="App">

 	 <Header/>
   	    <Routes>
-			<Route path="/" element={<FloatHome/>} />
+			<Route path="/" element={<FloatHome blogData={blogData} />} />
 			<Route path="/about" element={<About/>} />
 			<Route path="/faqs" element={<Faqs/>} />
 			<Route path="/features" element={<Features/>} />
@@ -48,12 +68,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,109 @@
+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?.payload == undefined ? // API CALL IN PROGRESS
+            <div className='col-12 text-center display-4'>Loading...</div>
+            :
+            // API CALL FINISHED
+            (
+                blogData?.payload?.blogdata.length < 1 ?
+                <div className='col-12 text-center display-4'>No Blog Currently Found!</div>
+                :
+                blogData?.payload?.blogdata.map((blog, index) => {
+                    if(location == '/blogs'){
+                        return(
+                            <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
+                                <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
+                                {/* BLOG POST IMAGE */}
+                                <div className="blog-post-img rounded">
+                                    <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
+                                    {/* <img className="img-fluid" src={blog.meta_value} alt="blog-post-image" /> */}
+                                </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" />
+                                </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,3 +1,6 @@
+html{
+  scroll-behavior: smooth;
+}
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -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 {
+
+  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>

@@ -74,172 +90,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 */}	
@@ -4,23 +4,16 @@ class Faqs 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">
-          {/* 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 */}	
@@ -182,8 +175,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 +198,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,12 +211,8 @@ class Faqs extends React.Component {
              </div>    {/* End row */}
            </div>	   {/* End container */}	
          </section>	{/* END DOWNLOAD-2 */}
-         
        </div>	{/* END PAGE CONTENT */}
-  
-
-
-            </div>
+        </div>
        )
    }
 }
@@ -396,11 +396,11 @@ class Features extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -2,6 +2,12 @@ import React, {Component} from 'react';

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

@@ -16,46 +22,59 @@ class FindEv extends React.Component {
                {/* PAGE CONTENT
 		============================================= */}
                <div id="page" className="page">
-
-
-
                    <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 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">
+                                                {/* 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>
+
                            {/* IMAGE BLOCK */}
                            <div className="row">
                                <div className="col-md-12">
                                    <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                                        <iframe width="100%" height="510" style={{border:"0"}} loading="lazy" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1070%20Cresta%20Way%20Unit%202,%20San%20Rafael%20CA%2094903+(FloatEV)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
+                                        <iframe width="100%" height="710" style={{border:"0"}} loading="lazy" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1070%20Cresta%20Way%20Unit%202,%20San%20Rafael%20CA%2094903+(FloatEV)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
                                            <a href="https://www.maps.ie/distance-area-calculator.html">measure area map</a>
                                        </iframe>
                                    </div>
                                </div>
                            </div>
                            {/* DOWNLOAD BUTTON */}
-                            <div className="row">
-                                <div className="col-md-12">
-                                    <div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
-                                        {/* Button */}
-                                        <a href="#" className="btn btn-md btn-skyblue tra-grey-hover">
-                                            Refresh
-                                        </a>
-                                        {/* OS Prerequisite */}
-                                    </div>
-                                </div>
-                            </div>	{/* END 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>
@@ -38,7 +67,9 @@ class FindMobility extends React.Component {
                            <div className="row">
                                <div className="col-md-12">
                                    <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                                        <img className="img-fluid" src="assets/images/socials.png" alt="content-image" />
+                                        <iframe width="100%" height="710" style={{border:"0"}} loading="lazy" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1070%20Cresta%20Way%20Unit%202,%20San%20Rafael%20CA%2094903+(FloatEV)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
+                                            <a href="https://www.maps.ie/distance-area-calculator.html">measure area map</a>
+                                        </iframe>
                                    </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>
@@ -199,74 +211,7 @@ class Fleet extends React.Component {
              </div>	{/* END CONTENT BOX-2 */}
            </div>     {/* End container */}
          </section>	{/* END CONTENT-3 */}	
-          {/* 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">	
-                  {/* Text */}
-                  <p className="p-xl">{brandSectionTitle}</p>
-                  {/* Brands Carousel */}
-                  <div className="owl-carousel brands-carousel">
-                    {/* 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>
-                  </div>	{/* End Brands Carousel */}
-                </div>
-              </div>      {/* End row */}
-            </div>	    {/* End container */}
-          </div>	{/* END BRANDS-1 */}
+
          {/* FEATURES-5 */}
          <section id="features-5" className="wide-50 features-section division">
            <div className="container">
@@ -288,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 */}
@@ -302,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 */}
@@ -316,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 */}
@@ -330,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 */}
@@ -344,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 */}
@@ -358,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 */}
@@ -885,7 +830,7 @@ class Fleet extends React.Component {
                <div className="col-md-12">	
                  <div className="more-questions text-center mt-40">
                    <h5 className="h5-sm"><span className="flaticon-check" /> 
-                      {faqSection.question} <a href="mailto:yourdomain@mail.com" className="skyblue-color">{faqSection.link}</a>
+                      {faqSection.question} <a href="/contacts" className="skyblue-color">{faqSection.link}</a>
                    </h5>
                  </div>
                </div>
@@ -1056,9 +1001,9 @@ export default Fleet

 //Hero Section
 let heroSection = {
-  tag: 'HTML',
-  header: 'Float Business Fleet Management Systems',
-  desc: 'We are your A.I. enables assistance to manage your fleet and advancement to new platforms with insights on current performance and operational projections.'
+  tag: '',
+  header: 'Float Business & Fleet Management Systems',
+  desc: 'We are your A.I.-enabled platform to manage your fleet, performance monitoring, optimization, and assist in upgrades to new technologies.'
 }

 // About Section
@@ -1221,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,28 +1,43 @@
 import React, {Component} from 'react';
-import SaveMoney from '../pages/assests/images/save-money.png' 
-import GetReward from '../pages/assests/images/get-rewarded.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() {
        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
-		============================================= */}	
-        <div id="page" className="page">
-         
-         
-          {/* HERO-5
-			============================================= */}	
+        {/* PAGE CONTENT============================================= */}	
+        <div id="page" className="page">         
+          {/* HERO-5	============================================= */}	
          <div id="hero-5" className="rel hero-section division">
            <div className="container">	
              <div className="row d-flex align-items-center">
@@ -55,11 +70,11 @@ class FloatHome extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -91,7 +106,7 @@ class FloatHome extends React.Component {
                  <div id="fb-1-1" className="col-md-4">
                    <div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.4s">
                      {/* Icon */}
-                      <div className="fbox-1-ico ico-80 stateblue-color"><img src={SaveMoney} /></div>
+                      <div className="fbox-1-ico ico-80 stateblue-color"><img src={Access} /></div>
                      {/* Title */}
                      <h5 className="h5-sm">{message.access.heading}</h5>
                      {/* Text */}
@@ -229,7 +244,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 */}
@@ -240,7 +255,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 */}
@@ -251,7 +266,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 */}
@@ -300,7 +315,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>
@@ -310,7 +325,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>
@@ -320,7 +335,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>
@@ -376,8 +391,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 */}
@@ -398,8 +412,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 */}
@@ -420,8 +433,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 */}
@@ -443,7 +455,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 */}
@@ -563,54 +575,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">
@@ -663,10 +628,10 @@ class FloatHome extends React.Component {
                    <p className="p-xl">{floatForSpeed.desc}
                    </p>                    												
                    <div className="stores-badge">                      
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </a>                      
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_GOOGLE_PLAY_LINK} className="store">
                        <img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
                      </a> 
                    </div>	
@@ -869,11 +834,11 @@ class FloatHome extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-10">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -1086,89 +1051,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
@@ -1187,11 +1071,11 @@ class FloatHome extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-50">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -1397,7 +1281,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
@@ -953,12 +953,12 @@ class Home extends React.Component {
 								<div className="stores-badge">

 									
-									<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-badge" />
 									</a>
 													
 									
-									<a href="#" className="store">
+									<a href={process.env.REACT_APP_APPLE_LINK} className="store">
 										<img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-badge" />
 									</a> 
 												
@@ -766,11 +766,11 @@ class Home_11 extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -34,11 +34,11 @@ class Home_12 extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-10">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -557,11 +557,11 @@ class Home_12 extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -714,11 +714,11 @@ class Home_2 extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-10">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -844,11 +844,11 @@ class Home_2 extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -477,11 +477,11 @@ class Home_3 extends React.Component {
                    {/* STORE BADGES */}												
                    <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-badge" />
                      </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-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -33,11 +33,11 @@ class Home_4 extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-10">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -52,11 +52,11 @@ class Home_5 extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -708,11 +708,11 @@ class Home_5 extends React.Component {
                    {/* STORE BADGES */}												
                    <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.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -926,11 +926,11 @@ class Home_5 extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-10">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
@@ -1245,11 +1245,11 @@ class Home_5 extends React.Component {
                    {/* STORE BADGES */}												
                    <div className="stores-badge mb-50">
                      {/* AppStore */}
-                      <a href="#" className="store">
+                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
                        <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
                      </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.png" alt="googleplay-badge" />
                      </a> 
                      {/* Aamazon Market 
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
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	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	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
Chukwumdiebube	cfceddeecc	Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into Add-links-to-App-Download	2023-04-08 07:34:37 +01:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	3bbccea32d	Update layout	2023-04-08 00:25:30 -04:00
tokslaw	be42244ce7	Merge branch 'refresh_link' of FloatSystems/float-www into master	2023-04-08 00:01:51 +00:00
tokslaw	80711232a3	Merge branch 'home-text-and-icons' of FloatSystems/float-www into master	2023-04-08 00:01:44 +00:00
victorAnumudu	a29fcffc2e	refresh broken link fixed	2023-04-08 00:54:39 +01:00
$DESKTOP-GBA0BK8\Admin$ DESKTOP-GBA0BK8\Admin	5295ad32f2	Clean up	2023-04-07 13:03:08 -04:00
Chukwumdiebube	e9044ed10f	added icon	2023-04-07 17:11:46 +01:00
Chukwumdiebube	c783cb8926	Added links to App Download	2023-04-07 16:28:02 +01:00
jenkins	0b74697fd1	map height modified	2023-04-07 09:19:11 -04:00
jenkins	c0c71ab005	map height added	2023-04-07 09:14:09 -04:00
tokslaw	a8711636a2	Merge branch 'googlemap_added' of FloatSystems/float-www into master	2023-04-07 13:07:43 +00:00