changed some variable names in homepage

public/assets/css/style.css

@@ -3803,6 +3803,9 @@ 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 {

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,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"/>
+</defs>
+</svg>

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/FloatHome.js

@@ -27,13 +27,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 +48,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 */}
@@ -75,13 +75,13 @@ class FloatHome extends React.Component {
                     {/* Rating */}
                     <div className="txt-block-rating">
                       <div className="stars-rating grey-color">
-                        All Versions Rating
+                      {heroSection.badge.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>
+                        <p className="txt-rating">{heroSection.badge.review}</p>
                       </div>			
                     </div>
                   </div>
@@ -102,11 +102,9 @@ class FloatHome extends React.Component {
                       {/* Icon */}
                       <div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-mobile-phone" /></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 */}
@@ -115,11 +113,9 @@ class FloatHome extends React.Component {
                       {/* Icon */}
                       <div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-chat-4" /></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 */}
@@ -128,15 +124,13 @@ class FloatHome extends React.Component {
                       {/* Icon */}
                       <div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-spam" /></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 +144,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 +174,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,15 +195,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">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 */}
@@ -234,11 +223,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 +240,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 +251,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 +262,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 +287,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 +312,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 +322,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 +332,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>
@@ -387,11 +361,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 +378,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 +400,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 +422,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 +444,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 +473,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 */}
@@ -560,10 +524,10 @@ class FloatHome extends React.Component {
                 <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">RECOMMENDATION ENGINE</span>
+                    <span className="section-id grey-color">{artIntel.artificialEngine.leadTitle}</span>
                     {/* Title */}	
-                    <h2 className="h2-md">Float uses artificial intelligence (AI) to compare local transport options and prices for your journey.</h2>
-                    <p className="p-lg">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.</p>
+                    <h2 className="h2-md">{artIntel.artificialEngine.title}</h2>
+                    <p className="p-lg">{artIntel.artificialEngine.desc}</p>
                   </div>
                 </div>	{/* END TEXT BLOCK */}	
               </div>	   {/* End row */}
@@ -578,27 +542,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 */}	
@@ -667,10 +629,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>
@@ -689,10 +650,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 */}
@@ -706,10 +667,9 @@ class FloatHome extends React.Component {
                 {/* DOWNLOAD TXT */}	
                 <div className="col-lg-6">	
                   <div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">	
-                    <span className="section-id">Built For Speed</span>                    
-                    <h2 className="h2-md">Share text, voice, photos, videos, GIFs and files for free</h2>                    
-                    <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
+                    <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">
@@ -939,7 +899,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 */}	
@@ -1095,9 +1055,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 */}
@@ -1106,7 +1066,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 */}	
@@ -1229,10 +1189,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">
@@ -1274,4 +1233,201 @@ class FloatHome extends React.Component {
         )
     }
 }
-export default FloatHome 
+export default FloatHome 
+
+
+// PAGE TEXT/CONTENT VARIABLES
+
+//HERO SECTION
+  let heroSection = {
+      header: `ravel 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: `Quick Access`, description: `Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
+    ociis ligula blandit`
+    },
+    notification: {heading: `Smart Notifications`, description: `Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
+    ociis ligula blandit`
+    },
+    spam: {heading: `Spam Protection`, description: `Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
+    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: `Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
+      ociis ligula blandit`
+    },
+    emojis: {title: `Stickers & Emojis`, desc: `Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
+    ociis ligula blandit`
+    },
+    files: {title: `Share Files & Media`, desc: `Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and 
+    ociis ligula blandit`
+    }
+  }
+
+
+  //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: `float Messaging and Calls`, 
+            desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
+          },
+    stickers: {title: `Stickers, Emojis, Themes`, 
+            desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
+          },
+    media: {title: `Share Files & Media`, 
+            desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
+          }
+  }
+
+  //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: `Dark & Light Modes`,
+      desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
+      at vitae congue tempus`
+    },
+
+    groupMes: {
+      title: `Group Messaging`,
+      desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna 
+      at vitae congue tempus`
+    },
+
+    strongEncry: {
+      title: `Strong Encryption`,
+      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`,
+  }