replaced social image with google map in findev page

replaced images and added an overlay for proper readability.

.env

@@ -0,0 +1,6 @@
+REACT_APP_APPSITE='http://welcome.float.sg'
+REACT_APP_EMAIL='support@float.sg'
+REACT_APP_WWW='http://float-www.dev.chiefsoft.net'
+REACT_APP_FLEET='http://float-flt.dev.chiefsoft.net'
+REACT_APP_USERS='http://float-usr.dev.chiefsoft.net'
+REACT_APP_APIGATE='http://float-gat.dev.chiefsoft.net'

public/assets/css/responsive.css

@@ -738,8 +738,8 @@
 
   #content-14.aliceblue-shape, #content-14.whitesmoke-shape { padding-top: 80px; }
 
-  .content-section .img-block.left-column, .content-5-img { position: relative; left: -60%; }
-  .content-section .img-block img, .content-5-img img, .content-6-img img { display: inline-block; max-width: none; width: 160%; }
+  /* .content-section .img-block.left-column, .content-5-img { position: relative; left: -60%; } */
+  /* .content-section .img-block img, .content-5-img img, .content-6-img img { display: inline-block; max-width: none; width: 160%; } */
   .content-12-img { margin-right: 0; margin-bottom: -40px; }
 
   .cbox-txt { padding-left: 20px; }

public/assets/css/style.css

@@ -414,9 +414,10 @@ p {
   background-attachment: fixed!important;
 }
 
-.bg_chat { background-image: url(../images/bg_chat.jpg); background-attachment: scroll!important; }
-.bg_fit_01 { background-image: url(../images/bg_fit_01.jpg); background-attachment: scroll!important; }
-.bg_fit_02 { background-image: url(../images/bg_fit_02.jpg); }
+.bg_chat { background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.52), rgba(49, 46, 48, 0.73)),url(../images/personwithbackpack.png); background-attachment: scroll!important; background-position: top; }
+.bg_fit_01 { background-image: url(../images/bg_sblue_img.jpg); background-attachment: scroll!important; }
+/* .bg_fit_02 { background-image: url(../images/bg_fit_02.jpg); } */
+.bg_fit_02 { background-image: url(../images/bg_fit_02.png); } /*changed image*/
 .bg_mobile { background-image: url(../images/bg_mobile.jpg); background-attachment: scroll!important; }
 .bg_bank_01 { background-image: url(../images/bg_bank_01.jpg); background-attachment: scroll!important; }
 .bg_bank_02 { background-image: url(../images/bg_bank_02.jpg); background-attachment: scroll!important; }
@@ -1330,6 +1331,10 @@ ol.digit-list p {
   display: inline-block;
 }
 
+.stores-badge + div{
+  margin-top: 1rem;
+}
+
 .store {
   display: inline-block;
   text-align: center;
@@ -2579,6 +2584,15 @@ h5.sm-title {
   padding-right: 25px;
 }
 
+.hero-8-txt > div {
+  margin-top: 5rem;
+}
+
+.hero-8-txt.fadeInRight{
+  display: flex;
+  flex-direction: column;
+}
+
 /*------------------------------------------*/
 /*  HERO APP LOGO
 /*------------------------------------------*/
@@ -2631,7 +2645,7 @@ h5.sm-title {
 }
 
 .hero-5-btns h3 {
-  margin-bottom: 30px;
+  margin-bottom: 6rem;
 }
 
 .hero-6-txt h2 {
@@ -2648,16 +2662,16 @@ h5.sm-title {
 }
 
 .hero-8-txt h2 {
+  margin-top: 3rem;
   margin-bottom: 5px;
 }
 
 .hero-8-txt h4 {
-  margin-bottom: 18px;
+  margin-bottom: 80px;
 }
 
 .hero-8-txt h5 {
   font-weight: 300;
-  margin-bottom: 50px;
 }
 
 .hero-9-txt h4 {
@@ -3802,12 +3816,17 @@ h2.statistic-number {
   -webkit-box-shadow: 0px 5px 10px 0 rgba(10, 10, 10, .05);
   box-shadow: 0px 5px 10px 0 rgba(10, 10, 10, .05);
 }
+.pricing-table{
+  display: none;
+}
 
 #pricing-1.bg_whitesmoke .pricing-plan,
 #pricing-3.bg_whitesmoke .pricing-plan {
   background-color: #fafafa!important;
 }
 
+#pricing-2{display: none;}
+
 #pricing-2 .pricing-plan {
   padding: 45px 40px 40px;
   border: 1px solid #ddd;

public/assets/images/favicon.svg

@@ -0,0 +1,9 @@
+<svg width="150" height="147" viewBox="0 0 150 147" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="150" height="146.165" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_125_2" transform="matrix(0.031321 0 0 0.0321429 -1.84091 0.031013)"/>
+</pattern>
+<image id="image0_125_2" width="160" height="29" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAdCAYAAAAtm2eGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAgLSURBVHgB7VxdaxRnFD7nfTdaS8FZY69dMd7HX5Ax/oCuF14nXhSk1I+UUuyVK70RWkzEG6GFbP5BQmmhFJrtH2hzX4sbKHhTyQpSse47p+f9mpkk75r9mOhsNw+uk/ncryfnOc85Z4Izp+YbUAC6SdJsd1ptGBAzp+JbACIq6nqTgHPTcR1JzAZ3iqT1+O9WCwpELYqjihC34BBQAYQ7UAAqAC1etGFAEIqbyO+xqOsVhadX7s8RqbpAiFEkNf5iT6JQyD93AJItkGqrgrBeXf3qV3jrEMv8vdWCuwjnwH52RSIqiid7UYEj7MLTy/cXEKFBlNSEAAImHWACKIgQiQApYjLGvIwTTG4++/j2NoG6e/rbr5vwFnA+imcJepDPAGMdsVg9OjAGOCKgw9P6co0QVkFQzAQDNKRLkNd5b6KlDckS0ezTxzAxNTmZqLS688lnc5Akd6uPVtpwiEikUYw3wsllA8YAAo4Af9WXZ5lVvzG5YhvlUoKx8iSEMiUkL5XZp4mYLvXxSIswRZs7167V4HARH3gE0hyMCSaegDrycZ63ySSKLPE4z0Mrt5Zkfj0hE/kkq7LQJLVE5P28zvuEIl7W8LjY3Ll1OCScOR3H+Eb59cD4bDR/BsYAPSW4q5KzMBjGIufIw8nuJstsBC7CGVJBKq8m9zN5oIt0TEazz0gxP4iPJZZnwQTVEs3LM3wsk3DxQnWlWehnQiQWDpJfDyngKhQkw64a8cannpmep9D2g3hUOeBJ/++4w4bjjCMW6TwPMZNXJ8WWbKgo/RmUJhsTVEdDfy4HQU1IzhS1axbyUPKwuO8jSyLDB/FoYiVYRz+W00WT1+mHtG7XympGRPvgKOciIrH0kjQkAy27moRgzIqOnIrQGRgp6AZHwQgKQi/5Zcqv8X+BSIvxTBTHUHJMbg4okzs6cpGt7QGkJkPne8rJrbKmA0x+Z3JC4XJBPpasFFvSmm3SRkq3rVp5v1tY8VbLb2g7/w6s8JNuBU8SIoaSYyIJ+KS+zDkfLUCOfJZwjoSGbGZdS6vLDZl3RobJnUMuL1RenlO5BktSkpJuQHGI927gX5/2H53WFuooGACnFwtQckwkAd+rdGfRyaav6ZlCs3W16MmVJ6chmpNryIhqI6EjJ6Y5o7m2luzoRePKLIyIc9OX6kH3i7ihF69Vsh6SYV2wLrsM9zQh/faIx7Fnyx2OOfKyiV5KdS5Hrq6nwEc5RzL0ble7YJf7oSVctkydNPjoqYkImoBbMBLoo+D7UElTL3XX49ypixv8AvZFPJKiDsW35gpD705In72/d92zHQqiW0OkrJuRRjVPPl9cNnmfiYYCErKRMUc2Q17l5dkS2EdMoUzJRqIauR7Hl6nvK4IQbWn5TY8R1GSHtI+AfJrediiDBEVgIiU4QWXl10mvMRYmuqndEdDKKJ+RroPPDc26dBERMwk37Tqp5Zj/yYTNC4yE89Pzi8yigJvGXXlft8tRNuiGISqzDE8kATUpcpHKk5GyXI/SiChMh4NyLtlGzVS+pYugtnRDXp6z6NqFUcDPHJRfTn3W8+tahrkksxG8hpXhUmIyCYj0JBcBXR3Py2viSynG2eqIRsIZEFDkSJavF5IrzdicDzNDYt20asOQ0FMtvNhPHpbfUN5tZDgAJ8OlRM8ckPrM6/ptDZUJhP9uc+/MGwaT5/kSiy2tEHop1p0Ostt87kco9VWyTgk48hnCoZ6a4UtK27JTCW7DkJjiyBXsbyF0giYxgV5fiJHhx51iB1WLQE8C/vnsl0F7wWODKSnXlVCraPu36KOXNRW0qzANJsdT4CKbJSFkfeNc6UWbDhNFRVak7pz44ocWDAkyrjZEQYyZaDEMgLK64YmU4Gqz0QHstrLCceZg09qfsNtsjkepXKcDC6mEK8pcs0oL2ta80DoMCZbfGp8fQ0EoqwxPbCuOZfJuaiwkGFNB0k/AGBdrOxygyG/LDar6+qGT67QTknVN2AFPieGHEVh+YygWpXTDE0vAD7+712KytHJ9XzLDp8bF+h6vJpKeckkLzpSX3dzgKu6KnqZ/nKzh5z8Onf9RoKg8KviNlC4KlnYkn3OWmpWh/jBMNwahe5Ut8e9MnpO2x+vMhu1s8C49duWMh5mGUb4/jNkwQlqiMbVEZ0i2p47LBgyJnvLLdT5+NX3NGAYnZxDqfO2lMt0vUloC8ge4WpH9BWi0jn1g06Tv39i5fn2JSbfq7vVw7TObD5Jxvc54pJEvI1/aQZFuWtpK9fNXgi4f+/SnUdxvHLIe/CrW2Bz21dWYmb60GSBxxF+4bg22oCSY+JH86sOHTRI6EmZ1PcAsn9NF66zOZ+TYREO7L70nxMtxh8l38YOln0fq/XLYvRna7nu/fQEpeLto2WT46KYkRnXlUTNh4jCB2iB2T73odW1O9I1JQtqyDeRHuEzP15Bvmx8jk8/IL9K+CRo/egV9otsNk9XJcGGDsqPiiIAO1W8etZR8fZEd8QNjKEzXw3Y+bF3PT7uQy/fSXLHDUt2YEq8uHBuRfBoVAcG2Ge7p/R4EmxNjK7ArkiVqzR3dF5xD9V6zzYull7cXH6gKxtwDXmCSzaZ3zPmxfEie874t/mn92It/1rBRZFIvg8VnPfYGg0LLMO0vWCOQluEmlAAVTuCvwjtFsoSBvw0z0BUAC3V1JywRm+4BLxv1ml6Srq4cRzjx5fdtOARYaaQNJs3eoYLOMC6fZXilEhzHKfbzMlcckkf/AeKBXuZb8fncAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

public/assets/js/custom.js

@@ -170,7 +170,7 @@
 					patterns: {
 						youtube: {			   
 							index: 'youtube.com',
-							src: 'https://www.youtube.com/embed/7e90gBu4pas'				
+							src: 'https://www.youtube.com/embed/Jn22jdQ4KdQ'	// added the id of the video			
 								}
 							}
 						}		  		  

src/App.js

@@ -15,6 +15,10 @@ import Contacts from './pages/Contacts';
 import FloatHome from './pages/FloatHome';
 import Users from './pages/Users';
 import Fleet from './pages/Fleet';
+import Privacy from './pages/Privacy';
+import GetStarted from './pages/GetStarted';
+import FindEv from "./pages/FindEv";
+import FindMobility from "./pages/FindMobility";
 
 
 
@@ -48,9 +52,14 @@ function App() {
 			<Route path="/contacts" element={<Contacts/>} />
 			<Route path="/users" element={<Users/>} />
 			<Route path="/business" element={<Fleet/>} />
+			<Route path="/privacy" element={<Privacy/>} />
+			<Route path="/getstarted" element={<GetStarted />} />
+			<Route path="/findev" element={<FindEv />} />
+			<Route path="/findmobility" element={<FindMobility />} />
 		</Routes>
 	  <Footer/>
     </div>
+
   );
 }
 

src/components/Footer.js

@@ -13,11 +13,11 @@ class Footer extends React.Component {
 								<div className="col-sm-6 col-md-4 col-lg-3">
 									<div className="footer-links mb-40">
 										<ul className="foo-links clearfix">									
-											<li><p className="p-md"><Link to="/#">App Features</Link></p></li>													
-											<li><p className="p-md"><Link to="/#">Integrations</Link></p></li>
-											<li><p className="p-md"><Link to="/#">App Updates</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Customer Stories</Link></p></li>						
+
+											<li><p className="p-md"><Link to="/#">Users</Link></p></li>
+											<li><p className="p-md"><Link to="/#">Fleet Mangers</Link></p></li>
+											<li><p className="p-md"><Link to="/findev">Find Ev Charge</Link></p></li>
+											<li><p className="p-md"><Link to="/findmobility">Find Options</Link></p></li>
 										</ul>
 									</div>
 								</div>
@@ -25,10 +25,9 @@ class Footer extends React.Component {
 									<div className="footer-links mb-40">
 										<ul className="foo-links clearfix">													
 											<li><p className="p-md"><Link to="/blogs">Our Blog</Link></p></li>	
-											<li><p className="p-md"><Link to="/#">Customer Stories</Link></p></li>
+											<li><p className="p-md"><Link to="/contacts">Customer Stories</Link></p></li>
 											<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>	
-											<li><p className="p-md"><Link to="/#">Life Chatting</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Resources</Link></p></li>	
+											<li><p className="p-md"><Link to="/#">Resources</Link></p></li>
 										</ul>
 									</div>
 								</div>
@@ -37,8 +36,7 @@ class Footer extends React.Component {
 										<ul className="foo-links clearfix">
 											<li><p className="p-md"><Link to="/about">About Us</Link></p></li>
 											<li><p className="p-md"><Link to="/#">Press & Media</Link></p></li>	
-											<li><p className="p-md"><Link to="/#">Advertising</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Privacy Policy</Link></p></li>		
+											<li><p className="p-md"><Link to="/privacy">Privacy Policy</Link></p></li>
 											<li><p className="p-md"><Link to="/terms">Terms & Privacy</Link></p></li>					
 										</ul>
 									</div>

src/components/Header.js

@@ -88,7 +88,7 @@ class Header extends React.Component {
 							    	{/* <li className="nl-simple" aria-haspopup="true"><Link to="/more_apps">More Apps</Link></li>
 							    	<li className="nl-simple" aria-haspopup="true"><Link to="/blog_listing">Blog</Link></li> */}
 								    <li className="nl-simple" aria-haspopup="true">
-								    	<Link to="/contacts" className="btn btn-rose tra-grey-hover last-link">Let's Started</Link>
+								    	<Link to="/getstarted" className="btn btn-rose tra-grey-hover last-link">Let's Start</Link>
 								    </li> 
 
 

src/pages/About.js

@@ -26,10 +26,9 @@ class About extends React.Component {
                 <div className="col-lg-8 offset-lg-2">
                   <div className="hero-txt text-center white-color">
                     {/* Title */}
-                    <h2 className="h2-md">No, we are <span>not just another travel app.</span> </h2>
+                    <h2 className="h2-md">{heroInfo.title.normal} <span>{heroInfo.title.bold}</span> </h2>
                     {/* Text */}	
-                    <p className="p-xl">Float is a global Start Up working on improving everyone’s city life.
-                    </p>
+                    <p className="p-xl">{heroInfo.desc}</p>
                   </div>
                 </div>	
               </div>	  {/* End row */}
@@ -45,7 +44,7 @@ class About extends React.Component {
                 <div className="row">
                   <div className="col-md-12">
                     <div className="txt-block mb-35">
-                      <h5 className="h5-lg text-justify">With AI and other unique technology we want to help and encourage people to improve their travel behavior for the better. Whether you want to save time, save money, reduce your carbon footprint, look for great deals or just explore your hood - we’ve got you covered.</h5>
+                      <h5 className="h5-lg text-justify">{aboutDesc.upperSection.title}</h5>
                     </div>
                   </div>
                 </div>
@@ -54,22 +53,19 @@ class About extends React.Component {
                   <div className="col-md-6">
                     <div className="txt-block top-box">
                       {/* Title */}	
-                      <h5 className="h5-lg">OUR VISION</h5>
+                      <h5 className="h5-lg">{aboutDesc.upperSection.vision.title}</h5>
                       {/* Text */}
-                      <p className="p-lg lh-lg">Improve quality of life for the world's population by building the future global transportation platform. Increasing accessibility and personal choices, while reducing travel time, traffic congestion, pollution, and loss to local GDP.
-                      </p>
-                      
+                      <p className="p-lg lh-lg">{aboutDesc.upperSection.vision.text}</p>                      
                     </div>
                   </div>	{/* END LEFT COLUMN */}
                   {/* RIGHT COLUMN */}
                   <div className="col-md-6">
                     <div className="txt-block">
                       {/* Title */}	
-                      <h5 className="h5-lg">OUR MISSION</h5>
+                      <h5 className="h5-lg">{aboutDesc.upperSection.mission.title}</h5>
                       {/* List */}	
                       {/* Text */}
-                      <p className="p-lg lg-lh">We empower travelers to move easier and faster by analyzing their past trips, with traffic and external factors - allowing them to customize travel and receive rewards for sharing their data for the greater good.
-                      </p>	{/* End List */}	
+                      <p className="p-lg lg-lh">{aboutDesc.upperSection.mission.text}</p>	{/* End List */}	
                     </div>
                   </div>	{/* END RIGHT COLUMN */}	
                 </div>
@@ -84,7 +80,7 @@ class About extends React.Component {
               </div>
               {/* TEXT BLOCK */}	
               <div className="about-2-txt pc-50">
-                <h5 className="h5-lg"> <span>MADE FOR YOU</span><br />Created for urbanists</h5>
+                <h5 className="h5-lg"> <span>{aboutDesc.lowerSection.caption.first}</span><br />{aboutDesc.lowerSection.caption.second}</h5>
                 <div className="row">
                   {/* LEFT COLUMN */}
                   <div className="col-md-6">
@@ -92,9 +88,7 @@ class About extends React.Component {
                       {/* Title */}	
                       {/* <h5 className="h5-lg">We care about the details</h5> */}
                       {/* Text */}
-                      <p className="p-lg">A classic day in your urban life:<br />
-You drive to work, drive to the store, maybe drive your kids to school, drive back home, meet some friends if there is little time left. Distances are so vast, it takes forever to get anywhere and there’s little chance for spontaneity and diversity in daily routines - Vibrating urban Citylife is just passing you by.
-                      </p>
+                      <p className="p-lg">{aboutDesc.lowerSection.left.first}<br />{aboutDesc.lowerSection.left.second}</p>
                     </div>
                   </div>	{/* END LEFT COLUMN */}
                   {/* RIGHT COLUMN */}
@@ -103,7 +97,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
                       {/* Title */}	
                       {/* <h5 className="h5-lg">With knowledge, skill and hard work</h5> */}
                       {/* List */}	
-                      <p className="p-lg">You are interested in public infrastructure and promote eco-friendly alternatives - however keeping track of what is the fastest, cheapest and greenest way to get somewhere isn’t easily done while being in a rush. We feel you - we are here to support you with by finding a better way to go.</p>	{/* End List */}		
+                      <p className="p-lg">{aboutDesc.lowerSection.right}</p>	{/* End List */}		
                     </div>
                   </div>	{/* END RIGHT COLUMN */}		
                 </div>
@@ -112,7 +106,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
               <div className="row">
                 <div className="col-md-12">
                   <div className="about-2-btn text-center mt-40">
-                    <a href="#" className="btn btn-md btn-skyblue tra-skyblue-hover">Read the Reviews</a> 
+                    <a href="#" className="btn btn-md btn-skyblue tra-skyblue-hover">{aboutDesc.cta}</a> 
                   </div>
                 </div>
               </div>	{/* END BUTTON */}
@@ -126,9 +120,9 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
               <div className="row">	
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-60">	
-                  <p>MADE FOR US</p>	
+                  <p>{testimonials.tag}</p>	
                     {/* Title */}	
-                    <h2 className="h2-md">Created from urbanists</h2>	
+                    <h2 className="h2-md">{testimonials.title}</h2>	
                     {/* Text */}	
                     {/* <p className="p-xl">Our Team is as vibrating and diversified as your urban life. */}
                     {/* </p> */}
@@ -193,111 +187,30 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
                 <div className="col-md-7 col-lg-6">
                   <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Values</span>
+                    <span className="section-id grey-color">{valueInfo.id}</span>
                     <div>
                     {/* Title */}	
-                    <h3 className="h2-xs">Put the User first</h3>
+                    <h3 className="h2-xs">{valueInfo.title1}</h3>
                     {/* Text */}	
-                    <p className="p-lg">We are fully independent. We will only show you recommendations, tips, and deals customized for you.</p>
+                    <p className="p-lg">{valueInfo.text1}</p>
                     </div>
                     <div>
                     {/* Title */}	
-                    <h3 className="h2-xs">Together is Better</h3>
+                    <h3 className="h2-xs">{valueInfo.title2}</h3>
                     {/* Text */}	
-                    <p className="p-lg">AI and personal behavior are better together. Together we can make better decisions.</p>
+                    <p className="p-lg">{valueInfo.text2}</p>
                     </div>
                     <div>
                     {/* Title */}	
-                    <h3 className="h2-xs">There is no planet B</h3>
+                    <h3 className="h2-xs">{valueInfo.title3}</h3>
                     {/* Text */}	
-                    <p className="p-lg">There are more and more green alternatives especially in transportation we want to encourage everyone to use these.</p>
+                    <p className="p-lg">{valueInfo.text3}</p>
                     </div>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
               </div>	   {/* End row */}
             </div>	   {/* End container */}
           </section>	{/* END CONTENT-2 */}
-          {/* BRANDS-2
-			============================================= */}
-          <section id="brands-2" className="pb-60 brands-section division">
-            <div className="container">	
-              {/* BRANDS TITLE */}
-              <div className="row">
-                <div className="col-lg-8 offset-lg-2">
-                  <div className="brands-title text-center">
-                    <h4 className="h4-md">You might know Float from:</h4>
-                  </div>
-                </div>
-              </div>
-              {/* BRANDS-2 WRAPPER */}
-              <div className="brands-2-wrapper">
-                <div className="row">
-                  <div className="col-md-12">
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-1.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-2.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-3.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-4.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-5.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-6.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-7.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-8.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-9.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                    {/* BRAND LOGO IMAGE */}
-                    <div className="brand-logo">
-                      <a href="#">
-                        <img className="img-fluid" src="assets/images/brand-10.png" alt="brand-logo" />
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>  {/* END BRANDS-2 WRAPPER */}
-            </div>     {/* End container */}
-          </section>	{/* END BRANDS-2 */}
           {/* SECTION DIVIDER
 			============================================= */}
           <div className="divider-wrapper text-center"><div className="section-divider" /></div>
@@ -310,9 +223,9 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">One Team Many Talents</h2>	
+                    <h2 className="h2-md">{team.tag}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Our Team is as vibrating and diversified as your urban life.</p>
+                    <p className="p-xl">{team.title}</p>
                   </div>	
                 </div>
               </div>
@@ -353,9 +266,9 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
                   <div className="col-lg-6">
                     <div className="newsletter-txt">	
                       {/* Section ID */}	
-                      <span className="section-id">Subscribe to Our Newsletter</span>
+                      <span className="section-id">{newsletter.tag}</span>
                       {/* Title */}	
-                      <h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>	
+                      <h4 className="h4-xl">{newsletter.title}</h4>	
                     </div>								
                   </div>
                   {/* NEWSLETTER FORM */}
@@ -364,7 +277,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
                       <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>
+                          <button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">{newsletter.cta}</button>
                         </span>										
                       </div>
                       {/* Newsletter Form Notification */}	
@@ -377,11 +290,79 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
           </section>	{/* END NEWSLETTER-1 */}
          
         </div>	{/* END PAGE CONTENT */}
-     
-
-
             </div>
         )
     }
 }
-export default About 
+export default About 
+
+// PAGE TEXT/CONTENT VARIABLES
+
+//Hero Section
+let heroInfo = {
+  title: {
+    normal: 'No, we are ', //leave a space after writing for proper indentation
+    bold: 'not just another travel app.'
+  }, 
+  desc: "Float is a global Start Up working on improving everyone’s city life."
+}
+
+// About Section
+let aboutDesc = {
+  upperSection: {
+    title: "With AI and other unique technology we want to help and encourage people to improve their travel behavior for the better. Whether you want to save time, save money, reduce your carbon footprint, look for great deals or just explore your hood - we’ve got you covered.",
+    vision: {
+      title: 'OUR VISION',
+      text: "Improve quality of life for the world's population by building the future global transportation platform. Increasing accessibility and personal choices, while reducing travel time, traffic congestion, pollution, and loss to local GDP."
+    },
+    mission: {
+      title: "OUR MISSION",
+      text: "We empower travelers to move easier and faster by analyzing their past trips, with traffic and external factors - allowing them to customize travel and receive rewards for sharing their data for the greater good."
+    }
+  },
+  lowerSection: {
+    caption: {
+      first: "MADE FOR YOU",
+      second: "Created for urbanists"
+    },
+    left: {
+      first: "A classic day in your urban life:",
+      second: "You drive to work, drive to the store, maybe drive your kids to school, drive back home, meet some friends if there is little time left. Distances are so vast, it takes forever to get anywhere and there’s little chance for spontaneity and diversity in daily routines - Vibrating urban Citylife is just passing you by."
+    },
+    right: "You are interested in public infrastructure and promote eco-friendly alternatives - however keeping track of what is the fastest, cheapest and greenest way to get somewhere isn’t easily done while being in a rush. We feel you - we are here to support you with by finding a better way to go."
+  },
+  cta: "Read the Reviews"
+}
+
+// Testimonials Section
+let testimonials = {
+  tag: 'MADE FOR US',
+  title:'Created from urbanists'
+}
+
+// Values Section
+let valueInfo = {
+  id: 'Values',
+  title1: 'Put the User first',
+  text1: 'We are fully independent. We will only show you recommendations, tips, and deals customized for you.',
+  title2: 'Together is Better',
+  text2: 'AI and personal behavior are better together. Together we can make better decisions.',
+  title3: 'There is no planet B',
+  text3: 'There are more and more green alternatives especially in transportation we want to encourage everyone to use these.'
+}
+
+// Brand Section
+let brands = 'You might know Float from:'
+
+// Team Section
+let team = {
+  tag: 'One Team Many Talents',
+  title: 'Our Team is as vibrating and diversified as your urban life.',
+}
+
+// Newsletter Section
+let newsletter = {
+  tag: 'Subscribe to Our Newsletter',
+  title: 'Stay up to date with our news, ideas and updates',
+  cta: 'Subscribe Now'
+}

src/pages/Faqs.js

@@ -193,7 +193,8 @@ class Faqs extends React.Component {
                     <div className="download-2-txt white-color">
                       {/* Icon */}
                       <div className="download-2-logo">
-                        <img className="img-fluid" src="assets/images/app-logo.png" alt="app-logo" />
+                        {/* <img className="img-fluid" src="assets/images/app-logo.png" alt="app-logo" /> */}
+                        <img className="img-fluid" src="assets/images/favicon.svg" alt="app-logo" />
                       </div>
                       {/* Title */}
                       <div className="d2-txt">

src/pages/Features.js

@@ -303,7 +303,7 @@ class Features extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>
               </div>

src/pages/FindEv.js

@@ -0,0 +1,71 @@
+import React, {Component} from 'react';
+
+class FindEv extends React.Component {
+    render() {
+        return(
+            <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">
+
+
+
+                    <section id="content-11" className="pb-100 content-section division">
+                        <div className="container">
+                            {/* SECTION TITLE */}
+                            <div className="row">
+                                <div className="col-lg-10 offset-lg-1">
+                                    <div className="section-title text-center mb-60">
+                                        {/* Title */}
+                                        <h2 className="h2-md">Chat with Your Friends Easily</h2>
+                                        {/* Text */}
+                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+                                            tempus, blandit and cursus varius magna tempus a dolor
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* IMAGE BLOCK */}
+                            <div className="row">
+                                <div className="col-md-12">
+                                    <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
+                                        <iframe width="100%" height="510" style={{border:"0"}} loading="lazy" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1070%20Cresta%20Way%20Unit%202,%20San%20Rafael%20CA%2094903+(FloatEV)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
+                                            <a href="https://www.maps.ie/distance-area-calculator.html">measure area map</a>
+                                        </iframe>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* DOWNLOAD BUTTON */}
+                            <div className="row">
+                                <div className="col-md-12">
+                                    <div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
+                                        {/* Button */}
+                                        <a href="#" className="btn btn-md btn-skyblue tra-grey-hover">
+                                            Refresh
+                                        </a>
+                                        {/* OS Prerequisite */}
+                                    </div>
+                                </div>
+                            </div>	{/* END DOWNLOAD BUTTON */}
+                        </div>	   {/* End container */}
+                    </section>	{/* END CONTENT-11 */}
+
+
+
+                </div>	{/* END PAGE CONTENT */}
+
+
+            </div>
+        )
+    }
+}
+export default FindEv

src/pages/FindMobility.js

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+
+class FindMobility extends React.Component {
+    render() {
+        return(
+            <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">
+
+
+
+                    <section id="content-11" className="pb-100 content-section division">
+                        <div className="container">
+                            {/* SECTION TITLE */}
+                            <div className="row">
+                                <div className="col-lg-10 offset-lg-1">
+                                    <div className="section-title text-center mb-60">
+                                        {/* Title */}
+                                        <h2 className="h2-md">Chat with Your Friends Easily</h2>
+                                        {/* Text */}
+                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+                                            tempus, blandit and cursus varius magna tempus a dolor
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* IMAGE BLOCK */}
+                            <div className="row">
+                                <div className="col-md-12">
+                                    <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
+                                        <img className="img-fluid" src="assets/images/socials.png" alt="content-image" />
+                                    </div>
+                                </div>
+                            </div>
+                            {/* DOWNLOAD BUTTON */}
+                            <div className="row">
+                                <div className="col-md-12">
+                                    <div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
+                                        {/* Button */}
+                                        <a href="#" className="btn btn-md btn-skyblue tra-grey-hover">
+                                            Refresh
+                                        </a>
+                                        {/* OS Prerequisite */}
+                                    </div>
+                                </div>
+                            </div>	{/* END DOWNLOAD BUTTON */}
+                        </div>	   {/* End container */}
+                    </section>	{/* END CONTENT-11 */}
+
+
+
+                </div>	{/* END PAGE CONTENT */}
+
+
+            </div>
+        )
+    }
+}
+export default FindMobility

src/pages/Fleet.js

@@ -3,33 +3,23 @@ import React, {Component} from 'react';
 class Fleet extends React.Component {
     render() {
         return(
-            <div>
-
-
-
-        <div id="loader-wrapper">
-          <div ido="loading">
+            <div><div id="loader-wrapper"><div ido="loading">
             <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
           </div>
         </div>
-        {/* PAGE CONTENT
-		============================================= */}	
+        {/* PAGE CONTENT*/}	
         <div id="page" className="page">
-          {/* HEADER
-			============================================= */}
-         
-
-                   {/* HERO
-			============================================= */}	
+          {/* HEADER */}
+            {/* HERO */}	
           <section id="hero" className="bg-fixed hero-section division">
             <div className="container">	
               <div className="row">
                 <div className="col-md-12">
                   {/* HERO TEXT */}
                   <div className="hero-txt white-color text-center">
-                    <span className="version">HTML</span>
-                    <h2>Float Business Fleet Management Systems</h2>
-                    <p>We are your A.I. enables assistance to manage your fleet and advancement to new platforms with insights on current performance and operational projections.
+                    <span className="version">{heroSection.tag}</span>
+                    <h2>{heroSection.header}</h2>
+                    <p>{heroSection.desc}
                     </p>
                   </div>	
                   {/* HERO IMAGE */}
@@ -38,43 +28,36 @@ class Fleet extends React.Component {
               </div>	   {/* End row */}	
             </div> 	   {/* End container */}
           </section>	{/* END HERO */}	
-
-
-
-          {/* CONTENT-2
-			============================================= */}
+          {/* CONTENT-2 */}
           <section id="content-2" className="wide-50 content-section division">
             <div className="container">
               <div className="row d-flex align-items-center">
                 {/* IMAGE BLOCK */}
                 <div className="col-md-5 col-lg-6">
                   <div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/img-16.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/Welcome.png" alt="content-image" />
                   </div>
                 </div>
                 {/* TEXT BLOCK */}	
                 <div className="col-md-7 col-lg-6">
                   <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">FLOAT EV</span>
+                    <span className="section-id grey-color">{aboutSection.tag}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Electric Fleet Platform</h2>
+                    <h2 className="h2-md">{aboutSection.header}</h2>
                     {/* Text */}
-                    <p className="p-lg">Float's recommendation engine enables tracking of vehicle usage, ownership & service costs, fuel costs, emissions. Its Telematics IoT enabled OBD device & dashcam to connect directly to the vehicle to pull data.
+                    <p className="p-lg">{aboutSection.desc1}
                     </p>
                     {/* Text */}
-                    <p className="p-lg">Aliqum mullam blandit and tempor sapien donec lipsum gravida porta. Velna vitae auctor 
-                      congue magna impedit ligula risus. Mauris donec ligula an impedit magnis
-                    </p>
+                    <p className="p-lg">{aboutSection.desc2}</p>
                     {/* Button */}
-                    <a href="#features-5" className="btn btn-tra-grey skyblue-hover">Find Out More</a>
+                    <a href={`${process.env.REACT_APP_FLEET}/`} className="btn btn-tra-grey skyblue-hover">{aboutSection.cta}</a>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
               </div>	   {/* End row */}
             </div>	   {/* End container */}
           </section>	{/* END CONTENT-2 */}
-          {/* FEATURES-13
-			============================================= */}
+          {/* FEATURES-13 */}
           <section id="features-13" className="rel whitesmoke_shape mt-inverse-50 features-section division">
             <div className="container">
               <div className="row d-flex align-items-center">
@@ -82,15 +65,13 @@ class Fleet extends React.Component {
                 <div className="col-md-10 col-lg-5">
                   <div className="txt-block pc-15 wow fadeInUp" data-wow-delay="0.4s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Flexible Features</span>
+                    <span className="section-id grey-color">{statsSection.tag}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">FLOAT'S DASHBOARD</h2>
+                    <h2 className="h2-md">{statsSection.header}</h2>
                     {/* Text */}
-                    <p className="p-lg">Your EV fleet performance metrics are in one place, easy to locate any useful information 
-                                    analyze data and compare results.	   
-                    </p>
+                    <p className="p-lg">{statsSection.desc1}</p>
                     {/* Text */}
-                    <p className="p-lg">Gravida porta velna vitae auctor congue magna nihil impedit ligula risus mauris donec ligula</p>
+                    <p className="p-lg">{statsSection.desc2}</p>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
                 {/* FEATURES-13 WRAPPER */}
@@ -103,18 +84,18 @@ class Fleet extends React.Component {
                           {/* Icon */}
                           <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-clock" /></div>
                           {/* Title */}
-                          <h5 className="h5-sm">Metrics</h5>
+                          <h5 className="h5-sm">{statsSection.metrics.title}</h5>
                           {/* Text */}
-                          <p className="p-lg">We guide a company through the EV conversion process, starting with insights on current performance of their existing fleet existing fleet.performance of their existing fleet existing fleet.</p>
+                          <p className="p-lg">{statsSection.metrics.content}</p>
                         </div>
                         {/* FEATURE BOX #2 */}
                         <div id="fb-13-2" className="fbox-13 wow fadeInUp" data-wow-delay="0.6s">
                           {/* Icon */}
                           <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-exercise" /></div>
                           {/* Title */}
-                          <h5 className="h5-sm">Guide</h5>
+                          <h5 className="h5-sm">{statsSection.guide.title}</h5>
                           {/* Text */}
-                          <p className="p-lg">We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..</p>
+                          <p className="p-lg">{statsSection.guide.content}</p>
                         </div>
                       </div>
                       <div className="col-md-6">
@@ -123,18 +104,18 @@ class Fleet extends React.Component {
                           {/* Icon */}
                           <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-salad" /></div>
                           {/* Title */}
-                          <h5 className="h5-sm">Access</h5>
+                          <h5 className="h5-sm">{statsSection.access.title}</h5>
                           {/* Text */}
-                          <p className="p-lg">We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..</p>
+                          <p className="p-lg">{statsSection.access.content}</p>
                         </div>
                         {/* FEATURE BOX #4 */}
                         <div id="fb-13-4" className="fbox-13 wow fadeInUp" data-wow-delay="1s">
                           {/* Icon */}
                           <div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-lose-weight" /></div>
                           {/* Title */}
-                          <h5 className="h5-sm">Stay Motivated</h5>
+                          <h5 className="h5-sm">{statsSection.motivated.title}</h5>
                           {/* Text */}
-                          <p className="p-lg">Take the complexity out of electrifying your fleet with industry-leading support.Porta semper lacus cursus feugiat primis ultrice ligula risus ultrice ligula risus auctor ultrice ociis</p>
+                          <p className="p-lg">{statsSection.motivated.content}</p>
                         </div>
                       </div>
                     </div>
@@ -143,8 +124,7 @@ class Fleet extends React.Component {
               </div>	 {/* End row */}	
             </div>	  {/* End container */}
           </section>	{/* END FEATURES-13 */}
-          {/* CONTENT-3
-			============================================= */}
+          {/* CONTENT-3 */}
           <section id="content-3" className="wide-60 content-section division">
             <div className="container">
               {/* CONTENT BOX-1 */}
@@ -160,15 +140,13 @@ class Fleet extends React.Component {
                   <div className="col-md-7 col-lg-6">
                     <div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id grey-color">Perfect Integration</span>
+                      <span className="section-id grey-color">{floatIntegrationSection.tag}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Float analytical, recommendation / rewards framework.</h2>
+                      <h2 className="h2-md">{floatIntegrationSection.header}</h2>
                       {/* Text */}	
-                      <p className="p-lg">Our platform analyzes current fleet behavior and display areas for improvement on our custom customer dashboard.
-                      </p>
+                      <p className="p-lg">{floatIntegrationSection.desc1}</p>
                       {/* Text */}	
-                      <p className="p-lg">Float saves their customers money from day one by analyzing their current fleet data on cost, emissions,time and resources and then makes recommendations 
-                        on prioritization of vehicle replacements and infrastructure investments.</p>
+                      <p className="p-lg">{floatIntegrationSection.desc2}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                 </div>	  {/* End row */}	
@@ -185,10 +163,8 @@ class Fleet extends React.Component {
                         <div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-video-player-2" /></div> 
                         {/* Text */}
                         <div className="cbox-txt">
-                          <h5 className="h5-sm">HD Instructional Videos</h5>
-                          <p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
-                            suscipit quaerat ultrice tellus viverra
-                          </p>
+                          <h5 className="h5-sm">{specialFeaturesSection.firstFeature.title}</h5>
+                          <p className="p-lg">{specialFeaturesSection.firstFeature.content}</p>
                         </div>
                       </div>	
                       {/* CONTENT BOX #2 */}
@@ -197,10 +173,8 @@ class Fleet extends React.Component {
                         <div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-percentage" /></div> 
                         {/* Text */}
                         <div className="cbox-txt">
-                          <h5 className="h5-sm">Smart Watch Optimized</h5>
-                          <p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
-                            suscipit quaerat ultrice tellus viverra
-                          </p>
+                          <h5 className="h5-sm">{specialFeaturesSection.secondFeature.title}</h5>
+                          <p className="p-lg">{specialFeaturesSection.secondFeature.content}</p>
                         </div>
                       </div>	
                       {/* CONTENT BOX #3 */}
@@ -209,10 +183,8 @@ class Fleet extends React.Component {
                         <div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-smartphone-9" /></div> 
                         {/* Text */}
                         <div className="cbox-txt">
-                          <h5 className="h5-sm">Heart Rate Tracking</h5>
-                          <p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
-                            suscipit quaerat ultrice tellus viverra
-                          </p>
+                          <h5 className="h5-sm">{specialFeaturesSection.thirdFeature.title}</h5>
+                          <p className="p-lg">{specialFeaturesSection.thirdFeature.content}</p>
                         </div>
                       </div>
                     </div>
@@ -220,21 +192,20 @@ class Fleet extends React.Component {
                   {/* IMAGE BLOCK */}
                   <div className="col-md-5 col-lg-6 m-top">
                     <div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
-                      <img className="img-fluid" src="assets/images/img-17.png" alt="content-image" />
+                      <img className="img-fluid" src="assets/images/img_05.png" alt="content-image" />
                     </div>
                   </div>
                 </div>  {/* End row */}	
               </div>	{/* END CONTENT BOX-2 */}
             </div>     {/* End container */}
           </section>	{/* END CONTENT-3 */}	
-          {/* BRANDS-1
-			============================================= */}
+          {/* BRANDS-1 */}
           <div id="brands-1" className="bg_whitesmoke brands-section division">
             <div className="container">					
               <div className="row">
                 <div className="col text-center pc-25">	
                   {/* Text */}
-                  <p className="p-xl">You might know Float from:</p>
+                  <p className="p-xl">{brandSectionTitle}</p>
                   {/* Brands Carousel */}
                   <div className="owl-carousel brands-carousel">
                     {/* BRAND LOGO IMAGE */}
@@ -296,8 +267,7 @@ class Fleet extends React.Component {
               </div>      {/* End row */}
             </div>	    {/* End container */}
           </div>	{/* END BRANDS-1 */}
-          {/* FEATURES-5
-			============================================= */}
+          {/* FEATURES-5 */}
           <section id="features-5" className="wide-50 features-section division">
             <div className="container">
               {/* SECTION TITLE */}	
@@ -305,11 +275,9 @@ class Fleet extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">No,we are not just another EV!</h2>	
+                    <h2 className="h2-md">{featuresSection.header}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Our software takes you through the daily process of transitioning your fleet to Float.
-                        Self-Management Inclusive
-                    </p>
+                    <p className="p-xl">{featuresSection.subHeader}</p>
                   </div>	
                 </div>
               </div>
@@ -324,10 +292,9 @@ class Fleet extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">User-Friendly</h5>
+                        <h5 className="h5-sm">{featuresSection.userFriendlyItem.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Our software takes you through the daily process of transitioning your fleet to Float.process of transitioning your fleet to Float
-                        </p>
+                        <p className="p-lg">{featuresSection.userFriendlyItem.content}</p>
                       </div>
                     </div>
                   </div>	
@@ -339,10 +306,9 @@ class Fleet extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Fully functional</h5>
+                        <h5 className="h5-sm">{featuresSection.fullyFunctionalItem.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">We integrate company data into Float recommendation engine to provide insights.
-                        </p>
+                        <p className="p-lg">{featuresSection.fullyFunctionalItem.content}</p>
                       </div>
                     </div>
                   </div>
@@ -354,11 +320,9 @@ class Fleet extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Quick Access</h5>
+                        <h5 className="h5-sm">{featuresSection.quickAccessItem.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{featuresSection.quickAccessItem.content}</p>
                       </div>
                     </div>
                   </div>
@@ -370,11 +334,9 @@ class Fleet extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Track &amp; Analyze</h5>
+                        <h5 className="h5-sm">{featuresSection.trackAndAnalyzeItem.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{featuresSection.trackAndAnalyzeItem.content}</p>
                       </div>
                     </div>
                   </div>
@@ -386,11 +348,9 @@ class Fleet extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Easy To Follow</h5>
+                        <h5 className="h5-sm">{featuresSection.easy2Follow.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{featuresSection.easy2Follow.content}</p>
                       </div>
                     </div>
                   </div>
@@ -402,10 +362,9 @@ class Fleet extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Ongoing Support</h5>
+                        <h5 className="h5-sm">{featuresSection.ongoingSupport.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">We guide you step by step to convert to Electronic vehicles.We guide you step by step to convert
-                        </p>
+                        <p className="p-lg">{featuresSection.ongoingSupport.content}</p>
                       </div>
                     </div>
                   </div>
@@ -413,15 +372,14 @@ class Fleet extends React.Component {
               </div>	{/* END FEATURES-5 HOLDER */}
             </div>	   {/* End container */}		
           </section>	{/* END FEATURES-5 */}
-          {/* PROCESS-2
-			============================================= */}	
+          {/* PROCESS-2 */}	
           <section id="process-2" className="bg_fit_02 wide-100 process-section division">
             <div className="container white-color">	
               {/* SECTION TITLE */}	
               <div className="row">	
                 <div className="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
                   <div className="section-title text-center mb-60">		
-                    <h3 className="h3-sm">Custom fleet on your own time and in your own space</h3>	
+                    <h3 className="h3-sm">{stepsSection.header}</h3>	
                   </div>	
                 </div>
               </div>
@@ -430,30 +388,29 @@ class Fleet extends React.Component {
                   {/* PROCESS BOX #1 */}
                   <li id="step-2-1" className="col-md-4">
                     <div className="pbox-2 pc-20 text-center">
-                      <h5 className="h5-sm">Get Set Up</h5>							
-                      <p className="p-lg">Nemo ipsam egestas volute dolores quaerat sodales</p>		
+                      <h5 className="h5-sm">{stepsSection.step1.title}</h5>							
+                      <p className="p-lg">{stepsSection.step1.content}</p>		
                     </div>		
                   </li>
                   {/* PROCESS BOX #2 */}
                   <li id="step-2-2" className="col-md-4">
                     <div className="pbox-2 pc-20 text-center">
-                      <h5 className="h5-sm">Get Your Plan</h5>											
-                      <p className="p-lg">Nemo ipsam egestas volute dolores quaerat sodales</p>
+                      <h5 className="h5-sm">{stepsSection.step2.title}</h5>											
+                      <p className="p-lg">{stepsSection.step2.content}</p>
                     </div>		
                   </li>
                   {/* PROCESS BOX #3 */}
                   <li id="step-2-3" className="col-md-4">
                     <div className="pbox-2 pc-20 text-center">
-                      <h5 className="h5-sm">Get Moving</h5>		
-                      <p className="p-lg">Nemo ipsam egestas volute dolores quaerat sodales</p>
+                      <h5 className="h5-sm">{stepsSection.step3.title}</h5>		
+                      <p className="p-lg">{stepsSection.step3.content}</p>
                     </div>		
                   </li>
                 </ul>											
               </div>	  {/* End row */}
             </div>	   {/* End container */}
           </section>	{/* END PROCESS-2 */}
-          {/* CONTENT-1
-			============================================= */}
+          {/* CONTENT-1 */}
           <section id="content-1" className="wide-60 content-section division">
             <div className="container">
               <div className="row d-flex align-items-center m-row">
@@ -461,16 +418,13 @@ class Fleet extends React.Component {
                 <div className="col-md-7 col-lg-6 m-bottom">
                   <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Work Online and Offline</span>
+                    <span className="section-id grey-color">{trackingFleet.tag}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Stay on track and plan your fleet</h2>
+                    <h2 className="h2-md">{trackingFleet.header}</h2>
                     {/* Text */}	
-                    <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
-                      luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat 
-                      sodales a sapien
-                    </p>
+                    <p className="p-lg">{trackingFleet.desc} </p>
                     {/* Button */}
-                    <a href="#faqs-2" className="btn btn-tra-grey skyblue-hover">Read The FAQs</a>
+                    <a href="#faqs-2" className="btn btn-tra-grey skyblue-hover">{trackingFleet.cta}</a>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
                 {/* IMAGE BLOCK */}
@@ -483,8 +437,7 @@ class Fleet extends React.Component {
             </div>	   {/* End container */}
           </section>	{/* END CONTENT-1 */}
        
-          {/* TESTIMONIALS-2
-			============================================= */}
+          {/* TESTIMONIALS-2 */}
           <section id="reviews-2" className="reviews-section division">
             <div className="container">
               <div className="row">
@@ -492,13 +445,11 @@ class Fleet extends React.Component {
                 <div className="col-lg-4">
                   <div className="reviews-2-title pc-10">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Reviews</span>
+                    <span className="section-id grey-color">{testimonialSection.tag}</span>
                     {/* Title */}
-                    <h2 className="h2-md mb-20">Our Happy Customers</h2>
+                    <h2 className="h2-md mb-20">{testimonialSection.header}</h2>
                     {/* Text */}	
-                    <p className="p-lg">Aliquam augue suscipit luctus neque purus ipsum neque dolor primis undo tempus, blandit and 
-                      cursus varius
-                    </p>
+                    <p className="p-lg">{testimonialSection.text} </p>
                   </div>
                 </div>
                 {/* TESTIMONIALS CAROUSEL */}
@@ -685,8 +636,7 @@ class Fleet extends React.Component {
               </div>	
             </div>     {/* End container */}
           </section>	{/* END TESTIMONIALS-2 */}
-          {/* PRICING-2
-			============================================= */}
+          {/* PRICING-2 */}
           <section id="pricing-2" className="wide-100 pricing-section division">
             <div className="container">
               {/* SECTION TITLE */}	
@@ -769,8 +719,7 @@ class Fleet extends React.Component {
               </div>	{/* END DOWNLOAD BUTTON */}	
             </div>	   {/* End container */}
           </section>	{/* END PRICING-2 */}
-          {/* CONTENT-13
-			============================================= */}
+          {/* CONTENT-13 */}
           <section id="content-13" className="bg_dark wide-60 content-section division">
             <div className="container white-color">
               <div className="row d-flex align-items-center">
@@ -778,23 +727,19 @@ class Fleet extends React.Component {
                 <div className="col-md-6 col-xl-6">
                   <div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id">Totally Optimized</span>
+                    <span className="section-id">{optimizedSection.tag}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Intuitive features, powerful results</h2>
+                    <h2 className="h2-md">{optimizedSection.header}</h2>
                     {/* List */}	
                     <ul className="simple-list">
                       <li className="list-item">
-                        <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
-                          ligula rutrum tempor sapien
-                        </p>
+                        <p className="p-lg">{optimizedSection.list1}</p>
                       </li>
                       <li className="list-item">
-                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
+                        <p className="p-lg">{optimizedSection.list2}</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 mauris
-                        </p>
+                        <p className="p-lg">{optimizedSection.list3}</p>
                       </li>
                     </ul>
                   </div>	
@@ -808,8 +753,7 @@ class Fleet extends React.Component {
               </div>	  {/* End row */}
             </div>	   {/* End container */}
           </section>	{/* END CONTENT-13 */}
-          {/* CONTENT-14
-			============================================= */}
+          {/* CONTENT-14 */}
           <section id="content-14" className="whitesmoke_shape content-section division">
             <div className="container">
               {/* SECTION TITLE */}	
@@ -817,11 +761,9 @@ class Fleet extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-40">		
                     {/* Title */}	
-                    <h2 className="h2-md">Accessible for All Platforms</h2>	
+                    <h2 className="h2-md">{accessibiltySection.header}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
+                    <p className="p-xl">{accessibiltySection.text}</p>
                   </div>	
                 </div>
               </div>
@@ -829,14 +771,13 @@ class Fleet extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>	
               </div>	{/* END TEXT BLOCK */}	
             </div>     {/* End container */}
           </section>	{/* END CONTENT-14 */}
-          {/* FAQs-2
-			============================================= */}
+          {/* FAQs-2 */}
           <section id="faqs-2" className="wide-100 faqs-section division">				
             <div className="container">
               {/* SECTION TITLE */}	
@@ -844,11 +785,9 @@ class Fleet extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">Got Questions? Look Here</h2>	
+                    <h2 className="h2-md">{faqSection.header}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
+                    <p className="p-xl">{faqSection.text}</p>
                   </div>	
                 </div>
               </div>
@@ -946,15 +885,14 @@ class Fleet extends React.Component {
                 <div className="col-md-12">	
                   <div className="more-questions text-center mt-40">
                     <h5 className="h5-sm"><span className="flaticon-check" /> 
-                      Have more questions? <a href="mailto:yourdomain@mail.com" className="skyblue-color">Ask your question here</a>
+                      {faqSection.question} <a href="mailto:yourdomain@mail.com" className="skyblue-color">{faqSection.link}</a>
                     </h5>
                   </div>
                 </div>
               </div>
             </div>	   {/* End container */}		
           </section>	{/* END FAQs-2 */}
-          {/* NEWSLETTER-1
-			============================================= */}
+          {/* NEWSLETTER-1 */}
           <section id="newsletter-1" className="newsletter-section division">
             <div className="container">
               <div className="newsletter-wrapper bg_white">
@@ -963,9 +901,9 @@ class Fleet extends React.Component {
                   <div className="col-lg-6">
                     <div className="newsletter-txt">	
                       {/* Section ID */}	
-                      <span className="section-id">Subscribe to Our Newsletter</span>
+                      <span className="section-id">{subscribeSection.tag}</span>
                       {/* Title */}	
-                      <h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>	
+                      <h4 className="h4-xl">{subscribeSection.header}</h4>	
                     </div>								
                   </div>
                   {/* NEWSLETTER FORM */}
@@ -974,7 +912,7 @@ class Fleet extends React.Component {
                       <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>
+                          <button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">{subscribeSection.cta}</button>
                         </span>										
                       </div>
                       {/* Newsletter Form Notification */}	
@@ -985,8 +923,7 @@ class Fleet extends React.Component {
               </div>    {/* End newsletter-holder */}
             </div>	   {/* End container */}	
           </section>	{/* END NEWSLETTER-1 */}
-          {/* BLOG-1
-			============================================= */}
+          {/* BLOG-1 */}
           <section id="blog-1" className="wide-60 blog-section division">				
             <div className="container">
               {/* SECTION TITLE */}	
@@ -994,11 +931,9 @@ class Fleet extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">Our Recipes &amp; Inspiration</h2>	
+                    <h2 className="h2-md">{blogSection.header}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
+                    <p className="p-xl">{blogSection.text}</p>
                   </div>	
                 </div>
               </div>
@@ -1088,59 +1023,204 @@ class Fleet extends React.Component {
               </div>	{/* END BLOG POSTS */}
             </div>	   {/* End container */}		
           </section>	{/* END BLOG-1 */}
-          {/* DOWNLOAD-1
-			============================================= */}
+          {/* DOWNLOAD-1 */}
           <section id="download-1" className="bg_fit_01 pt-100 download-section division">
             <div className="container white-color">
               <div className="row d-flex align-items-center m-row">
                 {/* IMAGE BLOCK */}
                 <div className="col-md-5 col-lg-6 m-bottom">
                   <div className="img-block right-column pc-25 wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/img-15-fit.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/img_15_fit.png" alt="content-image" />
                   </div>
                 </div>
                 {/* TEXT BLOCK */}	
                 <div className="col-md-7 col-lg-6 m-top">
                   <div className="txt-block left-column pc-20 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Title */}
-                    <h2 className="h2-md">Take your fitness to the next level</h2>
+                    <h2 className="h2-md">{downloadSection.header}</h2>
                     {/* Text */}
-                    <p className="p-xl">Augue egestas volutpat egestas augue purus cubilia laoreet and magna suscipit luctus dolor tempus</p>
-                    {/* STORE BADGES */}
-                    <div className="stores-badge">
-                      {/* AppStore */}
-                      <a href="#" className="store">
-                        <img className="appstore" src="assets/images/appstore-white.png" alt="appstore-logo" />
-                      </a>
-                      {/* Google Play */}
-                      <a href="#" className="store">
-                        <img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-logo" />
-                      </a>
-                    </div>	
-                    {/* Rating */}
-                    <div className="txt-block-rating">
-                      <div className="stars-rating">
-                        All Versions Rating
-                        <span className="flaticon-star ml-5" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star-half-empty" />	
-                        <p className="txt-rating">Based on 7.296 user reviews (App Store &amp; Google Play)</p>
-                      </div>			
-                    </div>
+                    <p className="p-xl">{downloadSection.text}</p>     
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
               </div>    {/* End row */}
             </div>	   {/* End container */}	
           </section>	{/* END DOWNLOAD-1 */}
           
-        </div>	{/* END PAGE CONTENT */}
-      
-
-        
-            </div>
+        </div>	{/* END PAGE CONTENT */} </div>
         )
     }
 }
-export default Fleet 
+export default Fleet 
+
+// PAGE TEXT/CONTENT VARIABLES
+
+//Hero Section
+let heroSection = {
+  tag: 'HTML',
+  header: 'Float Business Fleet Management Systems',
+  desc: 'We are your A.I. enables assistance to manage your fleet and advancement to new platforms with insights on current performance and operational projections.'
+}
+
+// About Section
+let aboutSection = {
+  tag: 'FLOAT EV',
+  header: 'Electric Fleet Platform',
+  desc1: "Float's recommendation engine enables tracking of vehicle usage, ownership & service costs, fuel costs, emissions. Its Telematics IoT enabled OBD device & dashcam to connect directly to the vehicle to pull data.",
+  desc2: "Aliqum mullam blandit and tempor sapien donec lipsum gravida porta. Velna vitae auctor congue magna impedit ligula risus. Mauris donec ligula an impedit magnis",
+  cta: "Find Out More"
+}
+
+// Stats Section
+let statsSection = {
+  tag: 'Flexible Features',
+  header: "FLOAT'S DASHBOARD",
+  desc1: "Your EV fleet performance metrics are in one place, easy to locate any useful information analyze data and compare results.",
+  desc2: "Gravida porta velna vitae auctor congue magna nihil impedit ligula risus mauris donec ligula",
+  metrics: {
+    title: 'Metrics',
+    content: 'We guide a company through the EV conversion process, starting with insights on current performance of their existing fleet existing fleet.performance of their existing fleet existing fleet.'
+  },
+  access: {
+    title: 'Access',
+    content: 'We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..'
+  },
+  guide: {
+    title: 'Guide',
+    content: 'We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..'
+  },
+  motivated: {
+    title: 'Stay Motivated',
+    content: 'Take the complexity out of electrifying your fleet with industry-leading support.Porta semper lacus cursus feugiat primis ultrice ligula risus ultrice ligula risus auctor ultrice ociis'
+  }
+}
+
+// A Float Recommendation Framework (PART 1)
+let floatIntegrationSection = {
+  tag: 'Perfect Integration',
+  header: 'Float analytical, recommendation / rewards framework.',
+  desc1: 'Our platform analyzes current fleet behavior and display areas for improvement on our custom customer dashboard.',
+  desc2: 'Float saves their customers money from day one by analyzing their current fleet data on cost, emissions,time and resources and then makes recommendations on prioritization of vehicle replacements and infrastructure investments.'
+}
+
+// A Float Recommendation Framework (PART 2)
+let specialFeaturesSection ={
+  firstFeature: {
+    title: 'HD Instructional Videos',
+    content: 'Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra'
+  },
+  secondFeature: {
+    title: 'Smart Watch Optimized',
+    content: 'Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra'
+  },
+  thirdFeature: {
+    title: 'Heart Rate Tracking',
+    content: 'Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra'
+  }
+}
+
+// Brand Associations
+let brandSectionTitle = 'You might know Float from:'
+
+// Features Section (PART 1)
+let featuresSection ={
+  header: 'No,we are not just another EV!',
+  subHeader: 'Our software takes you through the daily process of transitioning your fleet to Float. Self-Management Inclusive',
+  userFriendlyItem: {
+    title: 'User-Friendly',
+    content: 'Our software takes you through the daily process of transitioning your fleet to Float.process of transitioning your fleet to Float'
+  },
+  fullyFunctionalItem: {
+    title: 'Fully functional',
+    content: 'We integrate company data into Float recommendation engine to provide insights.'
+  },
+  quickAccessItem: {
+    title: 'Quick Access',
+    content: 'Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat at impedit felis undo auctor augue mauris'
+  },
+  trackAndAnalyzeItem: {
+    title: 'Track & Analyze',
+    content: 'Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat at impedit felis undo auctor augue mauris'
+  },
+  easy2Follow: {
+    title: 'Easy To Follow',
+    content: 'Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat at impedit felis undo auctor augue mauris'
+  },
+  ongoingSupport: {
+    title: 'Ongoing Support',
+    content: 'We guide you step by step to convert to Electronic vehicles.We guide you step by step to convert'
+  }
+}
+
+// Steps Section
+let stepsSection = {
+  header: 'Custom fleet on your own time and in your own space',
+  step1: {
+    title: 'Get Set Up',
+    content: 'Nemo ipsam egestas volute dolores quaerat sodales'
+  },
+  step2: {
+    title: 'Get Your Plan',
+    content: 'Nemo ipsam egestas volute dolores quaerat sodales'
+  },
+  step3: {
+    title: 'Get Moving',
+    content: 'Nemo ipsam egestas volute dolores quaerat sodales'
+  }
+}
+
+// Network Section
+let trackingFleet = {
+  tag: 'Work Online and Offline',
+  header: 'Stay on track and plan your fleet',
+  desc: 'Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat sodales a sapien',
+  cta: 'Read the FAQs'
+}
+
+// Testimonials Section
+let testimonialSection = {
+  tag: 'Reviews',
+  header: 'Our Happy Customers',
+  text: 'Aliquam augue suscipit luctus neque purus ipsum neque d'
+}
+
+// Features Section (PART 2)
+let optimizedSection = {
+  tag: 'Totally Optimized',
+  header: 'Intuitive features, powerful results',
+  list1: 'Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium ligula rutrum tempor sapien',
+  list2: 'Quaerat sodales sapien euismod purus blandit',
+  list3: 'Nemo ipsam egestas volute turpis dolores ut '
+}
+
+// Viewport Section
+let accessibiltySection = {
+  header: 'Accessible for All Platforms',
+  text: 'Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero tempus, blandit and cursus varius magna tempus a dolor'
+}
+
+// FAQs Section
+let faqSection = {
+  header: 'Got Questions? Look Here',
+  text: 'Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero tempus, blandit and cursus varius magna tempus a dolor',
+  question: 'Have more questions?',
+  link: 'Ask your question here'
+}
+
+// Blog Section
+let blogSection = {
+  header: 'Our Recipes & Inspiration',
+  text: 'Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero tempus, blandit and cursus varius magna tempus a dolor'
+}
+
+// Subscribe Section
+let subscribeSection = {
+  tag: 'Subscribe to Our Newsletter',
+  header: 'Stay up to date with our news, ideas and updates',
+  cta: 'Subscribe Now'
+}
+
+// Download Section
+let downloadSection = {
+  header: 'Take your fleet to the next level',
+  text: 'Augue egestas volutpat egestas augue purus cubilia laoreet and magna suscipit luctus dolor tempus'
+}

src/pages/FloatHome.js

@@ -1,4 +1,7 @@
 import React, {Component} from 'react';
+import SaveMoney from '../pages/assests/images/save-money.png' 
+import GetReward from '../pages/assests/images/get-rewarded.png' 
+
 
 class FloatHome extends React.Component {
     render() {
@@ -27,13 +30,13 @@ class FloatHome extends React.Component {
                 <div className="col-md-6 col-lg-4">
                   <div className="hero-5-txt wow fadeInRight" data-wow-delay="0.4s">
                     {/* Title */}
-                    <h3 className="h3-lg">Travel Smarter. Save Money.</h3>
+                    <h3 className="h3-lg">{heroSection.header}</h3>
                     {/* Text */}
-                    <p className="p-lg grey-color">Travel smarter and safer, with Float's rideshare comparison, ride hailing and budgeting app. Available on IOS and Android.</p>
+                    <p className="p-lg grey-color">{heroSection.description}</p>
                     {/* HERO LINKS */}
                     <div className="hero-video-link">
                       <a href="https://www.youtube.com/embed/7e90gBu4pas" className="video-popup2 btn btn-md btn-video-link ico-30">
-                        <span className="flaticon-play-button" /> Watch the Overview
+                        <span className="flaticon-play-button" /> {heroSection.heroLink}
                       </a>
                     </div>
                   </div>
@@ -48,7 +51,7 @@ class FloatHome extends React.Component {
                 <div className="col-md-6 col-lg-4">
                   <div className="hero-5-btns wow fadeInLeft" data-wow-delay="0.4s">
                     {/* Title */}
-                    <h3 className="h3-lg">Intelligent Mobility Choices!</h3>
+                    <h3 className="h3-lg">{heroSection.button}</h3>
                     {/* STORE BADGES */}												
                     <div className="stores-badge">
                       {/* AppStore */}
@@ -72,18 +75,6 @@ class FloatHome extends React.Component {
 										<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
 									</a> */} 
                     </div>	{/* END STORE BADGES */}
-                    {/* Rating */}
-                    <div className="txt-block-rating">
-                      <div className="stars-rating grey-color">
-                        All Versions Rating
-                        <span className="flaticon-star ml-5" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star-half-empty" />	
-                        <p className="txt-rating">Based on 7.296 user reviews</p>
-                      </div>			
-                    </div>
                   </div>
                 </div>	{/* END HERO-5 BUTTONS */}
               </div>	  {/* End row */}
@@ -100,43 +91,37 @@ class FloatHome extends React.Component {
                   <div id="fb-1-1" className="col-md-4">
                     <div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.4s">
                       {/* Icon */}
-                      <div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-mobile-phone" /></div>
+                      <div className="fbox-1-ico ico-80 stateblue-color"><img src={SaveMoney} /></div>
                       {/* Title */}
-                      <h5 className="h5-sm">Quick Access</h5>
+                      <h5 className="h5-sm">{message.access.heading}</h5>
                       {/* Text */}
-                      <p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
-                        ociis ligula blandit
-                      </p>
+                      <p className="p-lg">{message.access.description}</p>
                     </div>
                   </div>
                   {/* FEATURE BOX #2 */}
                   <div id="fb-1-2" className="col-md-4">
                     <div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.6s">
                       {/* Icon */}
-                      <div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-chat-4" /></div>
+                      <div className="fbox-1-ico ico-80 stateblue-color"><img src={SaveMoney} /></div>
                       {/* Title */}
-                      <h5 className="h5-sm">Smart Notifications</h5>
+                      <h5 className="h5-sm">{message.notification.heading}</h5>
                       {/* Text */}
-                      <p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
-                        ociis ligula blandit
-                      </p>
+                      <p className="p-lg">{message.notification.description}</p>
                     </div>
                   </div>
                   {/* FEATURE BOX #3 */}
                   <div id="fb-1-3" className="col-md-4">
                     <div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.8s">
                       {/* Icon */}
-                      <div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-spam" /></div>
+                      <div className="fbox-1-ico ico-80 stateblue-color"><img src={GetReward} /></div>
                       {/* Title */}
-                      <h5 className="h5-sm">Spam Protection</h5>
+                      <h5 className="h5-sm">{message.spam.heading}</h5>
                       {/* Text */}
-                      <p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
-                        ociis ligula blandit
-                      </p>
+                      <p className="p-lg">{message.spam.description}</p>
                     </div>
                   </div>	
                 </div>  {/* End row */}	
-              </div>	END FEATURES-1 WRAPPER	
+              </div>	{/* END FEATURES-1 WRAPPER	 */}
             </div>	   {/* End container */}		
           </section>	{/* END FEATURES-1 */}
           {/* CONTENT-3
@@ -150,15 +135,13 @@ class FloatHome extends React.Component {
                   <div className="col-md-7 col-lg-6 m-bottom">
                     <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id grey-color">FROM A TO B</span>
+                      <span className="section-id grey-color">{travelGuide.location.leadTitle}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Travel your way, with your local travel app.</h2>
+                      <h2 className="h2-md">{travelGuide.location.title}</h2>
                       {/* Text */}	
-                      <p className="p-lg">The struggle is real and you know it, there have never been more options to move from A to B. Take back control!
-                      </p>
+                      <p className="p-lg">{travelGuide.location.desc}</p>
                       {/* Text */}	
-                      <p className="p-lg">Compare transport options and access ridesharing services directly in app, all whilst keeping track of your travel budget and traveling safely.
-                      </p>
+                      <p className="p-lg">{travelGuide.location.descTwo}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                   {/* IMAGE BLOCK */}
@@ -182,12 +165,11 @@ class FloatHome extends React.Component {
                   <div className="col-md-7 col-lg-6">
                     <div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id grey-color">SMART VISUALS</span>
+                      <span className="section-id grey-color">{travelGuide.history.leadTitle}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Your travel data at a glance.</h2>
+                      <h2 className="h2-md">{travelGuide.history.title}</h2>
                       {/* Text */}	
-                      <p className="p-lg">Keep track of the money, time and emissions you spend on your everyday travel. Float reviews your travel and analyzes your behavior to provide you with an easy overview.
-                      </p>
+                      <p className="p-lg">{travelGuide.history.desc}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                 </div>	  {/* End row */}	
@@ -204,21 +186,19 @@ class FloatHome extends React.Component {
                   <div className="col-md-7 col-lg-6 m-bottom">
                     <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id grey-color">SMART TIPS & ALERTS</span>
+                      <span className="section-id grey-color">{travelGuide.travelTips.leadTitle}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Explore your city smarter with Float.</h2>
+                      <h2 className="h2-md">{travelGuide.travelTips.title}</h2>
                       {/* Text */}	
-                      <p className="p-lg">Stay on top of how you travel. Start saving money and time, reduce your emissions, all whilst making the safest choice when
-                      </p>
+                      <p className="p-lg">{travelGuide.travelTips.desc}</p>
                       {/* Text */}	
-                      <p className="p-lg">traveling around your city. Get smart tips and alerts customized to your travel behaviour.
-                      </p>
+                      <p className="p-lg">{travelGuide.travelTips.descTwo}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                   {/* IMAGE BLOCK */}
                   <div className="col-md-5 col-lg-6 m-top">
                     <div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
-                      <img className="img-fluid" src="assets/images/home-sta-desktop.png" alt="content-image" />
+                      <img className="img-fluid" src="assets/images/home-sta-desktop1.png" alt="content-image" />
                     </div>
                   </div>
                 </div>  {/* End row */}	
@@ -234,11 +214,9 @@ class FloatHome extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">Ready to Try Float?</h2>	
+                    <h2 className="h2-md">{tryFloatSec.title}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
+                    <p className="p-xl">{tryFloatSec.desc}</p>
                   </div>	
                 </div>
               </div>
@@ -253,11 +231,9 @@ class FloatHome extends React.Component {
                       {/* Icon */}
                       <div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-user-1" /></div>
                       {/* Title */}
-                      <h5 className="h5-md">Multiple Accounts</h5>
+                      <h5 className="h5-md">{tryFloatSec.accounts.title}</h5>
                       {/* Text */}
-                      <p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
-                        ociis ligula blandit
-                      </p>
+                      <p className="p-lg">{tryFloatSec.accounts.desc}</p>
                     </div>
                   </div>
                   {/* FEATURE BOX #2 */}
@@ -266,11 +242,9 @@ class FloatHome extends React.Component {
                       {/* Icon */}
                       <div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-smiley" /></div>
                       {/* Title */}
-                      <h5 className="h5-md">Stickers &amp; Emojis</h5>
+                      <h5 className="h5-md">{tryFloatSec.emojis.title}</h5>
                       {/* Text */}
-                      <p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
-                        ociis ligula blandit
-                      </p>
+                      <p className="p-lg">{tryFloatSec.emojis.desc}</p>
                     </div>
                   </div>
                   {/* FEATURE BOX #3 */}
@@ -279,11 +253,9 @@ class FloatHome extends React.Component {
                       {/* Icon */}
                       <div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-image" /></div>
                       {/* Title */}
-                      <h5 className="h5-md">Share Files &amp; Media</h5>
+                      <h5 className="h5-md">{tryFloatSec.files.title}</h5>
                       {/* Text */}
-                      <p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
-                        ociis ligula blandit
-                      </p>
+                      <p className="p-lg">{tryFloatSec.files.desc}</p>
                     </div>
                   </div>	
                 </div>  {/* End row */}
@@ -306,12 +278,11 @@ class FloatHome extends React.Component {
                   <div className="col-md-7 col-lg-6">
                     <div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id grey-color">CUSTOM DEALS FOR YOU</span>
+                      <span className="section-id grey-color">{customDeals.leadTitle}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Get rewarded with Float points for traveling smarter.</h2>
+                      <h2 className="h2-md">{customDeals.title}</h2>
                       {/* Text */}
-                      <p className="p-lg">Gain access to exclusive deals on local transportation, neighborhood favorites, and international brands by staying on budget, avoiding peak commute times, or carpooling with friends to reduce your carbon emissions (and to stay safe!)
-                      </p>
+                      <p className="p-lg">{customDeals.desc}</p>
                     </div>	
                   </div>	{/* END CONTENT TXT */}	
                 </div>	  {/* End row */}
@@ -332,10 +303,8 @@ class FloatHome extends React.Component {
                       <div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-video-player" /></div> 
                       {/* Text */}
                       <div className="cbox-txt">
-                        <h5 className="h5-sm">Text, Voice &amp; Video Calls</h5>
-                        <p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
-                          suscipit quaerat ultrice tellus viverra
-                        </p>
+                        <h5 className="h5-sm">{customDeals.text.title}</h5>
+                        <p className="p-lg">{customDeals.text.desc}</p>
                       </div>
                     </div>	
                     {/* CONTENT BOX #2 */}
@@ -344,10 +313,8 @@ class FloatHome extends React.Component {
                       <div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-smiley" /></div> 
                       {/* Text */}
                       <div className="cbox-txt">
-                        <h5 className="h5-sm">Stickers, Emojis, Themes</h5>
-                        <p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
-                          suscipit quaerat ultrice tellus viverra
-                        </p>
+                        <h5 className="h5-sm">{customDeals.stickers.title}</h5>
+                        <p className="p-lg">{customDeals.stickers.desc}</p>
                       </div>
                     </div>	
                     {/* CONTENT BOX #3 */}
@@ -356,10 +323,8 @@ class FloatHome extends React.Component {
                       <div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-image" /></div> 
                       {/* Text */}
                       <div className="cbox-txt">
-                        <h5 className="h5-sm">Share Files &amp; Media</h5>
-                        <p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
-                          suscipit quaerat ultrice tellus viverra
-                        </p>
+                        <h5 className="h5-sm">{customDeals.media.title}</h5>
+                        <p className="p-lg">{customDeals.media.desc}</p>
                       </div>
                     </div>
                   </div>
@@ -367,7 +332,7 @@ class FloatHome extends React.Component {
                 {/* IMAGE BLOCK */}
                 <div className="col-md-5 col-lg-6 m-top">
                   <div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/img-05.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/img_05.png" alt="content-image" />
                   </div>
                 </div>
               </div>	   {/* End row */}
@@ -387,11 +352,9 @@ class FloatHome extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">More Features to Expect</h2>	
+                    <h2 className="h2-md">{moreFeatures.title}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
+                    <p className="p-xl">{moreFeatures.desc}</p>
                   </div>	
                 </div>
               </div>
@@ -406,11 +369,9 @@ class FloatHome extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Dark &amp; Light Modes</h5>
+                            <h5 className="h5-sm">{moreFeatures.mode.title}</h5>
                             {/* Text */}
-                            <p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
-                              at vitae congue tempus
-                            </p>
+                            <p className="p-md">{moreFeatures.mode.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -430,11 +391,9 @@ class FloatHome extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Group Messaging</h5>
+                            <h5 className="h5-sm">{moreFeatures.groupMes.title}</h5>
                             {/* Text */}
-                            <p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
-                              at vitae congue tempus
-                            </p>
+                            <p className="p-md">{moreFeatures.groupMes.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -454,11 +413,9 @@ class FloatHome extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Strong Encryption</h5>
+                            <h5 className="h5-sm">{moreFeatures.strongEncry.title}</h5>
                             {/* Text */}
-                            <p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
-                              at vitae congue tempus
-                            </p>
+                            <p className="p-md">{moreFeatures.strongEncry.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -478,11 +435,9 @@ class FloatHome extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Voice Assistant</h5>
+                            <h5 className="h5-sm">{moreFeatures.voiceAsst.title}</h5>
                             {/* Text */}
-                            <p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
-                              at vitae congue tempus
-                            </p>
+                            <p className="p-md">{moreFeatures.voiceAsst.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -509,36 +464,36 @@ class FloatHome extends React.Component {
                   <div id="sb-2-1" className="col-sm-6 col-lg-3">							
                     <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.4s">	
                       {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number"><span className="count-element">28</span>%</h2>
+                      <h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.fastAccess.count}</span>%</h2>
                       {/* Text */}
-                      <h5 className="h5-xs">Faster Access</h5>
+                      <h5 className="h5-xs">{stats.fastAccess.title}</h5>
                     </div>								
                   </div>
                   {/* STATISTIC BLOCK #2 */}
                   <div id="sb-2-2" className="col-sm-6 col-lg-3">										
                     <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.6s">	
                       {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number"><span className="count-element">47</span>%</h2>
+                      <h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.appPro.count}</span>%</h2>
                       {/* Text */}
-                      <h5 className="h5-xs">App Productivity</h5>
+                      <h5 className="h5-xs">{stats.appPro.title}</h5>
                     </div>							
                   </div>
                   {/* STATISTIC BLOCK #3 */}
                   <div id="sb-2-3" className="col-sm-6 col-lg-3">							
                     <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.8s">
                       {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number"><span className="count-element">54</span>%</h2>
+                      <h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.secureAccess.count}</span>%</h2>
                       {/* Text */}
-                      <h5 className="h5-xs">Secure Access</h5>	
+                      <h5 className="h5-xs">{stats.secureAccess.title}</h5>	
                     </div>						
                   </div>
                   {/* STATISTIC BLOCK #4 */}
                   <div id="sb-2-4" className="col-sm-6 col-lg-3">							
                     <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="1s">		
                       {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number"><span className="count-element">36</span>%</h2>
+                      <h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.batSaving.count}</span>%</h2>
                       {/* Text */}	
-                      <h5 className="h5-xs">Battery Saving</h5>	
+                      <h5 className="h5-xs">{stats.batSaving.title}</h5>	
                     </div>						
                   </div>
                 </div>	{/* End row */}
@@ -553,32 +508,17 @@ class FloatHome extends React.Component {
                 {/* IMAGE BLOCK */}
                 <div className="col-md-5 col-lg-6">
                   <div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/img-03.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/how-it-works-recomment-engine.png" alt="content-image" />
                   </div>
                 </div>
                 {/* TEXT BLOCK */}	
                 <div className="col-md-7 col-lg-6">
                   <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Beauty of Simplicity</span>
+                    <span className="section-id grey-color">{artIntel.artificialEngine.leadTitle}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Beautiful, award-winning design</h2>
-                    {/* List */}	
-                    <ul className="simple-list">
-                      <li className="list-item">
-                        <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
-                          ligula rutrum tempor sapien
-                        </p>
-                      </li>
-                      <li className="list-item">
-                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit</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 mauris
-                        </p>
-                      </li>
-                    </ul>
+                    <h2 className="h2-md">{artIntel.artificialEngine.title}</h2>
+                    <p className="p-lg">{artIntel.artificialEngine.desc}</p>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
               </div>	   {/* End row */}
@@ -593,27 +533,25 @@ class FloatHome extends React.Component {
                 <div className="col-md-6 col-xl-6">
                   <div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id">Totally Optimized</span>
+                    <span className="section-id">{artIntel.optimization.leadTitle}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Intuitive features, powerful results</h2>
+                    <h2 className="h2-md">{artIntel.optimization.title}</h2>
                     {/* List */}	
                     <ul className="simple-list">
                       <li className="list-item">
-                        <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
-                          ligula rutrum tempor sapien
+                        <p className="p-lg">{artIntel.optimization.desc}
                         </p>
                       </li>
                       <li className="list-item">
-                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
+                        <p className="p-lg">{artIntel.optimization.desc2}</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 mauris
+                        <p className="p-lg">{artIntel.optimization.desc3}
                         </p>
                       </li>
                     </ul>
                     {/* Button */}	
-                    <a href="#faqs-1" className="btn btn-tra-grey rose-hover">Read The FAQs</a>
+                    <a href="#faqs-1" className="btn btn-tra-grey rose-hover">{artIntel.optimization.btn}</a>
                   </div>	
                 </div>	{/* END TEXT BLOCK */}		
                 {/* IMAGE BLOCK */}	
@@ -682,10 +620,9 @@ class FloatHome extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-60">		
                     {/* Title */}	
-                    <h2 className="h2-md">Accessible for All Platforms</h2>	
+                    <h2 className="h2-md">{accessibilitySec.title}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
+                    <p className="p-xl">A{accessibilitySec.desc}
                     </p>
                   </div>	
                 </div>
@@ -694,7 +631,7 @@ class FloatHome extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>
               </div>
@@ -704,10 +641,10 @@ class FloatHome extends React.Component {
                   <div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
                     {/* Button */}
                     <a href="https://www.youtube.com/watch?v=7e90gBu4pas" className="video-popup2 btn btn-md btn-tra-grey rose-hover">
-                      See Float in Action <span className="flaticon-play-button" />
+                      {accessibilitySec.youtubeLink} <span className="flaticon-play-button" />
                     </a> 
                     {/* OS Prerequisite */}
-                    <span className="os-version">Available on Android, iOS and macOS</span>
+                    <span className="os-version">{accessibilitySec.leadTitle}</span>
                   </div>
                 </div>
               </div>	{/* END DOWNLOAD BUTTON */}
@@ -720,40 +657,22 @@ class FloatHome extends React.Component {
               <div className="row">	
                 {/* DOWNLOAD TXT */}	
                 <div className="col-lg-6">	
-                  <div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
-                    {/* Section ID */}	
-                    <span className="section-id">Built For Speed</span>
-                    {/* Title 	*/}	
-                    <h2 className="h2-md">Share text, voice, photos, videos, GIFs and files for free</h2>	
-                    {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit 
-                      posuere orci auctor purus euismod an aliquam quaerat purus
-                    </p>
-                    {/* STORE BADGES */}												
-                    <div className="stores-badge">
-                      {/* AppStore */}
+                  <div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">	
+                    <span className="section-id">{floatForSpeed.leadTitle}</span>                    
+                    <h2 className="h2-md">{floatForSpeed.title}</h2>                    
+                    <p className="p-xl">{floatForSpeed.desc}
+                    </p>                    												
+                    <div className="stores-badge">                      
                       <a href="#" className="store">
                         <img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
-                      </a>
-                      {/* Google Play */}
+                      </a>                      
                       <a href="#" className="store">
                         <img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
                       </a> 
-                      {/* Aamazon Market 
-									<a href="#" class="store">
-										<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
-									</a>  */}
-                      {/* Mac AppStore 
-									<a href="#" class="store">
-										<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
-									</a> */} 
-                      {/* Microsoft Store  
-									<a href="#" class="store">
-										<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
-									</a> */} 
-                    </div>	{/* END STORE BADGES */}	
+                    </div>	
                   </div>
-                </div>	{/* END DOWNLOAD TXT */}	
+                </div>	
+                {/* END DOWNLOAD TXT */}	
               </div>    {/* End row */}
             </div>	   {/* End container */}	
           </section>	{/* END  DOWNLOAD-6 */}
@@ -971,7 +890,7 @@ class FloatHome extends React.Component {
 									</a> */} 
                     </div>	{/* END STORE BADGES */}
                     {/* OS Prerequisite */}
-                    <span className="os-version">Available for iOS 8 and Android Devices From 5.5</span>
+                    <span className="os-version">{downloadPlatform.leadTitle}</span>
                   </div>
                 </div>
               </div>	{/* END DOWNLOAD BUTTON */}	
@@ -1127,9 +1046,9 @@ class FloatHome extends React.Component {
                   <div className="col-lg-6">
                     <div className="newsletter-txt">	
                       {/* Section ID */}	
-                      <span className="section-id">Subscribe to Our Newsletter</span>
+                      <span className="section-id">{subscribeSec.leadTitle}</span>
                       {/* Title */}	
-                      <h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>	
+                      <h4 className="h4-xl">{subscribeSec.title}</h4>	
                     </div>								
                   </div>
                   {/* NEWSLETTER FORM */}
@@ -1138,7 +1057,7 @@ class FloatHome extends React.Component {
                       <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-rose tra-rose-hover">Subscribe Now</button>
+                          <button type="submit" className="btn btn-md btn-rose tra-rose-hover">{subscribeSec.btn}</button>
                         </span>										
                       </div>
                       {/* Newsletter Form Notification */}	
@@ -1261,10 +1180,9 @@ class FloatHome extends React.Component {
                 <div className="col-lg-10 offset-lg-1">	
                   <div className="download-5-txt text-center wow fadeInUp" data-wow-delay="0.6s">
                     {/* Title 	*/}	
-                    <h2 className="h2-md">Lightning Fast. Super Powerful</h2>	
+                    <h2 className="h2-md">{floatMight.title}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque dolor primis libero tempus, blandit 
-                      posuere and ligula varius magna porta
+                    <p className="p-xl">{floatMight.desc}
                     </p>
                     {/* STORE BADGES */}												
                     <div className="stores-badge mb-50">
@@ -1292,7 +1210,7 @@ class FloatHome extends React.Component {
                   </div>
                   {/* Image */}	
                   <div className="download-5-img wow fadeInUp" data-wow-delay="0.8s">
-                    <img className="img-fluid" src="assets/images/img-20.png" alt="download-image" />
+                    <img className="img-fluid" src="assets/images/img_20.png" alt="download-image" />
                   </div>
                 </div>
               </div>    {/* End row */}
@@ -1300,10 +1218,205 @@ class FloatHome extends React.Component {
           </section>	{/* END  DOWNLOAD-5 */}
         
         </div>	{/* END PAGE CONTENT */}
-   
-        
-            </div>
+   </div>
         )
     }
 }
-export default FloatHome 
+export default FloatHome 
+
+
+// PAGE TEXT/CONTENT VARIABLES
+
+//HERO SECTION
+  let heroSection = {
+      header: `Travel Smarter. Save Money.`,
+      description: `Travel smarter and safer, with Float's rideshare comparison, ride hailing and budgeting app. Available on IOS and Android.`,
+      heroLink: 'Watch the Overview',
+      button: `Intelligent Mobility Choices!`,
+      badge: {rating: `All Versions Rating`, review: 'Based on 7.296 user reviews'}
+  };
+
+  //SECTION TWO
+  let message = {
+    access: {
+      heading: `Smart Options`, description: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
+    ociis ligula blandit`
+    },
+    notification: {heading: `Save Money`, description: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
+    ociis ligula blandit`
+    },
+    spam: {heading: `Get Rewarded`, description: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
+    ociis ligula blandit`
+    }
+  };
+
+  //SECTION THREE (TRAVEL GUIDE SECTION)
+  let travelGuide = {
+    location: {
+      leadTitle: `FROM A TO B`,
+      title: `Travel your way, with your local travel app.`,
+      desc: `The struggle is real and you know it, there have never been more options to move from A to B. Take back control!`,
+      descTwo: `Compare transport options and access ridesharing services directly in app, all whilst keeping track of your travel budget and traveling safely.`
+    },
+
+    history:{
+      leadTitle: `SMART VISUALS`,
+      title: `Your travel data at a glance.`,
+      desc: `The struggle is real and you know it, Keep track of the money, time and emissions you spend on your everyday travel. Float reviews your travel and analyzes your behavior to provide you with an easy overview.
+      there have never been more options to move from A to B. Take back control!`
+    },
+
+    travelTips:{
+      leadTitle: `SMART TIPS & ALERTS`,
+      title: `Explore your city smarter with Float.`,
+      desc: `Stay on top of how you travel. Start saving money and time, reduce your emissions, all whilst making the safest choice when`,
+      descTwo: `traveling around your city. Get smart tips and alerts customized to your travel behaviour.`
+
+    }
+  }
+
+   //SECTION FOUR (READY TO TRY FLOAT SECTION)
+   let tryFloatSec = {
+    title: `Ready to Try Float?`,
+    desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+    tempus, blandit and cursus varius magna tempus a dolor`,
+    accounts: {
+      title: `Multiple Accounts`, desc: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
+      Connectivity provides an array of features`
+    },
+    emojis: {title: `Service Options`, desc: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
+    Connectivity provides an array of features`
+    },
+    files: {title: `Connectivity`, desc: ` With Connectivity, both fleet managers and drivers will experience increased efficiencies.
+    Connectivity provides an array of features`
+    }
+  }
+
+
+  //SECTION FIVE  (CUSTOM DEALS FOR YOU SECTION)
+  let customDeals = {
+    leadTitle: `CUSTOM DEALS FOR YOU`,
+    title: `Get rewarded with Float points for traveling smarter.`,
+    desc: `Gain access to exclusive deals on local transportation, neighborhood favorites, and international brands by staying on budget, avoiding peak commute times, or carpooling with friends to reduce your carbon emissions (and to stay safe!)`,
+
+    text: {title: `Analytics`, 
+            desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
+          },
+    stickers: {title: `Service Options`, 
+            desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
+          },
+    media: {title: `Connectivity`, 
+            desc: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.Connectivity provides an array of features`
+          }
+  }
+
+  //MORE FEATURES
+  let moreFeatures = {
+    title: `More Features to Expect`,
+    desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+    tempus, blandit and cursus varius magna tempus a dolor`,
+
+    mode: {
+      title: `Monitoring`,
+      desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
+      at vitae congue tempus`
+    },
+
+    groupMes: {
+      title: `Analytics`,
+      desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
+      at vitae congue tempus`
+    },
+
+    strongEncry: {
+      title: `Unlock Functionality`,
+      desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
+      at vitae congue tempus`
+    },
+
+    voiceAsst: {
+      title: `Float Assistant`,
+      desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
+      at vitae congue tempus`
+    }
+  }
+
+
+  //STATISTICS
+  let stats = {
+    fastAccess:{
+      count: `28`,
+      title: `Faster Access`
+    },
+
+    appPro:{
+      count: `47`,
+      title: `App Productivity`
+    },
+
+    secureAccess:{
+      count: `54`,
+      title: `Secure Access`
+    },
+
+    batSaving:{
+      count: `36`,
+      title: `Battery Saving`
+    },
+  }
+
+  //AI SECTION
+  let artIntel = {
+    artificialEngine: {
+      leadTitle: `RECOMMENDATION ENGINE`,
+      title: `Float uses artificial intelligence (AI) to compare local transport options and prices for your journey.`,
+      desc: `Become a travel expert. Float aggregates transport options and gives you the control to select the safest, cheapest, quickest or greenest route to improve your daily commute.`
+    },
+
+    optimization: {
+      leadTitle: `Totally Optimized`,
+      title: `Intuitive features, powerful results`,
+      desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
+      ligula rutrum tempor sapien`,
+      desc2: `Quaerat sodales sapien euismod purus blandit`,
+      desc3: `Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo 
+      pretium a purus mauris`,
+      btn: `Read The FAQs`
+    }
+  }
+
+  //ACCESSIBILITY SECTION
+  let accessibilitySec = {
+    title: `Accessible for All Platforms`,
+    desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+    tempus, blandit and cursus varius magna tempus a dolor`,
+    youtubeLink: `See Float in Action`,
+    leadTitle: `Available on Android, iOS and macOS`,
+  }
+
+  //BULIT FOR SPEED
+  let floatForSpeed = {
+    leadTitle: `Built For Speed`,
+    title: `Easy Navigation`,
+    desc: `Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit 
+    posuere orci auctor purus euismod an aliquam quaerat purus`
+  }
+
+   //DOWNLOAD SECTION TWO
+  let downloadPlatform = {
+    leadTitle: `Available for iOS 8 and Android Devices From 5.5`
+  }
+
+  //SUBSCRIBE SECTION
+  let subscribeSec = {
+    leadTitle: `Subscribe to Our Newsletter`,
+    title: `Stay up to date with our news, ideas and updates`,
+    btn: 'Subscribe Now'
+  }
+
+  // LIGHT & POWERFUL
+  let floatMight = {
+    title: `Lightning Fast. Super Powerful`,
+    desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque dolor primis libero tempus, blandit 
+    posuere and ligula varius magna porta`,
+  }

src/pages/GetStarted.js

@@ -0,0 +1,482 @@
+import React, {Component} from 'react';
+
+class GetStarted extends React.Component {
+    render() {
+        return(
+            <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">
+
+                    <section id="features-3" className="pt-100 features-section division">
+                        <div className="container">
+                            {/* SECTION TITLE */}
+                            <div className="row">
+                                <div className="col-lg-10 offset-lg-1">
+                                    <div className="section-title text-center mb-70">
+                                        {/* Title */}
+                                        <h2 className="h2-md">Ready to Try Float?</h2>
+                                        {/* Text */}
+                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+                                            tempus, blandit and cursus varius magna tempus a dolor
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* FEATURES-3 WRAPPER */}
+                            <div className="fbox-3-wrapper">
+                                <div className="row">
+                                    {/* FEATURE BOX #1 */}
+                                    <div id="fb-3-1" className="col-md-6 col-lg-3">
+                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.4s">
+                                            {/* Icon */}
+                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-streaming" /></div>
+                                            {/* Title */}
+                                            <h5 className="h5-sm">Users</h5>
+                                            {/* Text */}
+                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
+                                        </div>
+                                    </div>
+                                    {/* FEATURE BOX #2 */}
+                                    <div id="fb-3-2" className="col-md-6 col-lg-3">
+                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.6s">
+                                            {/* Icon */}
+                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-user-1" /></div>
+                                            {/* Title */}
+                                            <h5 className="h5-sm">Fleet Managers</h5>
+                                            {/* Text */}
+                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
+                                        </div>
+                                    </div>
+                                    {/* FEATURE BOX #3 */}
+                                    <div id="fb-3-3" className="col-md-6 col-lg-3">
+                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.8s">
+                                            {/* Icon */}
+                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-echo-dot" /></div>
+                                            {/* Title */}
+                                            <h5 className="h5-sm">Ev Charge Finder</h5>
+                                            {/* Text */}
+                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
+                                        </div>
+                                    </div>
+                                    {/* FEATURE BOX #4 */}
+                                    <div id="fb-3-4" className="col-md-6 col-lg-3">
+                                        <div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="1s">
+                                            {/* Icon */}
+                                            <div className="fbox-3-ico grey-color ico-65"><span className="flaticon-notes" /></div>
+                                            {/* Title */}
+                                            <h5 className="h5-sm">Find Options</h5>
+                                            {/* Text */}
+                                            <p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
+                                        </div>
+                                    </div>
+                                </div>  {/* End row */}
+                            </div>	{/* END FEATURES-3 WRAPPER */}
+                        </div>	   {/* End container */}
+                    </section>	{/* END FEATURES-3 */}
+                    {/* CONTENT-2
+			============================================= */}
+                    <section id="content-2" className="wide-50 content-section division">
+                        <div className="container">
+                            <div className="row d-flex align-items-center">
+                                {/* IMAGE BLOCK */}
+                                <div className="col-md-5 col-lg-6">
+                                    <div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
+                                        <img className="img-fluid" src="assets/images/home-custom-deals.png" alt="content-image" />
+                                    </div>
+                                </div>
+                                {/* TEXT BLOCK */}
+                                <div className="col-md-7 col-lg-6">
+                                    <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
+                                        {/* Section ID */}
+                                        <span className="section-id grey-color">Perfect Integration</span>
+                                        {/* Title */}
+                                        <h2 className="h2-md">Makes your address book lite and user friendly</h2>
+                                        {/* Text */}
+                                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
+                                            luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
+                                            sodales a sapien
+                                        </p>
+                                    </div>
+                                </div>	{/* END TEXT BLOCK */}
+                            </div>	   {/* End row */}
+                        </div>	   {/* End container */}
+                    </section>	{/* END CONTENT-2 */}
+                    {/* CONTENT-3
+			============================================= */}
+                    <section id="content-3" className="pb-60 mt-inverse-40 content-section division">
+                        <div className="container">
+                            {/* CONTENT BOX-1 */}
+                            <div id="cb-1-1" className="cbox-1 pb-25">
+                                <div className="row d-flex align-items-center m-row">
+                                    {/* TEXT BLOCK */}
+                                    <div className="col-md-7 col-lg-6 m-bottom">
+                                        <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
+                                            {/* Section ID */}
+                                            <span className="section-id grey-color">Handling with Ease</span>
+                                            {/* Title */}
+                                            <h2 className="h2-md">Sync all contacts with social profiles</h2>
+                                            {/* Text */}
+                                            <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
+                                                luctus magna dolor luctus and egestas sapien egestas vitae nemo volute
+                                            </p>
+                                            {/* List */}
+                                            <ul className="simple-list">
+                                                <li className="list-item">
+                                                    <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
+                                                        ligula 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 mauris
+                                                    </p>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>	{/* END TEXT BLOCK */}
+                                    {/* IMAGE BLOCK */}
+                                    <div className="col-md-5 col-lg-6 m-top">
+                                        <div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
+                                            <img className="img-fluid" src="assets/images/img_05.png" alt="content-image" />
+                                        </div>
+                                    </div>
+                                </div>  {/* End row */}
+                            </div>	{/* END CONTENT BOX-1 */}
+                            {/* CONTENT BOX-2 */}
+                            <div id="cb-1-2" className="cbox-1">
+                                <div className="row d-flex align-items-center">
+                                    {/* IMAGE BLOCK */}
+                                    <div className="col-md-5 col-lg-6">
+                                        <div className="img-block left-column pc-25 mb-40 wow fadeInRight" data-wow-delay="0.6s">
+                                            <img className="img-fluid" src="assets/images/img-float.png" alt="content-image" />
+                                        </div>
+                                    </div>
+                                    {/* TEXT BLOCK */}
+                                    <div className="col-md-7 col-lg-6">
+                                        <div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
+                                            {/* Section ID */}
+                                            <span className="section-id grey-color">Register in 30 Seconds</span>
+                                            {/* Title */}
+                                            <h2 className="h2-md">Lightning fast and super powerful</h2>
+                                            {/* Text */}
+                                            <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
+                                                luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
+                                                sodales a sapien
+                                            </p>
+                                        </div>
+                                    </div>	{/* END TEXT BLOCK */}
+                                </div>	  {/* End row */}
+                            </div>	{/* END CONTENT BOX-2 */}
+                        </div>     {/* End container */}
+                    </section>	{/* END CONTENT-3 */}
+
+
+                    <section id="content-1" className="wide-60 content-section division">
+                        <div className="container">
+                            <div className="row d-flex align-items-center m-row">
+                                {/* TEXT BLOCK */}
+                                <div className="col-md-7 col-lg-6 m-bottom">
+                                    <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
+                                        {/* Section ID */}
+                                        <span className="section-id grey-color">Beauty of Simplicity</span>
+                                        {/* Title */}
+                                        <h2 className="h2-md">Beautiful, award-winning design</h2>
+                                        {/* List */}
+                                        <ul className="simple-list">
+                                            <li className="list-item">
+                                                <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
+                                                    ligula rutrum tempor sapien
+                                                </p>
+                                            </li>
+                                            <li className="list-item">
+                                                <p className="p-lg">Quaerat sodales sapien euismod purus blandit</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 mauris
+                                                </p>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>	{/* END TEXT BLOCK */}
+                                {/* IMAGE BLOCK */}
+                                <div className="col-md-5 col-lg-6 m-top">
+                                    <div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
+                                        <img className="img-fluid" src="assets/images/how-it-works-recomment-engine.png" alt="content-image" />
+                                    </div>
+                                </div>
+                            </div>	   {/* End row */}
+                        </div>	   {/* End container */}
+                    </section>	{/* END CONTENT-1 */}
+                    {/* FAQs-2
+			============================================= */}
+                    <section id="faqs-2" className="pb-100 faqs-section division">
+                        <div className="container">
+                            {/* SECTION TITLE */}
+                            <div className="row">
+                                <div className="col-lg-10 offset-lg-1">
+                                    <div className="section-title text-center mb-70">
+                                        {/* Title */}
+                                        <h2 className="h2-md">Got Questions? Look Here.</h2>
+                                        {/* Text */}
+                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+                                            tempus, blandit and cursus varius magna tempus a dolor
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* FAQs-2 QUESTIONS */}
+                            <div className="faqs-2-questions pc-15">
+                                <div className="row">
+                                    {/* 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">
+                                                {/* 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 #2 */}
+                                            <div className="question wow fadeInUp" data-wow-delay="0.6s">
+                                                {/* 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 #3 */}
+                                            <div className="question wow fadeInUp" data-wow-delay="0.8s">
+                                                {/* 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>
+                                        </div>
+                                    </div>	{/* END QUESTIONS HOLDER */}
+                                    {/* QUESTIONS HOLDER */}
+                                    <div className="col-lg-6">
+                                        <div className="questions-holder pc-10">
+                                            {/* QUESTION #4 */}
+                                            <div className="question wow fadeInUp" data-wow-delay="0.4s">
+                                                {/* 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>
+                                            {/* QUESTION #5 */}
+                                            <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 #6 */}
+                                            <div className="question wow fadeInUp" data-wow-delay="0.6s">
+                                                {/* 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>
+                                        </div>
+                                    </div>	{/* END QUESTIONS HOLDER */}
+                                </div>	{/* End row */}
+                            </div>	{/* END FAQs-2 QUESTIONS */}
+                            {/* MORE QUESTIONS BUTTON */}
+                            <div className="row">
+                                <div className="col-md-12">
+                                    <div className="more-questions text-center mt-40">
+                                        <h5 className="h5-sm"><span className="flaticon-check" />
+                                            Have more questions? <a href="contacts.html" className="skyblue-color">Ask your question here</a>
+                                        </h5>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>	   {/* End container */}
+                    </section>	{/* END FAQs-2 */}
+                    {/* MORE APPS-1
+			============================================= */}
+
+                    <section id="blog-1" className="wide-60 blog-section division">
+                        <div className="container">
+                            {/* SECTION TITLE */}
+                            <div className="row">
+                                <div className="col-lg-10 offset-lg-1">
+                                    <div className="section-title text-center mb-70">
+                                        {/* Title */}
+                                        <h2 className="h2-md">Our Tips and Latest News</h2>
+                                        {/* Text */}
+                                        <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+                                            tempus, blandit and cursus varius magna tempus a dolor
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* BLOG POSTS */}
+                            <div className="row">
+                                {/* BLOG POST #1 */}
+                                <div id="b-post-1" className="col-md-6 col-lg-4">
+                                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
+                                        {/* BLOG POST IMAGE */}
+                                        <div className="blog-post-img">
+                                            <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
+                                        </div>
+                                        {/* BLOG POST TEXT */}
+                                        <div className="blog-post-txt">
+                                            {/* Post Tag */}
+                                            <p className="p-md post-tag">Float News</p>
+                                            {/* Post Link */}
+                                            <h5 className="h5-sm">
+                                                <a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
+                                            </h5>
+                                            {/* Text */}
+                                            <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                                                congue
+                                            </p>
+                                            {/* Post Meta */}
+                                            <div className="post-meta">
+                                                <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                                                <p>12 min read</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>	{/* END  BLOG POST #1 */}
+                                {/* BLOG POST #2 */}
+                                <div id="b-post-2" className="col-md-6 col-lg-4">
+                                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
+                                        {/* BLOG POST IMAGE */}
+                                        <div className="blog-post-img">
+                                            <img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
+                                        </div>
+                                        {/* BLOG POST TEXT */}
+                                        <div className="blog-post-txt">
+                                            {/* Post Tag */}
+                                            <p className="p-md post-tag">Inspiration</p>
+                                            {/* Post Link */}
+                                            <h5 className="h5-sm">
+                                                <a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
+                                            </h5>
+                                            {/* Text */}
+                                            <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                                                congue
+                                            </p>
+                                            {/* Post Meta */}
+                                            <div className="post-meta">
+                                                <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                                                <p>8 min read</p>
+                                            </div>
+                                        </div>	{/* END BLOG POST TEXT */}
+                                    </div>
+                                </div>	{/* END  BLOG POST #2 */}
+                                {/* BLOG POST #3 */}
+                                <div id="b-post-3" className="col-md-6 col-lg-4">
+                                    <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
+                                        {/* BLOG POST IMAGE */}
+                                        <div className="blog-post-img">
+                                            <img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
+                                        </div>
+                                        {/* BLOG POST TEXT */}
+                                        <div className="blog-post-txt">
+                                            {/* Post Tag */}
+                                            <p className="p-md post-tag">Tutorials</p>
+                                            {/* Post Link */}
+                                            <h5 className="h5-sm">
+                                                <a href="single-post.html">Tempor sapien Float, donec gravida ipsum a porta justo</a>
+                                            </h5>
+                                            {/* Text */}
+                                            <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                                                congue
+                                            </p>
+                                            {/* Post Meta */}
+                                            <div className="post-meta">
+                                                <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                                                <p>22 min read</p>
+                                            </div>
+                                        </div>	{/* END BLOG POST TEXT */}
+                                    </div>
+                                </div>	{/* END  BLOG POST #3 */}
+                            </div>	{/* END BLOG POSTS */}
+                        </div>	   {/* End container */}
+                    </section>	{/* END BLOG-1 */}
+                    {/* NEWSLETTER-1
+			============================================= */}
+                    <section id="newsletter-1" className="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 */}
+
+
+            </div>
+        )
+    }
+}
+export default GetStarted

src/pages/Home.js

@@ -1007,7 +1007,7 @@ class Home extends React.Component {
 					<div className="row">
 						<div className="col-md-12">
 							<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-								<img className="img-fluid" src="assets/images/browsers.png" alt="content-image"/>
+								<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image"/>
 							</div>
 						</div>	
 					</div>	

src/pages/Home_10.js

@@ -904,7 +904,7 @@ class Home_10 extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>	
               </div>	{/* END TEXT BLOCK */}	

src/pages/Home_2.js

@@ -518,7 +518,7 @@ class Home_2 extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>	
               </div>

src/pages/Home_4.js

@@ -505,7 +505,7 @@ class Home_4 extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>
               </div>

src/pages/Home_7.js

@@ -282,7 +282,7 @@ class Home_7 extends React.Component {
               <div className="row">
                 <div className="col-md-12">
                   <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
                   </div>
                 </div>	
               </div>	{/* END TEXT BLOCK */}	

src/pages/Privacy.js

@@ -0,0 +1,273 @@
+import React, {Component} from 'react';
+
+class Privacy extends React.Component {
+    render() {
+        return(
+        <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">
+          
+          {/* TERMS & PRIVACY
+			============================================= */}
+          <section id="terms-page" className="bg_whitesmoke hero-offset-nav pb-70 terms-section division">
+            <div className="container">
+              <div className="row">
+                {/* PRIVACY CONTENT */}
+                <div className="col-lg-10 offset-lg-1">
+                  {/* TERMS TITLE */}
+                  <div className="terms-title text-center">
+                    {/* Title */}
+                    <h2 className="h2-md">Privacy Policy</h2>
+                    {/* Text */}
+                    <p className="p-xl grey-color">Last Modified: April 04, 2021</p>
+                  </div>	{/* END TERMS TITLE */}
+
+
+                    <div className="terms-box">
+                        <h4 className='h4-sm'>Our Policy</h4>
+                        <p className="p-lg">
+                        Welcome to the web site (the <span className='txt-500'>“Site”</span>) of Float Mobility, Inc. (<span className='txt-500'>“Float”</span>, “we”, “us” and/or “our”). This Site is operated by Float and has been created to provide information about our company and our mobility related services (together with the Site, the <span className='txt-500'>“Services”</span>) to our Service visitors (“you”, “your”). This Privacy Policy sets forth Float’s policy with respect to information including personally identifiable data (<span className='txt-500'>“Personal Data”</span>), Google Data (as defined below), and other information that is collected from visitors to the Site and Services.
+                        </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Information We Collect:</h4>
+                    <p className="p-lg">When you interact with us through the Services, we may collect Personal Data and other information from you, as further described below:</p>
+
+                    <ul className="simple-list">
+                        <li className="mb-2">
+                            <p className="p-lg">
+                            {" "}
+                            <span className="icon">
+                                <i className="icofont-check-circled"></i>
+                            </span>{" "}
+                            <span className='txt-500'>Personal Data That You Provide Through the Services:</span> We collect Personal Data from you when you voluntarily provide such information, such as when you register for access to the Services, link your email and/or social media accounts, contact us with inquiries, and/or otherwise use certain Services. Wherever Float collects Personal Data we make an effort to provide a link to this Privacy Policy.
+                            </p>
+                        </li>
+
+                        <li className="mb-2">
+                            <p className="p-lg">
+                            <span className='txt-500'>Gmail Integration:</span> In order to provide the Services, we will synch with your gmail account so we can summarise e-receipts and analyse your behavior. Through this integration, we will have access to your gmail inbox and any information available there (“Google Data”). Notwithstanding anything else in this Privacy Policy, we (1) only use the Google Data to provide the Services; (2) do not transfer Google Data to third parties except as necessary to provide or improve the Services, as required by law, or in connection with a merger, acquisition, or sale of assets where we provide notice to users; you (3) do not use the Google Data for serving advertisements; and (4) do not permit humans to read Google Data, except (a) if we obtain your affirmative consent, (b) as necessary for security purposes or to comply with applicable law or (c) our use is limited to internal operations and the Google Data (including derivations) have been aggregated and anonymized.
+                            </p>
+                        </li>
+                    </ul>
+
+                    <p className="mt-2">
+                        <span className='txt-500'>
+                        By voluntarily providing us with Personal Data, you are consenting to our use of it in accordance with this Privacy Policy. If you provide Personal Data to the Services, you acknowledge and agree that such Personal Data may be transferred from your current location to the offices and servers of Float and the authorized third parties referred to herein located in the United States.
+                        </span>
+                    </p>
+
+                    <h5 className='h4-sm'>Other Information:</h5>
+
+                    <ul className="simple-list">
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Non-Identifiable Data:</span> When you interact with Float through the Services, we receive and store certain personally non-identifiable information. Such information, which is collected passively using various technologies, cannot presently be used to specifically identify you. Float may store such information itself or such information may be included in databases owned and maintained by Float affiliates, agents or service providers. The Services may use such information and pool it with other information to track, for example, the total number of visitors to our Site, the number of visitors to each page of our Site, and the domain names of our visitors' Internet service providers. It is important to note that no Personal Data is available or used in this process. <br />
+                            </p>
+                            <p className="p-lg">
+                            In operating the Services, we may use a technology called "cookies." A cookie is a piece of information that the computer that hosts our Services gives to your browser when you access the Services. Our cookies help provide additional functionality to the Services and help us analyze Services usage more accurately. For instance, our Site may set a cookie on your browser that allows you to access the Services without needing to remember and then enter a password more than once during a visit to the Site. In all cases in which we use cookies, we will not collect Personal Data except with your permission. On most web browsers, you will find a “help” section on the toolbar. Please refer to this section for information on how to receive notification when you are receiving a new cookie and how to turn cookies off. We recommend that you leave cookies turned on because they allow you to take advantage of some of the Service features.
+                            </p>
+                        </li>
+
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Aggregated Personal Data:</span> In an ongoing effort to better understand and serve the users of the Services, Float often conducts research on its customer demographics, interests and behavior based on the Personal Data and other information provided to us (excluding Google Data, the use and aggregation of which is described 
+                            <a className='skyblue-color' href={`${process.env.REACT_APP_APPSITE}/privacy/#Google`}> above</a>). 
+                            This research may be compiled and analyzed on an aggregate basis, and Float may share this aggregate data with its affiliates, agents and business partners. This aggregate information does not identify you personally. Float may also disclose aggregated user statistics in order to describe our services to current and prospective business partners, and to other third parties for other lawful purposes.
+                            </p>
+                        </li>
+
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Location Information:</span> Our Service may collect and use your location information (for example, by using the GPS on your mobile device) to provide certain functionality of our Service. We will only use this information to provide you with access to certain features within the Services or in an aggregate way, as described above in the “Aggregated Personal Data” section. We will not make your location information available to any other users of the Services.</p>
+                        </li>
+
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Analytics and Tracking Technologies:</span>  We may, and we may allow third party service providers to, use cookies (as noted above) or other tracking technologies to collect information about your browsing activities over time and across different websites following your use of the Site. For example, we use Google Analytics, a web analytics service provided by Google, Inc. (“Google”). Google Analytics uses cookies to help us analyze how users use the Site and enhance your experience when you use the Site. For more information on how Google uses this data, goto:  
+                            <a className='skyblue-color' href="www.google.com/policies/privacy/partners/"> www.google.com/policies/privacy/partners/</a>.
+                            </p>
+                        </li>
+                    </ul>
+
+                    <p className="p-lg">
+                    Our Site currently does not respond to “Do Not Track” (DNT) signals and operates as described in this Privacy Policy whether or not a DNT signal is received. If we do so in the future, we will describe how we do so in this Privacy Policy.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Our Use of Your Personal Data and Other Information:</h4>
+                    <p className="p-lg">
+                    Float uses the Personal Data you provide in a manner that is consistent with this Privacy Policy. If you provide Personal Data for a certain reason, we may use the Personal Data in connection with the reason for which it was provided. For instance, if you contact us by email, we will use the Personal Data you provide to answer your question or resolve your problem. Also, if you provide Personal Data in order to obtain access to the Services, we will use your Personal Data to provide you with access to such services and to monitor your use of such services. Float and its subsidiaries and affiliates (the “Related Companies”) may also use your Personal Data and other personally non-identifiable information collected through the Services to help us improve the content and functionality of the Services, to better understand our users and to improve the Services. Float and its affiliates may use this information to contact you in the future to tell you about services we believe will be of interest to you. If we do so, each marketing communication we send you will contain instructions permitting you to "opt-out" of receiving future marketing communications. In addition, if at any time you wish not to receive any future marketing communications or you wish to have your name deleted from our mailing lists, please contact us as indicated below.
+                    </p>
+
+                    <p className="p-lg">Float will use Google Data as described in the “Gmail Integration” section above.</p>
+                    <p className="p-lg">
+                        If Float intends on using any Personal Data in any manner that is not consistent with this Privacy Policy, you will be informed of such anticipated use prior to or at the time at which the Personal Data is collected.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Our Disclosure of Your Personal Data and Other Information:</h4>
+                    <p className="p-lg">
+                    Float is not in the business of selling your information. We consider this information to be a vital part of our relationship with you. There are, however, certain circumstances in which we may share your Personal Data with certain third parties without further notice to you, as set forth below:
+                    </p>
+                    <ul className="simple-list">
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Business Transfers:</span> As we develop our business, we might sell or buy businesses or assets. In the event of a corporate sale, merger, reorganization, dissolution or similar event, Personal Data may be part of the transferred assets.
+                            </p>
+                        </li>
+
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Related Companies:</span> We may also share your Personal Data with our Related Companies for purposes consistent with this Privacy Policy.
+                            </p>
+                        </li>
+
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Agents, Consultants and Related Third Parties:</span> Float, like many businesses, sometimes hires other companies to perform certain business-related functions. Examples of such functions include mailing information, maintaining databases and processing payments. When we employ another entity to perform a function of this nature, we only provide them with the information that they need to perform their specific function.
+                            </p>
+                        </li>
+
+                        <li className="list-item">
+                            <p className="p-lg">
+                            <span className='txt-500'>Legal Requirements:</span> Float may disclose your Personal Data if required to do so by law or in the good faith belief that such action is necessary to (i) comply with a legal obligation, (ii) protect and defend the rights or property of Float, (iii) act in urgent circumstances to protect the personal safety of users of the Services or the public, or (iv) protect against legal liability.
+                            </p>
+                        </li>
+                    </ul>
+
+                    <p className="p-lg">Float discloses Google Data as described in the “Gmail Integration” section above.</p>
+                    </div>
+
+                    {/* YOUR CHOICES */}
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Your Choices:</h4>
+                    <p  className="p-lg">You can visit the Site without providing any Personal Data. If you choose not to provide any Personal Data, you may not be able to use certain Services.</p>
+                    </div>
+
+                    {/* Exclusion */}
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Exclusions:</h4>
+                    <p className="p-lg">
+                        This Privacy Policy does not apply to any Personal Data collected by Float other than Personal Data collected through the Services. This Privacy Policy shall not apply to any unsolicited information you provide to Float through the Services or through any other means. This includes, but is not limited to, information posted to any public areas of the Services, such as forums, any ideas for new products or modifications to existing products, and other unsolicited submissions (collectively, “Unsolicited Information”). All Unsolicited Information shall be deemed to be non-confidential and Float shall be free to reproduce, use, disclose, and distribute such Unsolicited Information to others without limitation or attribution.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Children:</h4>
+                    <p className="p-lg">
+                    Float does not knowingly collect Personal Data from children under the age of 13. If you are under the age of 13, please do not submit any Personal Data through the Services. We encourage parents and legal guardians to monitor their children’s Internet usage and to help enforce our Privacy Policy by instructing their children never to provide Personal Data on the Services without their permission. If you have reason to believe that a child under the age of 13 has provided Personal Data to Float through the Services, please contact us, and we will endeavor to delete that information from our databases.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Links to Other Web Sites:</h4>
+                    <p className="p-lg">
+                    This Privacy Policy applies only to the Services. The Services may contain links to other web sites not operated or controlled by Float (the “Third Party Sites”). The policies and procedures we described here do not apply to the Third Party Sites. The links from the Services do not imply that Float endorses or has reviewed the Third Party Sites. We suggest contacting those sites directly for information on their privacy policies.
+                    </p>
+                    </div>                 
+            
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Integrating Social Networking Services:</h4>
+                    <p className="p-lg">
+                    One of the special features of the Service is that it allows you to enable or log in to the Services via various social networking services like Facebook or Twitter (“Social Networking Service(s)”). By directly integrating these services, we make your online experiences richer and more personalized. To take advantage of this feature, we will ask you to log into or grant us permission via the relevant Social Networking Service. When you add a Social Networking Services account to the Service or log into the Service using your Social Networking Services account, we will collect relevant information necessary to enable the Service to access that Social Networking Service and your data contained within that Social Networking Service. As part of such integration, the Social Networking Service will provide us with access to certain information that you have provided to the Social Networking Service, and we will use, store and disclose such information in accordance with this Privacy Policy. However, please remember that the manner in which Social Networking Services use, store and disclose your information is governed by the policies of such third parties, and Float shall have no liability or responsibility for the privacy practices or other actions of any Social Networking Services that may be enabled within the Service.
+                    </p>
+
+                    <p className="p-lg">
+                        You may also have the option of posting your Services activities to Social Networking Services when you access content through the Services (for example, you may post to Facebook that you performed an activity on the Service); you acknowledge that if you choose to use this feature, your friends, followers and subscribers on any Social Networking Services you have enabled will be able to view such activity.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Security:</h4>
+                    <p className="p-lg">
+                    Float takes reasonable steps to protect the Personal Data provided via the Services from loss, misuse, and unauthorized access, disclosure, alteration, or destruction. However, no Internet or email transmission is ever fully secure or error free. In particular, email sent to or from the Services may not be secure. Therefore, you should take special care in deciding what information you send to us via email. Please keep this in mind when disclosing any Personal Data to Float via the Internet.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Other Terms and Conditions:</h4>
+                    <p className="p-lg">
+                    Your access to and use of the Services is subject to the Terms of Service at: 
+                    <a className='skyblue-color' href={`${process.env.REACT_APP_APPSITE}/terms`}>{` ${process.env.REACT_APP_APPSITE}/terms`}</a>
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Changes to Float’s Privacy Policy:</h4>
+                    <p className="p-lg"> 
+                    The Services and our business may change from time to time. As a result, at times it may be necessary for Float to make changes to this Privacy Policy. Float reserves the right to update or modify this Privacy Policy at any time and from time to time without prior notice. Please review this policy periodically, and especially before you provide any Personal Data. This Privacy Policy was last updated on the date indicated above. Your continued use of the Services after any changes or revisions to this Privacy Policy shall indicate your agreement with the terms of such revised Privacy Policy.
+                    </p>
+                    </div>
+
+                    <div className="terms-box">
+                    <h4 className='h4-sm'>Access to Information; Contacting Float:</h4>
+                    <p className="p-lg">
+                    To keep your Personal Data accurate, current, and complete, please contact us as specified below. We will take reasonable steps to update or correct Personal Data in our possession that you have previously submitted via the Services.
+                    </p>
+                    <p className="p-lg">
+                    Please also feel free to contact us if you have any questions about Float’s Privacy Policy or the information practices of the Services.
+                    </p>
+                    <p className="p-lg">You may contact us as follows: <a className='skyblue-color' href={process.env.REACT_APP_APPSITE}>{` ${process.env.REACT_APP_APPSITE}`}</a></p>
+                    </div>
+
+                </div>	{/* END TERMS CONTENT */}
+              </div>     {/* End row */}		
+            </div>	    {/* End container */}
+            {/* GEOMETRIC OVERLAY */}	
+            <div className="bg_fixed geometric_overlay" />
+          </section>	 {/* END TERMS & PRIVACY */}
+          {/* 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 */}
+     
+
+        </div>
+        )
+    }
+}
+export default Privacy

src/pages/Terms.js

@@ -27,249 +27,507 @@ class Terms extends React.Component {
                   {/* TERMS TITLE */}
                   <div className="terms-title text-center">
                     {/* Title */}
-                    <h2 className="h2-md">Our Terms &amp; Privacy</h2>
+                    {/* <h2 className="h2-md">Our Terms &amp; Privacy</h2> */}
+                    <h2 className="h2-md">Terms of Service</h2>
                     {/* Text */}
                     <p className="p-xl grey-color">Last Modified: April 04, 2021</p>
                   </div>	{/* END TERMS TITLE */}
+
                   {/* TERMS BOX */}
                   <div className="terms-box">
                     {/* Text */}
-                    <p className="p-lg">Donec sodales, nibh vel (the <span className="txt-700">"Terms"</span>) tristique aliquet, 
-                      nisi libero suscipit diam, sed tempus ante nulla purus. Donec dolor magna, suscipit in magna dignissim, porttitor
-                      an hendrerit diam. Nunc gravida ultrices faucibus. Aliquet lorem purus, quis mollis nisi laoreet at vitae. Mauris consequat tortor duis fermentum a massa 
+                    <p className="p-lg">Welcome to Float!</p>
+                    <p className="p-lg">
+                    Float Mobility, Inc. (“Float,” “we,” “us,” “our”) provides its services (described below) to you through its website located at 
+                    <a className='skyblue-color' href={process.env.REACT_APP_APPSITE}>
+                      {` ${process.env.REACT_APP_APPSITE} `}
+                    </a> 
+                    (the “Site”) and through its mobile applications and related services (collectively, such services, including any new features and applications, and the Site, the “Service(s)”), subject to the following Terms of Service (as amended from time to time, the “Terms of Service”).  We reserve the right, at our sole discretion, to change or modify portions of these Terms of Service at any time.  If we do this, we will post the changes on this page and will indicate at the top of this page the date these terms were last revised. We will also notify you, either through the Services user interface, in an email notification or through other reasonable means. Any such changes will become effective no earlier than fourteen (14) days after they are posted, except that changes addressing new functions of the Services or changes made for legal reasons will be effective immediately. Your continued use of the Service after the date any such changes become effective constitutes your acceptance of the new Terms of Service.
                     </p>
                     {/* 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 undo dapibus 
-                      libero. Quisque eu tristique neque blandit tristique justo aliquam. Aliquam <a href="#" className="skyblue-color">molestie nunc sapien justo</a>, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia 
-                      elit. Vestibulum tincidunt tincidunt massa, et porttitor justo suscipit in magna dignissim
+                    <p className="p-lg text-justify">
+                    PLEASE READ THESE TERMS OF SERVICE CAREFULLY, AS THEY CONTAIN AN AGREEMENT TO ARBITRATE AND OTHER IMPORTANT INFORMATION REGARDING YOUR LEGAL RIGHTS, REMEDIES, AND OBLIGATIONS.  THE AGREEMENT TO ARBITRATE REQUIRES (WITH LIMITED EXCEPTION) THAT YOU SUBMIT CLAIMS YOU HAVE AGAINST US TO BINDING AND FINAL ARBITRATION, AND FURTHER (1) YOU WILL ONLY BE PERMITTED TO PURSUE CLAIMS AGAINST FLOAT ON AN INDIVIDUAL BASIS, NOT AS A PLAINTIFF OR CLASS MEMBER IN ANY CLASS OR REPRESENTATIVE ACTION OR PROCEEDING, (2) YOU WILL ONLY BE PERMITTED TO SEEK RELIEF (INCLUDING MONETARY, INJUNCTIVE, AND DECLARATORY RELIEF) ON AN INDIVIDUAL BASIS, AND (3) YOU MAY NOT BE ABLE TO HAVE ANY CLAIMS YOU HAVE AGAINST US RESOLVED BY A JURY OR IN A COURT OF LAW.
+                    </p>
+                    <p className='p-lg'>
+                    In addition, when using certain services, you will be subject to any additional terms applicable to such services that may be posted on the Service from time to time, including, without limitation, the Privacy Policy located at
+                    <a className='skyblue-color' href={`${process.env.REACT_APP_APPSITE}/privacy`}>
+                      {` ${process.env.REACT_APP_APPSITE}/privacy `}.
+                    </a>
+                    All such terms are hereby incorporated by reference into these Terms of Service.
                     </p>
                   </div>	{/* END TERMS BOX */}
+
                   {/* TERMS BOX */}
                   <div className="terms-box">
                     {/* Title */}
-                    <h4 className="h4-sm">Processing of your data</h4>
+                    <h4 className="h4-sm">Access and Use of the Service</h4>
                     {/* Text */}
-                    <p className="p-lg">Donec sodales, nibh vel tristique aliquet, nisi libero suscipit diam, sed tempus ante nulla ut 
-                      purus. Donec dolor magna aliquet suscipit in magna dignissim, porttitor hendrerit. Nunc gravida ultrices a 
-                      felis eget faucibus. Praesent lorem purus, quis mollis nisi laoreet vitae. Mauris nec consequat tortor
+                    <p className="p-lg">
+                    <span className='txt-500'>Services Description:</span>  Our Services are designed to provide you with mobility information management service that allows you to consolidate, track and optimize your travel habits.  Our Services may include services to track your travel history, including method of transportation, common destinations and related costs.  We may provide certain recommendations based on your travel habits in order to reduce your travel related costs.  Our Services may also present you information relating to third party products or services (“Float Offers”) that you may be interested in. The Services may also provide you general tips, recommendations and educational material. 
                     </p>
                     {/* Text */}
-                    <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor 
-                      congue magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor 
-                      gravida donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
+                    <p className="p-lg">
+                    <span className='txt-500'>Access to Third Party Service Accounts:</span>  In order to use certain features of the Services, you may elect to grant Float access to your accounts with certain third party platforms for Float to obtain certain transactional history information about you.  Float will only use this information to provide you the Services or in an aggregated and anonymized manner to improve its products and services generally.  You represent that you are entitled to grant us access for this purpose, without any obligation by Float to pay any fees or be subject to any restrictions or limitations. By using the Services, you expressly authorize Float to access your account information maintained by identified third parties, on your behalf as your agent, and you expressly authorize such third parties to disclose your information to us.  When you use the “Add Accounts” feature of the Services, you will be directly connected to the website for the third party you have identified.  Float will submit information including usernames and passwords that you provide to log into the Site. You hereby authorize and permit Float to use and store information submitted by you to accomplish the foregoing and to configure the Services so that it is compatible with the third party sites for which you submit your information. For purposes of this Agreement and solely to provide the account information to you as part of the Services, you grant Float a limited power of attorney, and appoint Float as your attorney-in-fact and agent, to access third party sites, retrieve and use your information with the full power and authority to do and perform each thing necessary in connection with such activities, as you could do in person. YOU ACKNOWLEDGE AND AGREE THAT WHEN FLOAT IS ACCESSING AND RETRIEVING ACCOUNT INFORMATION FROM THIRD PARTY SITES, FLOAT IS ACTING AS YOUR AGENT, AND NOT AS THE AGENT OF OR ON BEHALF OF THE THIRD PARTY THAT OPERATES THE THIRD PARTY SITE. You understand and agree that the Services are not sponsored or endorsed by any third parties accessible through the Services. Float is not responsible for any payment processing errors or fees or other Services-related issues, including those issues that may arise from inaccurate account information. 
                     </p>
-                    {/* List */}	
-                    <ul className="simple-list">
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Email address</span> euismod purus pretium purus pretium ligula 
-                          rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo turpis urna augue, viverra 
-                          a augue eget
-                        </p>
-                      </li>
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Payment data</span> vitae auctor a congue magna tempor sapien gravida
-                          laoreet turpis urna augue, viverra a augue eget, dictum tempor diam pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec, dictum tempor
-                        </p>
-                      </li>
-                    </ul>
-                    {/* Text */}
-                    <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
-                      magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
+                    <p className='p-lg'>
+                    <span className='txt-500'>Your Registration Obligations:</span> You may be required to register with Float in order to access and use certain features of the Service.  If you choose to register for the Service, you agree to provide and maintain true, accurate, current and complete information about yourself as prompted by the Service’s registration form.  Registration data and certain other information about you are governed by our Privacy Policy. If you are under 13 years of age, you are not authorized to use the Service, with or without registering.  In addition, if you are under 18 years old, you may use the Service, with or without registering, only with the approval of your parent or guardian.
                     </p>
+
+                    <p className='p-lg'>
+                    <span className='txt-500'>Member Account, Password and Security:</span> You are responsible for maintaining the confidentiality of your password and account, if any, and are fully responsible for any and all activities that occur under your password or account. You agree to (a) immediately notify Float of any unauthorized use of your password or account or any other breach of security, and (b) ensure that you exit from your account at the end of each session when accessing the Service. Float will not be liable for any loss or damage arising from your failure to comply with this Section.
+                    </p>
+
+                    <p className='p-lg'>
+                    <span className='txt-500'>Modifications to Service:</span> Float reserves the right to modify or discontinue, temporarily or permanently, the Service (or any part thereof) with or without notice. You agree that Float will not be liable to you or to any third party for any modification, suspension or discontinuance of the Service.
+                    </p>
+
+                    <p className='p-lg'>
+                    <span className='txt-500'>General Practices Regarding Use and Storage:</span> You acknowledge that Float may establish general practices and limits concerning use of the Service, including without limitation the maximum period of time that data or other content will be retained by the Service and the maximum storage space that will be allotted on Float’s servers on your behalf. You agree that Float has no responsibility or liability for the deletion or failure to store any data or other content maintained or uploaded by the Service. You acknowledge that Float reserves the right to terminate accounts that are inactive for an extended period of time. You further acknowledge that Float reserves the right to change these general practices and limits at any time, in its sole discretion, with or without notice.
+                    </p>
+
+                    <p className='p-lg'>
+                    <span className='txt-500'>Mobile Services:</span> The Service includes certain services that are available via a mobile device, including (i) the ability to upload content to the Service via a mobile device, (ii) the ability to browse the Service and the Site from a mobile device and (iii) the ability to access certain features through an application downloaded and installed on a mobile device (collectively, the “Mobile Services”). To the extent you access the Service through a mobile device, your wireless service carrier’s standard charges, data rates and other fees may apply.  In addition, downloading, installing, or using certain Mobile Services may be prohibited or restricted by your carrier, and not all Mobile Services may work with all carriers or devices. By using the Mobile Services, you agree that we may communicate with you regarding Float and other entities by SMS, MMS, text message or other electronic means to your mobile device and that certain information about your usage of the Mobile Services may be communicated to us.  In the event you change or deactivate your mobile telephone number, you agree to promptly update your Float account information to ensure that your messages are not sent to the person that acquires your old number.  
+                  </p>
                   </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
+
                   <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Collection of information</h4>
-                    {/* Text */}  
-                    <p className="p-lg">In at mauris vel nisl convallis porta at vitae dui. Nam lacus ligula, vulputate mullam molestie 
-                      bibendum quis, aliquet massa elementum. Vestibulum ut sagittis massa lorem fusce cursus est.  Fusce non nulla vitae massa placerat vulputate vel purus. Aliqum blandit tempor undo sapien pulvinar consectetur nibh, vel imperdiet dui varius viverra.
+                  <h4 className='h4-sm'>Conditions of Use</h4>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>User Conduct:</span> You are solely responsible for all code, video, images, information, data, text, software, music, sound, photographs, graphics, messages or other materials (“content”) that you upload, post, publish or display (hereinafter, “upload”) or email or otherwise use via the Service.  The following are examples of the kind of content and/or use that is illegal or prohibited by Float.  Float reserves the right to investigate and take appropriate legal action against anyone who, in Float’s sole discretion, violates this provision, including without limitation, removing the offending content from the Service, suspending or terminating the account of such violators and reporting you to the law enforcement authorities.  You agree to not use the Service to: 
+                  </p>
+                  <ul className='simple-list'>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        email or otherwise upload any content that (i) infringes any intellectual property or other proprietary rights of any party; (ii) you do not have a right to upload under any law or under contractual or fiduciary relationships; (iii) contains software viruses or any other computer code, files or programs designed to interrupt, destroy or limit the functionality of any computer software or hardware or telecommunications equipment; (iv) poses or creates a privacy or security risk to any person; (v) constitutes unsolicited or unauthorized advertising, promotional materials, commercial activities and/or sales, “junk mail,” “spam,” “chain letters,” “pyramid schemes,” “contests,” “sweepstakes,” or any other form of solicitation; (vi) is unlawful, harmful, threatening, abusive, harassing, tortious, excessively violent, defamatory, vulgar, obscene, pornographic, libelous, invasive of another’s privacy, hateful racially, ethnically or otherwise objectionable; or (vii) in the sole judgment of Float, is objectionable or which restricts or inhibits any other person from using or enjoying the Service, or which may expose Float or its users to any harm or liability of any type;{" "}
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        interfere with or disrupt the Service or servers or networks connected to the Service, or disobey any requirements, procedures, policies or regulations of networks connected to the Service; or 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        violate any applicable local, state, national or international law, or any regulations having the force of law; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        impersonate any person or entity, or falsely state or otherwise misrepresent your affiliation with a person or entity;
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        solicit personal information from anyone under the age of 18;
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        harvest or collect email addresses or other contact information of other users from the Service by electronic or other means for the purposes of sending unsolicited emails or other unsolicited communications;
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        advertise or offer to sell or buy any goods or services for any business purpose that is not specifically authorized;
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        further or promote any criminal activity or enterprise or provide instructional information about illegal activities; or
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        obtain or attempt to access or otherwise obtain any materials or information through any means not intentionally made available or provided for through the Service. 
+                      </p>
+                    </li>
+                  </ul>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>Fees:</span> To the extent the Service or any portion thereof is made available for any fee, you will be required to select a payment plan and provide Float information regarding your credit card or other payment instrument.  You represent and warrant to Float that such information is true and that you are authorized to use the payment instrument.  You will promptly update your account information with any changes (for example, a change in your billing address or credit card expiration date) that may occur.  You agree to pay Float the amount that is specified in the payment plan in accordance with the terms of such plan and this Terms of Service.  You hereby authorize Float to bill your payment instrument in advance on a periodic basis in accordance with the terms of the applicable payment plan until you terminate your account, and you further agree to pay any charges so incurred  If you dispute any charges you must let Float know within sixty (60) days after the date that Float charges you. We reserve the right to change Float’s prices. If Float does change prices, Float will provide notice of the change on the Site or in email to you, at Float’s option, at least 30 days before the change is to take effect.  Your continued use of the Service after the price change becomes effective constitutes your agreement to pay the changed amount.  You shall be responsible for all taxes associated with the Services other than U.S. taxes based on Float’s net income.
+                  </p>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>Special Notice for International Use; Export Controls:</span> Software (defined below) available in connection with the Service and the transmission of applicable data, if any, is subject to United States export controls.  No Software may be downloaded from the Service or otherwise exported or re-exported in violation of U.S. export laws.  Downloading or using the Software is at your sole risk.  Recognizing the global nature of the Internet, you agree to comply with all local rules and laws regarding your use of the Service, including as it concerns online conduct and acceptable content.   
+                  </p>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>Rewards Program:</span> Your account with Float may accrue cash rewards in a variety of ways (“Rewards”). You can earn Rewards by changing your mobility behaviour in specific ways as suggested by Float. The details of the Rewards are set forth on the Float app and website, and you can track your Rewards in progress in your account Rewards page. Float shall pay you the Rewards, upon request, whenever they accrue at least 1000 points, to be paid out in cash and sent to your bank account listed in your account.
+                  </p>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>No Commercial Use:</span> The Service is for your personal use only. Unless otherwise expressly authorized herein or in the Service, you agree not to display, distribute, license, perform, publish, reproduce, duplicate, copy, create derivative works from, modify, sell, resell, exploit, transfer or upload for any commercial purposes, any portion of the Service, use of the Service, or access to the Service
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Third-Party Distribution Channels</h4>
+                  <p className='p-lg'>
+                  Float offers Software applications that may be made available through the Apple App Store, Android Marketplace or other distribution channels (“Distribution Channels”).  If you obtain such Software through a Distribution Channel, you may be subject to additional terms of the Distribution Channel.  These Terms of Service are between you and us only, and not with the Distribution Channel.  To the extent that you utilize any other third party products and services in connection with your use of our Services, you agree to comply with all applicable terms of any agreement for such third party products and services.
+                  </p>
+
+                  <p className='p-lg'>
+                  With respect to Software that is made available for your use in connection with an Apple-branded product (such Software, “Apple-Enabled Software”), in addition to the other terms and conditions set forth in these Terms of Service, the following terms and conditions apply:
+                  </p>
+                  <ul className='simple-list'>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        Float and you acknowledge that these Terms of Service are concluded between Float and you only, and not with Apple Inc. (“Apple”), and that as between Float and Apple, Float, not Apple, is solely responsible for the Apple-Enabled Software and the content thereof.
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        You may not use the Apple-Enabled Software in any manner that is in violation of or inconsistent with the Usage Rules set forth for Apple-Enabled Software in, or otherwise be in conflict with, the App Store Terms of Service.
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        Your license to use the Apple-Enabled Software is limited to a non-transferable license to use the Apple-Enabled Software on an iOS Product that you own or control, as permitted by the Usage Rules set forth in the App Store Terms of Service.
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        Apple has no obligation whatsoever to provide any maintenance or support services with respect to the Apple-Enabled Software. 
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        Apple is not responsible for any product warranties, whether express or implied by law. In the event of any failure of the Apple-Enabled Software to conform to any applicable warranty, you may notify Apple, and Apple will refund the purchase price for the Apple-Enabled Software to you, if any; and, to the maximum extent permitted by applicable law, Apple will have no other warranty obligation whatsoever with respect to the Apple-Enabled Software, or any other claims, losses, liabilities, damages, costs or expenses attributable to any failure to conform to any warranty, which will be Float’s sole responsibility, to the extent it cannot be disclaimed under applicable law.
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        Float and you acknowledge that Float, not Apple, is responsible for addressing any claims of you or any third party relating to the Apple-Enabled Software or your possession and/or use of that Apple-Enabled Software, including, but not limited to: (i) product liability claims; (ii) any claim that the Apple-Enabled Software fails to conform to any applicable legal or regulatory requirement; and (iii) claims arising under consumer protection or similar legislation.  
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        In the event of any third party claim that the Apple-Enabled Software or the end-user’s possession and use of that Apple-Enabled Software infringes that third party’s intellectual property rights, as between Float and Apple, Float, not Apple, will be solely responsible for the investigation, defense, settlement and discharge of any such intellectual property infringement claim.
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                        You represent and warrant that (i) you are not located in a country that is subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a “terrorist supporting” country; and (ii) you are not listed on any U.S. Government list of prohibited or restricted parties.
+                      </p>
+                    </li>
+                   <li className='list-item'>
+                      <p className='p-lg'>
+                      If you have any questions, complaints or claims with respect to the Apple-Enabled Software, they should be directed to Float as follows:
+                      </p>
+                    </li>
+                  </ul>
+
+                  <p className='p-lg'>
+                    <a className='skyblue-color' href={`mailto: ${process.env.REACT_APP_EMAIL}`}>
+                      {process.env.REACT_APP_EMAIL}.
+                    </a>
+                  </p>
+                  <p className='p-lg'>
+                  Float and you acknowledge and agree that Apple, and Apple’s subsidiaries, are third party beneficiaries of these Terms of Service with respect to the Apple-Enabled Software, and that, upon your acceptance of the terms and conditions of these Terms of Service, Apple will have the right (and will be deemed to have accepted the right) to enforce these Terms of Service against you with respect to the Apple-Enabled Software as a third party beneficiary thereof.
+                  </p>
+
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Intellectual Property Rights</h4>
+
+                  <p className='p-lg'>
+                  Service Content, Software and Trademarks: You acknowledge and agree that the Service may contain content or features (“Service Content”) that are protected by copyright, patent, trademark, trade secret or other proprietary rights and laws.  Except as expressly authorized by Float, you agree not to modify, copy, frame, scrape, rent, lease, loan, sell, distribute or create derivative works based on the Service or the Service Content, in whole or in part, except that the foregoing does not apply to your own User Content (as defined below) that you legally upload to the Service.  In connection with your use of the Service you will not engage in or use any data mining, robots, scraping or similar data gathering or extraction methods.  If you are blocked by Float from accessing the Service (including by blocking your IP address), you agree not to implement any measures to circumvent such blocking (e.g., by masking your IP address or using a proxy IP address).  Any use of the Service or the Service Content other than as specifically authorized herein is strictly prohibited.  The technology and software underlying the Service or distributed in connection therewith are the property of Float, our affiliates and our partners (the “Software”).  You agree not to copy, modify, create a derivative work of, reverse engineer, reverse assemble or otherwise attempt to discover any source code, sell, assign, sublicense, or otherwise transfer any right in the Software.  Any rights not expressly granted herein are reserved by Float.
+                  </p>
+
+                  <p className='p-lg'>
+                  The Float name and logos are trademarks and service marks of Float (collectively the “Float Trademarks”). Other company, product, and service names and logos used and displayed via the Service may be trademarks or service marks of their respective owners who may or may not endorse or be affiliated with or connected to Float. Nothing in this Terms of Service or the Service should be construed as granting, by implication, estoppel, or otherwise, any license or right to use any of Float Trademarks displayed on the Service, without our prior written permission in each instance. All goodwill generated from the use of Float Trademarks will inure to our exclusive benefit.
+                  </p>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>Third Party Material:</span>  Under no circumstances will Float be liable in any way for any content or materials of any third parties (including users), including, but not limited to, for any errors or omissions in any content, or for any loss or damage of any kind incurred as a result of the use of any such content.  You acknowledge that Float does not pre-screen content, but that Float and its designees will have the right (but not the obligation) in their sole discretion to refuse or remove any content that is available via the Service. Without limiting the foregoing, Float and its designees will have the right to remove any content that violates these Terms of Service or is deemed by Float, in its sole discretion, to be otherwise objectionable. You agree that you must evaluate, and bear all risks associated with, the use of any content, including any reliance on the accuracy, completeness, or usefulness of such content. 
+                  </p>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>User Content Transmitted Through the Service:</span>  With respect to the content or other materials you upload through the Service or share with other users or recipients (collectively, “User Content”), you represent and warrant that you own all right, title and interest in and to such User Content, including, without limitation, all copyrights and rights of publicity contained therein.  By uploading any User Content you hereby grant and will grant Float and its affiliated companies a nonexclusive, worldwide, royalty free, fully paid up, transferable, sublicensable, perpetual, irrevocable license to copy, display, upload, perform, distribute, store, modify and otherwise use your User Content in connection with the operation of the Service, in any form, medium or technology now known or later developed.
+                  </p>
+
+                  <p className='p-lg'>
+                  You acknowledge and agree that any questions, comments, suggestions, ideas, feedback or other information about the Service (“Submissions”), provided by you to Float are non-confidential and Float will be entitled to the unrestricted use and dissemination of these Submissions for any purpose, commercial or otherwise, without acknowledgment or compensation to you.  
+                  </p>
+
+                  <p className='p-lg'>
+                  You acknowledge and agree that Float may preserve content and may also disclose content if required to do so by law or in the good faith belief that such preservation or disclosure is reasonably necessary to: (a) comply with legal process, applicable laws or government requests; (b) enforce these Terms of Service; (c) respond to claims that any content violates the rights of third parties; or (d) protect the rights, property, or personal safety of Float, its users and the public. You understand that the technical processing and transmission of the Service, including your content, may involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
+                  </p>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>Copyright Complaints:</span> Float respects the intellectual property of others, and we ask our users to do the same.  If you believe that your work has been copied in a way that constitutes copyright infringement, or that your intellectual property rights have been otherwise violated, you should notify Float of your infringement claim in accordance with the procedure set forth below.
+                  </p>
+
+                  <p className='p-lg'>
+                  Float will process and investigate notices of alleged infringement and will take appropriate actions under the Digital Millennium Copyright Act (“DMCA”) and other applicable intellectual property laws with respect to any alleged or actual infringement.  A notification of claimed copyright infringement should be emailed to Float’s Copyright Agent at{" "}
+                    <a className='skyblue-color' href={`mailto: ${process.env.REACT_APP_EMAIL}`}>
+                      { process.env.REACT_APP_EMAIL }
+                    </a>
+                    (Subject line:  “DMCA Takedown Request”).  You may also contact us by mail or facsimile at: 
+                  </p>
+                  <p>
+                    <a className='skyblue-color' href={`mailto: ${process.env.REACT_APP_EMAIL}`}>
+                      {process.env.REACT_APP_EMAIL}
+                    </a>
+                  </p>
+
+                  <p className='p-lg'>
+                  To be effective, the notification must be in writing and contain the following information:
+                  </p>
+                  <ul className='simple-list'>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        an electronic or physical signature of the person authorized to act on behalf of the owner of the copyright or other intellectual property interest; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        a description of the copyrighted work or other intellectual property that you claim has been infringed; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        a description of where the material that you claim is infringing is located on the Service, with enough detail that we may find it on the Service; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        your address, telephone number, and email address; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        a statement by you that you have a good faith belief that the disputed use is not authorized by the copyright or intellectual property owner, its agent, or the law; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        a statement by you, made under penalty of perjury, that the above information in your Notice is accurate and that you are the copyright or intellectual property owner or authorized to act on the copyright or intellectual property owner’s behalf. 
+                      </p>
+                    </li>
+                  </ul>
+
+                  <p className='p-lg'>
+                  <span className='txt-500'>Counter-Notice:</span> If you believe that your User Content that was removed (or to which access was disabled) is not infringing, or that you have the authorization from the copyright owner, the copyright owner’s agent, or pursuant to the law, to upload and use the content in your User Content, you may send a written counter-notice containing the following information to the Copyright Agent: 
+                  </p>
+                  <ul className='simple-list'>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        your physical or electronic signature;
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        identification of the content that has been removed or to which access has been disabled and the location at which the content appeared before it was removed or disabled; 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        a statement that you have a good faith belief that the content was removed or disabled as a result of mistake or a misidentification of the content; and 
+                      </p>
+                    </li>
+                    <li className='list-item'>
+                      <p className='p-lg'>
+                        your name, address, telephone number, and email address, a statement that you consent to the jurisdiction of the federal court located within Northern District of California  and a statement that you will accept service of process from the person who provided notification of the alleged infringement. 
+                      </p>
+                    </li>
+                  </ul>
+
+                  <p className='p-lg'>
+                  If a counter-notice is received by the Copyright Agent, Float will send a copy of the counter-notice to the original complaining party informing that person that it may replace the removed content or cease disabling it in 10 business days. Unless the copyright owner files an action seeking a court order against the content provider, member or user, the removed content may be replaced, or access to it restored, in 10 to 14 business days or more after receipt of the counter-notice, at our sole discretion.
+                  </p>
+                  <p className='p-lg'>
+                  <span className='txt-500'>Repeat Infringer Policy:</span>  In accordance with the DMCA and other applicable law, Float has adopted a policy of terminating, in appropriate circumstances and at Float's sole discretion, users who are deemed to be repeat infringers.  Float may also at its sole discretion limit access to the Service and/or terminate the memberships of any users who infringe any intellectual property rights of others, whether or not there is any repeat infringement.
+                  </p>
+                </div>
+
+                {/* Third-Parties */}
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Third-Party Websites</h4>
+                  <p className='p-lg'>
+                  The Service may provide, or third parties may provide, links or other access to other sites and resources on the Internet. Float has no control over such sites and resources and Float is not responsible for and does not endorse such sites and resources.  You further acknowledge and agree that Float will not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any content, events, goods or services available on or through any such site or resource.   Any dealings you have with third parties found while using the Service are between you and the third party, and you agree that Float is not liable for any loss or claim that you may have against any such third party.
+                  </p>
+                </div>
+
+                {/* Social Networking Services */}
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Social Networking Services</h4>
+                  <p className='p-lg'>
+                  You may enable or log in to the Service via various online third party services, such as social media and social networking services like Facebook or Twitter (“Social Networking Services”). By logging in or directly integrating these Social Networking Services into the Service, we make your online experiences richer and more personalized. To take advantage of this feature and capabilities, we may ask you to authenticate, register for or log into Social Networking Services on the websites of their respective providers. As part of such integration, the Social Networking Services will provide us with access to certain information that you have provided to such Social Networking Services, and we will use, store and disclose such information in accordance with our Privacy Policy. For more information about the implications of activating these Social Networking Services and Float’s use, storage and disclosure of information related to you and your use of such services within Float (including your friend lists and the like), please see our Privacy Policy. However, please remember that the manner in which Social Networking Services use, store and disclose your information is governed solely by the policies of such third parties, and Float shall have no liability or responsibility for the privacy practices or other actions of any third party site or service that may be enabled within the Service. 
+                  </p>
+                  <p className='p-lg'>
+                  In addition, Float is not responsible for the accuracy, availability or reliability of any information, content, goods, data, opinions, advice or statements made available in connection with Social Networking Services. As such, Float is not liable for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such Social Networking Services. Float enables these features merely as a convenience and the integration or inclusion of such features does not imply an endorsement or recommendation.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Indemnity and Release</h4>
+                  <p className='p-lg'>
+                  You agree to release, indemnify and hold Float and its affiliates and their officers, employees, directors and agents (collectively, “Indemnitees”) harmless from any from any and all losses, damages, expenses, including reasonable attorneys’ fees, rights, claims, actions of any kind and injury (including death) arising out of or relating to your use of the Service, any User Content, your connection to the Service, your violation of these Terms of Service or your violation of any rights of another. Notwithstanding the foregoing, you will have no obligation to indemnify or hold harmless any Indemnitee from or against any liability, losses, damages or expenses incurred as a result of any action or inaction of such Indemnitee. If you are a California resident, you waive California Civil Code Section 1542, which says: “A general release does not extend to claims which the creditor does not know or suspect to exist in his favor at the time of executing the release, which if known by him must have materially affected his settlement with the debtor.” If you are a resident of another jurisdiction, you waive any comparable statute or doctrine.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Disclaimer of Warranties</h4>
+                  <p className='p-lg'>
+                  YOUR USE OF THE SERVICE IS AT YOUR SOLE RISK. THE SERVICE IS PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS. FLOAT EXPRESSLY DISCLAIMS ALL WARRANTIES OF ANY KIND, WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING, BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.
+                  </p>
+                  <p>
+                    FLOAT MAKES NO WARRANTY THAT (I) THE SERVICE WILL MEET YOUR REQUIREMENTS, (II) THE SERVICE WILL BE UNINTERRUPTED, TIMELY, SECURE, OR ERROR-FREE, (III) THE RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SERVICE WILL BE ACCURATE OR RELIABLE, OR (IV) THE QUALITY OF ANY PRODUCTS, SERVICES, INFORMATION, OR OTHER MATERIAL PURCHASED OR OBTAINED BY YOU THROUGH THE SERVICE WILL MEET YOUR EXPECTATIONS.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Limitation of Liability</h4>
+                  <p className='p-lg'>
+                  YOU EXPRESSLY UNDERSTAND AND AGREE THAT FLOAT WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, EXEMPLARY DAMAGES, OR DAMAGES FOR LOSS OF PROFITS INCLUDING BUT NOT LIMITED TO, DAMAGES FOR LOSS OF GOODWILL, USE, DATA OR OTHER INTANGIBLE LOSSES (EVEN IF FLOAT HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES), WHETHER BASED ON CONTRACT, TORT, NEGLIGENCE, STRICT LIABILITY OR OTHERWISE, RESULTING FROM: (I) THE USE OR THE INABILITY TO USE THE SERVICE; (II) THE COST OF PROCUREMENT OF SUBSTITUTE GOODS AND SERVICES RESULTING FROM ANY GOODS, DATA, INFORMATION OR SERVICES PURCHASED OR OBTAINED OR MESSAGES RECEIVED OR TRANSACTIONS ENTERED INTO THROUGH OR FROM THE SERVICE; (III) UNAUTHORIZED ACCESS TO OR ALTERATION OF YOUR TRANSMISSIONS OR DATA; (IV) STATEMENTS OR CONDUCT OF ANY THIRD PARTY ON THE SERVICE; OR (V) ANY OTHER MATTER RELATING TO THE SERVICE. IN NO EVENT WILL FLOAT’S TOTAL LIABILITY TO YOU FOR ALL DAMAGES, LOSSES OR CAUSES OF ACTION EXCEED THE AMOUNT YOU HAVE PAID FLOAT IN THE LAST SIX (6) MONTHS, OR, IF GREATER, ONE HUNDRED DOLLARS ($100). 
+                  </p>
+                  <p className='p-lg'>
+                  SOME JURISDICTIONS DO NOT ALLOW THE DISCLAIMER OR EXCLUSION OF CERTAIN WARRANTIES OR THE LIMITATION OR EXCLUSION OF LIABILITY FOR INCIDENTAL OR CONSEQUENTIAL DAMAGES. ACCORDINGLY, SOME OF THE ABOVE LIMITATIONS SET FORTH ABOVE MAY NOT APPLY TO YOU OR BE ENFORCEABLE WITH RESPECT TO YOU. IF YOU ARE DISSATISFIED WITH ANY PORTION OF THE SERVICE OR WITH THESE TERMS OF SERVICE, YOUR SOLE AND EXCLUSIVE REMEDY IS TO DISCONTINUE USE OF THE SERVICE. 
+                  </p>
+                  <p className='p-lg'>
+                  IF YOU ARE A USER FROM NEW JERSEY, THE FOREGOING SECTIONS TITLED “DISCLAIMER OF WARRANTIES” AND “LIMITATION OF LIABILITY” ARE INTENDED TO BE ONLY AS BROAD AS IS PERMITTED UNDER THE LAWS OF THE STATE OF NEW JERSEY.  IF ANY PORTION OF THESE SECTIONS IS HELD TO BE INVALID UNDER THE LAWS OF THE STATE OF NEW JERSEY, THE INVALIDITY OF SUCH PORTION SHALL NOT AFFECT THE VALIDITY OF THE REMAINING PORTIONS OF THE APPLICABLE SECTIONS.
+                  </p>
+                </div>
+              
+                <div className="terms-box">
+                  <p className='p-lg txt-500'>
+                    Dispute Resolution By Binding Arbitration:{" "}
+                    <strong>
+                      PLEASE READ THIS SECTION CAREFULLY AS IT AFFECTS YOUR RIGHTS.
+                    </strong>
+                  </p>
+                  <h5 className='h4-sm'>1. Agreement to Arbitrate</h5>
+                  <p className='p-lg'>
+                  This Dispute Resolution by Binding Arbitration section is referred to in this Terms of Service as the “Arbitration Agreement.”  You agree that any and all disputes or claims that have arisen or may arise between you and Float, whether arising out of or relating to this Terms of Service (including any alleged breach thereof), the Services, any advertising, any aspect of the relationship or transactions between us, shall be resolved exclusively through final and binding arbitration, rather than a court, in accordance with the terms of this Arbitration Agreement, except that you may assert individual claims in small claims court, if your claims qualify.  Further, this Arbitration Agreement does not preclude you from bringing issues to the attention of federal, state, or local agencies, and such agencies can, if the law allows, seek relief against us on your behalf.  You agree that, by entering into this Terms of Service, you and Float are each waiving the right to a trial by jury or to participate in a class action.  Your rights will be determined by a neutral arbitrator, not a judge or jury.  The Federal Arbitration Act governs the interpretation and enforcement of this Arbitration Agreement.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>
+                    2. Prohibition of Class and Representative Actions and
+                    Non-Individualized Relief
+                  </h5>
+                  <p className='p-lg'>
+                  YOU AND FLOAT AGREE THAT EACH OF US MAY BRING CLAIMS AGAINST THE OTHER ONLY ON AN INDIVIDUAL BASIS AND NOT AS A PLAINTIFF OR CLASS MEMBER IN ANY PURPORTED CLASS OR REPRESENTATIVE ACTION OR PROCEEDING.  UNLESS BOTH YOU AND FLOAT AGREE OTHERWISE, THE ARBITRATOR MAY NOT CONSOLIDATE OR JOIN MORE THAN ONE PERSON’S OR PARTY’S CLAIMS AND MAY NOT OTHERWISE PRESIDE OVER ANY FORM OF A CONSOLIDATED, REPRESENTATIVE, OR CLASS PROCEEDING.  ALSO, THE ARBITRATOR MAY AWARD RELIEF (INCLUDING MONETARY, INJUNCTIVE, AND DECLARATORY RELIEF) ONLY IN FAVOR OF THE INDIVIDUAL PARTY SEEKING RELIEF AND ONLY TO THE EXTENT NECESSARY TO PROVIDE RELIEF NECESSITATED BY THAT PARTY’S INDIVIDUAL CLAIM(S), EXCEPT THAT YOU MAY PURSUE A CLAIM FOR AND THE ARBITRATOR MAY AWARD PUBLIC INJUNCTIVE RELIEF UNDER APPLICABLE LAW TO THE EXTENT REQUIRED FOR THE ENFORCEABILITY OF THIS PROVISION.  
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>3. Pre-Arbitration Dispute Resolution</h5>
+                  <p className='p-lg'>
+                    FloatEV is always interested in resolving disputes amicably and
+                    efficiently, and most customer concerns can be resolved quickly
+                    and to the customer's satisfaction by emailing customer support
+                    at
+                    <a className='skyblue-color' href={`mailto: ${process.env.REACT_APP_EMAIL}`}>
+                      { process.env.REACT_APP_EMAIL }
+                    </a>
+                    Float is always interested in resolving disputes amicably and efficiently, and most customer concerns can be resolved quickly and to the customer's satisfaction by emailing customer support at support@myfloat.com. If such efforts prove unsuccessful, a party who intends to seek arbitration must first send to the other, by certified mail, a written Notice of Dispute ("Notice"). The Notice to Float should be sent to 1070 Cresta Way, Unit 2, San Rafael, CA 94903 ("Notice Address"). The Notice must (i) describe the nature and basis of the claim or dispute and (ii) set forth the specific relief sought. If Float and you do not resolve the claim within sixty (60) calendar days after the Notice is received, you or Float may commence an arbitration proceeding. During the arbitration, the amount of any settlement offer made by Float or you shall not be disclosed to the arbitrator until after the arbitrator determines the amount, if any, to which you or Float is entitled.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>4. Arbitration Procedures</h5>
+                  <p className='p-lg'>
+                  Arbitration will be conducted by a neutral arbitrator in accordance with the American Arbitration Association’s (“AAA”) rules and procedures, including the AAA’s Consumer Arbitration Rules (collectively, the “AAA Rules”), as modified by this Arbitration Agreement.  For information on the AAA, please visit its website, 
+                  <a className='skyblue-color' href="http://www.adr.org">www.adr.org</a>.
+                    Information about the AAA Rules and fees for consumer disputes
+                    can be found at the AAAs consumer arbitration page,{" "}
+                    <a className='skyblue-color' href="http://www.adr.org/consumer_arbitration">
+                      www.adr.org/consumer_arbitration.
+                    </a>{" "}
+                    If there is any inconsistency between any term of the AAA Rules and any term of this Arbitration Agreement, the applicable terms of this Arbitration Agreement will control unless the arbitrator determines that the application of the inconsistent Arbitration Agreement terms would not result in a fundamentally fair arbitration.  The arbitrator must also follow the provisions of these Terms of Service as a court would.  All issues are for the arbitrator to decide, including, but not limited to, issues relating to the scope, enforceability, and arbitrability of this Arbitration Agreement.  Although arbitration proceedings are usually simpler and more streamlined than trials and other judicial proceedings, the arbitrator can award the same damages and relief on an individual basis that a court can award to an individual under the Terms of Service and applicable law.  Decisions by the arbitrator are enforceable in court and may be overturned by a court only for very limited reasons.
+                  </p>
+                  <p>
+                    Unless Float and you agree otherwise, any arbitration hearings will take place in a reasonably convenient location for both parties with due consideration of their ability to travel and other pertinent circumstances.  If the parties are unable to agree on a location, the determination shall be made by AAA.  If your claim is for $10,000 or less, Float agrees that you may choose whether the arbitration will be conducted solely on the basis of documents submitted to the arbitrator, through a telephonic hearing, or by an in-person hearing as established by the AAA Rules.  If your claim exceeds $10,000, the right to a hearing will be determined by the AAA Rules.  Regardless of the manner in which the arbitration is conducted, the arbitrator shall issue a reasoned written decision sufficient to explain the essential findings and conclusions on which the award is based.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>5. Costs of Arbitration</h5>
+                  <p className='p-lg'>
+                  Payment of all filing, administration, and arbitrator fees (collectively, the “Arbitration Fees”) will be governed by the AAA Rules, unless otherwise provided in this Arbitration Agreement.  If the value of the relief sought is $75,000 or less, at your request, Float will pay all Arbitration Fees.  If the value of relief sought is more than $75,000 and you are able to demonstrate to the arbitrator that you are economically unable to pay your portion of the Arbitration Fees or if the arbitrator otherwise determines for any reason that you should not be required to pay your portion of the Arbitration Fees, Float will pay your portion of such fees.  In addition, if you demonstrate to the arbitrator that the costs of arbitration will be prohibitive as compared to the costs of litigation, Float will pay as much of the Arbitration Fees as the arbitrator deems necessary to prevent the arbitration from being cost-prohibitive.  Any payment of attorneys’ fees will be governed by the AAA Rules.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>6. Confidentiality</h5>
+                  <p className='p-lg'>
+                  All aspects of the arbitration proceeding, and any ruling, decision, or award by the arbitrator, will be strictly confidential for the benefit of all parties.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>7. Severability</h5>
+                  <p className='p-lg'>
+                  If a court or the arbitrator decides that any term or provision of this Arbitration Agreement (other than the subsection (b) titled “Prohibition of Class and Representative Actions and Non-Individualized Relief” above) is invalid or unenforceable, the parties agree to replace such term or provision with a term or provision that is valid and enforceable and that comes closest to expressing the intention of the invalid or unenforceable term or provision, and this Arbitration Agreement shall be enforceable as so modified.  If a court or the arbitrator decides that any of the provisions of subsection (b) above titled “Prohibition of Class and Representative Actions and Non-Individualized Relief” are invalid or unenforceable, then the entirety of this Arbitration Agreement shall be null and void, unless such provisions are deemed to be invalid or unenforceable solely with respect to claims for public injunctive relief.  The remainder of the Terms of Service will continue to apply.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h5 className='h4-sm'>8. Future Changes to Arbitration Agreement</h5>
+                  <p className='p-lg'>
+                  Notwithstanding any provision in this Terms of Service to the contrary, Float agrees that if it makes any future change to this Arbitration Agreement (other than a change to the Notice Address) while you are a user of the Services, you may reject any such change by sending Float written notice within thirty (30) calendar days of the change to the Notice Address provided above.  By rejecting any future change, you are agreeing that you will arbitrate any dispute between us in accordance with the language of this Arbitration Agreement as of the date you first accepted these Terms of Service (or accepted any subsequent changes to these Terms of Service).
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Termination</h4>
+                  <p className='p-lg'>
+                  You agree that Float, in its sole discretion, may suspend or terminate your account (or any part thereof) or use of the Service and remove and discard any content within the Service, for any reason, including, without limitation, for lack of use or if Float believes that you have violated or acted inconsistently with the letter or spirit of these Terms of Service. Any suspected fraudulent, abusive or illegal activity that may be grounds for termination of your use of Service, may be referred to appropriate law enforcement authorities. Float may also in its sole discretion and at any time discontinue providing the Service, or any part thereof, with or without notice. You agree that any termination of your access to the Service under any provision of this Terms of Service may be effected without prior notice, and acknowledge and agree that Float may immediately deactivate or delete your account and all related information and files in your account and/or bar any further access to such files or the Service. Further, you agree that Float will not be liable to you or any third party for any termination of your access to the Service.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>User Disputes</h4>
+                  <p className='p-lg'>
+                  You agree that you are solely responsible for your interactions with any other user in connection with the Service and Float will have no liability or responsibility with respect thereto.  Float reserves the right, but has no obligation, to become involved in any way with disputes between you and any other user of the Service.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>General</h4>
+                  <p className='p-lg'>
+                    These Terms of Service constitute the entire agreement between you and Float and govern your use of the Service, superseding any prior agreements between you and Float with respect to the Service. You also may be subject to additional terms and conditions that may apply when you use affiliate or third party services, third party content or third party software. These Terms of Service will be governed by the laws of the State of California without regard to its conflict of law provisions. With respect to any disputes or claims not subject to arbitration, as set forth above, you and Float agree to submit to the personal and exclusive jurisdiction of the state and federal courts located within San Francisco County, California. The failure of Float to exercise or enforce any right or provision of these Terms of Service will not constitute a waiver of such right or provision. If any provision of these Terms of Service is found by a court of competent jurisdiction to be invalid, the parties nevertheless agree that the court should endeavor to give effect to the parties’ intentions as reflected in the provision, and the other provisions of these Terms of Service remain in full force and effect. You agree that regardless of any statute or law to the contrary, any claim or cause of action arising out of or related to use of the Service or these Terms of Service must be filed within one (1) year after such claim or cause of action arose or be forever barred. A printed version of this agreement and of any notice given in electronic form will be admissible in judicial or administrative proceedings based upon or relating to this agreement to the same extent and subject to the same conditions as other business documents and records originally generated and maintained in printed form. You may not assign this Terms of Service without the prior written consent of Float, but Float may assign or transfer this Terms of Service, in whole or in part, without restriction. The section titles in these Terms of Service are for convenience only and have no legal or contractual effect. Notices to you may be made via either email or regular mail. The Service may also provide notices to you of changes to these Terms of Service or other matters by displaying notices or links to notices generally on the Service.
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <h4 className='h4-sm'>Your Privacy</h4>
+                  <p className='p-lg'>
+                  At Float, we respect the privacy of our users. For details please see our Privacy Policy.  By using the Service, you consent to our collection and use of personal data as outlined therein.{" "}
+                  </p>
+                  <p className='p-lg'>
+                    <span>
+                      To the extent you use the Float services and access your third party bank accounts, you also agree to the terms of our provider Salt Edge located here: 
+                      <a className='skyblue-color' href="https://www.saltedge.com/pages/end_user_license_terms">
+                      {' '}Salt Edge End User License Agreement.{' '}
+                      </a>
+                    </span>
                     </p>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX #3 */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Authorized user accounts and account security</h4>
-                    {/* Text */}
-                    <p className="p-lg">Suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida ultrices felis eget faucibus. 
-                      Praesent aliquet lorem purus, quis mollis nisi laoreet vitae. <a href="#" className="skyblue-color"> Mauris nec consequat tortor.</a> Duis fermentum a massa in convallis quisque eu interdum augue.
-                    </p>
-                    {/* Text */}  
-                    <p className="p-lg">In at mauris vel nisl convallis porta at vitae dui. Nam lacus ligula, vulputate mullam molestie 
-                      bibendum quis, aliquet massa elementum. Vestibulum ut sagittis massa lorem fusce cursus est. Fusce non nulla vitae massa placerat vulputate vel purus. Aliqum blandit tempor undo
-                    </p>	
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Prohibited conduct and content</h4>
-                    {/* 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. Curabiturac dapibus libero. Quisque 
-                      eu tristique neque. Phasellus blandit tristique justo ut aliquam. Aliquam vitae <a href="#" className="skyblue-color">molestie nunc sapien justo</a>, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia elit. Vestibulum tincidunt tincidunt massa, et porttitor justo.
-                    </p>
-                    {/* List */}	
-                    <ul className="simple-list">
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Quaerat sodales sapien undo euismod purus blandit velna</span> 
-                          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>
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Nemo ipsam egestas volute turpis dolores</span> ut aliquam quaerat
-                          sodales sapien congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus efficitur ipsum primis in cubilia undo pretium a purus pretium ligula
-                        </p>
-                      </li>
-                    </ul>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX #5 */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Your responsibilities</h4>
-                    {/* Text */}
-                    <p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
-                      magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
-                    </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 congue cursus
-                        </p>
-                      </li>
-                      <li className="list-item">
-                        <p className="p-lg">Aliquam varius neque commodo purus vulputate pharetra bibendum in ante ornare metus</p></li>
-                      <li className="list-item">
-                        <p className="p-lg">Morbi dui lectus, lobortis sit amet felis nec, suscipit imperdiet sapien semper ultrices</p></li>
-                      <li className="list-item">
-                        <p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus 
-                          et netus et malesuada famesa augue suscipit, luctus neque purus ipsum neque dolor primis
-                        </p>
-                      </li>
-                    </ul>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Availability of services</h4>
-                    {/* List */}	
-                    <ul className="simple-list">
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Nemo ipsam egestas volute turpis dolores</span> ut aliquam quaerat 
-                          sodales sapien congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus efficitur ipsum primis in cubilia undo pretium a purus pretium ligula
-                        </p>
-                      </li>
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Quaerat sodales sapien undo euismod purus blandit velna</span> 
-                          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>
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Fringilla risus nec, luctus mauris orci auctor</span> euismod purus
-                          pretium purus pretium ligula  rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
-                          quis vehicula magna luctus tempor. Quisque laoreet turpis urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat imperdiet dui varius viverra
-                        </p>
-                      </li>
-                    </ul>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Term for storing personal data</h4>
-                    {/* Text */}
-                    <p className="p-lg">Donec sodales, nibh vel tristique aliquet, nisi libero suscipit diam, sed tempus ante nulla
-                      purus. Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida
-                    </p>
-                    {/* Text */}
-                    <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
-                      magna impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida a donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
-                    </p>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Warranty limitations</h4>
-                    {/* Text */}
-                    <p className="p-lg">Ut non mauris libero. Sed consequat posuere nunc, eu porttitor neque dignissim donec bibendum a
-                      sodales elit blandit. Suspendisse at finibus metus. Integer nulla quam, pulvinar fermentum a commodo undo pulvinar sed nisi. Sed augue turpis, mollis a vehicula ornare, dapibus
-                    </p>
-                    {/* Text */}
-                    <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue 
-                      magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida an donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet egestas and luctus donec purus and blandit sodales
-                    </p>								
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX #9 */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Notices</h4>
-                    {/* Text */}
-                    <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 imperdiet dui varius viverra. Pellentesque ac massa lorem fusce cursus aliquet elementum 
-                    </p>
-                    {/* List */}	
-                    <ul className="simple-list">
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Quaerat sodales sapien undo euismod purus blandit velna</span> 
-                          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>
-                      <li className="list-item">
-                        <p className="p-lg"><span className="txt-500">Fringilla risus nec, luctus mauris orci auctor</span> euismod purus
-                          pretium purus pretium ligula  rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo quis vehicula magna luctus tempor. Quisque laoreet turpis urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat imperdiet dui varius viverra
-                        </p>	
-                      </li>
-                    </ul>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Third Party Beneficiary</h4>
-                    {/* Text */}
-                    <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue 
-                      magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida at donec enim ipsum porta justo integer odio velna a purus ipsum primis in cubilia laoreet undo augue egestas luctus donec purus and blandit sodales
-                    </p>
-                    {/* Text */}
-                    <p className="p-lg">Donec sodales, nibh vel tristique aliquet, nisi libero suscipit diam, sed tempus ante nulla purus. Donec dolor suscipit and magna, in magna dignissim, porttitor hendrerit nunc gravida ultrices felis. Quisque eleifend arcu ac tellus cursus, nec vehicula diam tempus. Nam ut sapien et mi congue tincidunt. Phasellus in exneque.
-                    </p>
-                  </div>	{/* END TERMS BOX */}
-                  {/* TERMS BOX */}
-                  <div className="terms-box">
-                    {/* Title */}
-                    <h4 className="h4-sm">Other Terms</h4>
-                    {/* Text */}
-                    <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
-                      magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien congue tempor gravida a
-                      donec enim ipsum porta justo integer velna a purus efficitur ipsum primis in cubilia laoreet an augue egestas
-                      luctus donec purus and blandit sodales
-                    </p>
-                    {/* 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 ac dapibus  ibero. Quisque 
-                      undo tristique neque phasellus blandit non tristique justo ut aliquam. Aliquam vitae <a href="#" className="skyblue-color"> molestie nunc sapien justo</a>, aliquet molestie sed, venenatis nec purus. Aliquam eget lacinia elit. Vestibulum tincidunt tincidunt
-                    </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 a faucibus felis. Praesent aliquet tempus, blandit posuere ligula varius congue cursus
-                        </p>
-                      </li>
-                      <li className="list-item">
-                        <p className="p-lg">Aliquam varius neque commodo purus vulputate pharetra bibendum in ante ornare metus</p>
-                      </li>
-                      <li className="list-item">
-                        <p className="p-lg">Morbi dui lectus, lobortis sit amet felis nec, suscipit imperdiet sapien semper ultrices. 
-                          Nulla tincidunt purus volutpat at tincidunt. Habitant morbi tristique senectus et netus malesuada famesa augue suscipit a luctus neque purus ipsum neque dolor
-                        </p>
-                      </li>
-                    </ul>
-                    {/* Text */}
-                    <p className="p-lg">Suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida ultrices felis eget faucibus.
-                      Praesent and aliquet lorem purus, quis mollis nisi laoreet vitae. <a href="#" className="skyblue-color"> Mauris nec consequat tortor</a>
-                    </p>
-                  </div>	{/* END TERMS BOX */}
+                </div>
+
+                <div>
+                  <h4 className='h4-sm'>Notice for California Users</h4>
+                  <p className='p-lg'>
+                  Under California Civil Code Section 1789.3, users of the Service from California are entitled to the following specific consumer rights notice: The Complaint Assistance Unit of the Division of Consumer Services of the California Department of Consumer Affairs may be contacted in writing at 1625 North Market Blvd., Suite N 112, Sacramento, CA 95834, or by telephone at (916) 445-1254 or (800) 952-5210. You may contact us at Float, Inc., 1070 Cresta Way, Unit 2, San Rafael, CA 94903. +1.917.362.8893
+                  </p>
+                </div>
+
+                <div className="terms-box">
+                  <p className='p-lg'><span className='txt-500'>Questions? Concerns? Suggestions?</span></p>
+                  <p className='p-lg'>
+                    Please contact us at{" "}
+                    <a className='skyblue-color' href={`mailto: ${process.env.REACT_APP_EMAIL}`}>
+                      {process.env.REACT_APP_EMAIL}
+                    </a>{" "}
+                    to report any violations of these Terms of Service or to pose any questions regarding this Terms of Service or the Service.
+                  </p>
+                </div>
+
                 </div>	{/* END TERMS CONTENT */}
               </div>     {/* End row */}		
             </div>	    {/* End container */}

src/pages/Users.js

@@ -26,9 +26,10 @@ class Users extends React.Component {
                 <div className="col-lg-6 col-xl-6 m-bottom">
                   <div className="hero-8-txt pc-25 wow fadeInRight" data-wow-delay="0.6s">
                     {/* Text */}
-                    <h4 className="h4-sm">Float®</h4>
-                    <h2 className="h2-sm">Your Activity Feed</h2>
-                    <h5 className="h5-xl">Stay Connected with Your Friends</h5>
+                    <h4 className="h4-sm">{heroSection.leadTitle}®</h4>
+                    <h2 className="h2-sm">{heroSection.title}</h2>
+                    <h5 className="h5-xl">{heroSection.desc}</h5>
+                    <div>
                     {/* STORE BADGES */}											
                     <div className="stores-badge">
                       {/* AppStore */}
@@ -39,37 +40,19 @@ class Users extends React.Component {
                       <a href="#" className="store">
                         <img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
                       </a> 
-                      {/* Aamazon Market 
-									<a href="#" class="store">
-										<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
-									</a>  */}
-                      {/* Mac AppStore 
-									<a href="#" class="store">
-										<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
-									</a> */} 
-                      {/* Microsoft Store  
-									<a href="#" class="store">
-										<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
-									</a> */}
                     </div>	{/* END STORE BADGES */}	
-                    {/* Rating */}
-                    <div className="txt-block-rating">
-                      <div className="stars-rating dark-color">
-                        All Versions Rating
-                        <span className="flaticon-star ml-5" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star" />
-                        <span className="flaticon-star-half-empty" />	
-                        <p className="txt-rating">Based on 7.296 user reviews</p>
-                      </div>			
+                   
+                    {/* USER PORTAL */}
+                    <div>
+                      <a className='btn btn-rose tra-grey-hover' href={`${process.env.REACT_APP_USERS}/`} target='_blank' >{heroSection.mainSiteLink}</a>
+                    </div>
                     </div>
                   </div>
                 </div>	{/* END HERO TEXT */}	
                 {/* HERO IMAGE */}
                 <div className="col-lg-6 col-xl-6 11offset-xl-1 m-top">	
                   <div className="hero-8-img pr-20 text-center wow fadeInDown" data-wow-delay="0.4s">				
-                    <img className="img-fluid" src="assets/images/hero-8-img.png" alt="hero-image" />				
+                    <img className="img-fluid" src="assets/images/hero-8-img.png" alt="hero-image" />
                   </div>
                 </div>
               </div>    {/* End row */}		 											
@@ -90,11 +73,9 @@ class Users extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Multiple Accounts</h5>
+                        <h5 className="h5-sm">{features.accounts.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{features.accounts.desc}</p>
                       </div>
                     </div>
                   </div>	
@@ -106,11 +87,9 @@ class Users extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Text, Voice &amp; Video Calls</h5>
+                        <h5 className="h5-sm">{features.float.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{features.float.desc}</p>
                       </div>
                     </div>
                   </div>
@@ -122,11 +101,9 @@ class Users extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Share Files &amp; Media</h5>
+                        <h5 className="h5-sm">{features.files.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{features.files.desc}</p>
                       </div>
                     </div>
                   </div>
@@ -138,11 +115,9 @@ class Users extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Alerts &amp; Notifications</h5>
+                        <h5 className="h5-sm">{features.notification.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{features.notification.desc}</p>
                       </div>
                     </div>
                   </div>
@@ -154,11 +129,9 @@ class Users extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Online Verification</h5>
+                        <h5 className="h5-sm">{features.verification.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{features.verification.desc}</p>
                       </div>
                     </div>
                   </div>
@@ -170,95 +143,16 @@ class Users extends React.Component {
                       {/* Text */}
                       <div className="fbox-txt">
                         {/* Title */}
-                        <h5 className="h5-sm">Spam Protection</h5>
+                        <h5 className="h5-sm">{features.spam.title}</h5>
                         {/* Text */}
-                        <p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
-                          at impedit felis undo auctor augue mauris
-                        </p>
+                        <p className="p-lg">{features.spam.desc}</p>
                       </div>
                     </div>
                   </div>
                 </div>  {/* End row */}	
               </div>	{/* END FEATURES-5 HOLDER */}
             </div>	   {/* End container */}		
-          </section>	{/* END FEATURES-5 */}
-          {/* SECTION DIVIDER
-			============================================= */}
-          <div className="divider-wrapper text-center"><div className="section-divider" /></div>
-          {/* CONTENT-11
-			============================================= */}
-          <section id="content-11" className="pt-100 content-section division">
-            <div className="container">
-              {/* SECTION TITLE */}	
-              <div className="row">	
-                <div className="col-lg-10 offset-lg-1">
-                  <div className="section-title text-center mb-60 wow fadeInUp" data-wow-delay="0.6s">		
-                    {/* Title */}	
-                    <h2 className="h2-md">Chat with Your Friends Easily</h2>	
-                    {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
-                  </div>	
-                </div>
-              </div>
-              {/* IMAGE BLOCK */}
-              <div className="row">
-                <div className="col-md-12">
-                  <div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/socials.png" alt="content-image" />
-                  </div>
-                </div>
-              </div>
-            </div>	   {/* End container */}
-          </section>	{/* END CONTENT-11 */}
-          {/* STATISTIC-2
-			============================================= */}
-          <div id="statistic-2" className="wide-60 statistic-section division">
-            <div className="container">
-              {/* STATISTIC-2 WRAPPER */}
-              <div className="statistic-2-wrapper pc-35 text-center">
-                <div className="row">
-                  {/* STATISTIC BLOCK #1 */}
-                  <div id="sb-2-1" className="col-sm-6 col-lg-3">							
-                    <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.4s">	
-                      {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">28</span>%</h2>
-                      {/* Text */}
-                      <h5 className="h5-xs">Faster Access</h5>
-                    </div>								
-                  </div>
-                  {/* STATISTIC BLOCK #2 */}
-                  <div id="sb-2-2" className="col-sm-6 col-lg-3">										
-                    <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.6s">	
-                      {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">47</span>%</h2>
-                      {/* Text */}
-                      <h5 className="h5-xs">App Productivity</h5>
-                    </div>							
-                  </div>
-                  {/* STATISTIC BLOCK #3 */}
-                  <div id="sb-2-3" className="col-sm-6 col-lg-3">							
-                    <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.8s">
-                      {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">54</span>%</h2>
-                      {/* Text */}
-                      <h5 className="h5-xs">Secure Access</h5>	
-                    </div>						
-                  </div>
-                  {/* STATISTIC BLOCK #4 */}
-                  <div id="sb-2-4" className="col-sm-6 col-lg-3">							
-                    <div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="1s">		
-                      {/* Digit */}
-                      <h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">36</span>%</h2>
-                      {/* Text */}	
-                      <h5 className="h5-xs">Battery Saving</h5>	
-                    </div>						
-                  </div>
-                </div>	{/* End row */}
-              </div>	{/* END STATISTIC-2 WRAPPER */}
-            </div>	 {/* End container */}		
-          </div>	 {/* END STATISTIC-2 */}
+          </section>	{/* END FEATURES-5 */}       
           {/* CONTENT-12
 			============================================= */}
           <section id="content-12" className="mb-60 content-section division">
@@ -269,21 +163,17 @@ class Users extends React.Component {
                   <div className="col-lg-5">
                     <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
                       {/* Title */}	
-                      <h2 className="h2-xs">Work smarter with powerful automation</h2>
+                      <h2 className="h2-xs">{automate.title}</h2>
                       {/* Text */}	
-                      <p className="p-lg">Quaerat sodales sapien euismod purus at blandit and purus ipsum primis and cubilia laoreet 
-                        augue a luctus magna dolor luctus mauris pretium a sapien egestas luctus
-                      </p>
+                      <p className="p-lg">{automate.desc}</p>
                       {/* Text */}	
-                      <p className="p-lg">Fringilla risus, luctus mauris auctor a purus euismod orci pretium purus pretium undo ligula 
-                        rutrum tempor magna dolor 
-                      </p>
+                      <p className="p-lg">{automate.descTwo}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                   {/* IMAGE BLOCK */}
                   <div className="col-lg-7">
                     <div className="content-12-img right-column wow fadeInLeft" data-wow-delay="0.6s">
-                      <img className="img-fluid" src="assets/images/img-12.png" alt="content-image" />
+                      <img className="img-fluid" src="assets/images/info-pair.png" alt="content-image" />
                     </div>
                   </div>
                 </div>
@@ -296,29 +186,29 @@ class Users extends React.Component {
             <div className="container">
               {/* CONTENT BOX-1 */}
               <div id="cb-1-1" className="cbox-1 pb-25">
-                <div className="row d-flex align-items-center">
+                <div className="row align-items-center">
                   {/* IMAGE BLOCK */}
-                  <div className="col-md-5 col-lg-6">
+                  <div className="col-md-6 col-lg-6">
                     <div className="img-block left-column pc-25 mb-40 wow fadeInRight" data-wow-delay="0.6s">
-                      <img className="img-fluid" src="assets/images/img-07.png" alt="content-image" />
+                      <img className="img-fluid" src="assets/images/route-mockup2.png" alt="content-image" />
                     </div>
                   </div>
+                  {/* <div className="col-lg-7">
+                    <div className="content-12-img right-column wow fadeInLeft" data-wow-delay="0.6s">
+                      <img className="img-fluid" src="assets/images/info-pair.png" alt="content-image" />
+                    </div>
+                  </div> */}
                   {/* TEXT BLOCK */}	
-                  <div className="col-md-7 col-lg-6">
+                  <div className="col-md-6 col-lg-6">
                     <div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id grey-color">Unlimited Access</span>
+                      <span className="section-id grey-color">{accessUnlimited.leadTitle}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Spend your time with loved ones</h2>
+                      <h2 className="h2-md">{accessUnlimited.title}</h2>
                       {/* Text */}	
-                      <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
-                        luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat 
-                        sodales a sapien
-                      </p>
+                      <p className="p-lg">{accessUnlimited.desc}</p>
                       {/* Text */}	
-                      <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
-                        luctus magna dolor luctus and egestas sapien egestas vitae nemo volute
-                      </p>
+                      <p className="p-lg">{accessUnlimited.descTwo}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                 </div>	  {/* End row */}	
@@ -330,20 +220,17 @@ class Users extends React.Component {
                   <div className="col-md-7 col-lg-6 m-bottom">
                     <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
                       {/* Section ID */}	
-                      <span className="section-id">Fastest Messaging</span>
+                      <span className="section-id">{fastMes.leadTitle}</span>
                       {/* Title */}	
-                      <h2 className="h2-md">Unlimited calling, texting and picture messaging</h2>
+                      <h2 className="h2-md">{fastMes.title}</h2>
                       {/* Text */}
-                      <p className="p-lg">Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor 
-                        congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium 
-                        enim gravida purus ligula
-                      </p>
+                      <p className="p-lg">{fastMes.desc}</p>
                     </div>
                   </div>	{/* END TEXT BLOCK */}	
                   {/* IMAGE BLOCK */}
                   <div className="col-md-5 col-lg-6 m-top">
                     <div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
-                      <img className="img-fluid" src="assets/images/img-05.png" alt="content-image" />
+                      <img className="img-fluid" src="assets/images/info-pair2.jpeg" alt="content-image" />
                     </div>
                   </div>
                 </div>  {/* End row */}	
@@ -364,11 +251,9 @@ class Users extends React.Component {
                 <div className="col-lg-10 offset-lg-1">
                   <div className="section-title text-center mb-70">		
                     {/* Title */}	
-                    <h2 className="h2-md">Get Ready to Be Surprised</h2>	
+                    <h2 className="h2-md">{moreFeatures.title}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
-                      tempus, blandit and cursus varius magna tempus a dolor
-                    </p>
+                    <p className="p-xl">{moreFeatures.desc}</p>
                   </div>	
                 </div>
               </div>
@@ -383,11 +268,9 @@ class Users extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Dark &amp; Light Modes</h5>
+                            <h5 className="h5-sm">{moreFeatures.mode.title}</h5>
                             {/* Text */}
-                            <p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a 
-                              sapien magna at vitae congue tempus
-                            </p>
+                            <p className="p-md grey-color">{moreFeatures.mode.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -407,11 +290,9 @@ class Users extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Auto-Link Opening</h5>
+                            <h5 className="h5-sm">{moreFeatures.autoLink.title}</h5>
                             {/* Text */}
-                            <p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a 
-                              sapien magna at vitae congue gravida
-                            </p>
+                            <p className="p-md grey-color">{moreFeatures.autoLink.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -431,11 +312,9 @@ class Users extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Voice Assistant</h5>
+                            <h5 className="h5-sm">{moreFeatures.float.title}</h5>
                             {/* Text */}
-                            <p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a 
-                              sapien magna at vitae congue gravida
-                            </p>
+                            <p className="p-md grey-color">{moreFeatures.float.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -455,11 +334,9 @@ class Users extends React.Component {
                         <div className="col-lg-8 m-bottom">
                           <div className="fbox-4-txt">
                             {/* Title */}
-                            <h5 className="h5-sm">Task Scheduling</h5>
+                            <h5 className="h5-sm">{moreFeatures.schedule.title}</h5>
                             {/* Text */}
-                            <p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a 
-                              sapien magna at vitae congue gravida
-                            </p>
+                            <p className="p-md grey-color">{moreFeatures.schedule.desc}</p>
                           </div>
                         </div>
                         {/* ICON */}
@@ -484,13 +361,11 @@ class Users extends React.Component {
                 <div className="col-lg-6">	
                   <div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id">Voice &amp; Video Calls</span>
+                    <span className="section-id">{floatForSpeed.leadTitle}</span>
                     {/* Title 	*/}	
-                    <h2 className="h2-md">Keep Your Favorite People Close to You</h2>	
+                    <h2 className="h2-md">{floatForSpeed.title}</h2>	
                     {/* Text */}	
-                    <p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit 
-                      posuere orci auctor purus euismod an aliquam quaerat purus
-                    </p>
+                    <p className="p-xl">{floatForSpeed.desc}</p>
                     {/* STORE BADGES */}												
                     <div className="stores-badge">
                       {/* AppStore */}
@@ -527,30 +402,26 @@ class Users extends React.Component {
                 {/* IMAGE BLOCK */}
                 <div className="col-md-5 col-lg-6">
                   <div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/img-02.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/how-it-works-recomment-engine.png" alt="content-image" />
                   </div>
                 </div>
                 {/* TEXT BLOCK */}	
                 <div className="col-md-7 col-lg-6">
                   <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Beauty of Simplicity</span>
+                    <span className="section-id grey-color">{floatMap.leadTitle}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Beautiful, award-winning design</h2>
+                    <h2 className="h2-md">{floatMap.title}</h2>
                     {/* List */}	
                     <ul className="simple-list">
                       <li className="list-item">
-                        <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
-                          ligula rutrum tempor sapien
-                        </p>
+                        <p className="p-lg">{floatMap.desc}</p>
                       </li>
                       <li className="list-item">
-                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
+                        <p className="p-lg">{floatMap.descTwo}</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 mauris
-                        </p>
+                        <p className="p-lg">{floatMap.descThree}</p>
                       </li>
                     </ul>
                   </div>
@@ -567,33 +438,29 @@ class Users extends React.Component {
                 <div className="col-md-6 col-xl-6">
                   <div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id">Totally Optimized</span>
+                    <span className="section-id">{optimization.leadTitle}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Intuitive features, powerful results</h2>
+                    <h2 className="h2-md">{optimization.title}</h2>
                     {/* List */}	
                     <ul className="simple-list">
                       <li className="list-item">
-                        <p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
-                          ligula rutrum tempor sapien
-                        </p>
+                        <p className="p-lg">{optimization.desc}</p>
                       </li>
                       <li className="list-item">
-                        <p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
+                        <p className="p-lg">{optimization.descTwo}</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 mauris
-                        </p>
+                        <p className="p-lg">{optimization.descThree}</p>
                       </li>
                     </ul>
                     {/* Button */}	
-                    <a href="#content-1" className="btn btn-tra-grey rose-hover">Find Out More</a>
+                    <a href="#content-1" className="btn btn-tra-grey rose-hover">{optimization.btn}</a>
                   </div>	
                 </div>	{/* END TEXT BLOCK */}		
                 {/* IMAGE BLOCK */}	
                 <div className="col-md-6 col-xl-6">
                   <div className="content-13-img wow fadeInRight" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/tablet.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/tablet-2.png" alt="content-image" />
                   </div>	
                 </div>
               </div>	  {/* End row */}
@@ -729,7 +596,7 @@ class Users extends React.Component {
 									</a> */} 
                     </div>	{/* END STORE BADGES */}
                     {/* OS Prerequisite */}
-                    <span className="os-version">Available for iOS 8 and Android Devices From 5.5</span>
+                    <span className="os-version">{downloadPlatform.leadTitle}</span>
                   </div>
                 </div>
               </div>	{/* END DOWNLOAD BUTTON */}	
@@ -744,20 +611,17 @@ class Users extends React.Component {
                 <div className="col-md-7 col-lg-6 m-bottom">
                   <div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
                     {/* Section ID */}	
-                    <span className="section-id grey-color">Register in 30 Seconds</span>
+                    <span className="section-id grey-color">{floatMight.leadTitle}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Lightning fast and super powerful</h2>
+                    <h2 className="h2-md">{floatMight.title}</h2>
                     {/* Text */}	
-                    <p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
-                      luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat 
-                      sodales a sapien
-                    </p>
+                    <p className="p-lg">{floatMight.desc}</p>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
                 {/* IMAGE BLOCK */}
                 <div className="col-md-5 col-lg-6 m-top">
                   <div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
-                    <img className="img-fluid" src="assets/images/img-01.png" alt="content-image" />
+                    <img className="img-fluid" src="assets/images/img-float.png" alt="content-image" />
                   </div>
                 </div>
               </div>	   {/* End row */}
@@ -771,7 +635,7 @@ class Users extends React.Component {
               <div className="row">
                 <div className="col-lg-8 offset-lg-2">
                   <div className="brands-title text-center">
-                    <h4 className="h4-sm">You might know us from:</h4>
+                    <h4 className="h4-sm">{partners.title}</h4>
                   </div>
                 </div>
               </div>
@@ -960,9 +824,9 @@ class Users extends React.Component {
                   <div className="col-lg-6">
                     <div className="newsletter-txt">	
                       {/* Section ID */}	
-                      <span className="section-id">Subscribe to Our Newsletter</span>
+                      <span className="section-id">{subscribeSec.leadTitle}</span>
                       {/* Title */}	
-                      <h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>	
+                      <h4 className="h4-xl">{subscribeSec.title}</h4>	
                     </div>								
                   </div>
                   {/* NEWSLETTER FORM */}
@@ -971,7 +835,7 @@ class Users extends React.Component {
                       <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-rose tra-rose-hover">Subscribe Now</button>
+                          <button type="submit" className="btn btn-md btn-rose tra-rose-hover">{subscribeSec.btn}</button>
                         </span>										
                       </div>
                       {/* Newsletter Form Notification */}	
@@ -991,4 +855,144 @@ class Users extends React.Component {
         )
     }
 }
-export default Users 
+export default Users
+
+
+// PAGE TEXT/CONTENT VARIABLES
+
+//HERO SECTION
+let heroSection = {
+  leadTitle: `Float`,
+  title: `Your Activity Feed`,
+  desc: `Stay Connected with Your Friends`,
+  mainSiteLink: 'This leads to users PORTAL',
+};
+
+ //SECTION TWO
+ let features = {
+  accounts: {
+    title: `Multiple Accounts`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  float: {title: `Analytics`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  files: {title: `Connectivity`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  notification: {title: `Monitoring`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  verification: {title: `Online Verification`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  spam: {title: `Big Perks`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  }
+};
+
+// FLOAT AUTOMATION SECTION
+let automate = {
+  title: `Work smarter with powerful automation`,
+  desc: `Quaerat sodales sapien euismod purus at blandit and purus ipsum primis and cubilia laoreet 
+  augue a luctus magna dolor luctus mauris pretium a sapien egestas luctus`,
+  descTwo: `Fringilla risus, luctus mauris auctor a purus euismod orci pretium purus pretium undo ligula 
+  rutrum tempor magna dolor`
+}
+
+// UNLIMITED ACCESS SECTION
+let accessUnlimited = {
+  leadTitle: `Unlimited Access`,
+  title: `Spend your time with loved ones`,
+  desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
+  luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat 
+  sodales a sapien`,
+  descTwo: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
+  luctus magna dolor luctus and egestas sapien egestas vitae nemo volute`
+}
+
+// FAST MESSAGING SECTION
+let fastMes = {
+  leadTitle: `Fastest Messaging`,
+  title: `Unlimited calling, texting and picture messaging`,
+  desc: `Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor 
+  congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium 
+  enim gravida purus ligula`,
+}
+
+ // GET READY TO BE SURPRISED SECTION
+ let moreFeatures = {
+  title: `Get Ready to Be Surprised`,
+  desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
+  tempus, blandit and cursus varius magna tempus a dolor`,
+  mode: {
+    title: `Charging`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a 
+    sapien magna at vitae congue tempus`
+  },
+  autoLink: {title: `Auto-Link Opening`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a 
+  sapien magna at vitae congue gravida`
+  },
+  float: {title: `Float Assistant`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a 
+  sapien magna at vitae congue gravida`
+  },
+  schedule: {title: `Task Scheduling`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a 
+  sapien magna at vitae congue gravida`
+  }
+};
+
+//BULIT FOR SPEED SECTION
+let floatForSpeed = {
+  leadTitle: `Built For Speed`,
+  title: `Keep Your Favorite People Close to You`,
+  desc: `Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit 
+  posuere orci auctor purus euismod an aliquam quaerat purus`,
+}
+
+// DESIGN SECTION
+let floatMap = {
+  leadTitle: `Beauty of Simplicity`,
+  title: `Beautiful, award-winning design`,
+  desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
+  ligula rutrum tempor sapien`,
+  descTwo: `Quaerat sodales sapien euismod purus blandit`,
+  descThree: `Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo 
+  pretium a purus mauris`,
+}
+
+//  OPTIMIZATION SECTION
+let optimization = {
+  leadTitle: `Totally Optimized`,
+  title: `Intuitive features, powerful results`,
+  desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium 
+  ligula rutrum tempor sapien`,
+  descTwo: `Quaerat sodales sapien euismod purus blandit`,
+  descThree: `Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo 
+  pretium a purus mauris`,
+  btn: `Find Out More`
+}
+
+   //DOWNLOAD SECTION TWO
+   let downloadPlatform = {
+    leadTitle: `Available for iOS 8 and Android Devices From 5.5`
+  }
+
+// LIGHT & POWERFUL
+let floatMight = {
+  leadTitle: `Register in 30 Seconds`,
+  title: `Lightning Fast. Super Powerful`,
+  desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue 
+  luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat 
+  sodales a sapien`,
+}
+
+// PARTNERS SECTION
+let partners = {
+  title: `You might know us from:`
+}
+
+//SUBSCRIBE SECTION
+let subscribeSec = {
+  leadTitle: `Subscribe to Our Newsletter`,
+  title: `Stay up to date with our news, ideas and updates`,
+  btn: 'Subscribe Now'
+}