image and featured blog implemented

.env

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

public/assets/css/style.css

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

src/App.js

@@ -39,12 +39,12 @@ function App() {
 		try {
 			const res = await siteApi.blogData();
 			if(res.status == 200 /* && res.data.status > 0*/){
-				console.log(res.data.payload, res.data);
+				console.log(res.data);
 				setBlogData(res.data)
 				return
 			}
 		}catch(error) {
-			setBlogData({payload: {blogdata: []}})
+			setBlogData({blogdata: []})
 		}
 	};
 

src/components/BlogItems.js

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

src/components/Footer.js

@@ -45,10 +45,10 @@ class Footer extends React.Component {
 								</div>
 								<div className="col-sm-6 col-md-8 col-lg-3">
 									<div className="footer-store-badges text-right mb-40">
-										<Link to={process.env.REACT_APP_APPLE_LINK} className="store">
+										<Link to="/#" className="store">
 											<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
 										</Link>
-										<Link to={process.env.REACT_APP_GOOGLE_PLAY_LINK} className="store">
+										<Link to="/#" 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/client';
+import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 import { BrowserRouter } from "react-router-dom";
 
-const rootElement = document.getElementById('root');
-const root = ReactDOM.createRoot(rootElement);
-
-root.render(
+ReactDOM.render(
+ // basename='/usr/src/app/build'
   <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,16 +5,21 @@ 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">	
@@ -29,7 +34,8 @@ 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 */}	
@@ -105,8 +111,11 @@ class About extends React.Component {
                 </div>
               </div>	{/* END BUTTON */}
             </div>	   {/* End container */}	
-          </div>	{/* END ABOUT-2 */}     
-          {/* TEAM-1 */}
+          </div>	{/* END ABOUT-2 */}
+          
+       
+          {/* TEAM-1
+			============================================= */}
           <section id="team-1" className="wide-60 team-section division">
             <div className="container">
               {/* SECTION TITLE */}	
@@ -124,6 +133,8 @@ 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 */}
@@ -137,13 +148,16 @@ 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">
@@ -173,7 +187,8 @@ 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

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

src/pages/Faqs.js

@@ -4,16 +4,23 @@ class Faqs extends React.Component {
     render() {
         return(
             <div>
-          {/* PRELOADER SPINNER */}	
+
+
+                    {/* PRELOADER SPINNER
+		============================================= */}	
         <div id="loader-wrapper">
           <div id="loading">
             <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
           </div>
         </div>
-        {/* PAGE CONTENT */}	
+        {/* PAGE CONTENT
+		============================================= */}	
         <div id="page" className="page">
-          {/* HEADER */}
-          {/* FAQs-2 */}
+          {/* HEADER
+			============================================= */}
+
+          {/* FAQs-2
+			============================================= */}
           <section id="faqs-2" className="bg_whitesmoke hero-offset-nav pb-100 faqs-section division">				
             <div className="container">
               {/* SECTION TITLE */}	
@@ -175,7 +182,8 @@ class Faqs extends React.Component {
             {/* GEOMETRIC OVERLAY */}	
             <div className="bg_fixed geometric_overlay" />
           </section>	{/* END FAQs-2 */}
-          {/* DOWNLOAD-2 */}
+          {/* DOWNLOAD-2
+			============================================= */}
           <section id="download-2" className="bg_whitesmoke pb-20 download-section division">
             <div className="container white-color">
               <div className="rel purple_gradient bg_shape_01 downloads-2-wrapper">
@@ -198,11 +206,11 @@ class Faqs extends React.Component {
                   <div className="col-lg-5 text-right">
                     <div className="stores-badge">
                       {/* AppStore */}
-                      <a href={process.env.REACT_APP_APPLE_LINK} className="store">
+                      <a href="#" className="store">
                         <img className="appstore" src="assets/images/appstore-white.png" alt="appstore-logo" />
                       </a>
                       {/* Google Play */}
-                      <a href={process.env.REACT_APP_GOOGLE_PLAY_LINK} className="store">
+                      <a href="#" className="store">
                         <img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-logo" />
                       </a>
                     </div>	
@@ -211,8 +219,12 @@ class Faqs extends React.Component {
               </div>    {/* End row */}
             </div>	   {/* End container */}	
           </section>	{/* END DOWNLOAD-2 */}
+         
         </div>	{/* END PAGE CONTENT */}
-        </div>
+  
+
+
+            </div>
         )
     }
 }

src/svs/SiteService.js

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