added social links to footer component

.env

@@ -11,3 +11,8 @@ REACT_APP_GOOGLE_PLAY_LINK='https://apps.apple.com/us/app/float-mobility/id14653
 REACT_APP_AUX_ENDPOINT='https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/'
 
 REACT_APP_IMAGE_LINK='https://blog.float.sg/wp-content/uploads/'
+
+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'

src/App.js

@@ -73,6 +73,7 @@ function App() {
 			<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/>} />

src/components/BlogItems.js

@@ -55,7 +55,7 @@ const BlogItems = ({blogData}) => {
                                     <p className="p-md post-tag">Float News</p>
                                     {/* Post Link */}
                                     <h5 className="h5-sm">
-                                    <a href="single-post.html">{blog.post_title.substring(0,40)+'  . . .'}</a>
+                                    <a href="/sel_post/">{blog.post_title.substring(0,40)+'  . . .'}</a>
                                     </h5>
                                     {/* Text */}
                                     <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
@@ -86,7 +86,7 @@ const BlogItems = ({blogData}) => {
                                     <p className="p-md post-tag">Float News</p>
                                     {/* Post Link */}
                                     <h5 className="h5-sm">
-                                    <a href="single-post.html">{blog.post_title.substring(0,40)+'  . . .'}</a>
+                                    <a href="/sel_post">{blog.post_title.substring(0,40)+'  . . .'}</a>
                                     </h5>
                                     {/* Text */}
                                     <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>

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

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 */}
-          
-       
-          {/* TEAM-1
-			============================================= */}
+          </div>	{/* END ABOUT-2 */}     
+          {/* 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>	
-                    {/* END TEAM MEMBER #1 */}
-                    </>
+                    </div>
                   ))}
                 </div>   {/* End row */}
               </div>	{/* TEAM MEMBERS HOLDER */}	   
             </div>	    {/* End container */}
           </section>	{/* END TEAM-1 */}
-          {/* NEWSLETTER-1
-			============================================= */}
+          {/* NEWSLETTER-1 */}
           <section id="newsletter-1" className="pb-20 newsletter-section division">
             <div className="container">
               <div className="newsletter-wrapper bg-white">
@@ -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/Faqs.js

@@ -10,6 +10,7 @@ class Faqs extends Component {
         return(
             <div>
           {/* PRELOADER SPINNER */}	
+          {/* PRELOADER SPINNER */}	
         <div id="loader-wrapper">
           <div id="loading">
             <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
@@ -115,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>	
@@ -129,7 +130,7 @@ class Faqs extends Component {
             </div>	   {/* End container */}	
           </section>	{/* END DOWNLOAD-2 */}
         </div>	{/* END PAGE CONTENT */}
-      </div>
+            </div>
         )
     }
 }

src/pages/Single_post.js

@@ -145,31 +145,7 @@ class Single_post extends React.Component {
                           </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 */}  
@@ -216,10 +192,7 @@ class Single_post extends React.Component {
                     <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">
@@ -263,165 +236,7 @@ class Single_post extends React.Component {
             {/* 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 */}