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