@extends('layouts.sales')
@section('content')
 <!-- =========== Start of Hero ============ -->
        <section class="space-top--md space-bottom pb-lg-0 hero hero--reverse hero--dark bg-color-primary">
            <!-- <div class="background-holder opacity-05 z-index-1">
                <img src="files/img/hero-8.png" alt="hero-image" class="background-image-holder">
            </div> -->
            <!-- end background image -->
            <div class="overlap overlap--lg overlap--white z-index-1 d-none d-xl-block"></div>
            <!-- end of overlap -->
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="d-lg-flex align-items-lg-center position-relative">
                            <picture class="hero__image d-flex justify-content-center mt-50 d-lg-inline-block">
                                <img src="{{asset('files/img/mobile-2.png')}}" alt="hero-image">
                            </picture>
                            <div class="hero-content">
                                <h1 class="hero__title">Say hello to your pocket teleprompter.</h1>
                                <p class="lead hero__description">What if you needed a video where you present your content without a glitch?
                                All you need is your smartphone. Yes. You don't have to spend a fortune on expensive studio equipment.</p>
                                <div class="d-flex align-items-center mb-40 justify-content-center justify-content-lg-start">
                                    <span class="rating__star mr-10">
                                        <i class="icon icon-favourite-31 active"></i>
                                        <i class="icon icon-favourite-31 active"></i>
                                        <i class="icon icon-favourite-31 active"></i>
                                        <i class="icon icon-favourite-31 active"></i>
                                        <i class="icon icon-favourite-31"></i>
                                    </span>
                                    <span>5,356 Reviews</span>
                                </div>
                                <div class="button-group flex-column flex-sm-row align-items-center">
                                    <a href="#" class="mr-sm-3 mb-10 mb-sm-0 box-shadow-2 rounded-md btn-3d-hover transition-default"><img src="{{asset('files/img/app-store.png')}}" class="rounded-md" alt="app-store"></a>

                                    <a href="#" class="box-shadow-2 rounded-md btn-3d-hover transition-default"><img src="{{asset('files/img/google-play.png')}}" class="rounded-md" alt="google-play"></a>
                                </div>
                            </div>
                            <!-- end of content -->
                        </div>
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of container -->
        </section>
        <!-- =========== End of Hero ============ -->
        

        <!-- =========== Start of Features ============ -->
        <section class="space-top" id="features">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-10 col-lg-7 col-xl-6 mx-auto">
                        <div class="section-title reveal text-center mb-80">
                            <p class="mb-10 text-uppercase font-w-700">Why choose Extempore?</p>
                            <h3>A simple way to create great video content.</h3>
                        </div>
                        <!-- end of section title -->
                    </div>
                </div>
                <!-- end of row -->
                <div class="row border-bottom-light space-bottom reveal">
                    <div class="col-12 col-md-6 col-lg-4 mb-30 mb-lg-0">
                        <div class="features">
                            <div class="d-flex mb-20">
                                <span class="mr-20">
                                    <img src="{{asset('files/img/family.png')}}" alt="family">
                                </span>
                                <h5>One Platform</h5>
                            </div>
                            <p><span class="color-primary">No more Mulitple Platforms.</span> Now it had see nunable uneasy. Drawings can followed by improved out sociable not. Earnestly so do instantly pretended.
                            </p>
                        </div>
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-md-6 col-lg-4 mb-30 mb-lg-0">
                        <div class="features">
                            <div class="d-flex mb-20">
                                <span class="mr-20">
                                    <img src="{{asset('files/img/b-meeting.png')}}" alt="communication">
                                </span>
                                <h5>Communication</h5>
                            </div>
                            <p><span class="color-primary">No more Mulitple Platforms.</span> Now it had see nunable uneasy. Drawings can followed by improved out sociable not. Earnestly so do instantly pretended.
                            </p>
                        </div>
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-md-6 col-lg-4 mb-30 mb-lg-0">
                        <div class="features">
                            <div class="d-flex mb-20">
                                <span class="mr-20">
                                    <img src="{{asset('files/img/filter-organization.png')}}" alt="management">
                                </span>
                                <h5>Project Management</h5>
                            </div>
                            <p><span class="color-primary">No more Mulitple Platforms.</span> Now it had see nunable uneasy. Drawings can followed by improved out sociable not. Earnestly so do instantly pretended.
                            </p>
                        </div>
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of container -->
        </section>
        <!-- =========== End of Features ============ -->

        <!-- =========== Start of About ============ -->
        <section class="space">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-10 col-lg-5 mb-50 mb-lg-0">
                        <p class="mb-10 text-uppercase font-w-700">Manage your team</p>
                        <h3 class="mb-20">Extempore helps you record your videos from anywhere!</h3>
                        <p class="mb-40">Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider debating. Spirits musical behaved on we he farther letters.</p>
                        <a href="#" class="btn btn--transparent p-0 btn--arrow-after btn--color-dark btn-border-hover">
                            <span class="btn__text mr-30">Find out more</span>
                        </a>
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-md-9 col-lg-6 ml-lg-auto reveal">
                        <div class="position-relative">
                            <picture><img class="rounded-default" src="{{asset('files/img/about-1.png')}}" alt=""></picture>
                            <!-- <a class="lightbox pos-center media-player-icon media-player-icon--md media-player-icon--fill-primary btn-splash-hover" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293"><i class="icon icon-triangle-right-17"></i>
                            </a> -->
                        </div>
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of container -->
        </section>
        <!-- =========== End of About ============ -->

        <!-- =========== Start of Features Tab Slider ============ -->
        <section class="bg-color-primary features-custom-container">
            <div class="overlap overlap--lg overlap--gray z-index1 d-none d-xl-block"></div>
            <div class="content-wrapper">
                <div class="container">
                    <div class="row align-items-center align-items-xl-start">
                        <div class="col-12 col-md-6 col-xl-6 mb-md-40 mb-xl-0 mt-xl-5">
                            <p class="lead mb-10 font-w-700 text-uppercase">Everything on mobile</p>
                            <h3 class="mb-20">Use your android or ios device to manage everything.</h3>
                            <p class="mb-30 mb-lg-0">Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider.</p>
                        </div>
                        <!-- end of col -->
                        <div class="col-12 col-md-5 offset-md-1 offset-xl-0 col-xl-6 z-index2 reveal">
                            <picture class="device-image"><img src="{{asset('files/img/mobile-1.png')}}" alt="mobile"></picture>
                        </div>
                        <!-- end of col -->
                    </div>
                    <!-- end of row -->
                </div>
                <!-- end of container -->
            </div>
            <!-- end of container -->
            <div class="features features--slider-2 pt-100 mt-xl-5">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="slider slider-tabs mb-20">
                                <div class="slide"><button class="slider-tab">Write</button></div>
                                <div class="slide"><button class="slider-tab">Record</button></div>
                                <div class="slide"><button class="slider-tab">Edit</button></div>
                                <div class="slide"><button class="slider-tab">Publish</button></div>
                                <div class="slide"><button class="slider-tab">Write</button></div>
                                <div class="slide"><button class="slider-tab">Record</button></div>
                            </div>
                            <!-- end of slider tab -->
                            <div class="slider slider-contents">
                                <div class="slide">
                                    <p>Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider. Now it had seen unable uneasy. Drawings can followed by improved
                                        out sociable not.</p>
                                </div>
                                <!-- end of single item -->
                                <div class="slide">
                                    <p>Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider. Now it had seen unable uneasy. Drawings can followed by improved
                                        out sociable not.</p>
                                </div>
                                <!-- end of single item -->

                                <div class="slide">
                                    <p>Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider. Now it had seen unable uneasy. Drawings can followed by improved
                                        out sociable not.</p>
                                </div>
                                <!-- end of single item -->

                                <div class="slide">
                                    <p>Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider. Now it had seen unable uneasy. Drawings can followed by improved
                                        out sociable not.</p>
                                </div>
                                <div class="slide">
                                    <p>Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider. Now it had seen unable uneasy. Drawings can followed by improved
                                        out sociable not.</p>
                                </div>
                                <!-- end of single item -->

                                <div class="slide">
                                    <p>Silent sir say desire fat him letter. Whatever settling goodness too and honoured she building answered her. Strongly thoughts remember mr to do consider. Now it had seen unable uneasy. Drawings can followed by improved
                                        out sociable not.</p>
                                </div>
                                <!-- end of single item -->
                            </div>
                            <!-- end of slider content -->
                        </div>
                        <!-- end of col -->
                    </div>
                    <!-- end of row -->
                </div>
                <!-- end of container -->
            </div>
            <!-- end of features -->
        </section>
        <!-- =========== End of Features Tab Slider ============ -->

        <!-- =========== Start of CTA ============ -->
        <section class="space-top--md bg-color-grey">
            <div class="overlap overlap--white z-index1"></div>
            <div class="background-holder background-holder--auto background-holder--bottom">
                <img src="{{asset('files/img/bg-diagonal-lines.png')}}" alt="pattern" class="background-image-holder">
            </div>
            <div class="container ">
                <div class="row">
                    <div class="col-12 col-lg-6 mx-auto">
                        <div class="section-title reveal text-center mb-80">
                            <p class="mb-10 text-uppercase font-w-700">xPider makes your life easy</p>
                            <h3>Make your life easy, get a better way to communicate.</h3>
                        </div>
                        <!-- end of section title -->
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
                <div class="row justify-content-center">
                    <div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index2 reveal">
                        <div class="card text-center mb-30 mb-md-0">
                            <div class="header pl-40 pr-40 py-5 border-bottom-light">
                                <span class="mb-30 icon-rounded position-relative">
                                    <i class="icon icon-p-heart"></i>
                                </span>
                                <h5 class="mb-10">One Platform, <br> <span class="color-primary">Solves Everything</span></h5>
                                <p class="mb-40">Now it had seen unable uneasy. Drawings can followed by improved out sociable not.</p>
                                <a href="#" class="btn btn--transparent btn--arrow-after btn--color-dark btn-border-hover">
                                    <span class="btn__text mr-30">Get xPider Now</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end of row -->
                    <div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index2 reveal">
                        <div class="card text-center mb-30 mb-md-0">
                            <div class="header pl-40 pr-40 py-5 border-bottom-light">
                                <span class="mb-30 icon-rounded position-relative">
                                    <i class="icon icon-grid-45"></i>
                                </span>
                                <h5 class="mb-10">Fastest Management, <br> <span class="color-primary">Easy to Organize</span></h5>
                                <p class="mb-40">Now it had seen unable uneasy. Drawings can followed by improved out sociable not.</p>
                                <a href="#" class="btn btn--transparent btn--arrow-after btn--color-dark btn-border-hover">
                                    <span class="btn__text mr-30">Find out more</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end of row -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of col -->
        </section>
        <!-- =========== End of CTA ============ -->

        <!-- =========== Start of Features-2 ============ -->
        <section class="space">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-10 col-lg-7 col-xl-6 mx-auto">
                        <div class="section-title reveal text-center mb-80">
                            <p class="mb-10 text-uppercase font-w-700">More than a software</p>
                            <h3>The proper guide that helps you to unlock the real potential.</h3>
                        </div>
                        <!-- end of section title -->
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
                <div class="row d-lg-flex flex-column-reverse flex-lg-row align-items-center ">
                    <div class="col-12 col-md-8 col-lg-6 col-xl-4 offset-xl-1 reveal">
                        <div class="features mb-30 mb-lg-40 reveal">
                            <div class="d-flex align-items-center mb-10">
                                <span class="mr-20">
                                    <i class="icon icon-book-open-2 color-primary h3-font"></i>
                                </span>
                                <h5>Installation Guide</h5>
                            </div>
                            <p>No more Mulitple Platforms. Now it had seen unable uneasy. Drawings can followed by improved out sociable not. Earnestly so do instantly pretended.
                            </p>
                        </div>
                        <!-- end of single item -->
                        <div class="features mb-30 mb-lg-40 reveal">
                            <div class="d-flex align-items-center mb-10">
                                <span class="mr-20">
                                    <i class="icon icon-phone-2 color-primary h3-font"></i>
                                </span>
                                <h5>Live call support</h5>
                            </div>
                            <p>No more Mulitple Platforms. Now it had seen unable uneasy. Drawings can followed by improved out sociable not. Earnestly so do instantly pretended.
                            </p>
                        </div>
                        <!-- end of single item -->
                        <div class="features mb-30 mb-lg-40 reveal">
                            <div class="d-flex align-items-center mb-10">
                                <span class="mr-20">
                                    <i class="icon icon-preferences-circle color-primary h3-font"></i>
                                </span>
                                <h5>Easy setup process</h5>
                            </div>
                            <p>No more Mulitple Platforms. Now it had seen unable uneasy. Drawings can followed by improved out sociable not. Earnestly so do instantly pretended.
                            </p>
                        </div>
                        <!-- end of single item -->
                    </div>
                    <!-- enf of col -->
                    <div class="col-12 col-lg-6 col-xl-6 mb-50 mb-lg-0 text-center reveal">
                        <picture><img class="rounded-default" src="{{asset('files/img/team-image.png')}}" alt="team-image"></picture>
                    </div>
                    <!-- end of image -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of container -->
        </section>
        <!-- =========== End of Features-2 ============ -->

        <!-- =========== Start of Content Block ============ -->
        <section class="space-bottom switchable d-md-flex align-items-md-center">
            <div class="col-md-6 pl-md-0 mb-40 mb-md-0 text-center text-md-left">
                <picture class="switchable__image">
                    <img src="{{asset('files/img/admin-dashboard-2.png')}}" alt="dashboard-image">
                </picture>
            </div>
            <!-- end of image -->

            <div class="switchable__text">
                <div class="container">
                    <div class="row">
                        <div class="col-12 text-center text-md-left ml-md-auto reveal">
                            <h3 class="mb-4">Super clean user <br>interface for easier use. </h3>
                            <p class="mb-5">Sitting proudly atop M3565 is the two-storey penthouse. The master bedroom suite
                                is phenomenally spacious and opens out to a breathtaking plunge pool and bar area that makes
                                the most of its unrivalled position.</p>
                            <a href="#" class="btn btn--bg-primary btn-3d-hover btn-splash-hover">View Demo</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end of content -->
        </section>
        <!-- =========== End of Content Block ============ -->

        <!-- =========== Start of Pricing ============ -->
        <section class="space bg-color-grey" id="pricing">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-6 mx-auto">
                        <div class="section-title reveal text-center mb-80">
                            <p class="mb-10 text-uppercase font-w-700">Simple, Straight Pricing</p>
                            <h3 class="font-w-400">Select a price that suits <br>  you better to start.</h3>
                        </div>
                        <!-- end of section title -->
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
                <div class="row mb-100">
                    <div class="col-12 text-center">
                        <div class="pricing-tab btn-group outline-light rounded-default">
                            <button type="button" class="btn btn--bg-primary btn-no-focused data-type-monthly"> <span class="btn__text">Monthly</span></button>

                            <button type="button" class="btn btn-no-focused ml-0 data-type-yearly"><span class="btn__text">Yearly</span>
                                <span class="badge bg-color-coral badge-pill pos-abs-top-right py-2 px-3">15% OFF</span>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- end of tab row -->
                <div class="row justify-content-center reveal">
                    <div class="col-12 col-sm-6 mx-sm-auto col-xl-3 mb-40 mb-xl-0">
                        <div class="card text-center rounded-md">
                            <div class="header d-flex flex-column align-items-center pt-30 pb-20 border-bottom-light">
                                <span class="font-size-14 text-uppercase font-w-600 mb-20">Individual</span>
                                <span class="icon-rounded icon-rounded--lg position-relative mb-10"> 
                                    <i class="icon icon-sofa"></i> 
                                </span>
                                <h2 class="h4-font color-light-secondary">Free</h2>
                            </div>
                            <div class="body pb-40 pr-30 pl-30">
                                <ul class="mt-30 mb-30">
                                    <li class="mb-3 color-light-secondary-2">1000 Messages per month</li>
                                    <li class="mb-3 color-light-secondary-2">10 GB file storage</li>
                                    <li class="mb-3 color-light-secondary-2">50 Projects per month</li>
                                    <li class="mb-3 color-light-secondary-2">Premium support</li>
                                </ul>
                                <a href="#" class="btn btn--sm w-100 btn-3d-hover btn-splash-hover btn--bg-grey btn--color-primary">
                                    <span class="btn__text">Choose Plan</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-sm-6 mx-sm-auto col-xl-3 mb-40 mb-xl-0">
                        <div class="card text-center rounded-md card--focused">
                            <div class="header d-flex flex-column align-items-center pt-30 pb-20 border-bottom-light">
                                <span class="font-size-14 text-uppercase font-w-600 mb-20">Small Business</span>
                                <span class="icon-rounded icon-rounded--lg position-relative mb-10"> 
                                    <i class="icon icon-home-3"></i> 
                                </span>
                                <h2 class="card__value h4-font">$99</h2>
                                <h2 class="card__value h4-font card__value--focused">$199</h2>
                            </div>
                            <div class="body pb-40 pr-30 pl-30">
                                <ul class="mt-30 mb-30">
                                    <li class="mb-3 color-light-secondary-2">Everything in Free +</li>
                                    <li class="mb-3 color-light-secondary-2">500 GB file storage</li>
                                    <li class="mb-3 color-light-secondary-2">200 Projects per month</li>
                                    <li class="mb-3 color-light-secondary-2">Premium support</li>
                                </ul>
                                <a href="#" class="btn btn--sm w-100 btn-3d-hover btn-splash-hover btn--bg-white">
                                    <span class="btn__text">Get started</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-sm-6 mx-sm-auto col-xl-3 mb-40 mb-xl-0">
                        <div class="card text-center rounded-md">
                            <div class="header d-flex flex-column align-items-center pt-30 pb-20 border-bottom-light">
                                <span class="font-size-14 text-uppercase font-w-600 mb-20">MEDIUM COMPANY</span>
                                <span class="icon-rounded icon-rounded--lg position-relative mb-10"> 
                                    <i class="icon icon-building"></i> 
                                </span>
                                <h2 class="card__value h4-font color-light-secondary">$149</h2>
                                <h2 class="card__value h4-font color-light-secondary card__value--focused">$299</h2>

                            </div>
                            <div class="body pb-40 pr-30 pl-30">
                                <ul class="mt-30 mb-30">
                                    <li class="mb-3 color-light-secondary-2">Everything in Small +</li>
                                    <li class="mb-3 color-light-secondary-2">Unlimited file storage</li>
                                    <li class="mb-3 color-light-secondary-2">50 Projects per month</li>
                                    <li class="mb-3 color-light-secondary-2">Premium support</li>
                                </ul>
                                <a href="#" class="btn btn--sm w-100 btn-3d-hover btn-splash-hover btn--bg-grey btn--color-primary">
                                    <span class="btn__text">Get started</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-sm-6 mx-sm-auto col-xl-3 mb-40 mb-xl-0">
                        <div class="card text-center rounded-md">
                            <div class="header d-flex flex-column align-items-center pt-30 pb-20 border-bottom-light">
                                <span class="font-size-14 text-uppercase font-w-600 mb-20">Enterprise</span>
                                <span class="icon-rounded icon-rounded--lg position-relative mb-10"> 
                                    <i class="icon icon-hotel"></i> 
                                </span>
                                <h2 class="card__value h4-font color-light-secondary">$199</h2>
                                <h2 class="card__value h4-font color-light-secondary card__value--focused">$259</h2>
                            </div>
                            <div class="body pb-40 pr-30 pl-30">
                                <ul class="mt-30 mb-30">
                                    <li class="mb-3 color-light-secondary-2">Unlimited Messages</li>
                                    <li class="mb-3 color-light-secondary-2">Unlimited file storage</li>
                                    <li class="mb-3 color-light-secondary-2">50 Projects per month</li>
                                    <li class="mb-3 color-light-secondary-2">Premium support</li>
                                </ul>
                                <a href="#" class="btn btn--sm w-100 btn-3d-hover btn-splash-hover btn--bg-grey btn--color-primary">
                                    <span class="btn__text">Get started</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of pricing row -->
            </div>
        </section>
        <!-- =========== End of Pricing ============ -->

        <!-- =========== Start of Testimonial ============ -->
        <section class="space bg-color-darkgrey testimonial-carousel" id="reviews">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-6 mx-auto">
                        <div class="section-title reveal text-center mb-80">
                            <p class="mb-10 text-uppercase font-w-700">5,000+ Teams trust xPider</p>
                            <h3>People love xPider. <br> See some of the stories.</h3>
                        </div>
                        <!-- end of section title -->
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
                <div class="row justify-content-center">
                    <div class="col-12 col-lg-6 col-xl-5 mt-lg-5 mr-xl-1 mb-50 mb-lg-0 reveal">
                        <div class="testimonial-content text-center text-lg-left">
                            <div class="slide">
                                <blockquote class="blockquote mb-40">
                                    <h5 class="font-w-300">“Life before xPider was very chaotic — we got a lot of phone calls, a lot of mistyped orders. So with Company, the ability to see the order directly from the customer makes it so streamlined.”</h5>
                                </blockquote>
                                <span class="font-size-21 font-w-700 text-uppercase mb-1 color-white">Frank Hardy</span>
                                <p class="mb-20">Creative Director</p>
                                <span><img src="{{asset('files/img/atlassian.png')}}" alt="atlassian"></span>
                            </div>
                            <!-- end of singl slide -->
                            <div class="slide">
                                <blockquote class="blockquote mb-40">
                                <h5 class="font-w-300">“Life before xPider was very chaotic — we got a lot of phone calls, a lot of mistyped orders. So with Company, the ability to see the order directly from the customer makes it so streamlined.” </h5>
                                </blockquote>
                                <span class="font-size-21 font-w-700 text-uppercase mb-1 color-white">Frank Hardy</span>
                                <p class="mb-20">Creative Director</p>
                                <span><img src="{{asset('files/img/atlassian.png')}}" alt="atlassian"></span>
                            </div>
                            <!-- end of singl slide -->
                            <div class="slide">
                                <blockquote class="blockquote mb-40">
                                <h5 class="font-w-300">“Life before xPider was very chaotic — we got a lot of phone calls, a lot of mistyped orders. So with Company, the ability to see the order directly from the customer makes it so streamlined.” </h5>
                                </blockquote>
                                <span class="font-size-21 font-w-700 text-uppercase mb-1 color-white">Frank Hardy</span>
                                <p class="mb-20">Creative Director</p>
                                <span><img src="{{asset('files/img/atlassian.png')}}" alt="atlassian"></span>
                            </div>
                            <!-- end of singl slide -->
                        </div>
                        <!-- end of content row -->
                    </div>
                    <!-- end of col -->
                    <div class="col-12 col-lg-6 col-xl-5 reveal">
                        <div class="testimonial-image text-center text-lg-left">
                            <div class="slide">
                                <picture><img class="rounded-default" src="{{asset('files/img/img-client-1.png')}}" alt="client"></picture>
                            </div>
                            <!-- end of singl slide -->
                            <div class="slide">
                                <picture><img class="rounded-default" src="{{asset('files/img/img-client-2.png')}}" alt="client"></picture>
                            </div>
                            <!-- end of singl slide -->
                            <div class="slide">
                                <picture><img class="rounded-default" src="{{asset('files/img/img-client-3.png')}}" alt="client"></picture>
                            </div>
                            <!-- end of singl slide -->
                        </div>
                        <!-- end of image row -->
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of container -->
        </section>
        <!-- =========== End of Pricing ============ -->

        <!-- =========== Start of Newsletter ============ -->
        <section class="bg-color-primary space">
            <div class="background-holder background-holder--contain">
                <img src="{{asset('files/img/cta-bg.png')}}" alt="pattern" class="background-image-holder">
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-6 text-center mx-auto reveal">
                        <h3 class="mb-20">Try xPider for 14 days, for free!</h3>
                        <p class="lead mb-50">Millions of people around the world have already made xPider the place where their dream happens.</p>
                        <div class="position-relative text-center">
                            <form action="#" class="form form-subscription">
                                <div class="input-group mb-3 mb-sm-0">
                                    <input type="email" class="form-control" placeholder="Enter your email to start" required>
                                </div>
                                <button class="btn btn--submit btn--color-primary btn--bg-white" type="submit">
                                    <span class="btn__text">Get started</span>
                                </button>
                            </form>
                            <span class="type--fine-print">No credit card required.</span>
                        </div>
                    </div>
                    <!-- end of col -->
                </div>
                <!-- end of row -->
            </div>
            <!-- end of container -->
        </section>
        <!-- =========== End of Newsletter ============ -->

        <!-- =========== Start of CTA ============ -->
        <section class="space border-bottom-light hidden">
            <div class="container">
                <div class="row align-items-center flex-column-reverse flex-md-row justify-content-center">
                    <div class="col-12 col-md-5">
                        <div class="section-title reveal text-center text-md-left mb-80 mb-sm-50 reveal">
                            <h3 class="mb-3">Try xPider for free!</h3>
                            <p class="lead">Big, small, online, offline, local or international. Size doesn't matter. We work on diverse projects for top brands as well as for cool startups. Check out some of our favorites.</p>
                            <div class="button-group flex-column flex-sm-row align-items-center justify-content-center justify-content-md-start mt-50">
                                <a href="#" class="mr-sm-3 mb-10 mb-sm-0 box-shadow-2 rounded-md btn-3d-hover transition-default">
                                    <img src="files/img/app-store-md.png" class="rounded-md" alt="app-store">
                                </a>
                                <a href="#" class="box-shadow-2 rounded-md btn-3d-hover transition-default">
                                    <img src="files/img/google-play-md.png" class="rounded-md" alt="google-play">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 ml-md-auto text-center text-md-right reveal">
                        <div class="position-relative d-flex align-items-center justify-content-center z-index1">
                            <div class="oval pos-center z-index-1"></div>
                            <picture>
                                <img src="files/img/mobile-3.png" alt="mobile">
                            </picture>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- =========== End of CTA ============ -->
@endsection