victorAnumudu
993 lines
48 KiB
JavaScript
993 lines
48 KiB
JavaScript
import React, {Component} from 'react';
|
|
|
|
class Users 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">
|
|
|
|
{/* HERO-8
|
|
============================================= */}
|
|
<section id="hero-8" className="bg_fixed hero-section division">
|
|
<div className="container">
|
|
<div className="row d-flex align-items-center m-row">
|
|
{/* HERO TEXT */}
|
|
<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">{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 */}
|
|
<a href="#" className="store">
|
|
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
|
</a>
|
|
{/* Google Play */}
|
|
<a href="#" className="store">
|
|
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
|
</a>
|
|
</div> {/* END STORE BADGES */}
|
|
|
|
{/* 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" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END HERO-8 */}
|
|
{/* FEATURES-5
|
|
============================================= */}
|
|
<section id="features-5" className="wide-50 features-section division">
|
|
<div className="container">
|
|
{/* 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 grey-color"><span className="flaticon-user-1" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{features.accounts.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{features.accounts.desc}</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 grey-color"><span className="flaticon-smartphone-1" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{features.float.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{features.float.desc}</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 grey-color"><span className="flaticon-image" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{features.files.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{features.files.desc}</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 grey-color"><span className="flaticon-chat-4" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{features.notification.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{features.notification.desc}</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 grey-color"><span className="flaticon-fingerprint" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{features.verification.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-lg">{features.verification.desc}</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 grey-color"><span className="flaticon-spam" /></div>
|
|
{/* Text */}
|
|
<div className="fbox-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{features.spam.title}</h5>
|
|
{/* Text */}
|
|
<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 */}
|
|
{/* CONTENT-12
|
|
============================================= */}
|
|
<section id="content-12" className="mb-60 content-section division">
|
|
<div className="container">
|
|
<div className="lavender_gradient content-12-wrapper">
|
|
<div className="row d-flex align-items-center">
|
|
{/* TEXT BLOCK */}
|
|
<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">{automate.title}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{automate.desc}</p>
|
|
{/* Text */}
|
|
<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/info-pair.png" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-12 */}
|
|
{/* 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/route-mockup.jpeg" 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">{accessUnlimited.leadTitle}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{accessUnlimited.title}</h2>
|
|
{/* Text */}
|
|
<p className="p-lg">{accessUnlimited.desc}</p>
|
|
{/* Text */}
|
|
<p className="p-lg">{accessUnlimited.descTwo}</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 rel">
|
|
<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">{fastMes.leadTitle}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{fastMes.title}</h2>
|
|
{/* Text */}
|
|
<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/info-pair2.jpeg" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
{/* Transparent Background Elements */}
|
|
<div className="tra-bkg-wrapper">
|
|
<div className="bg_el_01 wow fadeInRight" data-wow-delay="1s" />
|
|
<div className="bg_el_05 wow fadeInRight" data-wow-delay="1s" />
|
|
</div>
|
|
</div> {/* END CONTENT BOX-2 */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-3 */}
|
|
{/* FEATURES-4
|
|
============================================= */}
|
|
<section id="features-4" className="pb-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">{moreFeatures.title}</h2>
|
|
{/* Text */}
|
|
<p className="p-xl">{moreFeatures.desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURES-4 WRAPPER */}
|
|
<div className="fbox-4-wrapper">
|
|
<div className="row">
|
|
{/* FEATURE BOX #1 */}
|
|
<div id="fb-4-1" className="col-md-6">
|
|
<div className="fbox-4 bg_whitesmoke mb-30 wow fadeInUp" data-wow-delay="0.4s">
|
|
<div className="row d-flex align-items-center m-row">
|
|
{/* TEXT */}
|
|
<div className="col-lg-8 m-bottom">
|
|
<div className="fbox-4-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{moreFeatures.mode.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-md grey-color">{moreFeatures.mode.desc}</p>
|
|
</div>
|
|
</div>
|
|
{/* ICON */}
|
|
<div className="col-lg-4 m-top">
|
|
<div className="fbox-4-ico ico-100 grey-color text-center">
|
|
<span className="flaticon-paint-brush" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End fbox-4 */}
|
|
</div> {/* END FEATURE BOX #1 */}
|
|
{/* FEATURE BOX #2 */}
|
|
<div id="fb-4-2" className="col-md-6">
|
|
<div className="fbox-4 bg_whitesmoke mb-30 wow fadeInUp" data-wow-delay="0.6s">
|
|
<div className="row d-flex align-items-center m-row">
|
|
{/* TEXT */}
|
|
<div className="col-lg-8 m-bottom">
|
|
<div className="fbox-4-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{moreFeatures.autoLink.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-md grey-color">{moreFeatures.autoLink.desc}</p>
|
|
</div>
|
|
</div>
|
|
{/* ICON */}
|
|
<div className="col-lg-4 m-top">
|
|
<div className="fbox-4-ico ico-100 grey-color text-center">
|
|
<span className="flaticon-smartphone-8" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End fbox-4 */}
|
|
</div> {/* END FEATURE BOX #2 */}
|
|
{/* FEATURE BOX #3 */}
|
|
<div id="fb-4-3" className="col-md-6">
|
|
<div className="fbox-4 bg_whitesmoke wow fadeInUp" data-wow-delay="0.8s">
|
|
<div className="row d-flex align-items-center m-row">
|
|
{/* TEXT */}
|
|
<div className="col-lg-8 m-bottom">
|
|
<div className="fbox-4-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{moreFeatures.float.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-md grey-color">{moreFeatures.float.desc}</p>
|
|
</div>
|
|
</div>
|
|
{/* ICON */}
|
|
<div className="col-lg-4 m-top">
|
|
<div className="fbox-4-ico ico-100 grey-color text-center">
|
|
<span className="flaticon-voice-message-1" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End fbox-4 */}
|
|
</div> {/* END FEATURE BOX #3 */}
|
|
{/* FEATURE BOX #4 */}
|
|
<div id="fb-4-4" className="col-md-6">
|
|
<div className="fbox-4 bg_whitesmoke wow fadeInUp" data-wow-delay="1s">
|
|
<div className="row d-flex align-items-center m-row">
|
|
{/* TEXT */}
|
|
<div className="col-lg-8 m-bottom">
|
|
<div className="fbox-4-txt">
|
|
{/* Title */}
|
|
<h5 className="h5-sm">{moreFeatures.schedule.title}</h5>
|
|
{/* Text */}
|
|
<p className="p-md grey-color">{moreFeatures.schedule.desc}</p>
|
|
</div>
|
|
</div>
|
|
{/* ICON */}
|
|
<div className="col-lg-4 m-top">
|
|
<div className="fbox-4-ico ico-100 grey-color text-center">
|
|
<span className="flaticon-tasks" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End fbox-4 */}
|
|
</div> {/* END FEATURE BOX #4 */}
|
|
</div> {/* End row */}
|
|
</div> {/* END FEATURES-4 WRAPPER */}
|
|
</div> {/* End container */}
|
|
</section> {/* END FEATURES-4 */}
|
|
{/* DOWNLOAD-6
|
|
============================================= */}
|
|
<section id="download-6" className="bg_chat wide-100 download-section division">
|
|
<div className="container white-color">
|
|
<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">{floatForSpeed.leadTitle}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{floatForSpeed.title}</h2>
|
|
{/* Text */}
|
|
<p className="p-xl">{floatForSpeed.desc}</p>
|
|
{/* STORE BADGES */}
|
|
<div className="stores-badge">
|
|
{/* AppStore */}
|
|
<a href="#" className="store">
|
|
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
|
</a>
|
|
{/* Google Play */}
|
|
<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> {/* END DOWNLOAD TXT */}
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END DOWNLOAD-6 */}
|
|
{/* 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/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">{floatMap.leadTitle}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{floatMap.title}</h2>
|
|
{/* List */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p className="p-lg">{floatMap.desc}</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p className="p-lg">{floatMap.descTwo}</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p className="p-lg">{floatMap.descThree}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> {/* END TEXT BLOCK */}
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-2 */}
|
|
{/* CONTENT-13
|
|
============================================= */}
|
|
<section id="content-13" className="pb-60 content-section division">
|
|
<div className="container">
|
|
<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">{optimization.leadTitle}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{optimization.title}</h2>
|
|
{/* List */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p className="p-lg">{optimization.desc}</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p className="p-lg">{optimization.descTwo}</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p className="p-lg">{optimization.descThree}</p>
|
|
</li>
|
|
</ul>
|
|
{/* Button */}
|
|
<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-2.png" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-13 */}
|
|
{/* TESTIMONIALS-4
|
|
============================================= */}
|
|
<section id="reviews-4" className="bg_aliceblue wide-60 reviews-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">Our Happy Customers</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>
|
|
{/* TESTIMONIALS-4 WRAPPER */}
|
|
<div className="reviews-4-wrapper">
|
|
<div className="row">
|
|
{/* TESTIMONIALS LEFT COLUMN */}
|
|
<div className="col-lg-6">
|
|
<div className="reviews-4-column">
|
|
{/* TESTIMONIAL #1 */}
|
|
<div className="review-4 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* Testimonial Text */}
|
|
<div className="review-4-txt">
|
|
<p>Etiam sapien sem at sagittis congue an augue massa varius an egestas suscipit magna a tempus aliquet
|
|
blandit <span className="txt-highlight">tempor sapien gravida donec</span> ipsum porta
|
|
</p>
|
|
</div>
|
|
{/* Testimonial Data */}
|
|
<div className="review-4-data">
|
|
{/* 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>
|
|
{/* Author */}
|
|
<h5 className="h5-sm">John Sweet</h5>
|
|
<p>Mac Store Review, USA</p>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #1 */}
|
|
{/* TESTIMONIAL #2 */}
|
|
<div className="review-4 wow fadeInUp" data-wow-delay="1s">
|
|
{/* Testimonial Text */}
|
|
<div className="review-4-txt">
|
|
<p>An augue cubilia laoreet undo magna a suscipit egestas magna ipsum at ligula vitae
|
|
<span className="txt-highlight">purus ipsum primis</span> cubilia
|
|
</p>
|
|
</div>
|
|
{/* Testimonial Data */}
|
|
<div className="review-4-data">
|
|
{/* 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>
|
|
{/* Author */}
|
|
<h5 className="h5-sm">Mark Hodges</h5>
|
|
<p>Marketing Manager, Company</p>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #2 */}
|
|
</div>
|
|
</div> {/* END TESTIMONIALS LEFT COLUMN */}
|
|
{/* TESTIMONIALS RIGHT COLUMN */}
|
|
<div className="col-lg-6">
|
|
<div className="reviews-4-column">
|
|
{/* TESTIMONIAL #3 */}
|
|
<div className="review-4 mt-25 wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* Testimonial Text */}
|
|
<div className="review-4-txt">
|
|
<p>Mauris donec ociis magnis undo sapien etiam sapien congue augue pretium and ligula augue lectus
|
|
aenean ociis magna donec and magnis sapien sagittis ipsum <span className="txt-highlight">sapien congue tempor gravida </span> a donec ipsum porta justo integer a velna mollis laoreet vitae mauris undo
|
|
tortor tempor sapien gravida donec ipsum porta
|
|
</p>
|
|
</div>
|
|
{/* Testimonial Data */}
|
|
<div className="review-4-data">
|
|
{/* 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>
|
|
{/* Author */}
|
|
<h5 className="h5-sm">Dominic Johnson</h5>
|
|
<p>Chief Strategist, Company</p>
|
|
</div>
|
|
</div> {/* END TESTIMONIAL #3 */}
|
|
</div>
|
|
</div> {/* END TESTIMONIALS RIGHT COLUMN */}
|
|
</div> {/* End row */}
|
|
</div> {/* END TESTIMONIALS-4 WRAPPER */}
|
|
{/* DOWNLOAD BUTTON */}
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="reviews-download-btn wow fadeInUp" data-wow-delay="1s">
|
|
{/* STORE BADGES */}
|
|
<div className="stores-badge mb-5">
|
|
{/* AppStore */}
|
|
<a href="#" className="store">
|
|
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
|
</a>
|
|
{/* Google Play */}
|
|
<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 */}
|
|
{/* OS Prerequisite */}
|
|
<span className="os-version">{downloadPlatform.leadTitle}</span>
|
|
</div>
|
|
</div>
|
|
</div> {/* END DOWNLOAD BUTTON */}
|
|
</div> {/* End container */}
|
|
</section> {/* END TESTIMONIALS-4 */}
|
|
{/* 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">{floatMight.leadTitle}</span>
|
|
{/* Title */}
|
|
<h2 className="h2-md">{floatMight.title}</h2>
|
|
{/* Text */}
|
|
<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-float.png" alt="content-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</section> {/* END CONTENT-1 */}
|
|
{/* BRANDS-2
|
|
============================================= */}
|
|
<section id="brands-2" className="pb-70 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-sm">{partners.title}</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>
|
|
{/* 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">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">{subscribeSec.leadTitle}</span>
|
|
{/* Title */}
|
|
<h4 className="h4-xl">{subscribeSec.title}</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-rose tra-rose-hover">{subscribeSec.btn}</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 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: `Float Messaging & Calls`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
|
at impedit felis undo auctor augue mauris`
|
|
},
|
|
files: {title: `Share Files & Media`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
|
at impedit felis undo auctor augue mauris`
|
|
},
|
|
notification: {title: `Alerts & Notifications`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
|
at impedit felis undo auctor augue mauris`
|
|
},
|
|
verification: {title: `Online Verification`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
|
at impedit felis undo auctor augue mauris`
|
|
},
|
|
spam: {title: `Spam Protection`, desc: `Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
|
at impedit felis undo auctor augue mauris`
|
|
}
|
|
};
|
|
|
|
// FLOAT AUTOMATION SECTION
|
|
let automate = {
|
|
title: `Work smarter with powerful automation`,
|
|
desc: `Quaerat sodales sapien euismod purus at blandit and purus ipsum primis and cubilia laoreet
|
|
augue a luctus magna dolor luctus mauris pretium a sapien egestas luctus`,
|
|
descTwo: `Fringilla risus, luctus mauris auctor a purus euismod orci pretium purus pretium undo ligula
|
|
rutrum tempor magna dolor`
|
|
}
|
|
|
|
// UNLIMITED ACCESS SECTION
|
|
let accessUnlimited = {
|
|
leadTitle: `Unlimited Access`,
|
|
title: `Spend your time with loved ones`,
|
|
desc: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
|
|
luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat
|
|
sodales a sapien`,
|
|
descTwo: `Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
|
|
luctus magna dolor luctus and egestas sapien egestas vitae nemo volute`
|
|
}
|
|
|
|
// FAST MESSAGING SECTION
|
|
let fastMes = {
|
|
leadTitle: `Fastest Messaging`,
|
|
title: `Unlimited calling, texting and picture messaging`,
|
|
desc: `Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor
|
|
congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium
|
|
enim gravida purus ligula`,
|
|
}
|
|
|
|
// GET READY TO BE SURPRISED SECTION
|
|
let moreFeatures = {
|
|
title: `Get Ready to Be Surprised`,
|
|
desc: `Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
|
tempus, blandit and cursus varius magna tempus a dolor`,
|
|
mode: {
|
|
title: `Dark & Light Modes`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
|
|
sapien magna at vitae congue tempus`
|
|
},
|
|
autoLink: {title: `Auto-Link Opening`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
|
|
sapien magna at vitae congue gravida`
|
|
},
|
|
float: {title: `Float Assistant`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
|
|
sapien magna at vitae congue gravida`
|
|
},
|
|
schedule: {title: `Task Scheduling`, desc: `Porta semper lacus cursus risus and feugiat primis undo sodales a
|
|
sapien magna at vitae congue gravida`
|
|
}
|
|
};
|
|
|
|
//BULIT FOR SPEED SECTION
|
|
let floatForSpeed = {
|
|
leadTitle: `Built For Speed`,
|
|
title: `Keep Your Favorite People Close to You`,
|
|
desc: `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'
|
|
} |