Merge branch 'master' into userspage_text_to_variables

src/pages/About.js

@@ -3,6 +3,62 @@ import { Testimonial } from './assests/data/about';
 
 class About extends React.Component {
     render() {
+      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."
+      }
+      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"
+      }
+      let testimonials = {
+        tag: 'MADE FOR US',
+        title:'Created from urbanists'
+      }
+      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.'
+      }
+      let brands = 'You might know Float from:'
+      let team = {
+        tag: 'One Team Many Talents',
+        title: 'Our Team is as vibrating and diversified as your urban life.',
+      }
+      let newsletter = {
+        tag: 'Subscribe to Our Newsletter',
+        title: 'Stay up to date with our news, ideas and updates',
+        cta: 'Subscribe Now'
+      }
+
         return(
             <div>
 
@@ -26,10 +82,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 +100,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 +109,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 +136,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 +144,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 +153,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 +162,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 +176,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,24 +243,24 @@ 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 */}	
@@ -225,7 +275,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
               <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>
+                    <h4 className="h4-md">{brands}</h4>
                   </div>
                 </div>
               </div>
@@ -310,9 +360,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.title.h2}</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}</p>
                   </div>	
                 </div>
               </div>
@@ -353,9 +403,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 +414,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 +427,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/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,11 +28,7 @@ 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">
@@ -56,25 +42,22 @@ class Fleet 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">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={`${process.env.REACT_APP_FLEET}/`} 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>
@@ -227,14 +199,13 @@ class Fleet extends React.Component {
               </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>
@@ -835,8 +777,7 @@ class Fleet extends React.Component {
               </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,8 +1023,7 @@ 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">
@@ -1103,9 +1037,9 @@ class Fleet extends React.Component {
                 <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 fleet 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>
+                    <p className="p-xl">{downloadSection.text}</p>
                     {/* STORE BADGES */}
                     <div className="stores-badge">
                       {/* AppStore */}
@@ -1120,13 +1054,13 @@ class Fleet extends React.Component {
                     {/* Rating */}
                     <div className="txt-block-rating">
                       <div className="stars-rating">
-                        All Versions Rating
+                        {downloadSection.ratingText}
                         <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>
+                        <p className="txt-rating">{downloadSection.reviewText}</p>
                       </div>			
                     </div>
                   </div>
@@ -1135,12 +1069,183 @@ class Fleet extends React.Component {
             </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',
+  ratingText: 'All Versions Rating',
+  reviewText: 'Based on 7.296 user reviews (App Store & Google Play)'
+}

src/pages/FloatHome.js

@@ -1240,7 +1240,7 @@ export default FloatHome
 
 //HERO SECTION
   let heroSection = {
-      header: `ravel Smarter. Save Money.`,
+      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!`,

src/pages/Users.js

@@ -26,9 +26,9 @@ 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>
                     {/* STORE BADGES */}											
                     <div className="stores-badge">
                       {/* AppStore */}
@@ -55,18 +55,18 @@ class Users extends React.Component {
                     {/* Rating */}
                     <div className="txt-block-rating">
                       <div className="stars-rating dark-color">
-                        All Versions Rating
+                      {heroSection.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.review}</p>
                       </div>			
                     </div>
                     {/* USER PORTAL */}
                     <div>
-                      <a className='btn btn-rose tra-grey-hover' href={`${process.env.REACT_APP_USERS}/`} target='_blank' >This leads to users PORTAL</a>
+                      <a className='btn btn-rose tra-grey-hover' href={`${process.env.REACT_APP_USERS}/`} target='_blank' >{heroSection.mainSiteLink}</a>
                     </div>
                   </div>
                 </div>	{/* END HERO TEXT */}	
@@ -94,11 +94,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>	
@@ -110,11 +108,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>
@@ -126,11 +122,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>
@@ -142,11 +136,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>
@@ -158,11 +150,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>
@@ -174,95 +164,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">
@@ -273,15 +184,11 @@ 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 */}
@@ -304,25 +211,20 @@ class Users extends React.Component {
                   {/* 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/route-mockup.jpeg" alt="content-image" />
+                      <img className="img-fluid" src="assets/images/route1.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">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 */}	
@@ -334,14 +236,11 @@ 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 */}
@@ -368,11 +267,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>
@@ -387,11 +284,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 */}
@@ -411,11 +306,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 */}
@@ -435,11 +328,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 */}
@@ -459,11 +350,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 */}
@@ -488,13 +377,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">Built For Speed</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 */}
@@ -538,22 +425,20 @@ class Users 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">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 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 className="p-lg">{floatMap.descThree}
                         </p>
                       </li>
                     </ul>
@@ -571,23 +456,19 @@ 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 */}	
@@ -733,7 +614,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 */}	
@@ -748,14 +629,11 @@ 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 */}
@@ -775,7 +653,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>
@@ -964,9 +842,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 */}
@@ -975,7 +853,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 */}	
@@ -995,4 +873,146 @@ 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`,
+  rating: `All Versions Rating`,
+  review: `Based on 7.296 user reviews`,
+  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: `Float Messaging & Calls`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  files: {title: `Share Files & Media`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat 
+    at impedit felis undo auctor augue mauris`
+  },
+  notification: {title: `Alerts & Notifications`, 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: `Spam Protection`, 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: `Dark & Light Modes`, 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: `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`
+}
+
+// DESIGN SECTION
+let floatMap = {
+  leadTitle: `Beauty of Simplicity`,
+  title: `Beautiful, award-winning design`,
+  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`
+}
+
+//  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'
+}
+