Merge branch 'blog_details' of FloatSystems/float-www into master

.env

@@ -9,3 +9,10 @@ REACT_APP_APPLE_LINK='https://apps.apple.com/us/app/float-mobility/id1465369130'
 REACT_APP_GOOGLE_PLAY_LINK='https://apps.apple.com/us/app/float-mobility/id1465369130'
 
 REACT_APP_AUX_ENDPOINT='https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/'
+
+REACT_APP_IMAGE_LINK='https://blog.float.sg/wp-content/uploads/'
+
+REACT_APP_FACEBOOK_LINK='https://www.facebook.com/tryfloat/'
+REACT_APP_INSTAGRAM_LINK='https://www.instagram.com/tryfloat/'
+REACT_APP_LINKEDIN_LINK='https://www.linkedin.com/company/float-mobility/'
+REACT_APP_TWITTER_LINK='https://twitter.com/tryfloat'

public/assets/css/style.css

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

src/App.js

@@ -26,21 +26,39 @@ import SiteService from "./svs/SiteService";
 
 function App() {
 	const [blogData, setBlogData] = useState([]) // for holding
+	const [faqData, setFaqData] = useState([]) // for holding
 	const siteApi = new SiteService(); // instantiating the API SERVICE
 	const getBlogData = async () => {
 		try {
 			const res = await siteApi.blogData();
 			if(res.status == 200 /* && res.data.status > 0*/){
-				console.log(res.data.payload);
+				console.log(res.data);
 				setBlogData(res.data)
 				return
 			}
 		}catch(error) {
+			setBlogData({blogdata: []})
 		}
 	};
 
+	const getFaqData = async () => {
+		try {
+			const res = await siteApi.faqData();
+			if(res.status == 200 /* && res.data.status > 0*/){
+				let data = await res.data
+				console.log(data);
+
+				setFaqData(data)
+				return
+			}
+		} catch (error) {
+			console.log(error)
+		}
+	}
+
 	useEffect(() => {
 		getBlogData();
+		getFaqData();
 	}, []);
 
   return (
@@ -48,23 +66,24 @@ function App() {
 
 	 <Header/>
    	    <Routes>
-			<Route path="/" element={<FloatHome blogData={blogData} />} />
+			<Route path="/" element={<FloatHome blogData={blogData} faqData={faqData} />} />
 			<Route path="/about" element={<About/>} />
-			<Route path="/faqs" element={<Faqs/>} />
+			<Route path="/faqs" element={<Faqs faqData={faqData}/>} />
 			<Route path="/features" element={<Features/>} />
 			<Route path="/pricing" element={<Pricing/>} />
 			<Route path="/reviews" element={<Reviews/>} />
 			<Route path="/single_post" element={<Single_post/>} />
+			<Route path="/sel_post" element={<Single_post/>} />
 			<Route path="/terms" element={<Terms/>} />
 			<Route path="/demo" element={<Demo/>} />
 			<Route path="/about" element={<About/>} />
 			<Route path="/blog_listing" 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>

src/components/BlogItems.js

@@ -0,0 +1,114 @@
+import React from 'react'
+import { useLocation, Link } from 'react-router-dom'
+// import SiteService from '../svs/SiteService';
+
+const BlogItems = ({blogData}) => {
+
+    let location = useLocation().pathname
+    // const [blogData, setBlogData] = useState({}) // for holding blogs
+    // console.log(blogData.payload)
+	// const blogApi = new SiteService(); // instantiating the API SERVICE
+	// const getBlogData = async () => {
+	// 	try {
+	// 		const res = await blogApi.blogData();
+	// 		if(res.status == 200 /* && res.data.status > 0*/){
+	// 			console.log('blogitem',res.data.payload, res.data);
+	// 			setBlogData(res.data)
+	// 			return
+	// 		}
+	// 	}catch(error) {
+	// 	}
+	// };
+
+	// useEffect(() => {
+	// 	getBlogData();
+	// }, []);
+
+  return (
+    <div className="row">
+        {
+            blogData?.blogdata == undefined ? // API CALL IN PROGRESS
+            // <div className='col-12 text-center display-4'>Loading...</div>
+            <div className="col-12 text-center">
+                <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+                </div>
+            </div>
+            :
+            // API CALL FINISHED
+            (
+                blogData?.blogdata.length < 1 ?
+                <div className='col-12 text-center display-4'>No Blog Currently Found!</div>
+                :
+                blogData?.blogdata.map((blog, index) => {
+                    if(location == '/blogs'){
+                        return(
+                            <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
+                                <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
+                                {/* BLOG POST IMAGE */}
+                                <div className="blog-post-img rounded">
+                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
+                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
+                                </div>
+                                {/* BLOG POST TEXT */}
+                                <div className="blog-post-txt">
+                                    {/* Post Tag */}
+                                    <p className="p-md post-tag">Float News</p>
+                                    {/* Post Link */}
+                                    <h5 className="h5-sm">
+                                    <Link to="/sel_post" state={{blog}}>{blog.post_title.substring(0,40)+'  . . .'}</Link>
+                                    </h5>
+                                    {/* Text */}
+                                    <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
+                                    {/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                                    congue
+                                    </p> */}
+                                    {/* Post Meta */}
+                                    <div className="post-meta">
+                                    <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                                    <p>12 min read</p>
+                                    </div>
+                                </div>
+                                </div>
+                            </div>
+                        )
+                    }else if (location != 'blogs' && index <= 5) {
+                        return (
+                            <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
+                                <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
+                                {/* BLOG POST IMAGE */}
+                                <div className="blog-post-img rounded">
+                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
+                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
+                                </div>
+                                {/* BLOG POST TEXT */}
+                                <div className="blog-post-txt">
+                                    {/* Post Tag */}
+                                    <p className="p-md post-tag">Float News</p>
+                                    {/* Post Link */}
+                                    <h5 className="h5-sm">
+                                    <Link to="/sel_post" state={{blog}}>{blog.post_title.substring(0,40)+'  . . .'}</Link>
+                                    </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

src/components/Footer.js

@@ -44,11 +44,17 @@ class Footer extends React.Component {
 									</div>
 								</div>
 								<div className="col-sm-6 col-md-8 col-lg-3">
+									<div className="pb-2 d-flex justify-content-lg-end">
+										<a href={process.env.REACT_APP_FACEBOOK_LINK} target="_blank"><span className="p-1 flaticon-facebook"></span></a>
+										<a href={process.env.REACT_APP_INSTAGRAM_LINK} target="_blank"><span className="p-1 flaticon-instagram"></span></a>
+										<a href={process.env.REACT_APP_LINKEDIN_LINK} target="_blank"><span className="p-1 flaticon-linkedin-sign"></span></a>
+										<a href={process.env.REACT_APP_TWITTER_LINK} target="_blank"><span className="p-1 flaticon-twitter"></span></a>
+									</div>
 									<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>

src/index.js

@@ -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(
+const rootElement = document.getElementById('root');
- // basename='/usr/src/app/build'
+const root = ReactDOM.createRoot(rootElement);
+
+root.render(
   <BrowserRouter>
     <App />
-  </BrowserRouter>,
+  </BrowserRouter>
-
-  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/About.js

@@ -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,11 +105,8 @@ class About extends React.Component {
                 </div>
               </div>	{/* END BUTTON */}
             </div>	   {/* End container */}	
-          </div>	{/* END ABOUT-2 */}
+          </div>	{/* END ABOUT-2 */}     
-          
+          {/* TEAM-1 */}
-       
-          {/* TEAM-1
-			============================================= */}
           <section id="team-1" className="wide-60 team-section division">
             <div className="container">
               {/* SECTION TITLE */}	
@@ -133,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 */}
@@ -148,16 +137,13 @@ class About extends React.Component {
                           <span><a href={href} className="grey-color">@{domain}</a></span>
                         </div>	
                       </div>									
-                    </div>	
+                    </div>
-                    {/* END TEAM MEMBER #1 */}
-                    </>
                   ))}
                 </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">
@@ -187,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>
         )

src/pages/Blog_listing.js

@@ -1,4 +1,6 @@
 import React, {Component,useState, useEffect} from 'react';
+import {Link} from 'react-router-dom'
+import BlogItems from '../components/BlogItems';
 import SiteService from "../svs/SiteService";
 
 class Blog_listing extends React.Component {
@@ -11,8 +13,8 @@ class Blog_listing extends React.Component {
     console.log("OLU-AMEY BLOG LISTING ",props.blogData);
   }
 
-
+  
-    render() {
+  render() {
      // const [blogData, setBlogData] = useState([]) // for holding
       //const siteApi = new SiteService(); // instantiating the API SERVICE
 
@@ -34,6 +36,7 @@ class Blog_listing extends React.Component {
           {/* HEADER
 			============================================= */}
           
+          
           {/* BLOG POSTS LISTING
 			============================================= */}
           <section id="blog-page" className="bg_whitesmoke hero-offset-nav pb-60 blog-page-section division">
@@ -52,35 +55,45 @@ class Blog_listing extends React.Component {
                 </div>
               </div>
               {/* FEATURED POST */}
-              <div className="rel blog-post featured-post wide-post">
+              {
-                <div className="row d-flex align-items-center">
+                this.props.blogData?.featured == undefined ?  // API CALL IN PROGRESS
-                  <div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
+                <div className="text-center">
-                    <span className="flaticon-star" />
+                    <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
-                  </div>
+                    </div>
-                  {/* BLOG POST IMAGE */}
+                </div>
-                  <div className="col-lg-7 blog-post-img">
+                :
-                    <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />	
+                <div className="rel blog-post featured-post wide-post">
-                  </div>
+                  <div className="row d-flex align-items-center">
-                  {/* BLOG POST TEXT */}
+                    <div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
-                  <div className="col-lg-5 blog-post-txt">
+                      <span className="flaticon-star" />
-                    {/* Post Tag */}
+                    </div>
-                    <p className="p-md post-tag">NordEx News</p>	
+                    {/* BLOG POST IMAGE */}
-                    {/* Post Link */}
+                    <div className="col-lg-7 blog-post-img">
-                    <h5 className="h5-xl">
+                      <img className="w-auto h-100" src={process.env.REACT_APP_IMAGE_LINK + this.props.blogData?.featured.meta_value} alt="blog-post-image" />
-                      <a href="single-post.html">Tempor sapien donec gravida a suscipit and porta justo vitae</a>
+                    </div>
-                    </h5>
+                    {/* BLOG POST TEXT */}
-                    {/* Text */}
+                    <div className="col-lg-5 blog-post-txt">
-                    <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 
+                      {/* Post Tag */}
-                      undo velna dolor in cubilia laoreet
+                      <p className="p-2 post-tag">Float News</p>	
-                    </p>
+                      {/* Post Link */}
-                    {/* Post Meta */}
+                      <h5 className="h5-xl">
-                    <div className="post-meta">
+                      <Link to="/sel_post" state={{blog:this.props.blogData?.featured}}>{this.props.blogData?.featured.post_title}</Link>
-                      <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                      </h5>
-                      <p>12 min read</p>
+                      {/* Text */}
-                    </div>	
+                      {/* <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 
-                  </div>	{/* END BLOG POST TEXT */}
+                        undo velna dolor in cubilia laoreet
-                </div>   {/* End row */}
+                      </p> */}
-              </div>	{/* END FEATURED POST */}
+                      <div className="p-2" dangerouslySetInnerHTML={{__html: this.props.blogData?.featured.post_content.substring(0,300)+'  . . .'}}></div>
+                      {/* Post Meta */}
+                      <div className="post-meta">
+                        <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                        <p>12 min read</p>
+                      </div>	
+                    </div>	{/* END BLOG POST TEXT */}
+                  </div>   {/* End row */}
+                </div>	
+              } {/* END FEATURED POST */}
+
               {/* POSTS WRAPPER */}
               <div className="posts-wrapper">
                 {/* BLOG POSTS CATEGORY */} 
@@ -89,172 +102,8 @@ class Blog_listing extends React.Component {
                     <h5 className="h5-lg posts-category">Latest Articles</h5>
                   </div>
                 </div>
-                <div className="row">
+                <BlogItems blogData={this.props.blogData} />
-                  {/* BLOG POST #1 */}
+                {/* End row */}
-                  <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 */}
               </div>	{/* END POSTS WRAPPER */}
             </div>     {/* End container */}
             {/* GEOMETRIC OVERLAY */}	

src/pages/Contacts.js

@@ -1,25 +1,94 @@
-import React, {Component} from 'react';
+import React, {Component, useState, useEffect} from 'react';
+import SiteService from '../svs/SiteService';
 
-class Contacts extends React.Component {
+class Contacts extends Component {
+  constructor(props){
+    super(props)
+
+    this.state = {
+      formData: {
+        name: '',
+        email: '',
+        country: '',
+        phone: '',
+        message: ''
+      },
+      loading: false,
+      submitError: null,
+      submitSuccess: false,
+    };
+  }
+
+  handleInputChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      formData: {
+        ...prevState.formData,
+        [name]: value,
+      },
+    }));
+  };
+
+  handleSubmit = async(e) => {
+    e.preventDefault();
+    const apiCall = new SiteService();
+    const { formData } = this.state;
+
+    this.setState({ loading: true });
+
+    if(!formData.name && !formData.email && !formData.message) return;
+
+    console.log(formData)
+
+    try {
+      await apiCall.contactData(formData)
+
+      console.log('Success')
+
+        this.setState({
+          formData: {
+            name: '',
+            email: '',
+            country: '',
+            phone: '',
+            message: ''
+          },
+          loading: false,
+          submitError: null,
+          submitSuccess: false,
+        });
+
+      // if(res.status == 200){
+        
+      // } else {
+      //   throw new Error('Error submitting form');
+      // }
+    } catch (error) {
+      this.setState({
+        loading: false,
+        submitSuccess: false,
+        submitError: error,
+      });
+      console.log(error)
+    }
+  }
+
+  
     render() {
+      const {formData, loading, submitError, submitSuccess} = this.state
+      console.log(submitSuccess)
         return(
             <div>
-
+        {/* PRELOADER SPINNER */}	
-
-        {/* PRELOADER SPINNER
-		============================================= */}	
         <div id="loader-wrapper">
           <div id="loading">
             <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
           </div>
         </div>
-        {/* PAGE CONTENT
+        {/* PAGE CONTENT */}	
-		============================================= */}	
         <div id="page" className="page">
-          {/* HEADER
+          {/* HEADER */}
-			============================================= */}
+          {/* CONTACTS-2 */}
-          {/* CONTACTS-2
-			============================================= */}
           <section id="contacts-2" className="bg_whitesmoke hero-offset-nav pb-50 contacts-section division">				
             <div className="container">
               {/* SECTION TITLE */}	
@@ -39,7 +108,7 @@ class Contacts extends React.Component {
               <div className="row">
                 <div className="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
                   <div className="form-holder">
-                    <form name="contactform" className="row contact-form">
+                    <form name="contactform" className="row contact-form" onSubmit={this.handleSubmit}>
                       {/* Form Select */}
                       <div id="input-subject" className="col-md-12 input-subject">
                         <p className="p-lg">This question is about: </p>
@@ -57,21 +126,23 @@ class Contacts extends React.Component {
                       <div id="input-name" className="col-md-12">
                         <p className="p-lg">Your Name: </p>
                         <span>Please enter your real name: </span>
-                        <input type="text" name="name" className="form-control name" placeholder="Your Name*" /> 
+                        <input type="text" name="name" className="form-control name" placeholder="Your Name*" value={formData.name} onChange={this.handleInputChange} /> 
                       </div>
                       <div id="input-email" className="col-md-12">
                         <p className="p-lg">Your Email Address: </p>
                         <span>Please carefully check your email address for accuracy</span>
-                        <input type="text" name="email" className="form-control email" placeholder="Email Address*" /> 
+                        <input type="text" name="email" className="form-control email" placeholder="Email Address*" value={formData.email} onChange={this.handleInputChange} /> 
                       </div>
                       <div id="input-message" className="col-md-12 input-message">
                         <p className="p-lg">Explain your question in details: </p>
-                        <span>Your OS version, NordEx version &amp; build, steps you did. Be VERY precise!</span>
+                        <span>Your OS version, steps you did. Be VERY precise!</span>
-                        <textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." defaultValue={""} />
+                        <textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." value={formData.message} onChange={this.handleInputChange} />
                       </div> 
                       {/* Contact Form Button */}
                       <div className="col-md-12 mt-15 form-btn text-right">	
-                        <button type="submit" className="btn btn-skyblue tra-skyblue-hover submit">Submit Request</button>	
+                        <button type="submit" className="btn btn-skyblue tra-skyblue-hover submit" disabled={loading}>
+                        {loading ? 'Submitting...' : 'Submit Request'}
+                        </button>	
                       </div>
                       {/* Contact Form Message */}
                       <div className="col-lg-12 contact-form-msg">

src/pages/Faqs.js

@@ -1,39 +1,16 @@
-import React, {Component} from 'react';
+import React, {Component, useState} from 'react';
-import SiteService from './assests/utils/SiteService';
 
 class Faqs extends Component {
-  constructor({data, loading, error}){
+  constructor(props){
-    super({data, loading, error})
+    super(props)
-    this.state = {
-      data: null,
-      loading: true,
-      error: null
-    }
   }
 
-  async componentDidMount() {
-    const apiCall = new SiteService
-    try {
-      const data = await apiCall.faqData();
-
-      this.setState = {
-        data: data,
-        loading: false
-      }
-    } catch (error) {
-      this.setState = {
-        error: error,
-        loading: false
-      }
-    }
-  }
     render() {
-      const {data, loading, error} = this.state
+      const data = this.props.faqData
-      console.log(data)
-      console.log(error)
         return(
             <div>
           {/* PRELOADER SPINNER */}	
+          {/* PRELOADER SPINNER */}	
         <div id="loader-wrapper">
           <div id="loading">
             <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
@@ -64,128 +41,40 @@ class Faqs extends Component {
                   {/* QUESTIONS HOLDER */}
                   <div className="col-lg-6">
                     <div className="questions-holder pc-10">
-                      {/* QUESTION #1 */}
+
-                      <div className="question wow fadeInUp" data-wow-delay="0.4s">
+                      {data.map((item, idx) => {
+                        let delay = 0.2
+                        if(idx % 2 === 0){
+                          delay *= Math.floor(idx / 2); // multiply delay by 2 for every odd idx
+                          return (
+                        <div className="question wow fadeInUp" data-wow-delay={delay} key={idx}>
                         {/* Question */}
-                        <h5 className="h5-sm">How do I get started?</h5>
+                        <h5 className="h5-sm">{item.title}</h5>
                         {/* Answer */}
-                        <ul className="simple-list">
+                        <p className="p-lg">{item.text}</p>
-                          <li className="list-item">
-                            <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
-                          </li>
-                          <li className="list-item">
-                            <p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet 
-                              augue luctus
-                            </p>
-                          </li>
-                        </ul>
                       </div>	
-                      {/* QUESTION #2 */}
+                          )
-                      <div className="question wow fadeInUp" data-wow-delay="0.6s">
+                        }
-                        {/* Question */}
+                      })}
-                        <h5 className="h5-sm">Can I see Float in action before purchasing it?</h5>
-                        {/* Answer */}
-                        <p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit 
-                          ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
-                        </p>
-                      </div>	
-                      {/* QUESTION #3 */}					
-                      <div className="question wow fadeInUp" data-wow-delay="0.8s">
-                        {/* Question */}
-                        <h5 className="h5-sm">What are the requirements for using Float?</h5>
-                        {/* Answer */}
-                        <p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna 
-                          vitae auctor integer congue undo magna at pretium purus pretium ligula 
-                        </p>
-                      </div>
-                      {/* QUESTION #4 */}					
-                      <div className="question wow fadeInUp" data-wow-delay="1s">
-                        {/* Question */}
-                        <h5 className="h5-sm">Can I use Float on different devices?</h5>
-                        {/* Answer */}
-                        <ul className="simple-list">
-                          <li className="list-item">
-                            <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus ligula euismod pretium purus
-                              pretium rutrum tempor sapien
-                            </p>
-                          </li>
-                          <li className="list-item">
-                            <p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo 
-                              pretium a purus
-                            </p>
-                          </li>
-                        </ul>
-                      </div>
-                      {/* QUESTION #5 */}					
-                      <div className="question wow fadeInUp" data-wow-delay="1.2s">
-                        {/* Question */}
-                        <h5 className="h5-sm">Do you have a free trial?</h5>
-                        {/* Answer */}
-                        <p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and 
-                          quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
-                        </p>
-                      </div>
                     </div>
                   </div>	{/* END QUESTIONS HOLDER */}
                   {/* QUESTIONS HOLDER */}
                   <div className="col-lg-6">
                     <div className="questions-holder pc-10">
-                      {/* QUESTION #6 */}					
+                    {data.map((item, idx) => {
-                      <div className="question wow fadeInUp" data-wow-delay="0.4s">
+                        let delay = 0.2
+                        if(idx % 2 === 1){
+                          delay *= Math.floor(idx / 2); // multiply delay by 2 for every even idx
+                          return (
+                        <div className="question wow fadeInUp" data-wow-delay={delay} key={idx}>
                         {/* Question */}
-                        <h5 className="h5-sm">Troubles with verification</h5>
+                        <h5 className="h5-sm">{item.title}</h5>
                         {/* Answer */}
-                        <p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and 
+                        <p className="p-lg">{item.text}</p>
-                          quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
-                        </p>
-                      </div>
-                      {/* QUESTION #7 */}
-                      <div className="question wow fadeInUp" data-wow-delay="0.6s">
-                        {/* Question */}
-                        <h5 className="h5-sm">How does Float handle my privacy?</h5>
-                        {/* Answer */}
-                        <p className="p-lg">Etiam amet mauris suscipit sit amet in odio. Integer congue leo metus. Vitae arcu mollis 
-                          blandit ultrice ligula
-                        </p>
-                        {/* Answer */}
-                        <p className="p-lg">An enim nullam tempor sapien gravida donec congue leo metus. Vitae arcu mollis blandit 
-                          integer at velna
-                        </p>
-                      </div>
-                      {/* QUESTION #8 */}
-                      <div className="question wow fadeInUp" data-wow-delay="0.8s">
-                        {/* Question */}
-                        <h5 className="h5-sm">I have an issue with my account</h5>
-                        {/* Answer */}
-                        <ul className="simple-list">
-                          <li className="list-item">
-                            <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
-                          </li>
-                          <li className="list-item">
-                            <p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet 
-                              augue luctus
-                            </p>
-                          </li>
-                        </ul>
-                      </div>
-                      {/* QUESTION #9 */}
-                      <div className="question wow fadeInUp" data-wow-delay="1s">
-                        {/* Question */}
-                        <h5 className="h5-sm">What is the Float Membership?</h5>
-                        {/* Answer */}
-                        <p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit 
-                          ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
-                        </p>
                       </div>	
-                      {/* QUESTION #10 */}					
+                          )
-                      <div className="question wow fadeInUp" data-wow-delay="1.2s">
+                        }
-                        {/* Question */}
+                      })}
-                        <h5 className="h5-sm">How do I cancel my Membership?</h5>
-                        {/* Answer */}
-                        <p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna 
-                          vitae auctor integer congue undo magna at pretium purus pretium ligula 
-                        </p>
-                      </div>
                     </div>
                   </div>	{/* END QUESTIONS HOLDER */}
                 </div>	{/* End row */}
@@ -227,11 +116,11 @@ class Faqs extends 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>	
@@ -241,7 +130,7 @@ class Faqs extends Component {
             </div>	   {/* End container */}	
           </section>	{/* END DOWNLOAD-2 */}
         </div>	{/* END PAGE CONTENT */}
-      </div>
+            </div>
         )
     }
 }

src/pages/FloatHome.js

@@ -13,6 +13,8 @@ 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 {
 
@@ -21,10 +23,12 @@ class FloatHome extends React.Component {
     // Don't call this.setState() here!
    // this.state = { counter: 0 };
     // this.handleClick = this.handleClick.bind(this);
-    console.log("OLU-AMEY 22",props.blogData);
+    // console.log("OLU-AMEY 22",props.blogData);
   }
 
     render() {
+      const faqData = this.props.faqData
+      console.log(faqData)
         return(
             <div>
         {/* PRELOADER SPINNER	============================================= */}	
@@ -880,114 +884,49 @@ class FloatHome extends React.Component {
                 {/* QUESTIONS ACCORDION */}
                 <div className="col-lg-8">
                   <div id="accordion" role="tablist" className="pc-20">
-                    {/* QUESTION #1 */}
+                    {faqData.map((item, idx) => {
-                    <div className="card grey-color">
+                      if(idx == 0){
+                        return(
+                         <div className="card grey-color" key={idx}>
+                         {/* Question */}
+                         <div className="card-header" role="tab" id="headingOne">
+                           <h5 className="h5-sm">
+                             <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
+                               {item.title}
+                             </a>
+                           </h5>
+                         </div>
+                         {/* Answer */}
+                         <div id="collapseOne" className="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
+                           <div className="card-body">
+                             {/* Text */}	
+                             <p className="p-lg">{item.text}</p>	
+                           </div>
+                         </div>
+                       </div>	
+                        )
+                      }else{
+                        return(
+                          <div className="card grey-color" key={idx}>
                       {/* Question */}
-                      <div className="card-header" role="tab" id="headingOne">
+                      <div className="card-header" role="tab" id={`heading${idx}`}>
                         <h5 className="h5-sm">
-                          <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
+                          <a className="collapsed" data-toggle="collapse" href={`#collapse${idx}`} role="button" aria-expanded="false" aria-controls={`collapse${idx}`}>
-                            Can I see Float in action before purchasing it?
+                            {item.title}
                           </a>
                         </h5>
                       </div>
                       {/* Answer */}
-                      <div id="collapseOne" className="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
+                      <div id={`collapse${idx}`} className="collapse" role="tabpanel" aria-labelledby={`heading${idx}`} data-parent="#accordion">
                         <div className="card-body">
                           {/* Text */}	
-                          <p className="p-lg">Maecenas gravida porttitor quis vehicula magna luctus tempor. Quisque vel laoreet 
+                          <p className="p-lg">{item.text}</p>
-                            turpis. Viverra urna augue, a augue dictum tempor. Sed pulvinar nibh consectetur varius viverra. 
-                            Laoreet augue ac massa lorem nulla
-                          </p>	
                         </div>
                       </div>
-                    </div>	{/* END QUESTION #1 */}
+                    </div>
-                    {/* QUESTION #2 */}
+                        )
-                    <div className="card grey-color">
+                      }
-                      {/* Question */}
+                    })}
-                      <div className="card-header" role="tab" id="headingTwo">
-                        <h5 className="h5-sm">
-                          <a className="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
-                            I’ve got iPhone 5. Is Float compatible with it?
-                          </a>
-                        </h5>
-                      </div>
-                      {/* Answer */}
-                      <div id="collapseTwo" className="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
-                        <div className="card-body">
-                          {/* Text */}	
-                          <p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum 
-                            vitae purus an efficitur ipsum primis in cubilia laoreet augue egestas luctus donec curabitur 
-                            dapibus libero tempor
-                          </p>
-                        </div>
-                      </div>
-                    </div>	{/* END QUESTION #2 */}
-                    {/* QUESTION #3 */}
-                    <div className="card grey-color">
-                      {/* Question */}
-                      <div className="card-header" role="tab" id="headingThree">
-                        <h5 className="h5-sm">
-                          <a className="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
-                            What are the requirements for using Float?
-                          </a>
-                        </h5>
-                      </div>
-                      {/* Answer */}
-                      <div id="collapseThree" className="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
-                        <div className="card-body">
-                          {/* Text */}	
-                          <p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas and magna 
-                            ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
-                          </p>
-                          {/* Text */}	
-                          <p className="p-lg">Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus laoreet 
-                            gestas neque vitae auctor eros dolor luctus placerat a magna cursus congue magna nihil mpedit 
-                            ligula sem congue tempor gravida
-                          </p>
-                        </div>
-                      </div>
-                    </div>	  {/* END QUESTION #3 */}
-                    {/* QUESTION #4 */}
-                    <div className="card grey-color">
-                      {/* Question */}
-                      <div className="card-header" role="tab" id="headingFour">
-                        <h5 className="h5-sm">
-                          <a className="collapsed" data-toggle="collapse" href="#collapseFour" role="button" aria-expanded="false" aria-controls="collapseFour">   		
-                            How does Float handle my privacy?
-                          </a>
-                        </h5>
-                      </div>
-                      {/* Answer */}
-                      <div id="collapseFour" className="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordion">
-                        <div className="card-body">
-                          {/* Text */}
-                          <p className="p-lg">An augue cubilia laoreet and magna suscipit egestas magna ipsum purus ipsum primis 
-                            and augue ultrice ligula egestas suscipit lectus gestas integer congue a lectus porta tristique phasellus neque blandit and tristique
-                          </p> 
-                        </div>
-                      </div>
-                    </div>	  {/* END QUESTION #4 */}
-                    {/* QUESTION #5 */}
-                    <div className="card last-card grey-color">
-                      {/* Question */}
-                      <div className="card-header" role="tab" id="headingFive">
-                        <h5 className="h5-sm">
-                          <a className="collapsed" data-toggle="collapse" href="#collapseFive" role="button" aria-expanded="false" aria-controls="collapseFive">   		
-                            How can I cancel my account?
-                          </a>
-                        </h5>
-                      </div>
-                      {/* Answer */}
-                      <div id="collapseFive" className="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordion">
-                        <div className="card-body">
-                          {/* Text */}
-                          <p className="p-lg">Curabitur ac dapibus libero. Quisque eu congue tristique neque. Phasellus blandit 
-                            tristique justo undo aliquam. Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non 
-                            molestie sed purus, venenatis sem tempor
-                          </p> 
-                        </div>
-                      </div>
-                    </div>	  {/* END QUESTION #5 */}
                   </div>	{/* END ACCORDION */}
                   {/* MORE QUESTIONS BUTTON */}		
                   <div className="more-questions pc-20 mt-35">
@@ -1049,120 +988,8 @@ class FloatHome extends React.Component {
                 </div>
               </div>
               {/* BLOG POSTS */}
-              <div className="row">
+              	<BlogItems blogData={this.props.blogData}/>
-                {
+              {/* END BLOG POSTS */}
-                  this.props.blogData?.blogdata?.map((x) => {
-                    <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">{x.title}</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>
-                  })
-                }
-                {/* 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 */}
             </div>	   {/* End container */}		
           </section>	{/* END BLOG-1 */}
           {/* DOWNLOAD-5

src/pages/GetStarted.js

@@ -4,8 +4,17 @@ 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>
@@ -41,7 +50,7 @@ class GetStarted extends React.Component {
                                 <div className="row">
                                     {/* FEATURE BOX #1 */}
                                     <div id="fb-3-1" className="col-md-6 col-lg-3">
-                                        <a href="https://float-usr.dev.chiefsoft.net/" target="_blank"><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"><img src={UserFriendly} /></div>
                                             {/* Title */}
@@ -52,7 +61,7 @@ class GetStarted extends React.Component {
                                     </div>
                                     {/* FEATURE BOX #2 */}
                                     <div id="fb-3-2" className="col-md-6 col-lg-3">
-                                        <a href="https://float-flt.dev.chiefsoft.net/"  target="_blank"><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"><img src={FleetMgr} /></div>
                                             {/* Title */}
@@ -359,89 +368,8 @@ class GetStarted extends React.Component {
                                 </div>
                             </div>
                             {/* BLOG POSTS */}
-                            <div className="row">
+                            <BlogItems blogData={this.props.blogData} />
-                                {/* BLOG POST #1 */}
+                        	{/* END BLOG POSTS */}
-                                <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 */}
                         </div>	   {/* End container */}
                     </section>	{/* END BLOG-1 */}
                     {/* NEWSLETTER-1

src/pages/Single_post.js

@@ -1,434 +1,271 @@
-import React, {Component} from 'react';
+import React, {Component, useEffect, useState} from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-class Single_post extends React.Component {
+let Single_post = ()=> {
-    render() {
+  const navigate = useNavigate()
-        return(
-            <div>
 
+  let {state} = useLocation()
+  console.log(state)
 
-        {/* PRELOADER SPINNER
+  let [pageLoading, setPageloading] = useState(true)
-		============================================= */}	
-        <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">
-         
-          {/* SINGLE POST
-			============================================= */}
-          <section id="single-post" className="bg_whitesmoke hero-offset-nav pb-80 single-post-section division">
-            <div className="container">
-              {/* SINGLE POST CONTENT */}
-              <div className="row">
-                <div className="col-lg-10 offset-lg-1">
-                  <div className="single-post-wrapper">
-                    {/* SINGLE POST TITLE */}
-                    <div className="single-post-title">
-                      {/* CATEGORY */}
-                      <p className="p-lg post-tag skyblue-color">Float News</p>
-                      {/* TITLE */}
-                      <h4 className="h4-xl">Aliquam augue Float, luctus neque purus an ipsum and neque dolor libero</h4>
-                      {/* POST DATA */}
-                      <div className="post-data clearfix">
-                        {/* Author Avatar */}
-                        <div className="post-author-avatar">
-                          <img src="assets/images/post-author-1.jpg" alt="author-avatar" />
-                        </div>
-                        {/* Author Data */}
-                        <div className="post-author">
-                          <span>Gordon Wright <a href="#" className="follow-author">Follow</a></span>	
-                          <span>April 05 - 12 min read</span>	
-                        </div>
-                      </div>	{/* END POST DATA */}
-                    </div>	{/* END SINGLE POST TITLE */}
-                    {/* BLOG POST TEXT */}
-                    <div className="single-post-txt">
-                      {/* Text */}
-                      <p className="p-lg">Mauris donec ociis et magnis sapien etiam sapien sem sagittis congue tempor gravida donec 
-                        and ipsum aporta justo integer at odio velna. Maecenas gravida porttitor nunc vehicula magna luctus tempor. Quisque vel laoreet turpis. An augue viverra a augue eget, dictum tempor pulvinar donec ociis et magnis 
-                        sapien imperdiet dui varius placerat imperdiet ipsum varius viverra augue egestas luctus donec purus and 
-                        blandit impedit ligula risus. Mauris donec
-                      </p>
-                    </div>	{/* END BLOG POST TEXT */}
-                    {/* BLOG POST INNER IMAGE */}
-                    <div className="post-inner-img">
-                      <img className="img-fluid" src="assets/images/blog/inner-img-1.jpg" alt="blog-post-image" />		
-                    </div>
-                    {/* BLOG POST TEXT */}
-                    <div className="single-post-txt">
-                      {/* Text */}
-                      <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor 
-                        massa congue magna nihil impedit ligula risus. Mauris donec ociis and magnis sapien etiam sapien sagittis 
-                        congue tempor a gravida donec enim ipsum porta justo integer undo odio velna. Maecenas gravida porttitor nunc, quis vehicula magna at luctus tempor. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum 
-                        tempor diam. Sed pulvinar consectetur nibh, vel imperdiet dui varius viverra. Pellentesque ac massa lorem 
-                        fusce eu tempor gravida porttitor cursus fusce
-                      </p>
-                      {/* List */}
-                      <ol className="digit-list">
-                        <li><p className="p-lg">Donec dolor suscipit magna vehicula impedit ligula risus. Mauris donec ociis magnis 
-                            sapien etiam and sapien sem sagittis congue tempor gravida porttitor nunc, quis vehicula magna 
-                          </p></li>
-                        <li><p className="p-lg">Placerat imperdiet dui varius consectetur nibh, vel imperdiet dui varius viverra donec 
-                            ociis magnis
-                          </p></li>
-                        <li><p className="p-lg">Cubilia laoreet augue egestas cursus magna nihil impedit ligula risus. Mauris donec et magnis sapien etiam sapien rutrum tempor mullam blandit tempor sapien and gravida
-                          </p></li>
-                        <li><p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet turpis 
-                            urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat donec 
-                          </p></li>
-                      </ol>
-                      {/* Small Title */}
-                      <h5 className="h5-md mt-50">Praesent aliquet tempus<br />
-                        (tempor gravida ipsum as an example)
-                      </h5>
-                      {/* List */}
-                      <ul className="simple-list">
-                        <li className="list-item">
-                          <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida 
-                            ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
-                          </p>
-                        </li>
-                        <li className="list-item">
-                          <p className="p-lg">Fringilla risus nec, luctus mauris orci auctor euismod purus pretium purus pretium 
-                            ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
-                          </p>
-                        </li>
-                        <li className="list-item">
-                          <p className="p-lg">Quaerat sodales sapien undo euismod purus blandit velna vitae auctor a congue magna 
-                            tempor sapien eget gravida laoreet turpis urna augue, viverra a augue eget, dictum tempor diam 
-                            pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
-                          </p>
-                        </li>
-                      </ul>
-                      {/* Text */}
-                      <p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus 
-                        efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabitur dapibus libero. Mauris 
-                        donec ociis a neque. Phasellus blandit tristique justo and aliquam vitae molestie nunc sapien justo, aliquet 
-                        non molestie augue, venenatis nec purus aliquam eget lacinia elit tincidunt 
-                      </p> 
-                      {/* BLOG POST INNER IMAGES */}
-                      <div className="post-inner-img">
-                        <div className="row">
-                          {/* Inner Image #1 */}
-                          <div className="col-md-6 top-img blog-post-img">
-                            {/* Image */}
-                            <img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />		
-                            {/* Text */}
-                            <p>Maecenas gravida porttitor nunc magna</p>
-                          </div>
-                          {/* Inner Image #2 */}
-                          <div className="col-md-6 blog-post-img">
-                            {/* Image */}
-                            <img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />		
-                            {/* Text */}
-                            <p>Gravida porttitor nunc, quis vehicula tempor</p>
-                          </div>
-                        </div>
-                      </div>	{/* END INNER IMAGES */}
-                      {/* Text */}  
-                      <p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus and netus 
-                        laoreet malesuada famesa augue suscipit, luctus at neque purus neque dolor primis. Nemo sodales ipsam egestas volute turpis a dolores aliquam quaerat sodales sapien congue augue eget gravida laoreet turpis urna augue, viverra a augue eget, dictum dictum tempor diam pulvinar consectetur 
-                      </p>
-                      {/* List */}
-                      <ul className="simple-list">
-                        <li className="list-item">
-                          <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida 
-                            ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
-                          </p>
-                        </li>
-                        <li className="list-item">
-                          <p className="p-lg">Fringilla risus nec, luctus mauris orci auctor euismod purus pretium at purus pretium 
-                            ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
-                          </p>
-                        </li>
-                      </ul>
-                      {/* Small Title */}
-                      <h5 className="h5-md">Egestas volutpat egestas</h5>
-                      {/* Text */}  
-                      <p className="p-lg">In at mauris vel nisl convallis porta at vitae dui. Nam lacus ligula, vulputate molestie bibendum 
-                        quis, aliquet elementum massa. Vestibulum ut sagittis odio. Ac massa lorem. Fusce eu cursus est. Fusce non nulla vitae massa placerat vulputate vel a purus aliqum mullam blandit 
-                      </p>
-                      {/* Text */}
-                      <p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet a turpis urna
-                        augue, viverra a augue eget, dictum tempor diam. Sed pulvinar nibh, vel imperdiet congue varius viverra.
-                        Sapien justo massa lorem. Fusce eu cursus non nulla vitae massa placerat purus.  Sagittis congue augue egestas
-                        volutpat egestas magna suscipit egestas magna ipsum vitae purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec
-                      </p>
-                      {/* BLOG POST INNER IMAGE */}
-                      <div className="post-inner-img">
-                        <div className="video-preview pc-15">	
-                          {/* Play Icon */} 
-                          <a className="video-popup1" href="https://www.youtube.com/embed/SZEflIVnhH8">							
-                            <div className="video-btn video-btn-lg bg_rose ico-75">	
-                              <div className="video-block-wrapper"><span className="flaticon-play-button-1" /></div>
-                            </div>
-                          </a>
-                          {/* Preview Image */} 
-                          <img className="img-fluid" src="assets/images/blog/inner-img-2.jpg" alt="blog-post-image" />
-                        </div>	
-                      </div>
-                      {/* Small Title */}
-                      <h5 className="h5-md">Vitae massa placerat vulputate</h5>
-                      {/* Text */}  
-                      <p className="p-lg">Nullam non scelerisque lectus. In at mauris vel nisl convallis porta at vitae dui. Nam lacus 
-                        vulputate ligula molestie bibendum quis, aliquet elementum massa. Vestibulum ut sagittis purus massa lorem. 
-                        Fusce eu cursus est. Fusce non nulla vitae massa placerat vulputate purus. Aliqum mullam a blandit tempor 
-                        posuere ligula varius congue cursus congue magna impedit ligula
-                      </p>
-                      {/* Text */}
-                      <p className="p-lg"><span className="txt-500">Aliqum  mullam blandit tempor sapien gravida donec ipsum</span>, at porta 
-                        justo. Velna vitae and auctor congue magna impedit ligula risus. Mauris donec ociis magnis sapien etiam 
-                        sapien sagittis congue posuere ligula varius congue cursus tempor gravida donec integer
-                      </p>
-                      {/* Small Title */}
-                      <h5 className="h5-md">Cursus non nulla vitae massa</h5>
-                      {/* List */}
-                      <ul className="simple-list">
-                        <li className="list-item">
-                          <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Gravida ultrices 
-                            felis faucibus aliquet undo tempus, blandit posuere ligula varius congue cursus nulla vitae massa placerat vulputate tempor sapien gravida
-                          </p>
-                        </li>
-                        <li className="list-item">
-                          <p className="p-lg">Aliquam varius neque commodo purus  tempor sapien gravida vulputate pharetra bibendum 
-                            in ante ornare
-                          </p>
-                        </li>
-                        <li className="list-item">
-                          <p className="p-lg">Morbi dui lectus, lobortis felis nec, suscipit imperdiet sapien semper ultrices. Nulla 
-                            tincidunt volutpat and tincidunt. Habitant morbi tristique senectus et netus malesuada famesa augue
-                            suscipit, luctus neque purus ipsum
-                          </p>
-                        </li>
-                      </ul>
-                      {/* Text */}
-                      <p className="p-lg">Curabitur ac dapibus libero quisque eu tristique neque sellus blandit tristique justo ut aliquam.
-                        Aliquam vitae at molestie nunc sapien justo, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia
-                        tincidunt massa justo. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum tempor diam. Sed
-                        pulvinar consectetur nibh, vel imperdiet varius viverra. Pellentesque ac massa lorem. Fusce eu cursus est. 
-                        Fusce non nulla vitae massa placerat bulum tincidunt tincidunt massa, et porttitor justo viverra a augue eget
-                      </p> 
-                    </div>	{/* END BLOG POST TEXT */}
-                    {/* SINGLE POST SHARE LINKS */}
-                    <div className="row post-share-links d-flex align-items-center">
-                      {/* POST TAGS */}
-                      <div className="col-md-9 col-xl-8 post-tags-list">
-                        <span><a href="#">Life</a></span>	
-                        <span><a href="#">Ideas</a></span>
-                        <span><a href="#">Story</a></span>	
-                        <span><a href="#">Web Design</a></span>										
-                      </div>
-                      {/* POST SHARE ICONS */}
-                      <div className="col-md-3 col-xl-4 post-share-list text-right">
-                        <ul className="share-social-icons ico-25 text-center clearfix">														
-                          <li><a href="#" className="share-ico ico-facebook"><span className="flaticon-twitter" /></a></li>
-                          <li><a href="#" className="share-ico ico-twitter"><span className="flaticon-facebook" /></a></li>
-                          <li><a href="#" className="share-ico ico-like"><span className="flaticon-bookmark-white" /></a></li>			
-                        </ul>
-                      </div>
-                    </div>	{/* END SINGLE POST SHARE */}
-                    {/* OTHER POSTS
-								============================================= */}
-                    <div className="other-posts">
-                      <div id="op-row" className="row d-flex align-items-center">
-                        {/* Previous Post */}
-                        <div className="col-md-5">
-                          <div className="prev-post mb-30 pr-45">								
-                            <h5 className="h5-sm">Previous Post</h5>
-                            <a href="single-post.html">Congue bulum Float tincidunt at purus pretium magnis</a>
-                          </div>
-                        </div>
-                        {/* All Posts */}
-                        <div className="col-md-2 text-center">
-                          <div className="all-posts ico-35 mb-30">		
-                            <a href="blog-listing.html"><span className="flaticon-four-black-squares" /></a>
-                          </div>
-                        </div>
-                        {/* Next Post */}
-                        <div className="col-md-5 text-right">
-                          <div className="next-post mb-30 pl-45">		
-                            <h5 className="h5-sm">Next Post</h5>
-                            <a href="single-post.html">8 neque dolor primis a libero tempus augue tempor</a>
-                          </div>
-                        </div>
-                      </div>	  {/* End row */}		
-                    </div>	{/* END OTHER POSTS */}
-                  </div>
-                </div>
-              </div>	{/* END SINGLE POST CONTENT */}
-            </div>     {/* End container */}
-            {/* GEOMETRIC OVERLAY */}	
-            <div className="bg_fixed geometric_overlay" />
-          </section>	{/* END SINGLE POST */}
-          {/* POST COMMENTS
-			============================================= */}
-          <section id="post-comments" className="bg_whitesmoke pb-80 post-comments division">
-            <div className="container">	
-              <div className="row">
-                {/* COMMENTS WRAPPER */}
-                <div className="col-lg-10 offset-lg-1">
-                  <div className="comments-wrapper">
-                    {/* Title */}	
-                    <h5 className="h5-lg">4 Comments</h5>	
-                    {/* COMMENT #1 */}
-                    <div className="media">
-                      {/* Comment-1 Avatar */}
-                      <img className="mr-3" src="assets/images/post-author-1.jpg" alt="comment-avatar" />
-                      <div className="media-body">
-                        {/* Comment-1 Meta */}
-                        <div className="comment-meta">
-                          <h5 className="h5-sm mt-0">Thomas</h5>						
-                          <span className="comment-date">5 days ago - </span>
-                          <span className="btn-reply ico-20">
-                            <a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
-                          </span>
-                        </div>
-                        {/* Comment-1 Text */}	
-                        <p className="p-lg mb-40">Etiam sapien sem magna at vitae pulvinar congue augue egestas pretium neque undo viverra
-                          suscipit egestas magna porta ratione, mollis risus lectus porta rutrum aenean primis in augue luctus neque purus ipsum neque dolor primis purus efficitur an ipsum primis in cubilia laoreet augue
-                        </p>
-                        <hr />
-                        {/* COMMENT #2 */}
-                        <div className="media">
-                          {/* Comment-2 Avatar */}
-                          <a href="#" className="pr-3">
-                            <img src="assets/images/post-author-2.jpg" alt="comment-avatar" />
-                          </a>
-                          <div className="media-body">
-                            {/* Comment-2 Meta */}
-                            <div className="comment-meta">
-                              <h5 className="h5-sm mt-0">David Clark</h5>
-                              <span className="comment-date">6 days ago - </span>
-                              <span className="btn-reply ico-20">
-                                <a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
-                              </span>
-                            </div>
-                            {/* Comment-2 Text */}	
-                            <p className="p-lg">Etiam sapien magna at vitae pulvinar congue egestas a pretium neque viverra suscipit
-                              porta ratione, mollis risus lectus porta aliquet lorem puruss mollis 
-                            </p>
-                          </div>											      
-                        </div>	{/* END COMMENT #2 */}
-                      </div>
-                    </div>	{/* END COMMENT #1 */}
-                    <hr />
-                    {/* COMMENT #3 */}
-                    <div className="media">
-                      {/* Comment-4 Avatar */}
-                      <img className="mr-3" src="assets/images/post-author-3.jpg" alt="comment-avatar" />
-                      <div className="media-body">
-                        {/* Comment-4 Meta */}
-                        <div className="comment-meta">
-                          <h5 className="h5-sm mt-0">Jasmine</h5>
-                          <span className="comment-date">13 days ago - </span>
-                          <span className="btn-reply ico-20">
-                            <a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
-                          </span>
-                        </div>
-                        {/* Comment-4 Text */}	
-                        <p className="p-lg">Porta ratione, mollis risus lectus porta rutrum arcu aenean primis in augue luctus and neque
-                          purus ipsum neque dolor primis libero tempus, tempor posuere ligula varius an impedit enim tempor vitae 
-                          pulvinar at congue augue egestas. Praesent aliquet lorem purus, quis mollis nisi laoreet
-                        </p>
-                      </div>
-                    </div>	{/* END COMMENT #3 */}	
-                    <hr />
-                    {/* COMMENT #4 */}
-                    <div className="media">
-                      {/* Comment-4 Avatar */}
-                      <img className="mr-3" src="assets/images/post-author-4.jpg" alt="comment-avatar" />
-                      <div className="media-body">
-                        {/* Comment-4 Meta */}
-                        <div className="comment-meta">
-                          <h5 className="h5-sm mt-0">Rady Smith</h5>
-                          <span className="comment-date">42 days ago - </span>
-                          <span className="btn-reply ico-20">
-                            <a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
-                          </span>
-                        </div>
-                        {/* Comment-4 Text */}	
-                        <p className="p-lg">Etiam sapien sem magna at vitae pulvinar congue augue egestas pretium neque undo viverra
-                          suscipit  egestas magna porta ratione, mollis risus lectus porta rutrum arcu an aenean primis auctor
-                        </p>
-                      </div>
-                    </div>	{/* END COMMENT #4 */}	
-                    <hr />	
-                    {/* COMMENT FORM */}
-                    <div id="leave-comment">
-                      {/* Title */}
-                      <h5 className="h5-lg">Leave a Comment</h5>
-                      {/* Text */}
-                      <p className="p-md">Your email address will not be published. Required fields are marked *</p>
-                      <form name="commentForm" className="row comment-form">
-                        <div className="col-md-12 input-message">
-                          <p>Add Comment *</p>
-                          <textarea className="form-control message" name="message" rows={6} placeholder="Enter Your Comment Here* ..." required defaultValue={""} />
-                        </div> 
-                        <div className="col-md-12">
-                          <p>Name*</p>
-                          <input type="text" name="name" className="form-control name" placeholder="Enter Your Name*" required /> 
-                        </div>
-                        <div className="col-md-12">
-                          <p>Email*</p>
-                          <input type="email" name="email" className="form-control email" placeholder="Enter Your Email*" required /> 
-                        </div>
-                        {/* Contact Form Button */}
-                        <div className="col-lg-12 form-btn"> 						                 
-                          <button type="submit" className="btn btn-skyblue tra-skyblue-hover submit">Post Comment</button> 
-                        </div>
-                        {/* Contact Form Message */}
-                        <div className="col-md-12 comment-form-msg text-center">
-                          <div className="sending-msg"><span className="loading" /></div>
-                        </div>  
-                      </form>									
-                    </div>	{/* END COMMENT FORM */}
-                  </div>
-                </div>	{/* END COMMENTS WRAPPER */}	
-              </div>     {/* End row */}
-            </div>     {/* End container */}
-          </section>	{/* END POST COMMENTS */}	
-          {/* NEWSLETTER-1
-			============================================= */}
-          <section id="newsletter-1" className="bg_whitesmoke pb-20 newsletter-section division">
-            <div className="container">
-              <div className="newsletter-wrapper bg-white">
-                <div className="row d-flex align-items-center">
-                  {/* SECTION TITLE */}	
-                  <div className="col-lg-6">
-                    <div className="newsletter-txt">	
-                      {/* Section ID */}	
-                      <span className="section-id">Subscribe to Our Newsletter</span>
-                      {/* Title */}	
-                      <h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>	
-                    </div>								
-                  </div>
-                  {/* NEWSLETTER FORM */}
-                  <div className="col-lg-6">
-                    <form className="newsletter-form">
-                      <div className="input-group">
-                        <input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />								
-                        <span className="input-group-btn">
-                          <button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</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>	   {/* End container */}	
-          </section>	{/* END NEWSLETTER-1 */}
-         
-        </div>	{/* END PAGE CONTENT */}
-     
 
-
+  useEffect(()=>{
-            </div>
+    if(state == null) {
-        )
+      navigate('/', {replace: true})
     }
+    let pageLoadingTimeout = setTimeout(()=>{
+      setPageloading(false)
+    },3000)
+    return ()=>{
+      clearInterval(pageLoadingTimeout)
+    }
+  }, [])
+
+  return(
+
+    pageLoading ? 
+    <div className='row p-5 mt-5'>
+      <div className="col-12 text-center p-5 mt-5">
+          <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+          </div>
+      </div>
+    </div>
+    :
+    <div>
+
+
+      {/* 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">
+      
+        {/* SINGLE POST
+    ============================================= */}
+        <section id="single-post" className="bg_whitesmoke hero-offset-nav pb-80 single-post-section division">
+          <div className="container">
+            {/* SINGLE POST CONTENT */}
+            <div className="row">
+              <div className="col-lg-10 offset-lg-1">
+                <div className="single-post-wrapper">
+                  {/* SINGLE POST TITLE */}
+                  <div className="single-post-title">
+                    {/* CATEGORY */}
+                    <p className="p-lg post-tag skyblue-color">Float News</p>
+                    {/* TITLE */}
+                    <h4 className="h4-xl">{state.blog.post_title}</h4>
+                    {/* POST DATA */}
+                    <div className="post-data clearfix">
+                      {/* Author Avatar */}
+                      <div className="post-author-avatar">
+                        <img src="assets/images/post-author-1.jpg" alt="author-avatar" />
+                      </div>
+                      {/* Author Data */}
+                      <div className="post-author">
+                        <span>Gordon Wright <a href="#" target='_blank' className="follow-author">Follow</a></span>	
+                        <span>April 05 - 12 min read</span>	
+                      </div>
+                    </div>	{/* END POST DATA */}
+                  </div>	{/* END SINGLE POST TITLE */}
+                  {/* BLOG POST TEXT */}
+                  <div className="single-post-txt">
+                    {/* Text */}
+                    <div dangerouslySetInnerHTML={{__html: state.blog.post_content}}></div>
+                  </div>	{/* END BLOG POST TEXT */}
+                  {/* BLOG POST INNER IMAGE */}
+                  <div className="post-inner-img">
+                    <img className="img-fluid" src={process.env.REACT_APP_IMAGE_LINK + state.blog.meta_value} alt="blog-post-image" />		
+                  </div>
+                  {/* BLOG POST TEXT */}
+                  <div className="single-post-txt">
+                    {/* Text */}
+                    {/* <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor 
+                      massa congue magna nihil impedit ligula risus. Mauris donec ociis and magnis sapien etiam sapien sagittis 
+                      congue tempor a gravida donec enim ipsum porta justo integer undo odio velna. Maecenas gravida porttitor nunc, quis vehicula magna at luctus tempor. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum 
+                      tempor diam. Sed pulvinar consectetur nibh, vel imperdiet dui varius viverra. Pellentesque ac massa lorem 
+                      fusce eu tempor gravida porttitor cursus fusce
+                    </p> */}
+                    {/* List */}
+                    {/* <ol className="digit-list">
+                      <li><p className="p-lg">Donec dolor suscipit magna vehicula impedit ligula risus. Mauris donec ociis magnis 
+                          sapien etiam and sapien sem sagittis congue tempor gravida porttitor nunc, quis vehicula magna 
+                        </p></li>
+                      <li><p className="p-lg">Placerat imperdiet dui varius consectetur nibh, vel imperdiet dui varius viverra donec 
+                          ociis magnis
+                        </p></li>
+                      <li><p className="p-lg">Cubilia laoreet augue egestas cursus magna nihil impedit ligula risus. Mauris donec et magnis sapien etiam sapien rutrum tempor mullam blandit tempor sapien and gravida
+                        </p></li>
+                      <li><p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet turpis 
+                          urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat donec 
+                        </p></li>
+                    </ol> */}
+                    {/* Small Title */}
+                    {/* <h5 className="h5-md mt-50">Praesent aliquet tempus<br />
+                      (tempor gravida ipsum as an example)
+                    </h5> */}
+                    {/* List */}
+                    {/* <ul className="simple-list">
+                      <li className="list-item">
+                        <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida 
+                          ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
+                        </p>
+                      </li>
+                      <li className="list-item">
+                        <p className="p-lg">Fringilla risus nec, luctus mauris orci auctor euismod purus pretium purus pretium 
+                          ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
+                        </p>
+                      </li>
+                      <li className="list-item">
+                        <p className="p-lg">Quaerat sodales sapien undo euismod purus blandit velna vitae auctor a congue magna 
+                          tempor sapien eget gravida laoreet turpis urna augue, viverra a augue eget, dictum tempor diam 
+                          pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
+                        </p>
+                      </li>
+                    </ul> */}
+                    {/* Text */}
+                    {/* <p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus 
+                      efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabitur dapibus libero. Mauris 
+                      donec ociis a neque. Phasellus blandit tristique justo and aliquam vitae molestie nunc sapien justo, aliquet 
+                      non molestie augue, venenatis nec purus aliquam eget lacinia elit tincidunt 
+                    </p>  */}
+                    {/* BLOG POST INNER IMAGES */}
+                    <div className="post-inner-img">
+                      <div className="row">
+                        {/* Inner Image #1 */}
+                        <div className="col-md-6 top-img blog-post-img">
+                          {/* Image */}
+                          {/* <img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />		 */}
+                          {/* Text */}
+                          {/* <p>Maecenas gravida porttitor nunc magna</p> */}
+                        </div>
+                        {/* Inner Image #2 */}
+                        <div className="col-md-6 blog-post-img">
+                          {/* Image */}
+                          {/* <img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />		 */}
+                          {/* Text */}
+                          {/* <p>Gravida porttitor nunc, quis vehicula tempor</p> */}
+                        </div>
+                      </div>
+                    </div>	{/* END INNER IMAGES */}
+                    {/* Text */}  
+                    {/* <p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus and netus 
+                      laoreet malesuada famesa augue suscipit, luctus at neque purus neque dolor primis. Nemo sodales ipsam egestas volute turpis a dolores aliquam quaerat sodales sapien congue augue eget gravida laoreet turpis urna augue, viverra a augue eget, dictum dictum tempor diam pulvinar consectetur 
+                    </p> */}
+                    {/* List */}
+                    {/* <ul className="simple-list">
+                      <li className="list-item">
+                        <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida 
+                          ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
+                        </p>
+                      </li>
+                      <li className="list-item">
+                        <p className="p-lg">Fringilla risus nec, luctus mauris orci auctor euismod purus pretium at purus pretium 
+                          ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
+                        </p>
+                      </li>
+                    </ul> */}
+
+                    {/* Small Title */}
+                    {/* <h5 className="h5-md">Vitae massa placerat vulputate</h5> */}
+                    {/* Text */}  
+                    {/* <p className="p-lg">Nullam non scelerisque lectus. In at mauris vel nisl convallis porta at vitae dui. Nam lacus 
+                      vulputate ligula molestie bibendum quis, aliquet elementum massa. Vestibulum ut sagittis purus massa lorem. 
+                      Fusce eu cursus est. Fusce non nulla vitae massa placerat vulputate purus. Aliqum mullam a blandit tempor 
+                      posuere ligula varius congue cursus congue magna impedit ligula
+                    </p> */}
+                    {/* Text */}
+                    {/* <p className="p-lg"><span className="txt-500">Aliqum  mullam blandit tempor sapien gravida donec ipsum</span>, at porta 
+                      justo. Velna vitae and auctor congue magna impedit ligula risus. Mauris donec ociis magnis sapien etiam 
+                      sapien sagittis congue posuere ligula varius congue cursus tempor gravida donec integer
+                    </p> */}
+                    {/* Small Title */}
+                    {/* <h5 className="h5-md">Cursus non nulla vitae massa</h5> */}
+                    {/* List */}
+                    {/* <ul className="simple-list">
+                      <li className="list-item">
+                        <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Gravida ultrices 
+                          felis faucibus aliquet undo tempus, blandit posuere ligula varius congue cursus nulla vitae massa placerat vulputate tempor sapien gravida
+                        </p>
+                      </li>
+                      <li className="list-item">
+                        <p className="p-lg">Aliquam varius neque commodo purus  tempor sapien gravida vulputate pharetra bibendum 
+                          in ante ornare
+                        </p>
+                      </li>
+                      <li className="list-item">
+                        <p className="p-lg">Morbi dui lectus, lobortis felis nec, suscipit imperdiet sapien semper ultrices. Nulla 
+                          tincidunt volutpat and tincidunt. Habitant morbi tristique senectus et netus malesuada famesa augue
+                          suscipit, luctus neque purus ipsum
+                        </p>
+                      </li>
+                    </ul> */}
+                    {/* Text */}
+                    {/* <p className="p-lg">Curabitur ac dapibus libero quisque eu tristique neque sellus blandit tristique justo ut aliquam.
+                      Aliquam vitae at molestie nunc sapien justo, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia
+                      tincidunt massa justo. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum tempor diam. Sed
+                      pulvinar consectetur nibh, vel imperdiet varius viverra. Pellentesque ac massa lorem. Fusce eu cursus est. 
+                      Fusce non nulla vitae massa placerat bulum tincidunt tincidunt massa, et porttitor justo viverra a augue eget
+                    </p>  */}
+                  </div>	
+                  {/* END BLOG POST TEXT */}
+                  {/* SINGLE POST SHARE LINKS */}
+                  <div className="row post-share-links d-flex align-items-center">
+                    {/* POST TAGS */}
+                    <div className="col-md-9 col-xl-8 post-tags-list">
+                    </div>
+                    {/* POST SHARE ICONS */}
+                    <div className="col-md-3 col-xl-4 post-share-list text-right">
+                      <ul className="share-social-icons ico-25 text-center clearfix">														
+                        <li><a href="#" className="share-ico ico-facebook"><span className="flaticon-twitter" /></a></li>
+                        <li><a href="#" className="share-ico ico-twitter"><span className="flaticon-facebook" /></a></li>
+                        <li><a href="#" className="share-ico ico-like"><span className="flaticon-bookmark-white" /></a></li>			
+                      </ul>
+                    </div>
+                  </div>	{/* END SINGLE POST SHARE */}
+                  {/* OTHER POSTS
+              ============================================= */}
+                  <div className="other-posts">
+                    <div id="op-row" className="row d-flex align-items-center">
+                      {/* Previous Post */}
+                      <div className="col-md-5">
+                        <div className="prev-post mb-30 pr-45">								
+                          <h5 className="h5-sm">Previous Post</h5>
+                          <a href="single-post.html">Congue bulum Float tincidunt at purus pretium magnis</a>
+                        </div>
+                      </div>
+                      {/* All Posts */}
+                      <div className="col-md-2 text-center">
+                        <div className="all-posts ico-35 mb-30">		
+                          <a href="blog-listing.html"><span className="flaticon-four-black-squares" /></a>
+                        </div>
+                      </div>
+                      {/* Next Post */}
+                      <div className="col-md-5 text-right">
+                        <div className="next-post mb-30 pl-45">		
+                          <h5 className="h5-sm">Next Post</h5>
+                          <a href="single-post.html">8 neque dolor primis a libero tempus augue tempor</a>
+                        </div>
+                      </div>
+                    </div>	  {/* End row */}		
+                  </div>	{/* END OTHER POSTS */}
+                </div>
+              </div>
+            </div>	{/* END SINGLE POST CONTENT */}
+          </div>     {/* End container */}
+          {/* GEOMETRIC OVERLAY */}	
+          <div className="bg_fixed geometric_overlay" />
+        </section>	{/* END SINGLE POST */}
+
+      
+      </div>	{/* END PAGE CONTENT */}
+
+    </div>
+  )
+    
 }
 export default Single_post 

src/pages/Users.js

@@ -10,7 +10,16 @@ import Perks from '../pages/assests/images/perks.ico'
 import Charging from '../pages/assests/images/charging-station.ico'
 import Fleet from '../pages/assests/images/fleet-signal.ico'
 
+import BlogItems from '../components/BlogItems';
+
 class Users extends React.Component {
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+   // this.state = { counter: 0 };
+    // this.handleClick = this.handleClick.bind(this);
+    // console.log("OLU-AMEY 22",props.blogData);
+  }
     render() {
         return(
             <div>
@@ -656,89 +665,8 @@ class Users extends React.Component {
                 </div>
               </div>
               {/* BLOG POSTS */}
-              <div className="row">
+              <BlogItems blogData={this.props.blogData} />
-                {/* BLOG POST #1 */}
+            	{/* END BLOG POSTS */}
-                <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 */}
             </div>	   {/* End container */}		
           </section>	{/* END BLOG-1 */}
           {/* NEWSLETTER-1

src/pages/assests/data/about.js

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

src/pages/assests/utils/SiteService.js

@@ -1,63 +0,0 @@
-import axios from 'axios';
-
-class SiteService {
-    constructor(){
-        console.log("Launched!!")
-    }
-
-    // GET REQUEST
-    // Faq Data
-    faqData(){
-        return this.getEndPoint("/faq", null)
-    }
-
-    // POST REQUEST
-    // Contact Data
-    contactData(){
-        return this.postEndPoint("/contact")
-    }
-
-    getEndPoint(uri, req){
-        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-        return axios.get(endPoint)
-                    .then((res) => {
-                        console.log('==> GET REQUEST <==')
-                        console.log(res)
-                        return res
-                    }).catch((err) => {
-                        if (err.response) {
-                            //response status is an error code
-                            console.log(err.response.status);
-                        } else if (err.request) {
-                            //response not received though the request was sent
-                            console.log(err.request);
-                        } else {
-                            //an error occurred when setting up the request
-                            console.log(err.message);
-                        }
-                    })
-    }
-
-    postEndPoint(uri, req){
-        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-        return axios.get(endPoint, req)
-                    .then((res) => {
-                        console.log(res)
-                        console.log('==> POST REQUEST <==')
-                        return res
-                    }).catch((err) => {
-                        if (err.response) {
-                            //response status is an error code
-                            console.log(err.response.status);
-                        } else if (err.request) {
-                            //response not received though the request was sent
-                            console.log(err.request);
-                        } else {
-                            //an error occurred when setting up the request
-                            console.log(err.message);
-                        }
-                    })
-    }
-}
-
-export default SiteService