Chukwumdiebube
1226 lines
62 KiB
JavaScript
1226 lines
62 KiB
JavaScript
import React, {Component} from 'react';
|
|
|
|
class Fleet extends React.Component {
|
|
render() {
|
|
return(
|
|
<div><div id="loader-wrapper"><div ido="loading">
|
|
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
|
</div>
|
|
</div>
|
|
{/* PAGE CONTENT*/}
|
|
<div id="page" className="page">
|
|
{/* 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">{heroSection.tag}</span>
|
|
<h2>{heroSection.header}</h2>
|
|
<p>{heroSection.desc}
|
|
</p>
|
|
</div>
|
|
{/* HERO IMAGE */}
|
|
<div className="hero-img"><img className="img-fluid" src="assets/images-demo/hero-img2.png" alt="hero-image" /></div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END HERO */}
|
|
{/* 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/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">{aboutSection.tag}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{aboutSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{aboutSection.desc1}
|
|
</p>
|
|
{/* Text */}
|
|
<p className="p-lg">{aboutSection.desc2}</p>
|
|
{/* Button */}
|
|
<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 */}
|
|
<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">
|
|
{/* TEXT BLOCK */}
|
|
<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">{statsSection.tag}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{statsSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{statsSection.desc1}</p>
|
|
{/* Text */}
|
|
<p className="p-lg">{statsSection.desc2}</p>
|
|
</div>
|
|
</div> {/* END TEXT BLOCK */}
|
|
{/* FEATURES-13 WRAPPER */}
|
|
<div className="col-lg-7">
|
|
<div className="fbox-13-wrapper pl-35">
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
{/* FEATURE BOX #1 */}
|
|
<div id="fb-13-1" className="fbox-13 mt-50 mb-30 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* Icon */}
|
|
<div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-clock" /></div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{statsSection.metrics.title}</h5>
|
|
{/* Text */}
|
|
<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">{statsSection.guide.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{statsSection.guide.content}</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
{/* FEATURE BOX #3 */}
|
|
<div id="fb-13-3" className="fbox-13 mb-30 wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* Icon */}
|
|
<div className="fbox-13-ico ico-75 skyblue-color"><span className="flaticon-salad" /></div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{statsSection.access.title}</h5>
|
|
{/* Text */}
|
|
<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">{statsSection.motivated.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{statsSection.motivated.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* END FEATURES-13 WRAPPER */}
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END FEATURES-13 */}
|
|
{/* CONTENT-3 */}
|
|
<section id="content-3" className="wide-60 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">
|
|
{/* 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/analytics.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">{floatIntegrationSection.tag}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{floatIntegrationSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{floatIntegrationSection.desc1}</p>
|
|
{/* Text */}
|
|
<p className="p-lg">{floatIntegrationSection.desc2}</p>
|
|
</div>
|
|
</div> {/* END TEXT BLOCK */}
|
|
</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 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">
|
|
{/* CONTENT BOX #1 */}
|
|
<div className="cbox mb-30">
|
|
{/* Icon */}
|
|
<div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-video-player-2" /></div>
|
|
{/* Text */}
|
|
<div className="cbox-txt">
|
|
<h5 className="h5-sm">{specialFeaturesSection.firstFeature.title}</h5>
|
|
<p className="p-lg">{specialFeaturesSection.firstFeature.content}</p>
|
|
</div>
|
|
</div>
|
|
{/* CONTENT BOX #2 */}
|
|
<div className="cbox mb-30">
|
|
{/* Icon */}
|
|
<div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-percentage" /></div>
|
|
{/* Text */}
|
|
<div className="cbox-txt">
|
|
<h5 className="h5-sm">{specialFeaturesSection.secondFeature.title}</h5>
|
|
<p className="p-lg">{specialFeaturesSection.secondFeature.content}</p>
|
|
</div>
|
|
</div>
|
|
{/* CONTENT BOX #3 */}
|
|
<div className="cbox">
|
|
{/* Icon */}
|
|
<div className="cbox-ico ico-65 skyblue-color"><span className="flaticon-smartphone-9" /></div>
|
|
{/* Text */}
|
|
<div className="cbox-txt">
|
|
<h5 className="h5-sm">{specialFeaturesSection.thirdFeature.title}</h5>
|
|
<p className="p-lg">{specialFeaturesSection.thirdFeature.content}</p>
|
|
</div>
|
|
</div>
|
|
</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-2 */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-3 */}
|
|
{/* 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">{brandSectionTitle}</p>
|
|
{/* Brands Carousel */}
|
|
<div className="owl-carousel brands-carousel">
|
|
{/* 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>
|
|
</div> {/* End Brands Carousel */}
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</div> {/* END BRANDS-1 */}
|
|
{/* FEATURES-5 */}
|
|
<section id="features-5" className="wide-50 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">{featuresSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-xl">{featuresSection.subHeader}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURES-5 WRAPPER */}
|
|
<div className="fbox-5-wrapper pc-30">
|
|
<div className="row">
|
|
{/* FEATURE BOX #1 */}
|
|
<div id="fb-5-1" className="col-md-6">
|
|
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* Icon */}
|
|
<div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-ads" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{featuresSection.userFriendlyItem.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{featuresSection.userFriendlyItem.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURE BOX #2 */}
|
|
<div id="fb-5-2" className="col-md-6">
|
|
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
|
{/* Icon */}
|
|
<div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-switch" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{featuresSection.fullyFunctionalItem.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{featuresSection.fullyFunctionalItem.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURE BOX #3 */}
|
|
<div id="fb-5-3" className="col-md-6">
|
|
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* Icon */}
|
|
<div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-call" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{featuresSection.quickAccessItem.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{featuresSection.quickAccessItem.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURE BOX #4 */}
|
|
<div id="fb-5-4" className="col-md-6">
|
|
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1s">
|
|
{/* Icon */}
|
|
<div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-analytics-3" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{featuresSection.trackAndAnalyzeItem.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{featuresSection.trackAndAnalyzeItem.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURE BOX #5 */}
|
|
<div id="fb-5-5" className="col-md-6">
|
|
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.2s">
|
|
{/* Icon */}
|
|
<div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-weight" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{featuresSection.easy2Follow.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{featuresSection.easy2Follow.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURE BOX #6 */}
|
|
<div id="fb-5-6" className="col-md-6">
|
|
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.4s">
|
|
{/* Icon */}
|
|
<div className="fbox-ico ico-70 skyblue-color"><span className="flaticon-conversation" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{featuresSection.ongoingSupport.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{featuresSection.ongoingSupport.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* END FEATURES-5 HOLDER */}
|
|
</div> {/* End container */}
|
|
</section> {/* END FEATURES-5 */}
|
|
{/* 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">{stepsSection.header}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<ul className="process-skyblue processbar pc-35">
|
|
{/* PROCESS BOX #1 */}
|
|
<li id="step-2-1" className="col-md-4">
|
|
<div className="pbox-2 pc-20 text-center">
|
|
<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">{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">{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 */}
|
|
<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">{trackingFleet.tag}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{trackingFleet.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{trackingFleet.desc} </p>
|
|
{/* Button */}
|
|
<a href="#faqs-2" className="btn btn-tra-grey skyblue-hover">{trackingFleet.cta}</a>
|
|
</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/plan.png" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-1 */}
|
|
|
|
{/* TESTIMONIALS-2 */}
|
|
<section id="reviews-2" className="reviews-section division">
|
|
<div className="container">
|
|
<div className="row">
|
|
{/* TESTIMONIALS TITLE */}
|
|
<div className="col-lg-4">
|
|
<div className="reviews-2-title pc-10">
|
|
{/* Section ID */}
|
|
<span className="section-id grey-color">{testimonialSection.tag}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md mb-20">{testimonialSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{testimonialSection.text} </p>
|
|
</div>
|
|
</div>
|
|
{/* TESTIMONIALS CAROUSEL */}
|
|
<div className="col-lg-8">
|
|
<div className="owl-carousel owl-theme reviews-2-wrapper">
|
|
{/* TESTIMONIAL #1 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Great Flexibility!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">Etiam sapien sem at sagittis congue an augue massa varius egestas undo
|
|
suscipit magna tempus undo aliquet
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- Scott Boxer</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #1 */}
|
|
{/* TESTIMONIAL #2 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star-half-empty" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Simple and Useful!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">At sagittis congue augue undo egestas magna ipsum vitae purus and ipsum
|
|
primis suscipit
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- Wendy T.</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #2 */}
|
|
{/* TESTIMONIAL #3 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">I love this App!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">Mauris donec ociis magnis and sapien etiam sapien congue undo augue pretium
|
|
and ligula augue a lectus aenean magna
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- pebz13</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #3 */}
|
|
{/* TESTIMONIAL #4 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star-1" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Best App for iOS!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">An augue in cubilia laoreet magna and suscipit egestas magna ipsum purus ipsum
|
|
and suscipit
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- Scott Boxer</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #4 */}
|
|
{/* TESTIMONIAL #5 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star-half-empty" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Awesome Design!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">Mauris donec magnis sapien undo etiam sapien and congue augue egestas ultrice
|
|
a vitae purus velna integer tempor
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- John Sweet</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #5 */}
|
|
{/* TESTIMONIAL #6 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Simply Amazing App!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">An augue cubilia laoreet undo magna a suscipit undo egestas magna ipsum ligula
|
|
vitae purus ipsum primis cubilia blandit
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- Leslie D.</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #6 */}
|
|
{/* TESTIMONIAL #7 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star-half-empty" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Powerful Features!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">Augue egestas volutpat and egestas augue in cubilia laoreet magna undo
|
|
suscipit luctus
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- Marisol19</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #7 */}
|
|
{/* TESTIMONIAL #8 */}
|
|
<div className="review-2 radius-08">
|
|
{/* App Rating */}
|
|
<div className="app-rating ico-20 yellow-color">
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star" />
|
|
<span className="flaticon-star-half-empty" />
|
|
</div>
|
|
{/* Title */}
|
|
<h5 className="h5-sm">Super Support!</h5>
|
|
{/* Testimonial Text */}
|
|
<div className="review-2-txt">
|
|
{/* Text */}
|
|
<p className="p-lg grey-color">Aliquam augue suscipit luctus neque purus ipsum neque dolor primis libero tempus
|
|
at blandit posuere varius magna
|
|
</p>
|
|
{/* Testimonial Author */}
|
|
<h5 className="h5-xs">- AJ</h5>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #8 */}
|
|
</div>
|
|
</div> {/* END TESTIMONIALS CAROUSEL */}
|
|
</div>
|
|
</div> {/* End container */}
|
|
</section> {/* END TESTIMONIALS-2 */}
|
|
{/* PRICING-2 */}
|
|
<section id="pricing-2" className="wide-100 pricing-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">Simple and Flexible Pricing</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>
|
|
{/* PRICING TABLES */}
|
|
<div className="row pricing-row">
|
|
{/* FREE PLAN */}
|
|
<div className="col-md-4">
|
|
<div className="pricing-table mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* Plan Price */}
|
|
<div className="pricing-plan bg_white">
|
|
<h5 className="h5-xs">Float Free</h5>
|
|
<sup className="dark-color">$</sup>
|
|
<span className="dark-color">0</span>
|
|
<sup className="validity dark-color"><span>.00</span> / month</sup>
|
|
<p className="p-sm">The price per one user. Change or cancel your plan anytime</p>
|
|
{/* Pricing Table Button */}
|
|
<a href="#" className="btn btn-tra-grey skyblue-hover">Download Now</a>
|
|
</div>
|
|
</div>
|
|
</div> {/* END FREE PLAN */}
|
|
{/* MONTHLY PLAN */}
|
|
<div className="col-md-4">
|
|
<div className="pricing-table mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
|
{/* Plan Price */}
|
|
<div className="pricing-plan bg_white">
|
|
<h5 className="h5-xs">Monthly Billing</h5>
|
|
<sup className="dark-color">$</sup>
|
|
<span className="dark-color">6</span>
|
|
<sup className="validity dark-color"><span>.25</span> / month</sup>
|
|
<p className="p-sm">The price per one user. Change or cancel your plan anytime</p>
|
|
{/* Pricing Table Button */}
|
|
<a href="#" className="btn btn-tra-grey skyblue-hover">Select Plan</a>
|
|
</div>
|
|
</div>
|
|
</div> {/* END MONTHLY PLAN */}
|
|
{/* ANNUAL PLAN */}
|
|
<div className="col-md-4">
|
|
<div className="pricing-table rel mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* Hightlight Badge */}
|
|
<div className="badge-wrapper">
|
|
<div className="highlight-badge bg_skyblue white-color">
|
|
<h6 className="h6-sm">Save up to 25%</h6>
|
|
</div>
|
|
</div>
|
|
{/* Plan Price */}
|
|
<div className="pricing-plan highlight bg_whitesmoke">
|
|
<h5 className="h5-xs">Annual Billing</h5>
|
|
<sup className="dark-color">$</sup>
|
|
<span className="dark-color">5</span>
|
|
<sup className="validity dark-color"><span>.69</span> / month</sup>
|
|
<p className="p-sm">The price per one user. Change or cancel your plan anytime</p>
|
|
{/* Pricing Table Button */}
|
|
<a href="#" className="btn btn-tra-grey skyblue-hover">Select Plan</a>
|
|
</div>
|
|
</div>
|
|
</div> {/* END ANNUAL PLAN */}
|
|
</div> {/* END PRICING TABLES */}
|
|
{/* DOWNLOAD BUTTON */}
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="pricing-2-download-btn mt-20 text-center wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* Button */}
|
|
<a href="pricing.html" className="btn btn-md btn-tra-grey skyblue-hover mb-10">Start Free 14-day Trial</a>
|
|
{/* OS Prerequisite */}
|
|
<span className="os-version">Request OS X 10.10 or later</span>
|
|
</div>
|
|
</div>
|
|
</div> {/* END DOWNLOAD BUTTON */}
|
|
</div> {/* End container */}
|
|
</section> {/* END PRICING-2 */}
|
|
{/* 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">
|
|
{/* TEXT BLOCK */}
|
|
<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">{optimizedSection.tag}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{optimizedSection.header}</h2>
|
|
{/* List */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p className="p-lg">{optimizedSection.list1}</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p className="p-lg">{optimizedSection.list2}</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p className="p-lg">{optimizedSection.list3}</p>
|
|
</li>
|
|
</ul>
|
|
</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/dashboard-performance.jpg" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-13 */}
|
|
{/* CONTENT-14 */}
|
|
<section id="content-14" className="whitesmoke_shape 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-40">
|
|
{/* Title */}
|
|
<h2 className="h2-md">{accessibiltySection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-xl">{accessibiltySection.text}</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/browser-edit.png" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* END TEXT BLOCK */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-14 */}
|
|
{/* FAQs-2 */}
|
|
<section id="faqs-2" className="wide-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">{faqSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-xl">{faqSection.text}</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.8s">
|
|
{/* 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" />
|
|
{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 */}
|
|
<section id="newsletter-1" className="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">{subscribeSection.tag}</span>
|
|
{/* Title */}
|
|
<h4 className="h4-xl">{subscribeSection.header}</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">{subscribeSection.cta}</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 */}
|
|
{/* BLOG-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">{blogSection.header}</h2>
|
|
{/* Text */}
|
|
<p className="p-xl">{blogSection.text}</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-8-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 300 Calories 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>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-9-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-10-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 950 Calories an ipsum porta</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 */}
|
|
{/* 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" />
|
|
</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">{downloadSection.header}</h2>
|
|
{/* Text */}
|
|
<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>
|
|
)
|
|
}
|
|
}
|
|
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'
|
|
} |