Compare commits

..

70 Commits

Author SHA1 Message Date
victorAnumudu c8a96ccbdc replaced social image with google map in findev page 2023-04-07 14:02:26 +01:00
tokslaw d626f28e36 Merge branch 'removing-sponsors-component-from-about-page' of FloatSystems/float-www into master 2023-04-07 12:41:12 +00:00
tokslaw e2185c9d1a Merge branch 'image_update' of FloatSystems/float-www into master 2023-04-07 12:41:04 +00:00
victorAnumudu c7e7874d49 updated images in get started page 2023-04-07 11:21:48 +01:00
Chukwumdiebube ef6374e407 removing sponsors component from about page 2023-04-07 08:07:03 +01:00
DESKTOP-GBA0BK8\Admin a69e903785 Clean up 2023-04-06 23:50:49 -04:00
DESKTOP-GBA0BK8\Admin fa2ac7d3d0 Fix text 2023-04-06 21:48:00 -04:00
DESKTOP-GBA0BK8\Admin 300f5f0dab Fix button 2023-04-06 21:06:55 -04:00
DESKTOP-GBA0BK8\Admin 5609bc9c99 New pages 2023-04-06 20:54:28 -04:00
DESKTOP-GBA0BK8\Admin bddf76320b Clean up 2023-04-06 20:15:34 -04:00
DESKTOP-GBA0BK8\Admin 9da5f450a2 Clean up 2023-04-06 20:12:10 -04:00
DESKTOP-GBA0BK8\Admin 6c1e2072c8 Get stated page 2023-04-06 20:01:07 -04:00
tokslaw 3594000fbe Merge branch 'removing-ratings' of FloatSystems/float-www into master 2023-04-05 14:13:31 +00:00
Chukwumdiebube 7cbc26a787 Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into removing-ratings 2023-04-05 15:11:26 +01:00
tokslaw 2ed1862b53 Merge branch 'home-customization' of FloatSystems/float-www into master 2023-04-05 12:51:45 +00:00
Chukwumdiebube e64d1f84ed Rating Removals 2023-04-05 13:03:52 +01:00
Chukwumdiebube e383366603 Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into home-customization 2023-04-05 12:17:35 +01:00
jenkins 7d9267e268 more text added 2023-04-04 23:04:54 -04:00
jenkins 129c0f1447 text added 2023-04-04 22:47:34 -04:00
jenkins 7e424c269b text modified 2023-04-04 22:37:42 -04:00
jenkins cfcfaaca05 text added 2023-04-04 20:25:23 -04:00
tokslaw 323ee50705 Merge branch 'image_reduction' of FloatSystems/float-www into master 2023-04-05 00:20:00 +00:00
victorAnumudu 6ff8f81fb8 reduced image size 2023-04-04 23:58:44 +01:00
Chukwumdiebube 360f60c1f2 Added Icons 2023-04-04 23:18:40 +01:00
jenkins d3500e1640 Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www 2023-04-04 13:07:53 -04:00
tokslaw 451190b705 Merge branch 'user-feed' of FloatSystems/float-www into master 2023-04-04 17:06:48 +00:00
jenkins ee1bd901b1 custom deals text added 2023-04-04 13:05:42 -04:00
Chukwumdiebube bb7e745491 fixed spacing 2023-04-04 14:29:53 +01:00
DESKTOP-GBA0BK8\Admin 9c6f84d3b8 Edit Images 2023-04-03 21:06:02 -04:00
tokslaw 3604da9092 Merge branch 'added-video-link-at-home-page' of FloatSystems/float-www into master 2023-04-03 09:12:28 +00:00
Chukwumdiebube 5699af8492 video popup working 2023-04-03 10:06:33 +01:00
tokslaw 6a35044ee9 Merge branch 'text_to_variable_userpage' of FloatSystems/float-www into master 2023-04-03 09:04:49 +00:00
victorAnumudu 376e84ce32 changed text to variables in userspage 2023-04-03 09:58:54 +01:00
Chukwumdiebube 41440b1c66 added video link at home page 2023-04-03 09:43:44 +01:00
tokslaw 51b080c2b0 Merge branch 'user-feed' of FloatSystems/float-www into master 2023-04-03 07:56:50 +00:00
Chukwumdiebube a881c75895 heading positioning fix 2023-04-01 10:46:10 +01:00
tokslaw 731c5041ac Merge branch 'user-feed' of FloatSystems/float-www into master 2023-03-31 23:59:04 +00:00
Chukwumdiebube 9e49493551 removed text from hero section in user feed 2023-03-31 13:40:18 +01:00
jenkins 0cf92f3529 text variable modified 2023-03-30 19:40:59 -04:00
tokslaw f4fd8c5249 Merge branch 'business-text-variables' of FloatSystems/float-www into master 2023-03-30 23:02:53 +00:00
Chukwumdiebube d8b1d8b035 Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into business-text-variables 2023-03-30 02:06:59 +01:00
Chukwumdiebube 72dff33e6f bugs fixed 2023-03-30 02:06:04 +01:00
jenkins cfd416b59a customer chat removed 2023-03-29 19:26:08 -04:00
Chukwumdiebube ebf4f138a2 next revert 2023-03-30 00:22:43 +01:00
Chukwumdiebube b5a532d489 first fix 2023-03-30 00:20:52 +01:00
Chukwumdiebube 304fd79eb8 Added text to variables 2023-03-30 00:09:22 +01:00
Chukwumdiebube 2862b88961 reset 2023-03-30 00:05:43 +01:00
Chukwumdiebube 375058405c added text variable 2023-03-29 23:51:32 +01:00
tokslaw 1d6f112d58 Merge branch 'homepage_text_to_variables' of FloatSystems/float-www into master 2023-03-29 16:03:27 +00:00
tokslaw 3d909625d3 Merge branch 'about-text-variables' of FloatSystems/float-www into master 2023-03-29 16:02:45 +00:00
victorAnumudu d1be17ccfa changed some variable names in homepage 2023-03-29 15:56:17 +01:00
Chukwumdiebube 994613a5fa redefined text variables 2023-03-29 15:12:38 +01:00
victorAnumudu 87e42238be renamed a variable name 2023-03-28 13:46:12 +01:00
victorAnumudu d4d4ac482f changed text to variables 2023-03-28 13:42:53 +01:00
victorAnumudu a23d05ad82 changed text to variables 2023-03-28 13:40:16 +01:00
victorAnumudu ad3314dceb changed text to variables 2023-03-28 13:12:10 +01:00
Chukwumdiebube d947a24043 Adding text variables in about page 2023-03-28 13:10:59 +01:00
tokslaw 95ecc0d3d8 Merge branch 'pricing_unwanted_text_removal' of FloatSystems/float-www into master 2023-03-27 16:07:34 +00:00
tokslaw 10f84c5d74 Merge branch 'Users-and-Business-Templating' of FloatSystems/float-www into master 2023-03-27 16:07:21 +00:00
Chukwumdiebube 0430e0d27d modifying templates in users and business 2023-03-27 14:53:34 +01:00
victorAnumudu 84a57f5141 removed unwanted text from home page and hid pricing element 2023-03-27 12:44:09 +01:00
jenkins a8e0a8aa46 browser-edit image added 2023-03-26 15:39:06 -04:00
tokslaw ea6cefdbae Merge branch 'replacement_of_images' of FloatSystems/float-www into master 2023-03-25 20:53:12 +00:00
DESKTOP-GBA0BK8\Admin 12207f6d1e Links added 2023-03-25 08:06:47 -04:00
victorAnumudu f8c26ead28 replaced some images 2023-03-25 11:08:44 +01:00
tokslaw 825dd284f1 Merge branch 'Float_homeImages_changes' of FloatSystems/float-www into master 2023-03-23 05:04:48 +00:00
Chukwumdiebube ba40756eee changed image 2023-03-22 06:25:45 +01:00
Chukwumdiebube b2e7d994a4 Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into Float_homeImages_changes 2023-03-22 06:01:56 +01:00
tokslaw 8ad7d75ff7 Merge branch 'image_replacements' of FloatSystems/float-www into master 2023-03-22 03:28:05 +00:00
Chukwumdiebube 44641e816b modified home section for Recommendation engine
replaced images and added an overlay for proper readability.
2023-03-21 23:31:34 +01:00
36 changed files with 1572 additions and 735 deletions
+5 -1
View File
@@ -1,2 +1,6 @@
REACT_APP_APPSITE='http://welcome.float.sg'
REACT_APP_EMAIL='support@float.sg'
REACT_APP_EMAIL='support@float.sg'
REACT_APP_WWW='http://float-www.dev.chiefsoft.net'
REACT_APP_FLEET='http://float-flt.dev.chiefsoft.net'
REACT_APP_USERS='http://float-usr.dev.chiefsoft.net'
REACT_APP_APIGATE='http://float-gat.dev.chiefsoft.net'
+2 -2
View File
@@ -738,8 +738,8 @@
#content-14.aliceblue-shape, #content-14.whitesmoke-shape { padding-top: 80px; }
.content-section .img-block.left-column, .content-5-img { position: relative; left: -60%; }
.content-section .img-block img, .content-5-img img, .content-6-img img { display: inline-block; max-width: none; width: 160%; }
/* .content-section .img-block.left-column, .content-5-img { position: relative; left: -60%; } */
/* .content-section .img-block img, .content-5-img img, .content-6-img img { display: inline-block; max-width: none; width: 160%; } */
.content-12-img { margin-right: 0; margin-bottom: -40px; }
.cbox-txt { padding-left: 20px; }
+23 -5
View File
@@ -414,8 +414,8 @@ p {
background-attachment: fixed!important;
}
.bg_chat { background-image: url(../images/bg_chat.jpg); background-attachment: scroll!important; }
.bg_fit_01 { background-image: url(../images/bg_fit_01.jpg); background-attachment: scroll!important; }
.bg_chat { background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.52), rgba(49, 46, 48, 0.73)),url(../images/personwithbackpack.png); background-attachment: scroll!important; background-position: top; }
.bg_fit_01 { background-image: url(../images/bg_sblue_img.jpg); background-attachment: scroll!important; }
/* .bg_fit_02 { background-image: url(../images/bg_fit_02.jpg); } */
.bg_fit_02 { background-image: url(../images/bg_fit_02.png); } /*changed image*/
.bg_mobile { background-image: url(../images/bg_mobile.jpg); background-attachment: scroll!important; }
@@ -1331,6 +1331,10 @@ ol.digit-list p {
display: inline-block;
}
.stores-badge + div{
margin-top: 1rem;
}
.store {
display: inline-block;
text-align: center;
@@ -2580,6 +2584,15 @@ h5.sm-title {
padding-right: 25px;
}
.hero-8-txt > div {
margin-top: 5rem;
}
.hero-8-txt.fadeInRight{
display: flex;
flex-direction: column;
}
/*------------------------------------------*/
/* HERO APP LOGO
/*------------------------------------------*/
@@ -2632,7 +2645,7 @@ h5.sm-title {
}
.hero-5-btns h3 {
margin-bottom: 30px;
margin-bottom: 6rem;
}
.hero-6-txt h2 {
@@ -2649,16 +2662,16 @@ h5.sm-title {
}
.hero-8-txt h2 {
margin-top: 3rem;
margin-bottom: 5px;
}
.hero-8-txt h4 {
margin-bottom: 18px;
margin-bottom: 80px;
}
.hero-8-txt h5 {
font-weight: 300;
margin-bottom: 50px;
}
.hero-9-txt h4 {
@@ -3803,12 +3816,17 @@ h2.statistic-number {
-webkit-box-shadow: 0px 5px 10px 0 rgba(10, 10, 10, .05);
box-shadow: 0px 5px 10px 0 rgba(10, 10, 10, .05);
}
.pricing-table{
display: none;
}
#pricing-1.bg_whitesmoke .pricing-plan,
#pricing-3.bg_whitesmoke .pricing-plan {
background-color: #fafafa!important;
}
#pricing-2{display: none;}
#pricing-2 .pricing-plan {
padding: 45px 40px 40px;
border: 1px solid #ddd;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 342 KiB

After

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

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

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

+1 -1
View File
@@ -170,7 +170,7 @@
patterns: {
youtube: {
index: 'youtube.com',
src: 'https://www.youtube.com/embed/7e90gBu4pas'
src: 'https://www.youtube.com/embed/Jn22jdQ4KdQ' // added the id of the video
}
}
}
+7
View File
@@ -16,6 +16,9 @@ import FloatHome from './pages/FloatHome';
import Users from './pages/Users';
import Fleet from './pages/Fleet';
import Privacy from './pages/Privacy';
import GetStarted from './pages/GetStarted';
import FindEv from "./pages/FindEv";
import FindMobility from "./pages/FindMobility";
@@ -50,9 +53,13 @@ function App() {
<Route path="/users" element={<Users/>} />
<Route path="/business" element={<Fleet/>} />
<Route path="/privacy" element={<Privacy/>} />
<Route path="/getstarted" element={<GetStarted />} />
<Route path="/findev" element={<FindEv />} />
<Route path="/findmobility" element={<FindMobility />} />
</Routes>
<Footer/>
</div>
);
}
+8 -10
View File
@@ -13,11 +13,11 @@ class Footer extends React.Component {
<div className="col-sm-6 col-md-4 col-lg-3">
<div className="footer-links mb-40">
<ul className="foo-links clearfix">
<li><p className="p-md"><Link to="/#">App Features</Link></p></li>
<li><p className="p-md"><Link to="/#">Integrations</Link></p></li>
<li><p className="p-md"><Link to="/#">App Updates</Link></p></li>
<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>
<li><p className="p-md"><Link to="/#">Customer Stories</Link></p></li>
<li><p className="p-md"><Link to="/#">Users</Link></p></li>
<li><p className="p-md"><Link to="/#">Fleet Mangers</Link></p></li>
<li><p className="p-md"><Link to="/findev">Find Ev Charge</Link></p></li>
<li><p className="p-md"><Link to="/findmobility">Find Options</Link></p></li>
</ul>
</div>
</div>
@@ -25,10 +25,9 @@ class Footer extends React.Component {
<div className="footer-links mb-40">
<ul className="foo-links clearfix">
<li><p className="p-md"><Link to="/blogs">Our Blog</Link></p></li>
<li><p className="p-md"><Link to="/#">Customer Stories</Link></p></li>
<li><p className="p-md"><Link to="/contacts">Customer Stories</Link></p></li>
<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>
<li><p className="p-md"><Link to="/#">Life Chatting</Link></p></li>
<li><p className="p-md"><Link to="/#">Resources</Link></p></li>
<li><p className="p-md"><Link to="/#">Resources</Link></p></li>
</ul>
</div>
</div>
@@ -37,8 +36,7 @@ class Footer extends React.Component {
<ul className="foo-links clearfix">
<li><p className="p-md"><Link to="/about">About Us</Link></p></li>
<li><p className="p-md"><Link to="/#">Press & Media</Link></p></li>
<li><p className="p-md"><Link to="/#">Advertising</Link></p></li>
<li><p className="p-md"><Link to="/privacy">Privacy Policy</Link></p></li>
<li><p className="p-md"><Link to="/privacy">Privacy Policy</Link></p></li>
<li><p className="p-md"><Link to="/terms">Terms & Privacy</Link></p></li>
</ul>
</div>
+1 -1
View File
@@ -88,7 +88,7 @@ class Header extends React.Component {
{/* <li className="nl-simple" aria-haspopup="true"><Link to="/more_apps">More Apps</Link></li>
<li className="nl-simple" aria-haspopup="true"><Link to="/blog_listing">Blog</Link></li> */}
<li className="nl-simple" aria-haspopup="true">
<Link to="/contacts" className="btn btn-rose tra-grey-hover last-link">Let's Started</Link>
<Link to="/getstarted" className="btn btn-rose tra-grey-hover last-link">Let's Start</Link>
</li>
+97 -116
View File
@@ -26,10 +26,9 @@ class About extends React.Component {
<div className="col-lg-8 offset-lg-2">
<div className="hero-txt text-center white-color">
{/* Title */}
<h2 className="h2-md">No, we are <span>not just another travel app.</span> </h2>
<h2 className="h2-md">{heroInfo.title.normal} <span>{heroInfo.title.bold}</span> </h2>
{/* Text */}
<p className="p-xl">Float is a global Start Up working on improving everyones city life.
</p>
<p className="p-xl">{heroInfo.desc}</p>
</div>
</div>
</div> {/* End row */}
@@ -45,7 +44,7 @@ class About extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="txt-block mb-35">
<h5 className="h5-lg text-justify">With AI and other unique technology we want to help and encourage people to improve their travel behavior for the better. Whether you want to save time, save money, reduce your carbon footprint, look for great deals or just explore your hood - weve got you covered.</h5>
<h5 className="h5-lg text-justify">{aboutDesc.upperSection.title}</h5>
</div>
</div>
</div>
@@ -54,22 +53,19 @@ class About extends React.Component {
<div className="col-md-6">
<div className="txt-block top-box">
{/* Title */}
<h5 className="h5-lg">OUR VISION</h5>
<h5 className="h5-lg">{aboutDesc.upperSection.vision.title}</h5>
{/* Text */}
<p className="p-lg lh-lg">Improve quality of life for the world's population by building the future global transportation platform. Increasing accessibility and personal choices, while reducing travel time, traffic congestion, pollution, and loss to local GDP.
</p>
<p className="p-lg lh-lg">{aboutDesc.upperSection.vision.text}</p>
</div>
</div> {/* END LEFT COLUMN */}
{/* RIGHT COLUMN */}
<div className="col-md-6">
<div className="txt-block">
{/* Title */}
<h5 className="h5-lg">OUR MISSION</h5>
<h5 className="h5-lg">{aboutDesc.upperSection.mission.title}</h5>
{/* List */}
{/* Text */}
<p className="p-lg lg-lh">We empower travelers to move easier and faster by analyzing their past trips, with traffic and external factors - allowing them to customize travel and receive rewards for sharing their data for the greater good.
</p> {/* End List */}
<p className="p-lg lg-lh">{aboutDesc.upperSection.mission.text}</p> {/* End List */}
</div>
</div> {/* END RIGHT COLUMN */}
</div>
@@ -84,7 +80,7 @@ class About extends React.Component {
</div>
{/* TEXT BLOCK */}
<div className="about-2-txt pc-50">
<h5 className="h5-lg"> <span>MADE FOR YOU</span><br />Created for urbanists</h5>
<h5 className="h5-lg"> <span>{aboutDesc.lowerSection.caption.first}</span><br />{aboutDesc.lowerSection.caption.second}</h5>
<div className="row">
{/* LEFT COLUMN */}
<div className="col-md-6">
@@ -92,9 +88,7 @@ class About extends React.Component {
{/* Title */}
{/* <h5 className="h5-lg">We care about the details</h5> */}
{/* Text */}
<p className="p-lg">A classic day in your urban life:<br />
You drive to work, drive to the store, maybe drive your kids to school, drive back home, meet some friends if there is little time left. Distances are so vast, it takes forever to get anywhere and theres little chance for spontaneity and diversity in daily routines - Vibrating urban Citylife is just passing you by.
</p>
<p className="p-lg">{aboutDesc.lowerSection.left.first}<br />{aboutDesc.lowerSection.left.second}</p>
</div>
</div> {/* END LEFT COLUMN */}
{/* RIGHT COLUMN */}
@@ -103,7 +97,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
{/* Title */}
{/* <h5 className="h5-lg">With knowledge, skill and hard work</h5> */}
{/* List */}
<p className="p-lg">You are interested in public infrastructure and promote eco-friendly alternatives - however keeping track of what is the fastest, cheapest and greenest way to get somewhere isnt easily done while being in a rush. We feel you - we are here to support you with by finding a better way to go.</p> {/* End List */}
<p className="p-lg">{aboutDesc.lowerSection.right}</p> {/* End List */}
</div>
</div> {/* END RIGHT COLUMN */}
</div>
@@ -112,7 +106,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
<div className="row">
<div className="col-md-12">
<div className="about-2-btn text-center mt-40">
<a href="#" className="btn btn-md btn-skyblue tra-skyblue-hover">Read the Reviews</a>
<a href="#" className="btn btn-md btn-skyblue tra-skyblue-hover">{aboutDesc.cta}</a>
</div>
</div>
</div> {/* END BUTTON */}
@@ -126,9 +120,9 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-60">
<p>MADE FOR US</p>
<p>{testimonials.tag}</p>
{/* Title */}
<h2 className="h2-md">Created from urbanists</h2>
<h2 className="h2-md">{testimonials.title}</h2>
{/* Text */}
{/* <p className="p-xl">Our Team is as vibrating and diversified as your urban life. */}
{/* </p> */}
@@ -193,111 +187,30 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Values</span>
<span className="section-id grey-color">{valueInfo.id}</span>
<div>
{/* Title */}
<h3 className="h2-xs">Put the User first</h3>
<h3 className="h2-xs">{valueInfo.title1}</h3>
{/* Text */}
<p className="p-lg">We are fully independent. We will only show you recommendations, tips, and deals customized for you.</p>
<p className="p-lg">{valueInfo.text1}</p>
</div>
<div>
{/* Title */}
<h3 className="h2-xs">Together is Better</h3>
<h3 className="h2-xs">{valueInfo.title2}</h3>
{/* Text */}
<p className="p-lg">AI and personal behavior are better together. Together we can make better decisions.</p>
<p className="p-lg">{valueInfo.text2}</p>
</div>
<div>
{/* Title */}
<h3 className="h2-xs">There is no planet B</h3>
<h3 className="h2-xs">{valueInfo.title3}</h3>
{/* Text */}
<p className="p-lg">There are more and more green alternatives especially in transportation we want to encourage everyone to use these.</p>
<p className="p-lg">{valueInfo.text3}</p>
</div>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END CONTENT-2 */}
{/* BRANDS-2
============================================= */}
<section id="brands-2" className="pb-60 brands-section division">
<div className="container">
{/* BRANDS TITLE */}
<div className="row">
<div className="col-lg-8 offset-lg-2">
<div className="brands-title text-center">
<h4 className="h4-md">You might know Float from:</h4>
</div>
</div>
</div>
{/* BRANDS-2 WRAPPER */}
<div className="brands-2-wrapper">
<div className="row">
<div className="col-md-12">
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-1.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-2.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-3.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-4.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-5.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-6.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-7.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-8.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-9.png" alt="brand-logo" />
</a>
</div>
{/* BRAND LOGO IMAGE */}
<div className="brand-logo">
<a href="#">
<img className="img-fluid" src="assets/images/brand-10.png" alt="brand-logo" />
</a>
</div>
</div>
</div>
</div> {/* END BRANDS-2 WRAPPER */}
</div> {/* End container */}
</section> {/* END BRANDS-2 */}
{/* SECTION DIVIDER
============================================= */}
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
@@ -310,9 +223,9 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">One Team Many Talents</h2>
<h2 className="h2-md">{team.tag}</h2>
{/* Text */}
<p className="p-xl">Our Team is as vibrating and diversified as your urban life.</p>
<p className="p-xl">{team.title}</p>
</div>
</div>
</div>
@@ -353,9 +266,9 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
<div className="col-lg-6">
<div className="newsletter-txt">
{/* Section ID */}
<span className="section-id">Subscribe to Our Newsletter</span>
<span className="section-id">{newsletter.tag}</span>
{/* Title */}
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
<h4 className="h4-xl">{newsletter.title}</h4>
</div>
</div>
{/* NEWSLETTER FORM */}
@@ -364,7 +277,7 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
<div className="input-group">
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
<span className="input-group-btn">
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">{newsletter.cta}</button>
</span>
</div>
{/* Newsletter Form Notification */}
@@ -377,11 +290,79 @@ You drive to work, drive to the store, maybe drive your kids to school, drive ba
</section> {/* END NEWSLETTER-1 */}
</div> {/* END PAGE CONTENT */}
</div>
)
}
}
export default About
export default About
// PAGE TEXT/CONTENT VARIABLES
//Hero Section
let heroInfo = {
title: {
normal: 'No, we are ', //leave a space after writing for proper indentation
bold: 'not just another travel app.'
},
desc: "Float is a global Start Up working on improving everyones 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 - weve 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 theres 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 isnt 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'
}
+2 -1
View File
@@ -193,7 +193,8 @@ class Faqs extends React.Component {
<div className="download-2-txt white-color">
{/* Icon */}
<div className="download-2-logo">
<img className="img-fluid" src="assets/images/app-logo.png" alt="app-logo" />
{/* <img className="img-fluid" src="assets/images/app-logo.png" alt="app-logo" /> */}
<img className="img-fluid" src="assets/images/favicon.svg" alt="app-logo" />
</div>
{/* Title */}
<div className="d2-txt">
+1 -1
View File
@@ -303,7 +303,7 @@ class Features extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div>
+71
View File
@@ -0,0 +1,71 @@
import React, {Component} from 'react';
class FindEv extends React.Component {
render() {
return(
<div>
{/* PRELOADER SPINNER
============================================= */}
<div id="loader-wrapper">
<div id="loading">
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
</div>
</div>
{/* PAGE CONTENT
============================================= */}
<div id="page" className="page">
<section id="content-11" className="pb-100 content-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-60">
{/* Title */}
<h2 className="h2-md">Chat with Your Friends Easily</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
</div>
</div>
</div>
{/* IMAGE BLOCK */}
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<iframe width="100%" height="510" style={{border:"0"}} loading="lazy" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1070%20Cresta%20Way%20Unit%202,%20San%20Rafael%20CA%2094903+(FloatEV)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
<a href="https://www.maps.ie/distance-area-calculator.html">measure area map</a>
</iframe>
</div>
</div>
</div>
{/* DOWNLOAD BUTTON */}
<div className="row">
<div className="col-md-12">
<div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
{/* Button */}
<a href="#" className="btn btn-md btn-skyblue tra-grey-hover">
Refresh
</a>
{/* OS Prerequisite */}
</div>
</div>
</div> {/* END DOWNLOAD BUTTON */}
</div> {/* End container */}
</section> {/* END CONTENT-11 */}
</div> {/* END PAGE CONTENT */}
</div>
)
}
}
export default FindEv
+69
View File
@@ -0,0 +1,69 @@
import React, {Component} from 'react';
class FindMobility extends React.Component {
render() {
return(
<div>
{/* PRELOADER SPINNER
============================================= */}
<div id="loader-wrapper">
<div id="loading">
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
</div>
</div>
{/* PAGE CONTENT
============================================= */}
<div id="page" className="page">
<section id="content-11" className="pb-100 content-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-60">
{/* Title */}
<h2 className="h2-md">Chat with Your Friends Easily</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
</div>
</div>
</div>
{/* IMAGE BLOCK */}
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/socials.png" alt="content-image" />
</div>
</div>
</div>
{/* DOWNLOAD BUTTON */}
<div className="row">
<div className="col-md-12">
<div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
{/* Button */}
<a href="#" className="btn btn-md btn-skyblue tra-grey-hover">
Refresh
</a>
{/* OS Prerequisite */}
</div>
</div>
</div> {/* END DOWNLOAD BUTTON */}
</div> {/* End container */}
</section> {/* END CONTENT-11 */}
</div> {/* END PAGE CONTENT */}
</div>
)
}
}
export default FindMobility
+274 -194
View File
@@ -3,33 +3,23 @@ import React, {Component} from 'react';
class Fleet extends React.Component {
render() {
return(
<div>
<div id="loader-wrapper">
<div ido="loading">
<div><div id="loader-wrapper"><div ido="loading">
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
</div>
</div>
{/* PAGE CONTENT
============================================= */}
{/* PAGE CONTENT*/}
<div id="page" className="page">
{/* HEADER
============================================= */}
{/* HERO
============================================= */}
{/* HEADER */}
{/* HERO */}
<section id="hero" className="bg-fixed hero-section division">
<div className="container">
<div className="row">
<div className="col-md-12">
{/* HERO TEXT */}
<div className="hero-txt white-color text-center">
<span className="version">HTML</span>
<h2>Float Business Fleet Management Systems</h2>
<p>We are your A.I. enables assistance to manage your fleet and advancement to new platforms with insights on current performance and operational projections.
<span className="version">{heroSection.tag}</span>
<h2>{heroSection.header}</h2>
<p>{heroSection.desc}
</p>
</div>
{/* HERO IMAGE */}
@@ -38,43 +28,36 @@ class Fleet extends React.Component {
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END HERO */}
{/* CONTENT-2
============================================= */}
{/* CONTENT-2 */}
<section id="content-2" className="wide-50 content-section division">
<div className="container">
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6">
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-16.png" alt="content-image" />
<img className="img-fluid" src="assets/images/Welcome.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">FLOAT EV</span>
<span className="section-id grey-color">{aboutSection.tag}</span>
{/* Title */}
<h2 className="h2-md">Electric Fleet Platform</h2>
<h2 className="h2-md">{aboutSection.header}</h2>
{/* Text */}
<p className="p-lg">Float's recommendation engine enables tracking of vehicle usage, ownership & service costs, fuel costs, emissions. Its Telematics IoT enabled OBD device & dashcam to connect directly to the vehicle to pull data.
<p className="p-lg">{aboutSection.desc1}
</p>
{/* Text */}
<p className="p-lg">Aliqum mullam blandit and tempor sapien donec lipsum gravida porta. Velna vitae auctor
congue magna impedit ligula risus. Mauris donec ligula an impedit magnis
</p>
<p className="p-lg">{aboutSection.desc2}</p>
{/* Button */}
<a href="#features-5" className="btn btn-tra-grey skyblue-hover">Find Out More</a>
<a href={`${process.env.REACT_APP_FLEET}/`} className="btn btn-tra-grey skyblue-hover">{aboutSection.cta}</a>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END CONTENT-2 */}
{/* FEATURES-13
============================================= */}
{/* FEATURES-13 */}
<section id="features-13" className="rel whitesmoke_shape mt-inverse-50 features-section division">
<div className="container">
<div className="row d-flex align-items-center">
@@ -82,15 +65,13 @@ class Fleet extends React.Component {
<div className="col-md-10 col-lg-5">
<div className="txt-block pc-15 wow fadeInUp" data-wow-delay="0.4s">
{/* Section ID */}
<span className="section-id grey-color">Flexible Features</span>
<span className="section-id grey-color">{statsSection.tag}</span>
{/* Title */}
<h2 className="h2-md">FLOAT'S DASHBOARD</h2>
<h2 className="h2-md">{statsSection.header}</h2>
{/* Text */}
<p className="p-lg">Your EV fleet performance metrics are in one place, easy to locate any useful information
analyze data and compare results.
</p>
<p className="p-lg">{statsSection.desc1}</p>
{/* Text */}
<p className="p-lg">Gravida porta velna vitae auctor congue magna nihil impedit ligula risus mauris donec ligula</p>
<p className="p-lg">{statsSection.desc2}</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* FEATURES-13 WRAPPER */}
@@ -103,18 +84,18 @@ class Fleet extends React.Component {
{/* Icon */}
<div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-clock" /></div>
{/* Title */}
<h5 className="h5-sm">Metrics</h5>
<h5 className="h5-sm">{statsSection.metrics.title}</h5>
{/* Text */}
<p className="p-lg">We guide a company through the EV conversion process, starting with insights on current performance of their existing fleet existing fleet.performance of their existing fleet existing fleet.</p>
<p className="p-lg">{statsSection.metrics.content}</p>
</div>
{/* FEATURE BOX #2 */}
<div id="fb-13-2" className="fbox-13 wow fadeInUp" data-wow-delay="0.6s">
{/* Icon */}
<div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-exercise" /></div>
{/* Title */}
<h5 className="h5-sm">Guide</h5>
<h5 className="h5-sm">{statsSection.guide.title}</h5>
{/* Text */}
<p className="p-lg">We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..</p>
<p className="p-lg">{statsSection.guide.content}</p>
</div>
</div>
<div className="col-md-6">
@@ -123,18 +104,18 @@ class Fleet extends React.Component {
{/* Icon */}
<div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-salad" /></div>
{/* Title */}
<h5 className="h5-sm">Access</h5>
<h5 className="h5-sm">{statsSection.access.title}</h5>
{/* Text */}
<p className="p-lg">We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..</p>
<p className="p-lg">{statsSection.access.content}</p>
</div>
{/* FEATURE BOX #4 */}
<div id="fb-13-4" className="fbox-13 wow fadeInUp" data-wow-delay="1s">
{/* Icon */}
<div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-lose-weight" /></div>
{/* Title */}
<h5 className="h5-sm">Stay Motivated</h5>
<h5 className="h5-sm">{statsSection.motivated.title}</h5>
{/* Text */}
<p className="p-lg">Take the complexity out of electrifying your fleet with industry-leading support.Porta semper lacus cursus feugiat primis ultrice ligula risus ultrice ligula risus auctor ultrice ociis</p>
<p className="p-lg">{statsSection.motivated.content}</p>
</div>
</div>
</div>
@@ -143,8 +124,7 @@ class Fleet extends React.Component {
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END FEATURES-13 */}
{/* CONTENT-3
============================================= */}
{/* CONTENT-3 */}
<section id="content-3" className="wide-60 content-section division">
<div className="container">
{/* CONTENT BOX-1 */}
@@ -160,15 +140,13 @@ class Fleet extends React.Component {
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Perfect Integration</span>
<span className="section-id grey-color">{floatIntegrationSection.tag}</span>
{/* Title */}
<h2 className="h2-md">Float analytical, recommendation / rewards framework.</h2>
<h2 className="h2-md">{floatIntegrationSection.header}</h2>
{/* Text */}
<p className="p-lg">Our platform analyzes current fleet behavior and display areas for improvement on our custom customer dashboard.
</p>
<p className="p-lg">{floatIntegrationSection.desc1}</p>
{/* Text */}
<p className="p-lg">Float saves their customers money from day one by analyzing their current fleet data on cost, emissions,time and resources and then makes recommendations
on prioritization of vehicle replacements and infrastructure investments.</p>
<p className="p-lg">{floatIntegrationSection.desc2}</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
@@ -185,10 +163,8 @@ class Fleet extends React.Component {
<div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-video-player-2" /></div>
{/* Text */}
<div className="cbox-txt">
<h5 className="h5-sm">HD Instructional Videos</h5>
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
suscipit quaerat ultrice tellus viverra
</p>
<h5 className="h5-sm">{specialFeaturesSection.firstFeature.title}</h5>
<p className="p-lg">{specialFeaturesSection.firstFeature.content}</p>
</div>
</div>
{/* CONTENT BOX #2 */}
@@ -197,10 +173,8 @@ class Fleet extends React.Component {
<div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-percentage" /></div>
{/* Text */}
<div className="cbox-txt">
<h5 className="h5-sm">Smart Watch Optimized</h5>
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
suscipit quaerat ultrice tellus viverra
</p>
<h5 className="h5-sm">{specialFeaturesSection.secondFeature.title}</h5>
<p className="p-lg">{specialFeaturesSection.secondFeature.content}</p>
</div>
</div>
{/* CONTENT BOX #3 */}
@@ -209,10 +183,8 @@ class Fleet extends React.Component {
<div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-smartphone-9" /></div>
{/* Text */}
<div className="cbox-txt">
<h5 className="h5-sm">Heart Rate Tracking</h5>
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
suscipit quaerat ultrice tellus viverra
</p>
<h5 className="h5-sm">{specialFeaturesSection.thirdFeature.title}</h5>
<p className="p-lg">{specialFeaturesSection.thirdFeature.content}</p>
</div>
</div>
</div>
@@ -220,21 +192,20 @@ class Fleet extends React.Component {
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-top">
<div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-17_new.png" alt="content-image" />
<img className="img-fluid" src="assets/images/img_05.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* END CONTENT BOX-2 */}
</div> {/* End container */}
</section> {/* END CONTENT-3 */}
{/* BRANDS-1
============================================= */}
{/* BRANDS-1 */}
<div id="brands-1" className="bg_whitesmoke brands-section division">
<div className="container">
<div className="row">
<div className="col text-center pc-25">
{/* Text */}
<p className="p-xl">You might know Float from:</p>
<p className="p-xl">{brandSectionTitle}</p>
{/* Brands Carousel */}
<div className="owl-carousel brands-carousel">
{/* BRAND LOGO IMAGE */}
@@ -296,8 +267,7 @@ class Fleet extends React.Component {
</div> {/* End row */}
</div> {/* End container */}
</div> {/* END BRANDS-1 */}
{/* FEATURES-5
============================================= */}
{/* FEATURES-5 */}
<section id="features-5" className="wide-50 features-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -305,11 +275,9 @@ class Fleet extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">No,we are not just another EV!</h2>
<h2 className="h2-md">{featuresSection.header}</h2>
{/* Text */}
<p className="p-xl">Our software takes you through the daily process of transitioning your fleet to Float.
Self-Management Inclusive
</p>
<p className="p-xl">{featuresSection.subHeader}</p>
</div>
</div>
</div>
@@ -324,10 +292,9 @@ class Fleet extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">User-Friendly</h5>
<h5 className="h5-sm">{featuresSection.userFriendlyItem.title}</h5>
{/* Text */}
<p className="p-lg">Our software takes you through the daily process of transitioning your fleet to Float.process of transitioning your fleet to Float
</p>
<p className="p-lg">{featuresSection.userFriendlyItem.content}</p>
</div>
</div>
</div>
@@ -339,10 +306,9 @@ class Fleet extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Fully functional</h5>
<h5 className="h5-sm">{featuresSection.fullyFunctionalItem.title}</h5>
{/* Text */}
<p className="p-lg">We integrate company data into Float recommendation engine to provide insights.
</p>
<p className="p-lg">{featuresSection.fullyFunctionalItem.content}</p>
</div>
</div>
</div>
@@ -354,11 +320,9 @@ class Fleet extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Quick Access</h5>
<h5 className="h5-sm">{featuresSection.quickAccessItem.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{featuresSection.quickAccessItem.content}</p>
</div>
</div>
</div>
@@ -370,11 +334,9 @@ class Fleet extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Track &amp; Analyze</h5>
<h5 className="h5-sm">{featuresSection.trackAndAnalyzeItem.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{featuresSection.trackAndAnalyzeItem.content}</p>
</div>
</div>
</div>
@@ -386,11 +348,9 @@ class Fleet extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Easy To Follow</h5>
<h5 className="h5-sm">{featuresSection.easy2Follow.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{featuresSection.easy2Follow.content}</p>
</div>
</div>
</div>
@@ -402,10 +362,9 @@ class Fleet extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Ongoing Support</h5>
<h5 className="h5-sm">{featuresSection.ongoingSupport.title}</h5>
{/* Text */}
<p className="p-lg">We guide you step by step to convert to Electronic vehicles.We guide you step by step to convert
</p>
<p className="p-lg">{featuresSection.ongoingSupport.content}</p>
</div>
</div>
</div>
@@ -413,15 +372,14 @@ class Fleet extends React.Component {
</div> {/* END FEATURES-5 HOLDER */}
</div> {/* End container */}
</section> {/* END FEATURES-5 */}
{/* PROCESS-2
============================================= */}
{/* PROCESS-2 */}
<section id="process-2" className="bg_fit_02 wide-100 process-section division">
<div className="container white-color">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
<div className="section-title text-center mb-60">
<h3 className="h3-sm">Custom fleet on your own time and in your own space</h3>
<h3 className="h3-sm">{stepsSection.header}</h3>
</div>
</div>
</div>
@@ -430,30 +388,29 @@ class Fleet extends React.Component {
{/* PROCESS BOX #1 */}
<li id="step-2-1" className="col-md-4">
<div className="pbox-2 pc-20 text-center">
<h5 className="h5-sm">Get Set Up</h5>
<p className="p-lg">Nemo ipsam egestas volute dolores quaerat sodales</p>
<h5 className="h5-sm">{stepsSection.step1.title}</h5>
<p className="p-lg">{stepsSection.step1.content}</p>
</div>
</li>
{/* PROCESS BOX #2 */}
<li id="step-2-2" className="col-md-4">
<div className="pbox-2 pc-20 text-center">
<h5 className="h5-sm">Get Your Plan</h5>
<p className="p-lg">Nemo ipsam egestas volute dolores quaerat sodales</p>
<h5 className="h5-sm">{stepsSection.step2.title}</h5>
<p className="p-lg">{stepsSection.step2.content}</p>
</div>
</li>
{/* PROCESS BOX #3 */}
<li id="step-2-3" className="col-md-4">
<div className="pbox-2 pc-20 text-center">
<h5 className="h5-sm">Get Moving</h5>
<p className="p-lg">Nemo ipsam egestas volute dolores quaerat sodales</p>
<h5 className="h5-sm">{stepsSection.step3.title}</h5>
<p className="p-lg">{stepsSection.step3.content}</p>
</div>
</li>
</ul>
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END PROCESS-2 */}
{/* CONTENT-1
============================================= */}
{/* CONTENT-1 */}
<section id="content-1" className="wide-60 content-section division">
<div className="container">
<div className="row d-flex align-items-center m-row">
@@ -461,16 +418,13 @@ class Fleet extends React.Component {
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Work Online and Offline</span>
<span className="section-id grey-color">{trackingFleet.tag}</span>
{/* Title */}
<h2 className="h2-md">Stay on track and plan your fleet</h2>
<h2 className="h2-md">{trackingFleet.header}</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien
</p>
<p className="p-lg">{trackingFleet.desc} </p>
{/* Button */}
<a href="#faqs-2" className="btn btn-tra-grey skyblue-hover">Read The FAQs</a>
<a href="#faqs-2" className="btn btn-tra-grey skyblue-hover">{trackingFleet.cta}</a>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
@@ -483,8 +437,7 @@ class Fleet extends React.Component {
</div> {/* End container */}
</section> {/* END CONTENT-1 */}
{/* TESTIMONIALS-2
============================================= */}
{/* TESTIMONIALS-2 */}
<section id="reviews-2" className="reviews-section division">
<div className="container">
<div className="row">
@@ -492,13 +445,11 @@ class Fleet extends React.Component {
<div className="col-lg-4">
<div className="reviews-2-title pc-10">
{/* Section ID */}
<span className="section-id grey-color">Reviews</span>
<span className="section-id grey-color">{testimonialSection.tag}</span>
{/* Title */}
<h2 className="h2-md mb-20">Our Happy Customers</h2>
<h2 className="h2-md mb-20">{testimonialSection.header}</h2>
{/* Text */}
<p className="p-lg">Aliquam augue suscipit luctus neque purus ipsum neque dolor primis undo tempus, blandit and
cursus varius
</p>
<p className="p-lg">{testimonialSection.text} </p>
</div>
</div>
{/* TESTIMONIALS CAROUSEL */}
@@ -685,8 +636,7 @@ class Fleet extends React.Component {
</div>
</div> {/* End container */}
</section> {/* END TESTIMONIALS-2 */}
{/* PRICING-2
============================================= */}
{/* PRICING-2 */}
<section id="pricing-2" className="wide-100 pricing-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -769,8 +719,7 @@ class Fleet extends React.Component {
</div> {/* END DOWNLOAD BUTTON */}
</div> {/* End container */}
</section> {/* END PRICING-2 */}
{/* CONTENT-13
============================================= */}
{/* CONTENT-13 */}
<section id="content-13" className="bg_dark wide-60 content-section division">
<div className="container white-color">
<div className="row d-flex align-items-center">
@@ -778,23 +727,19 @@ class Fleet extends React.Component {
<div className="col-md-6 col-xl-6">
<div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id">Totally Optimized</span>
<span className="section-id">{optimizedSection.tag}</span>
{/* Title */}
<h2 className="h2-md">Intuitive features, powerful results</h2>
<h2 className="h2-md">{optimizedSection.header}</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
</p>
<p className="p-lg">{optimizedSection.list1}</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
<p className="p-lg">{optimizedSection.list2}</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
</p>
<p className="p-lg">{optimizedSection.list3}</p>
</li>
</ul>
</div>
@@ -808,8 +753,7 @@ class Fleet extends React.Component {
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END CONTENT-13 */}
{/* CONTENT-14
============================================= */}
{/* CONTENT-14 */}
<section id="content-14" className="whitesmoke_shape content-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -817,11 +761,9 @@ class Fleet extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-40">
{/* Title */}
<h2 className="h2-md">Accessible for All Platforms</h2>
<h2 className="h2-md">{accessibiltySection.header}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
<p className="p-xl">{accessibiltySection.text}</p>
</div>
</div>
</div>
@@ -829,14 +771,13 @@ class Fleet extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End container */}
</section> {/* END CONTENT-14 */}
{/* FAQs-2
============================================= */}
{/* FAQs-2 */}
<section id="faqs-2" className="wide-100 faqs-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -844,11 +785,9 @@ class Fleet extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Got Questions? Look Here</h2>
<h2 className="h2-md">{faqSection.header}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
<p className="p-xl">{faqSection.text}</p>
</div>
</div>
</div>
@@ -946,15 +885,14 @@ class Fleet extends React.Component {
<div className="col-md-12">
<div className="more-questions text-center mt-40">
<h5 className="h5-sm"><span className="flaticon-check" />
Have more questions? <a href="mailto:yourdomain@mail.com" className="skyblue-color">Ask your question here</a>
{faqSection.question} <a href="mailto:yourdomain@mail.com" className="skyblue-color">{faqSection.link}</a>
</h5>
</div>
</div>
</div>
</div> {/* End container */}
</section> {/* END FAQs-2 */}
{/* NEWSLETTER-1
============================================= */}
{/* NEWSLETTER-1 */}
<section id="newsletter-1" className="newsletter-section division">
<div className="container">
<div className="newsletter-wrapper bg_white">
@@ -963,9 +901,9 @@ class Fleet extends React.Component {
<div className="col-lg-6">
<div className="newsletter-txt">
{/* Section ID */}
<span className="section-id">Subscribe to Our Newsletter</span>
<span className="section-id">{subscribeSection.tag}</span>
{/* Title */}
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
<h4 className="h4-xl">{subscribeSection.header}</h4>
</div>
</div>
{/* NEWSLETTER FORM */}
@@ -974,7 +912,7 @@ class Fleet extends React.Component {
<div className="input-group">
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
<span className="input-group-btn">
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">{subscribeSection.cta}</button>
</span>
</div>
{/* Newsletter Form Notification */}
@@ -985,8 +923,7 @@ class Fleet extends React.Component {
</div> {/* End newsletter-holder */}
</div> {/* End container */}
</section> {/* END NEWSLETTER-1 */}
{/* BLOG-1
============================================= */}
{/* BLOG-1 */}
<section id="blog-1" className="wide-60 blog-section division">
<div className="container">
{/* SECTION TITLE */}
@@ -994,11 +931,9 @@ class Fleet extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Our Recipes &amp; Inspiration</h2>
<h2 className="h2-md">{blogSection.header}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
<p className="p-xl">{blogSection.text}</p>
</div>
</div>
</div>
@@ -1088,59 +1023,204 @@ class Fleet extends React.Component {
</div> {/* END BLOG POSTS */}
</div> {/* End container */}
</section> {/* END BLOG-1 */}
{/* DOWNLOAD-1
============================================= */}
{/* DOWNLOAD-1 */}
<section id="download-1" className="bg_fit_01 pt-100 download-section division">
<div className="container white-color">
<div className="row d-flex align-items-center m-row">
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-bottom">
<div className="img-block right-column pc-25 wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-15-fit.png" alt="content-image" />
<img className="img-fluid" src="assets/images/img_15_fit.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6 m-top">
<div className="txt-block left-column pc-20 wow fadeInLeft" data-wow-delay="0.6s">
{/* Title */}
<h2 className="h2-md">Take your fitness to the next level</h2>
<h2 className="h2-md">{downloadSection.header}</h2>
{/* Text */}
<p className="p-xl">Augue egestas volutpat egestas augue purus cubilia laoreet and magna suscipit luctus dolor tempus</p>
{/* STORE BADGES */}
<div className="stores-badge">
{/* AppStore */}
<a href="#" className="store">
<img className="appstore" src="assets/images/appstore-white.png" alt="appstore-logo" />
</a>
{/* Google Play */}
<a href="#" className="store">
<img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-logo" />
</a>
</div>
{/* Rating */}
<div className="txt-block-rating">
<div className="stars-rating">
All Versions Rating
<span className="flaticon-star ml-5" />
<span className="flaticon-star" />
<span className="flaticon-star" />
<span className="flaticon-star" />
<span className="flaticon-star-half-empty" />
<p className="txt-rating">Based on 7.296 user reviews (App Store &amp; Google Play)</p>
</div>
</div>
<p className="p-xl">{downloadSection.text}</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END DOWNLOAD-1 */}
</div> {/* END PAGE CONTENT */}
</div>
</div> {/* END PAGE CONTENT */} </div>
)
}
}
export default Fleet
export default Fleet
// PAGE TEXT/CONTENT VARIABLES
//Hero Section
let heroSection = {
tag: 'HTML',
header: 'Float Business Fleet Management Systems',
desc: 'We are your A.I. enables assistance to manage your fleet and advancement to new platforms with insights on current performance and operational projections.'
}
// About Section
let aboutSection = {
tag: 'FLOAT EV',
header: 'Electric Fleet Platform',
desc1: "Float's recommendation engine enables tracking of vehicle usage, ownership & service costs, fuel costs, emissions. Its Telematics IoT enabled OBD device & dashcam to connect directly to the vehicle to pull data.",
desc2: "Aliqum mullam blandit and tempor sapien donec lipsum gravida porta. Velna vitae auctor congue magna impedit ligula risus. Mauris donec ligula an impedit magnis",
cta: "Find Out More"
}
// Stats Section
let statsSection = {
tag: 'Flexible Features',
header: "FLOAT'S DASHBOARD",
desc1: "Your EV fleet performance metrics are in one place, easy to locate any useful information analyze data and compare results.",
desc2: "Gravida porta velna vitae auctor congue magna nihil impedit ligula risus mauris donec ligula",
metrics: {
title: 'Metrics',
content: 'We guide a company through the EV conversion process, starting with insights on current performance of their existing fleet existing fleet.performance of their existing fleet existing fleet.'
},
access: {
title: 'Access',
content: 'We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..'
},
guide: {
title: 'Guide',
content: 'We assess what works, provide information on which vehicles to convert first, and continue to improve on fleet performance throughout the step by step conversion to EVs..'
},
motivated: {
title: 'Stay Motivated',
content: 'Take the complexity out of electrifying your fleet with industry-leading support.Porta semper lacus cursus feugiat primis ultrice ligula risus ultrice ligula risus auctor ultrice ociis'
}
}
// A Float Recommendation Framework (PART 1)
let floatIntegrationSection = {
tag: 'Perfect Integration',
header: 'Float analytical, recommendation / rewards framework.',
desc1: 'Our platform analyzes current fleet behavior and display areas for improvement on our custom customer dashboard.',
desc2: 'Float saves their customers money from day one by analyzing their current fleet data on cost, emissions,time and resources and then makes recommendations on prioritization of vehicle replacements and infrastructure investments.'
}
// A Float Recommendation Framework (PART 2)
let specialFeaturesSection ={
firstFeature: {
title: 'HD Instructional Videos',
content: 'Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra'
},
secondFeature: {
title: 'Smart Watch Optimized',
content: 'Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra'
},
thirdFeature: {
title: 'Heart Rate Tracking',
content: 'Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra'
}
}
// Brand Associations
let brandSectionTitle = 'You might know Float from:'
// Features Section (PART 1)
let featuresSection ={
header: 'No,we are not just another EV!',
subHeader: 'Our software takes you through the daily process of transitioning your fleet to Float. Self-Management Inclusive',
userFriendlyItem: {
title: 'User-Friendly',
content: 'Our software takes you through the daily process of transitioning your fleet to Float.process of transitioning your fleet to Float'
},
fullyFunctionalItem: {
title: 'Fully functional',
content: 'We integrate company data into Float recommendation engine to provide insights.'
},
quickAccessItem: {
title: 'Quick Access',
content: 'Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat at impedit felis undo auctor augue mauris'
},
trackAndAnalyzeItem: {
title: 'Track & Analyze',
content: 'Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat at impedit felis undo auctor augue mauris'
},
easy2Follow: {
title: 'Easy To Follow',
content: 'Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat at impedit felis undo auctor augue mauris'
},
ongoingSupport: {
title: 'Ongoing Support',
content: 'We guide you step by step to convert to Electronic vehicles.We guide you step by step to convert'
}
}
// Steps Section
let stepsSection = {
header: 'Custom fleet on your own time and in your own space',
step1: {
title: 'Get Set Up',
content: 'Nemo ipsam egestas volute dolores quaerat sodales'
},
step2: {
title: 'Get Your Plan',
content: 'Nemo ipsam egestas volute dolores quaerat sodales'
},
step3: {
title: 'Get Moving',
content: 'Nemo ipsam egestas volute dolores quaerat sodales'
}
}
// Network Section
let trackingFleet = {
tag: 'Work Online and Offline',
header: 'Stay on track and plan your fleet',
desc: 'Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat sodales a sapien',
cta: 'Read the FAQs'
}
// Testimonials Section
let testimonialSection = {
tag: 'Reviews',
header: 'Our Happy Customers',
text: 'Aliquam augue suscipit luctus neque purus ipsum neque d'
}
// Features Section (PART 2)
let optimizedSection = {
tag: 'Totally Optimized',
header: 'Intuitive features, powerful results',
list1: 'Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium ligula rutrum tempor sapien',
list2: 'Quaerat sodales sapien euismod purus blandit',
list3: 'Nemo ipsam egestas volute turpis dolores ut '
}
// Viewport Section
let accessibiltySection = {
header: 'Accessible for All Platforms',
text: 'Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero tempus, blandit and cursus varius magna tempus a dolor'
}
// FAQs Section
let faqSection = {
header: 'Got Questions? Look Here',
text: 'Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero tempus, blandit and cursus varius magna tempus a dolor',
question: 'Have more questions?',
link: 'Ask your question here'
}
// Blog Section
let blogSection = {
header: 'Our Recipes & Inspiration',
text: 'Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero tempus, blandit and cursus varius magna tempus a dolor'
}
// Subscribe Section
let subscribeSection = {
tag: 'Subscribe to Our Newsletter',
header: 'Stay up to date with our news, ideas and updates',
cta: 'Subscribe Now'
}
// Download Section
let downloadSection = {
header: 'Take your fleet to the next level',
text: 'Augue egestas volutpat egestas augue purus cubilia laoreet and magna suscipit luctus dolor tempus'
}
+295 -182
View File
@@ -1,4 +1,7 @@
import React, {Component} from 'react';
import SaveMoney from '../pages/assests/images/save-money.png'
import GetReward from '../pages/assests/images/get-rewarded.png'
class FloatHome extends React.Component {
render() {
@@ -27,13 +30,13 @@ class FloatHome extends React.Component {
<div className="col-md-6 col-lg-4">
<div className="hero-5-txt wow fadeInRight" data-wow-delay="0.4s">
{/* Title */}
<h3 className="h3-lg">Travel Smarter. Save Money.</h3>
<h3 className="h3-lg">{heroSection.header}</h3>
{/* Text */}
<p className="p-lg grey-color">Travel smarter and safer, with Float's rideshare comparison, ride hailing and budgeting app. Available on IOS and Android.</p>
<p className="p-lg grey-color">{heroSection.description}</p>
{/* HERO LINKS */}
<div className="hero-video-link">
<a href="https://www.youtube.com/embed/7e90gBu4pas" className="video-popup2 btn btn-md btn-video-link ico-30">
<span className="flaticon-play-button" /> Watch the Overview
<span className="flaticon-play-button" /> {heroSection.heroLink}
</a>
</div>
</div>
@@ -48,7 +51,7 @@ class FloatHome extends React.Component {
<div className="col-md-6 col-lg-4">
<div className="hero-5-btns wow fadeInLeft" data-wow-delay="0.4s">
{/* Title */}
<h3 className="h3-lg">Intelligent Mobility Choices!</h3>
<h3 className="h3-lg">{heroSection.button}</h3>
{/* STORE BADGES */}
<div className="stores-badge">
{/* AppStore */}
@@ -72,18 +75,6 @@ class FloatHome extends React.Component {
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
</a> */}
</div> {/* END STORE BADGES */}
{/* Rating */}
<div className="txt-block-rating">
<div className="stars-rating grey-color">
All Versions Rating
<span className="flaticon-star ml-5" />
<span className="flaticon-star" />
<span className="flaticon-star" />
<span className="flaticon-star" />
<span className="flaticon-star-half-empty" />
<p className="txt-rating">Based on 7.296 user reviews</p>
</div>
</div>
</div>
</div> {/* END HERO-5 BUTTONS */}
</div> {/* End row */}
@@ -100,43 +91,37 @@ class FloatHome extends React.Component {
<div id="fb-1-1" className="col-md-4">
<div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.4s">
{/* Icon */}
<div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-mobile-phone" /></div>
<div className="fbox-1-ico ico-80 stateblue-color"><img src={SaveMoney} /></div>
{/* Title */}
<h5 className="h5-sm">Quick Access</h5>
<h5 className="h5-sm">{message.access.heading}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and
ociis ligula blandit
</p>
<p className="p-lg">{message.access.description}</p>
</div>
</div>
{/* FEATURE BOX #2 */}
<div id="fb-1-2" className="col-md-4">
<div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.6s">
{/* Icon */}
<div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-chat-4" /></div>
<div className="fbox-1-ico ico-80 stateblue-color"><img src={SaveMoney} /></div>
{/* Title */}
<h5 className="h5-sm">Smart Notifications</h5>
<h5 className="h5-sm">{message.notification.heading}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and
ociis ligula blandit
</p>
<p className="p-lg">{message.notification.description}</p>
</div>
</div>
{/* FEATURE BOX #3 */}
<div id="fb-1-3" className="col-md-4">
<div className="fbox-1 mb-40 wow fadeInUp" data-wow-delay="0.8s">
{/* Icon */}
<div className="fbox-1-ico ico-80 stateblue-color"><span className="flaticon-spam" /></div>
<div className="fbox-1-ico ico-80 stateblue-color"><img src={GetReward} /></div>
{/* Title */}
<h5 className="h5-sm">Spam Protection</h5>
<h5 className="h5-sm">{message.spam.heading}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and
ociis ligula blandit
</p>
<p className="p-lg">{message.spam.description}</p>
</div>
</div>
</div> {/* End row */}
</div> END FEATURES-1 WRAPPER
</div> {/* END FEATURES-1 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-1 */}
{/* CONTENT-3
@@ -150,15 +135,13 @@ class FloatHome extends React.Component {
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">FROM A TO B</span>
<span className="section-id grey-color">{travelGuide.location.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Travel your way, with your local travel app.</h2>
<h2 className="h2-md">{travelGuide.location.title}</h2>
{/* Text */}
<p className="p-lg">The struggle is real and you know it, there have never been more options to move from A to B. Take back control!
</p>
<p className="p-lg">{travelGuide.location.desc}</p>
{/* Text */}
<p className="p-lg">Compare transport options and access ridesharing services directly in app, all whilst keeping track of your travel budget and traveling safely.
</p>
<p className="p-lg">{travelGuide.location.descTwo}</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
@@ -182,12 +165,11 @@ class FloatHome extends React.Component {
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">SMART VISUALS</span>
<span className="section-id grey-color">{travelGuide.history.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Your travel data at a glance.</h2>
<h2 className="h2-md">{travelGuide.history.title}</h2>
{/* Text */}
<p className="p-lg">Keep track of the money, time and emissions you spend on your everyday travel. Float reviews your travel and analyzes your behavior to provide you with an easy overview.
</p>
<p className="p-lg">{travelGuide.history.desc}</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
@@ -204,15 +186,13 @@ class FloatHome extends React.Component {
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">SMART TIPS & ALERTS</span>
<span className="section-id grey-color">{travelGuide.travelTips.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Explore your city smarter with Float.</h2>
<h2 className="h2-md">{travelGuide.travelTips.title}</h2>
{/* Text */}
<p className="p-lg">Stay on top of how you travel. Start saving money and time, reduce your emissions, all whilst making the safest choice when
</p>
<p className="p-lg">{travelGuide.travelTips.desc}</p>
{/* Text */}
<p className="p-lg">traveling around your city. Get smart tips and alerts customized to your travel behaviour.
</p>
<p className="p-lg">{travelGuide.travelTips.descTwo}</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
@@ -234,11 +214,9 @@ class FloatHome extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Ready to Try Float?</h2>
<h2 className="h2-md">{tryFloatSec.title}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
<p className="p-xl">{tryFloatSec.desc}</p>
</div>
</div>
</div>
@@ -253,11 +231,9 @@ class FloatHome extends React.Component {
{/* Icon */}
<div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-user-1" /></div>
{/* Title */}
<h5 className="h5-md">Multiple Accounts</h5>
<h5 className="h5-md">{tryFloatSec.accounts.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and
ociis ligula blandit
</p>
<p className="p-lg">{tryFloatSec.accounts.desc}</p>
</div>
</div>
{/* FEATURE BOX #2 */}
@@ -266,11 +242,9 @@ class FloatHome extends React.Component {
{/* Icon */}
<div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-smiley" /></div>
{/* Title */}
<h5 className="h5-md">Stickers &amp; Emojis</h5>
<h5 className="h5-md">{tryFloatSec.emojis.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and
ociis ligula blandit
</p>
<p className="p-lg">{tryFloatSec.emojis.desc}</p>
</div>
</div>
{/* FEATURE BOX #3 */}
@@ -279,11 +253,9 @@ class FloatHome extends React.Component {
{/* Icon */}
<div className="fbox-11-ico ico-60 bg_slateblue white-color"><span className="flaticon-image" /></div>
{/* Title */}
<h5 className="h5-md">Share Files &amp; Media</h5>
<h5 className="h5-md">{tryFloatSec.files.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus a cursus, feugiat primis ultrice ligula and risus auctor ultrice and
ociis ligula blandit
</p>
<p className="p-lg">{tryFloatSec.files.desc}</p>
</div>
</div>
</div> {/* End row */}
@@ -306,12 +278,11 @@ class FloatHome extends React.Component {
<div className="col-md-7 col-lg-6">
<div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">CUSTOM DEALS FOR YOU</span>
<span className="section-id grey-color">{customDeals.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Get rewarded with Float points for traveling smarter.</h2>
<h2 className="h2-md">{customDeals.title}</h2>
{/* Text */}
<p className="p-lg">Gain access to exclusive deals on local transportation, neighborhood favorites, and international brands by staying on budget, avoiding peak commute times, or carpooling with friends to reduce your carbon emissions (and to stay safe!)
</p>
<p className="p-lg">{customDeals.desc}</p>
</div>
</div> {/* END CONTENT TXT */}
</div> {/* End row */}
@@ -332,10 +303,8 @@ class FloatHome extends React.Component {
<div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-video-player" /></div>
{/* Text */}
<div className="cbox-txt">
<h5 className="h5-sm">Text, Voice &amp; Video Calls</h5>
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
suscipit quaerat ultrice tellus viverra
</p>
<h5 className="h5-sm">{customDeals.text.title}</h5>
<p className="p-lg">{customDeals.text.desc}</p>
</div>
</div>
{/* CONTENT BOX #2 */}
@@ -344,10 +313,8 @@ class FloatHome extends React.Component {
<div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-smiley" /></div>
{/* Text */}
<div className="cbox-txt">
<h5 className="h5-sm">Stickers, Emojis, Themes</h5>
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
suscipit quaerat ultrice tellus viverra
</p>
<h5 className="h5-sm">{customDeals.stickers.title}</h5>
<p className="p-lg">{customDeals.stickers.desc}</p>
</div>
</div>
{/* CONTENT BOX #3 */}
@@ -356,10 +323,8 @@ class FloatHome extends React.Component {
<div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-image" /></div>
{/* Text */}
<div className="cbox-txt">
<h5 className="h5-sm">Share Files &amp; Media</h5>
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
suscipit quaerat ultrice tellus viverra
</p>
<h5 className="h5-sm">{customDeals.media.title}</h5>
<p className="p-lg">{customDeals.media.desc}</p>
</div>
</div>
</div>
@@ -367,7 +332,7 @@ class FloatHome extends React.Component {
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-top">
<div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-05.png" alt="content-image" />
<img className="img-fluid" src="assets/images/img_05.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
@@ -387,11 +352,9 @@ class FloatHome extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">More Features to Expect</h2>
<h2 className="h2-md">{moreFeatures.title}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
<p className="p-xl">{moreFeatures.desc}</p>
</div>
</div>
</div>
@@ -406,11 +369,9 @@ class FloatHome extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Dark &amp; Light Modes</h5>
<h5 className="h5-sm">{moreFeatures.mode.title}</h5>
{/* Text */}
<p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus
</p>
<p className="p-md">{moreFeatures.mode.desc}</p>
</div>
</div>
{/* ICON */}
@@ -430,11 +391,9 @@ class FloatHome extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Group Messaging</h5>
<h5 className="h5-sm">{moreFeatures.groupMes.title}</h5>
{/* Text */}
<p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus
</p>
<p className="p-md">{moreFeatures.groupMes.desc}</p>
</div>
</div>
{/* ICON */}
@@ -454,11 +413,9 @@ class FloatHome extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Strong Encryption</h5>
<h5 className="h5-sm">{moreFeatures.strongEncry.title}</h5>
{/* Text */}
<p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus
</p>
<p className="p-md">{moreFeatures.strongEncry.desc}</p>
</div>
</div>
{/* ICON */}
@@ -478,11 +435,9 @@ class FloatHome extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Voice Assistant</h5>
<h5 className="h5-sm">{moreFeatures.voiceAsst.title}</h5>
{/* Text */}
<p className="p-md">Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus
</p>
<p className="p-md">{moreFeatures.voiceAsst.desc}</p>
</div>
</div>
{/* ICON */}
@@ -509,36 +464,36 @@ class FloatHome extends React.Component {
<div id="sb-2-1" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.4s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number"><span className="count-element">28</span>%</h2>
<h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.fastAccess.count}</span>%</h2>
{/* Text */}
<h5 className="h5-xs">Faster Access</h5>
<h5 className="h5-xs">{stats.fastAccess.title}</h5>
</div>
</div>
{/* STATISTIC BLOCK #2 */}
<div id="sb-2-2" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.6s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number"><span className="count-element">47</span>%</h2>
<h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.appPro.count}</span>%</h2>
{/* Text */}
<h5 className="h5-xs">App Productivity</h5>
<h5 className="h5-xs">{stats.appPro.title}</h5>
</div>
</div>
{/* STATISTIC BLOCK #3 */}
<div id="sb-2-3" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.8s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number"><span className="count-element">54</span>%</h2>
<h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.secureAccess.count}</span>%</h2>
{/* Text */}
<h5 className="h5-xs">Secure Access</h5>
<h5 className="h5-xs">{stats.secureAccess.title}</h5>
</div>
</div>
{/* STATISTIC BLOCK #4 */}
<div id="sb-2-4" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="1s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number"><span className="count-element">36</span>%</h2>
<h2 className="h2-title-sm statistic-number"><span className="count-element">{stats.batSaving.count}</span>%</h2>
{/* Text */}
<h5 className="h5-xs">Battery Saving</h5>
<h5 className="h5-xs">{stats.batSaving.title}</h5>
</div>
</div>
</div> {/* End row */}
@@ -553,32 +508,17 @@ class FloatHome extends React.Component {
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6">
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-03.png" alt="content-image" />
<img className="img-fluid" src="assets/images/how-it-works-recomment-engine.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Beauty of Simplicity</span>
<span className="section-id grey-color">{artIntel.artificialEngine.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Beautiful, award-winning design</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
</p>
</li>
</ul>
<h2 className="h2-md">{artIntel.artificialEngine.title}</h2>
<p className="p-lg">{artIntel.artificialEngine.desc}</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
@@ -593,27 +533,25 @@ class FloatHome extends React.Component {
<div className="col-md-6 col-xl-6">
<div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id">Totally Optimized</span>
<span className="section-id">{artIntel.optimization.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Intuitive features, powerful results</h2>
<h2 className="h2-md">{artIntel.optimization.title}</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
<p className="p-lg">{artIntel.optimization.desc}
</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
<p className="p-lg">{artIntel.optimization.desc2}</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
<p className="p-lg">{artIntel.optimization.desc3}
</p>
</li>
</ul>
{/* Button */}
<a href="#faqs-1" className="btn btn-tra-grey rose-hover">Read The FAQs</a>
<a href="#faqs-1" className="btn btn-tra-grey rose-hover">{artIntel.optimization.btn}</a>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
@@ -682,10 +620,9 @@ class FloatHome extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-60">
{/* Title */}
<h2 className="h2-md">Accessible for All Platforms</h2>
<h2 className="h2-md">{accessibilitySec.title}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
<p className="p-xl">A{accessibilitySec.desc}
</p>
</div>
</div>
@@ -694,7 +631,7 @@ class FloatHome extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div>
@@ -704,10 +641,10 @@ class FloatHome extends React.Component {
<div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
{/* Button */}
<a href="https://www.youtube.com/watch?v=7e90gBu4pas" className="video-popup2 btn btn-md btn-tra-grey rose-hover">
See Float in Action <span className="flaticon-play-button" />
{accessibilitySec.youtubeLink} <span className="flaticon-play-button" />
</a>
{/* OS Prerequisite */}
<span className="os-version">Available on Android, iOS and macOS</span>
<span className="os-version">{accessibilitySec.leadTitle}</span>
</div>
</div>
</div> {/* END DOWNLOAD BUTTON */}
@@ -720,40 +657,22 @@ class FloatHome extends React.Component {
<div className="row">
{/* DOWNLOAD TXT */}
<div className="col-lg-6">
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id">Built For Speed</span>
{/* Title */}
<h2 className="h2-md">Share text, voice, photos, videos, GIFs and files for free</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
posuere orci auctor purus euismod an aliquam quaerat purus
</p>
{/* STORE BADGES */}
<div className="stores-badge">
{/* AppStore */}
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
<span className="section-id">{floatForSpeed.leadTitle}</span>
<h2 className="h2-md">{floatForSpeed.title}</h2>
<p className="p-xl">{floatForSpeed.desc}
</p>
<div className="stores-badge">
<a href="#" className="store">
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
</a>
{/* Google Play */}
</a>
<a href="#" className="store">
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
</a>
{/* Aamazon Market
<a href="#" class="store">
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
</a> */}
{/* Mac AppStore
<a href="#" class="store">
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
</a> */}
{/* Microsoft Store
<a href="#" class="store">
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
</a> */}
</div> {/* END STORE BADGES */}
</div>
</div>
</div> {/* END DOWNLOAD TXT */}
</div>
{/* END DOWNLOAD TXT */}
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END DOWNLOAD-6 */}
@@ -971,7 +890,7 @@ class FloatHome extends React.Component {
</a> */}
</div> {/* END STORE BADGES */}
{/* OS Prerequisite */}
<span className="os-version">Available for iOS 8 and Android Devices From 5.5</span>
<span className="os-version">{downloadPlatform.leadTitle}</span>
</div>
</div>
</div> {/* END DOWNLOAD BUTTON */}
@@ -1127,9 +1046,9 @@ class FloatHome extends React.Component {
<div className="col-lg-6">
<div className="newsletter-txt">
{/* Section ID */}
<span className="section-id">Subscribe to Our Newsletter</span>
<span className="section-id">{subscribeSec.leadTitle}</span>
{/* Title */}
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
<h4 className="h4-xl">{subscribeSec.title}</h4>
</div>
</div>
{/* NEWSLETTER FORM */}
@@ -1138,7 +1057,7 @@ class FloatHome extends React.Component {
<div className="input-group">
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
<span className="input-group-btn">
<button type="submit" className="btn btn-md btn-rose tra-rose-hover">Subscribe Now</button>
<button type="submit" className="btn btn-md btn-rose tra-rose-hover">{subscribeSec.btn}</button>
</span>
</div>
{/* Newsletter Form Notification */}
@@ -1261,10 +1180,9 @@ class FloatHome extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="download-5-txt text-center wow fadeInUp" data-wow-delay="0.6s">
{/* Title */}
<h2 className="h2-md">Lightning Fast. Super Powerful</h2>
<h2 className="h2-md">{floatMight.title}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque dolor primis libero tempus, blandit
posuere and ligula varius magna porta
<p className="p-xl">{floatMight.desc}
</p>
{/* STORE BADGES */}
<div className="stores-badge mb-50">
@@ -1292,7 +1210,7 @@ class FloatHome extends React.Component {
</div>
{/* Image */}
<div className="download-5-img wow fadeInUp" data-wow-delay="0.8s">
<img className="img-fluid" src="assets/images/img-20.png" alt="download-image" />
<img className="img-fluid" src="assets/images/img_20.png" alt="download-image" />
</div>
</div>
</div> {/* End row */}
@@ -1300,10 +1218,205 @@ class FloatHome extends React.Component {
</section> {/* END DOWNLOAD-5 */}
</div> {/* END PAGE CONTENT */}
</div>
</div>
)
}
}
export default FloatHome
export default FloatHome
// PAGE TEXT/CONTENT VARIABLES
//HERO SECTION
let heroSection = {
header: `Travel Smarter. Save Money.`,
description: `Travel smarter and safer, with Float's rideshare comparison, ride hailing and budgeting app. Available on IOS and Android.`,
heroLink: 'Watch the Overview',
button: `Intelligent Mobility Choices!`,
badge: {rating: `All Versions Rating`, review: 'Based on 7.296 user reviews'}
};
//SECTION TWO
let message = {
access: {
heading: `Smart Options`, description: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
ociis ligula blandit`
},
notification: {heading: `Save Money`, description: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
ociis ligula blandit`
},
spam: {heading: `Get Rewarded`, description: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
ociis ligula blandit`
}
};
//SECTION THREE (TRAVEL GUIDE SECTION)
let travelGuide = {
location: {
leadTitle: `FROM A TO B`,
title: `Travel your way, with your local travel app.`,
desc: `The struggle is real and you know it, there have never been more options to move from A to B. Take back control!`,
descTwo: `Compare transport options and access ridesharing services directly in app, all whilst keeping track of your travel budget and traveling safely.`
},
history:{
leadTitle: `SMART VISUALS`,
title: `Your travel data at a glance.`,
desc: `The struggle is real and you know it, Keep track of the money, time and emissions you spend on your everyday travel. Float reviews your travel and analyzes your behavior to provide you with an easy overview.
there have never been more options to move from A to B. Take back control!`
},
travelTips:{
leadTitle: `SMART TIPS & ALERTS`,
title: `Explore your city smarter with Float.`,
desc: `Stay on top of how you travel. Start saving money and time, reduce your emissions, all whilst making the safest choice when`,
descTwo: `traveling around your city. Get smart tips and alerts customized to your travel behaviour.`
}
}
//SECTION FOUR (READY TO TRY FLOAT SECTION)
let tryFloatSec = {
title: `Ready to Try Float?`,
desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor`,
accounts: {
title: `Multiple Accounts`, desc: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
Connectivity provides an array of features`
},
emojis: {title: `Service Options`, desc: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.
Connectivity provides an array of features`
},
files: {title: `Connectivity`, desc: ` With Connectivity, both fleet managers and drivers will experience increased efficiencies.
Connectivity provides an array of features`
}
}
//SECTION FIVE (CUSTOM DEALS FOR YOU SECTION)
let customDeals = {
leadTitle: `CUSTOM DEALS FOR YOU`,
title: `Get rewarded with Float points for traveling smarter.`,
desc: `Gain access to exclusive deals on local transportation, neighborhood favorites, and international brands by staying on budget, avoiding peak commute times, or carpooling with friends to reduce your carbon emissions (and to stay safe!)`,
text: {title: `Analytics`,
desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
},
stickers: {title: `Service Options`,
desc: `Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at suscipit quaerat ultrice tellus viverra`
},
media: {title: `Connectivity`,
desc: `With Connectivity, both fleet managers and drivers will experience increased efficiencies.Connectivity provides an array of features`
}
}
//MORE FEATURES
let moreFeatures = {
title: `More Features to Expect`,
desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor`,
mode: {
title: `Monitoring`,
desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus`
},
groupMes: {
title: `Analytics`,
desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus`
},
strongEncry: {
title: `Unlock Functionality`,
desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus`
},
voiceAsst: {
title: `Float Assistant`,
desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a sapien magna
at vitae congue tempus`
}
}
//STATISTICS
let stats = {
fastAccess:{
count: `28`,
title: `Faster Access`
},
appPro:{
count: `47`,
title: `App Productivity`
},
secureAccess:{
count: `54`,
title: `Secure Access`
},
batSaving:{
count: `36`,
title: `Battery Saving`
},
}
//AI SECTION
let artIntel = {
artificialEngine: {
leadTitle: `RECOMMENDATION ENGINE`,
title: `Float uses artificial intelligence (AI) to compare local transport options and prices for your journey.`,
desc: `Become a travel expert. Float aggregates transport options and gives you the control to select the safest, cheapest, quickest or greenest route to improve your daily commute.`
},
optimization: {
leadTitle: `Totally Optimized`,
title: `Intuitive features, powerful results`,
desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien`,
desc2: `Quaerat sodales sapien euismod purus blandit`,
desc3: `Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris`,
btn: `Read The FAQs`
}
}
//ACCESSIBILITY SECTION
let accessibilitySec = {
title: `Accessible for All Platforms`,
desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor`,
youtubeLink: `See Float in Action`,
leadTitle: `Available on Android, iOS and macOS`,
}
//BULIT FOR SPEED
let floatForSpeed = {
leadTitle: `Built For Speed`,
title: `Easy Navigation`,
desc: `Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
posuere orci auctor purus euismod an aliquam quaerat purus`
}
//DOWNLOAD SECTION TWO
let downloadPlatform = {
leadTitle: `Available for iOS 8 and Android Devices From 5.5`
}
//SUBSCRIBE SECTION
let subscribeSec = {
leadTitle: `Subscribe to Our Newsletter`,
title: `Stay up to date with our news, ideas and updates`,
btn: 'Subscribe Now'
}
// LIGHT & POWERFUL
let floatMight = {
title: `Lightning Fast. Super Powerful`,
desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque dolor primis libero tempus, blandit
posuere and ligula varius magna porta`,
}
+482
View File
@@ -0,0 +1,482 @@
import React, {Component} from 'react';
class GetStarted extends React.Component {
render() {
return(
<div>
{/* PRELOADER SPINNER
============================================= */}
<div id="loader-wrapper">
<div id="loading">
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
</div>
</div>
{/* PAGE CONTENT
============================================= */}
<div id="page" className="page">
<section id="features-3" className="pt-100 features-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Ready to Try Float?</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
</div>
</div>
</div>
{/* FEATURES-3 WRAPPER */}
<div className="fbox-3-wrapper">
<div className="row">
{/* FEATURE BOX #1 */}
<div id="fb-3-1" className="col-md-6 col-lg-3">
<div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.4s">
{/* Icon */}
<div className="fbox-3-ico grey-color ico-65"><span className="flaticon-streaming" /></div>
{/* Title */}
<h5 className="h5-sm">Users</h5>
{/* Text */}
<p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
</div>
</div>
{/* FEATURE BOX #2 */}
<div id="fb-3-2" className="col-md-6 col-lg-3">
<div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.6s">
{/* Icon */}
<div className="fbox-3-ico grey-color ico-65"><span className="flaticon-user-1" /></div>
{/* Title */}
<h5 className="h5-sm">Fleet Managers</h5>
{/* Text */}
<p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
</div>
</div>
{/* FEATURE BOX #3 */}
<div id="fb-3-3" className="col-md-6 col-lg-3">
<div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="0.8s">
{/* Icon */}
<div className="fbox-3-ico grey-color ico-65"><span className="flaticon-echo-dot" /></div>
{/* Title */}
<h5 className="h5-sm">Ev Charge Finder</h5>
{/* Text */}
<p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
</div>
</div>
{/* FEATURE BOX #4 */}
<div id="fb-3-4" className="col-md-6 col-lg-3">
<div className="fbox-3 bg_white wow fadeInUp" data-wow-delay="1s">
{/* Icon */}
<div className="fbox-3-ico grey-color ico-65"><span className="flaticon-notes" /></div>
{/* Title */}
<h5 className="h5-sm">Find Options</h5>
{/* Text */}
<p className="p-md">Porta semper lacus and cursus risus undo feugiat at primis ultrice sodales tempus egestas sapien</p>
</div>
</div>
</div> {/* End row */}
</div> {/* END FEATURES-3 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-3 */}
{/* CONTENT-2
============================================= */}
<section id="content-2" className="wide-50 content-section division">
<div className="container">
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6">
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/home-custom-deals.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Perfect Integration</span>
{/* Title */}
<h2 className="h2-md">Makes your address book lite and user friendly</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien
</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END CONTENT-2 */}
{/* CONTENT-3
============================================= */}
<section id="content-3" className="pb-60 mt-inverse-40 content-section division">
<div className="container">
{/* CONTENT BOX-1 */}
<div id="cb-1-1" className="cbox-1 pb-25">
<div className="row d-flex align-items-center m-row">
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Handling with Ease</span>
{/* Title */}
<h2 className="h2-md">Sync all contacts with social profiles</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus and egestas sapien egestas vitae nemo volute
</p>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
</p>
</li>
</ul>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-top">
<div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img_05.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* END CONTENT BOX-1 */}
{/* CONTENT BOX-2 */}
<div id="cb-1-2" className="cbox-1">
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6">
<div className="img-block left-column pc-25 mb-40 wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-float.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Register in 30 Seconds</span>
{/* Title */}
<h2 className="h2-md">Lightning fast and super powerful</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien
</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
</div> {/* END CONTENT BOX-2 */}
</div> {/* End container */}
</section> {/* END CONTENT-3 */}
<section id="content-1" className="wide-60 content-section division">
<div className="container">
<div className="row d-flex align-items-center m-row">
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Beauty of Simplicity</span>
{/* Title */}
<h2 className="h2-md">Beautiful, award-winning design</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
</p>
</li>
</ul>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-top">
<div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/how-it-works-recomment-engine.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END CONTENT-1 */}
{/* FAQs-2
============================================= */}
<section id="faqs-2" className="pb-100 faqs-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Got Questions? Look Here.</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
</div>
</div>
</div>
{/* FAQs-2 QUESTIONS */}
<div className="faqs-2-questions pc-15">
<div className="row">
{/* QUESTIONS HOLDER */}
<div className="col-lg-6">
<div className="questions-holder pc-10">
{/* QUESTION #1 */}
<div className="question wow fadeInUp" data-wow-delay="0.4s">
{/* Question */}
<h5 className="h5-sm">Can I see Float in action before purchasing it?</h5>
{/* Answer */}
<p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit
ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
</p>
</div>
{/* QUESTION #2 */}
<div className="question wow fadeInUp" data-wow-delay="0.6s">
{/* Question */}
<h5 className="h5-sm">What are the requirements for using Float?</h5>
{/* Answer */}
<p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna
vitae auctor integer congue undo magna at pretium purus pretium ligula
</p>
</div>
{/* QUESTION #3 */}
<div className="question wow fadeInUp" data-wow-delay="0.8s">
{/* Question */}
<h5 className="h5-sm">Can I use Float on different devices?</h5>
{/* Answer */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus ligula euismod pretium purus
pretium rutrum tempor sapien
</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus
</p>
</li>
</ul>
</div>
</div>
</div> {/* END QUESTIONS HOLDER */}
{/* QUESTIONS HOLDER */}
<div className="col-lg-6">
<div className="questions-holder pc-10">
{/* QUESTION #4 */}
<div className="question wow fadeInUp" data-wow-delay="0.4s">
{/* Question */}
<h5 className="h5-sm">Do you have a free trial?</h5>
{/* Answer */}
<p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and
quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
</p>
</div>
{/* QUESTION #5 */}
<div className="question wow fadeInUp" data-wow-delay="0.6s">
{/* Question */}
<h5 className="h5-sm">How does Float handle my privacy?</h5>
{/* Answer */}
<p className="p-lg">Etiam amet mauris suscipit sit amet in odio. Integer congue leo metus. Vitae arcu mollis
blandit ultrice ligula
</p>
{/* Answer */}
<p className="p-lg">An enim nullam tempor sapien gravida donec congue leo metus. Vitae arcu mollis blandit
integer at velna
</p>
</div>
{/* QUESTION #6 */}
<div className="question wow fadeInUp" data-wow-delay="0.6s">
{/* Question */}
<h5 className="h5-sm">I have an issue with my account</h5>
{/* Answer */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet
augue luctus
</p>
</li>
</ul>
</div>
</div>
</div> {/* END QUESTIONS HOLDER */}
</div> {/* End row */}
</div> {/* END FAQs-2 QUESTIONS */}
{/* MORE QUESTIONS BUTTON */}
<div className="row">
<div className="col-md-12">
<div className="more-questions text-center mt-40">
<h5 className="h5-sm"><span className="flaticon-check" />
Have more questions? <a href="contacts.html" className="skyblue-color">Ask your question here</a>
</h5>
</div>
</div>
</div>
</div> {/* End container */}
</section> {/* END FAQs-2 */}
{/* MORE APPS-1
============================================= */}
<section id="blog-1" className="wide-60 blog-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Our Tips and Latest News</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
</div>
</div>
</div>
{/* BLOG POSTS */}
<div className="row">
{/* BLOG POST #1 */}
<div id="b-post-1" className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
{/* BLOG POST IMAGE */}
<div className="blog-post-img">
<img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<p className="p-md post-tag">Float News</p>
{/* Post Link */}
<h5 className="h5-sm">
<a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
</h5>
{/* Text */}
<p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
congue
</p>
{/* Post Meta */}
<div className="post-meta">
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
<p>12 min read</p>
</div>
</div>
</div>
</div> {/* END BLOG POST #1 */}
{/* BLOG POST #2 */}
<div id="b-post-2" className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
{/* BLOG POST IMAGE */}
<div className="blog-post-img">
<img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<p className="p-md post-tag">Inspiration</p>
{/* Post Link */}
<h5 className="h5-sm">
<a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
</h5>
{/* Text */}
<p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
congue
</p>
{/* Post Meta */}
<div className="post-meta">
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
<p>8 min read</p>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #2 */}
{/* BLOG POST #3 */}
<div id="b-post-3" className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
{/* BLOG POST IMAGE */}
<div className="blog-post-img">
<img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<p className="p-md post-tag">Tutorials</p>
{/* Post Link */}
<h5 className="h5-sm">
<a href="single-post.html">Tempor sapien Float, donec gravida ipsum a porta justo</a>
</h5>
{/* Text */}
<p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
congue
</p>
{/* Post Meta */}
<div className="post-meta">
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
<p>22 min read</p>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #3 */}
</div> {/* END BLOG POSTS */}
</div> {/* End container */}
</section> {/* END BLOG-1 */}
{/* NEWSLETTER-1
============================================= */}
<section id="newsletter-1" className="pb-20 newsletter-section division">
<div className="container">
<div className="newsletter-wrapper bg_white">
<div className="row d-flex align-items-center">
{/* SECTION TITLE */}
<div className="col-lg-6">
<div className="newsletter-txt">
{/* Section ID */}
<span className="section-id">Subscribe to Our Newsletter</span>
{/* Title */}
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
</div>
</div>
{/* NEWSLETTER FORM */}
<div className="col-lg-6">
<form className="newsletter-form">
<div className="input-group">
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
<span className="input-group-btn">
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
</span>
</div>
{/* Newsletter Form Notification */}
<label htmlFor="s-email" className="form-notification" />
</form>
</div> {/* END NEWSLETTER FORM */}
</div> {/* End row */}
</div> {/* End newsletter-holder */}
</div> {/* End container */}
</section> {/* END NEWSLETTER-1 */}
</div> {/* END PAGE CONTENT */}
</div>
)
}
}
export default GetStarted
+1 -1
View File
@@ -1007,7 +1007,7 @@ class Home extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image"/>
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image"/>
</div>
</div>
</div>
+1 -1
View File
@@ -904,7 +904,7 @@ class Home_10 extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div> {/* END TEXT BLOCK */}
+1 -1
View File
@@ -518,7 +518,7 @@ class Home_2 extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div>
+1 -1
View File
@@ -505,7 +505,7 @@ class Home_4 extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div>
+1 -1
View File
@@ -282,7 +282,7 @@ class Home_7 extends React.Component {
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
<img className="img-fluid" src="assets/images/browser-edit.png" alt="content-image" />
</div>
</div>
</div> {/* END TEXT BLOCK */}
+220 -216
View File
@@ -26,9 +26,10 @@ class Users extends React.Component {
<div className="col-lg-6 col-xl-6 m-bottom">
<div className="hero-8-txt pc-25 wow fadeInRight" data-wow-delay="0.6s">
{/* Text */}
<h4 className="h4-sm">Float®</h4>
<h2 className="h2-sm">Your Activity Feed</h2>
<h5 className="h5-xl">Stay Connected with Your Friends</h5>
<h4 className="h4-sm">{heroSection.leadTitle}®</h4>
<h2 className="h2-sm">{heroSection.title}</h2>
<h5 className="h5-xl">{heroSection.desc}</h5>
<div>
{/* STORE BADGES */}
<div className="stores-badge">
{/* AppStore */}
@@ -39,37 +40,19 @@ class Users extends React.Component {
<a href="#" className="store">
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
</a>
{/* Aamazon Market
<a href="#" class="store">
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
</a> */}
{/* Mac AppStore
<a href="#" class="store">
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
</a> */}
{/* Microsoft Store
<a href="#" class="store">
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
</a> */}
</div> {/* END STORE BADGES */}
{/* Rating */}
<div className="txt-block-rating">
<div className="stars-rating dark-color">
All Versions Rating
<span className="flaticon-star ml-5" />
<span className="flaticon-star" />
<span className="flaticon-star" />
<span className="flaticon-star" />
<span className="flaticon-star-half-empty" />
<p className="txt-rating">Based on 7.296 user reviews</p>
</div>
{/* USER PORTAL */}
<div>
<a className='btn btn-rose tra-grey-hover' href={`${process.env.REACT_APP_USERS}/`} target='_blank' >{heroSection.mainSiteLink}</a>
</div>
</div>
</div>
</div> {/* END HERO TEXT */}
{/* HERO IMAGE */}
<div className="col-lg-6 col-xl-6 11offset-xl-1 m-top">
<div className="hero-8-img pr-20 text-center wow fadeInDown" data-wow-delay="0.4s">
<img className="img-fluid" src="assets/images/hero-8-img.png" alt="hero-image" />
<img className="img-fluid" src="assets/images/hero-8-img.png" alt="hero-image" />
</div>
</div>
</div> {/* End row */}
@@ -90,11 +73,9 @@ class Users extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Multiple Accounts</h5>
<h5 className="h5-sm">{features.accounts.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{features.accounts.desc}</p>
</div>
</div>
</div>
@@ -106,11 +87,9 @@ class Users extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Text, Voice &amp; Video Calls</h5>
<h5 className="h5-sm">{features.float.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{features.float.desc}</p>
</div>
</div>
</div>
@@ -122,11 +101,9 @@ class Users extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Share Files &amp; Media</h5>
<h5 className="h5-sm">{features.files.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{features.files.desc}</p>
</div>
</div>
</div>
@@ -138,11 +115,9 @@ class Users extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Alerts &amp; Notifications</h5>
<h5 className="h5-sm">{features.notification.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{features.notification.desc}</p>
</div>
</div>
</div>
@@ -154,11 +129,9 @@ class Users extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Online Verification</h5>
<h5 className="h5-sm">{features.verification.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{features.verification.desc}</p>
</div>
</div>
</div>
@@ -170,95 +143,16 @@ class Users extends React.Component {
{/* Text */}
<div className="fbox-txt">
{/* Title */}
<h5 className="h5-sm">Spam Protection</h5>
<h5 className="h5-sm">{features.spam.title}</h5>
{/* Text */}
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris
</p>
<p className="p-lg">{features.spam.desc}</p>
</div>
</div>
</div>
</div> {/* End row */}
</div> {/* END FEATURES-5 HOLDER */}
</div> {/* End container */}
</section> {/* END FEATURES-5 */}
{/* SECTION DIVIDER
============================================= */}
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
{/* CONTENT-11
============================================= */}
<section id="content-11" className="pt-100 content-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row">
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-60 wow fadeInUp" data-wow-delay="0.6s">
{/* Title */}
<h2 className="h2-md">Chat with Your Friends Easily</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
</div>
</div>
</div>
{/* IMAGE BLOCK */}
<div className="row">
<div className="col-md-12">
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/socials.png" alt="content-image" />
</div>
</div>
</div>
</div> {/* End container */}
</section> {/* END CONTENT-11 */}
{/* STATISTIC-2
============================================= */}
<div id="statistic-2" className="wide-60 statistic-section division">
<div className="container">
{/* STATISTIC-2 WRAPPER */}
<div className="statistic-2-wrapper pc-35 text-center">
<div className="row">
{/* STATISTIC BLOCK #1 */}
<div id="sb-2-1" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.4s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">28</span>%</h2>
{/* Text */}
<h5 className="h5-xs">Faster Access</h5>
</div>
</div>
{/* STATISTIC BLOCK #2 */}
<div id="sb-2-2" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.6s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">47</span>%</h2>
{/* Text */}
<h5 className="h5-xs">App Productivity</h5>
</div>
</div>
{/* STATISTIC BLOCK #3 */}
<div id="sb-2-3" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.8s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">54</span>%</h2>
{/* Text */}
<h5 className="h5-xs">Secure Access</h5>
</div>
</div>
{/* STATISTIC BLOCK #4 */}
<div id="sb-2-4" className="col-sm-6 col-lg-3">
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="1s">
{/* Digit */}
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">36</span>%</h2>
{/* Text */}
<h5 className="h5-xs">Battery Saving</h5>
</div>
</div>
</div> {/* End row */}
</div> {/* END STATISTIC-2 WRAPPER */}
</div> {/* End container */}
</div> {/* END STATISTIC-2 */}
</section> {/* END FEATURES-5 */}
{/* CONTENT-12
============================================= */}
<section id="content-12" className="mb-60 content-section division">
@@ -269,21 +163,17 @@ class Users extends React.Component {
<div className="col-lg-5">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Title */}
<h2 className="h2-xs">Work smarter with powerful automation</h2>
<h2 className="h2-xs">{automate.title}</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus at blandit and purus ipsum primis and cubilia laoreet
augue a luctus magna dolor luctus mauris pretium a sapien egestas luctus
</p>
<p className="p-lg">{automate.desc}</p>
{/* Text */}
<p className="p-lg">Fringilla risus, luctus mauris auctor a purus euismod orci pretium purus pretium undo ligula
rutrum tempor magna dolor
</p>
<p className="p-lg">{automate.descTwo}</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-lg-7">
<div className="content-12-img right-column wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-12.png" alt="content-image" />
<img className="img-fluid" src="assets/images/info-pair.png" alt="content-image" />
</div>
</div>
</div>
@@ -296,29 +186,29 @@ class Users extends React.Component {
<div className="container">
{/* CONTENT BOX-1 */}
<div id="cb-1-1" className="cbox-1 pb-25">
<div className="row d-flex align-items-center">
<div className="row align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6">
<div className="col-md-6 col-lg-6">
<div className="img-block left-column pc-25 mb-40 wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-07.png" alt="content-image" />
<img className="img-fluid" src="assets/images/route-mockup2.png" alt="content-image" />
</div>
</div>
{/* <div className="col-lg-7">
<div className="content-12-img right-column wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/info-pair.png" alt="content-image" />
</div>
</div> */}
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6">
<div className="col-md-6 col-lg-6">
<div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Unlimited Access</span>
<span className="section-id grey-color">{accessUnlimited.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Spend your time with loved ones</h2>
<h2 className="h2-md">{accessUnlimited.title}</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien
</p>
<p className="p-lg">{accessUnlimited.desc}</p>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus and egestas sapien egestas vitae nemo volute
</p>
<p className="p-lg">{accessUnlimited.descTwo}</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* End row */}
@@ -330,20 +220,17 @@ class Users extends React.Component {
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id">Fastest Messaging</span>
<span className="section-id">{fastMes.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Unlimited calling, texting and picture messaging</h2>
<h2 className="h2-md">{fastMes.title}</h2>
{/* Text */}
<p className="p-lg">Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor
congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium
enim gravida purus ligula
</p>
<p className="p-lg">{fastMes.desc}</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-top">
<div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-05.png" alt="content-image" />
<img className="img-fluid" src="assets/images/info-pair2.jpeg" alt="content-image" />
</div>
</div>
</div> {/* End row */}
@@ -364,11 +251,9 @@ class Users extends React.Component {
<div className="col-lg-10 offset-lg-1">
<div className="section-title text-center mb-70">
{/* Title */}
<h2 className="h2-md">Get Ready to Be Surprised</h2>
<h2 className="h2-md">{moreFeatures.title}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor
</p>
<p className="p-xl">{moreFeatures.desc}</p>
</div>
</div>
</div>
@@ -383,11 +268,9 @@ class Users extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Dark &amp; Light Modes</h5>
<h5 className="h5-sm">{moreFeatures.mode.title}</h5>
{/* Text */}
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue tempus
</p>
<p className="p-md grey-color">{moreFeatures.mode.desc}</p>
</div>
</div>
{/* ICON */}
@@ -407,11 +290,9 @@ class Users extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Auto-Link Opening</h5>
<h5 className="h5-sm">{moreFeatures.autoLink.title}</h5>
{/* Text */}
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue gravida
</p>
<p className="p-md grey-color">{moreFeatures.autoLink.desc}</p>
</div>
</div>
{/* ICON */}
@@ -431,11 +312,9 @@ class Users extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Voice Assistant</h5>
<h5 className="h5-sm">{moreFeatures.float.title}</h5>
{/* Text */}
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue gravida
</p>
<p className="p-md grey-color">{moreFeatures.float.desc}</p>
</div>
</div>
{/* ICON */}
@@ -455,11 +334,9 @@ class Users extends React.Component {
<div className="col-lg-8 m-bottom">
<div className="fbox-4-txt">
{/* Title */}
<h5 className="h5-sm">Task Scheduling</h5>
<h5 className="h5-sm">{moreFeatures.schedule.title}</h5>
{/* Text */}
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue gravida
</p>
<p className="p-md grey-color">{moreFeatures.schedule.desc}</p>
</div>
</div>
{/* ICON */}
@@ -484,13 +361,11 @@ class Users extends React.Component {
<div className="col-lg-6">
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id">Voice &amp; Video Calls</span>
<span className="section-id">{floatForSpeed.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Keep Your Favorite People Close to You</h2>
<h2 className="h2-md">{floatForSpeed.title}</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
posuere orci auctor purus euismod an aliquam quaerat purus
</p>
<p className="p-xl">{floatForSpeed.desc}</p>
{/* STORE BADGES */}
<div className="stores-badge">
{/* AppStore */}
@@ -527,30 +402,26 @@ class Users extends React.Component {
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6">
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-02.png" alt="content-image" />
<img className="img-fluid" src="assets/images/how-it-works-recomment-engine.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-7 col-lg-6">
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Beauty of Simplicity</span>
<span className="section-id grey-color">{floatMap.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Beautiful, award-winning design</h2>
<h2 className="h2-md">{floatMap.title}</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
</p>
<p className="p-lg">{floatMap.desc}</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
<p className="p-lg">{floatMap.descTwo}</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
</p>
<p className="p-lg">{floatMap.descThree}</p>
</li>
</ul>
</div>
@@ -567,33 +438,29 @@ class Users extends React.Component {
<div className="col-md-6 col-xl-6">
<div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id">Totally Optimized</span>
<span className="section-id">{optimization.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Intuitive features, powerful results</h2>
<h2 className="h2-md">{optimization.title}</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien
</p>
<p className="p-lg">{optimization.desc}</p>
</li>
<li className="list-item">
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
<p className="p-lg">{optimization.descTwo}</p>
</li>
<li className="list-item">
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris
</p>
<p className="p-lg">{optimization.descThree}</p>
</li>
</ul>
{/* Button */}
<a href="#content-1" className="btn btn-tra-grey rose-hover">Find Out More</a>
<a href="#content-1" className="btn btn-tra-grey rose-hover">{optimization.btn}</a>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 col-xl-6">
<div className="content-13-img wow fadeInRight" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/tablet.png" alt="content-image" />
<img className="img-fluid" src="assets/images/tablet-2.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
@@ -729,7 +596,7 @@ class Users extends React.Component {
</a> */}
</div> {/* END STORE BADGES */}
{/* OS Prerequisite */}
<span className="os-version">Available for iOS 8 and Android Devices From 5.5</span>
<span className="os-version">{downloadPlatform.leadTitle}</span>
</div>
</div>
</div> {/* END DOWNLOAD BUTTON */}
@@ -744,20 +611,17 @@ class Users extends React.Component {
<div className="col-md-7 col-lg-6 m-bottom">
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
{/* Section ID */}
<span className="section-id grey-color">Register in 30 Seconds</span>
<span className="section-id grey-color">{floatMight.leadTitle}</span>
{/* Title */}
<h2 className="h2-md">Lightning fast and super powerful</h2>
<h2 className="h2-md">{floatMight.title}</h2>
{/* Text */}
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien
</p>
<p className="p-lg">{floatMight.desc}</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-5 col-lg-6 m-top">
<div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
<img className="img-fluid" src="assets/images/img-01.png" alt="content-image" />
<img className="img-fluid" src="assets/images/img-float.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
@@ -771,7 +635,7 @@ class Users extends React.Component {
<div className="row">
<div className="col-lg-8 offset-lg-2">
<div className="brands-title text-center">
<h4 className="h4-sm">You might know us from:</h4>
<h4 className="h4-sm">{partners.title}</h4>
</div>
</div>
</div>
@@ -960,9 +824,9 @@ class Users extends React.Component {
<div className="col-lg-6">
<div className="newsletter-txt">
{/* Section ID */}
<span className="section-id">Subscribe to Our Newsletter</span>
<span className="section-id">{subscribeSec.leadTitle}</span>
{/* Title */}
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
<h4 className="h4-xl">{subscribeSec.title}</h4>
</div>
</div>
{/* NEWSLETTER FORM */}
@@ -971,7 +835,7 @@ class Users extends React.Component {
<div className="input-group">
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
<span className="input-group-btn">
<button type="submit" className="btn btn-md btn-rose tra-rose-hover">Subscribe Now</button>
<button type="submit" className="btn btn-md btn-rose tra-rose-hover">{subscribeSec.btn}</button>
</span>
</div>
{/* Newsletter Form Notification */}
@@ -991,4 +855,144 @@ class Users extends React.Component {
)
}
}
export default Users
export default Users
// PAGE TEXT/CONTENT VARIABLES
//HERO SECTION
let heroSection = {
leadTitle: `Float`,
title: `Your Activity Feed`,
desc: `Stay Connected with Your Friends`,
mainSiteLink: 'This leads to users PORTAL',
};
//SECTION TWO
let features = {
accounts: {
title: `Multiple Accounts`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris`
},
float: {title: `Analytics`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris`
},
files: {title: `Connectivity`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris`
},
notification: {title: `Monitoring`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris`
},
verification: {title: `Online Verification`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris`
},
spam: {title: `Big Perks`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
at impedit felis undo auctor augue mauris`
}
};
// FLOAT AUTOMATION SECTION
let automate = {
title: `Work smarter with powerful automation`,
desc: `Quaerat sodales sapien euismod purus at blandit and purus ipsum primis and cubilia laoreet
augue a luctus magna dolor luctus mauris pretium a sapien egestas luctus`,
descTwo: `Fringilla risus, luctus mauris auctor a purus euismod orci pretium purus pretium undo ligula
rutrum tempor magna dolor`
}
// UNLIMITED ACCESS SECTION
let accessUnlimited = {
leadTitle: `Unlimited Access`,
title: `Spend your time with loved ones`,
desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien`,
descTwo: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus and egestas sapien egestas vitae nemo volute`
}
// FAST MESSAGING SECTION
let fastMes = {
leadTitle: `Fastest Messaging`,
title: `Unlimited calling, texting and picture messaging`,
desc: `Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor
congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium
enim gravida purus ligula`,
}
// GET READY TO BE SURPRISED SECTION
let moreFeatures = {
title: `Get Ready to Be Surprised`,
desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
tempus, blandit and cursus varius magna tempus a dolor`,
mode: {
title: `Charging`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue tempus`
},
autoLink: {title: `Auto-Link Opening`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue gravida`
},
float: {title: `Float Assistant`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue gravida`
},
schedule: {title: `Task Scheduling`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
sapien magna at vitae congue gravida`
}
};
//BULIT FOR SPEED SECTION
let floatForSpeed = {
leadTitle: `Built For Speed`,
title: `Keep Your Favorite People Close to You`,
desc: `Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
posuere orci auctor purus euismod an aliquam quaerat purus`,
}
// DESIGN SECTION
let floatMap = {
leadTitle: `Beauty of Simplicity`,
title: `Beautiful, award-winning design`,
desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien`,
descTwo: `Quaerat sodales sapien euismod purus blandit`,
descThree: `Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris`,
}
// OPTIMIZATION SECTION
let optimization = {
leadTitle: `Totally Optimized`,
title: `Intuitive features, powerful results`,
desc: `Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
ligula rutrum tempor sapien`,
descTwo: `Quaerat sodales sapien euismod purus blandit`,
descThree: `Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
pretium a purus mauris`,
btn: `Find Out More`
}
//DOWNLOAD SECTION TWO
let downloadPlatform = {
leadTitle: `Available for iOS 8 and Android Devices From 5.5`
}
// LIGHT & POWERFUL
let floatMight = {
leadTitle: `Register in 30 Seconds`,
title: `Lightning Fast. Super Powerful`,
desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
sodales a sapien`,
}
// PARTNERS SECTION
let partners = {
title: `You might know us from:`
}
//SUBSCRIBE SECTION
let subscribeSec = {
leadTitle: `Subscribe to Our Newsletter`,
title: `Stay up to date with our news, ideas and updates`,
btn: 'Subscribe Now'
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB