@extends('dashboard::layouts.tutorial')

@section('content')
    <section class="tutorial-container">
        <div class="slider-tutorial">
            <div class="slide-tutorial slide-tutorial-first">
                <div class="slide-text slide-first-text wow fadeIn" data-wow-duration="1.5s" data-wow-delay="1.5s">
                    <span class="text-slide-type-first">we_use</span><br />
                    <span class="text-slide-type-second">science</span>
                </div>
                <img class="tutorial-first-slide-first-image wow bounceInLeft hidden-xs hidden-sm" data-wow-duration="0.8s" data-wow-delay="0.8s" src="/images/app/tutorial-slider/slide1/line-left.png" alt="">
                <img class="tutorial-first-slide-second-image wow bounceInDown" data-wow-duration="0.5s" data-wow-delay="0.5s" src="/images/app/tutorial-slider/slide1/line-top-bottom.png" alt="">
                <img class="tutorial-first-slide-third-image wow bounceInRight" data-wow-duration="0.1s" data-wow-delay="0s" src="/images/app/tutorial-slider/slide1/bottle.png" alt="">
                <img class="tutorial-first-slide-fourth-image wow bounceInUp hidden-xs hidden-sm" data-wow-duration="1s" data-wow-delay="1s" src="/images/app/tutorial-slider/slide1/line-top-bottom.png" alt="">
                <a href="{{ route('app.login') }}" class="app-button tutorial-button first-slide-tutorial-button">SKIP</a>
            </div>
            <div class="slide-tutorial slide-tutorial-second">
                <div class="slide-text slide-second-text wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.8s">
                    <span class="text-slide-type-first">to_create</span><br />
                    <span class="text-slide-type-second">psychological <br />tools</span>
                </div>
                <img class="tutorial-second-slide-first-image wow bounceInLeft hidden-sm hidden-xs" data-wow-duration="1s" data-wow-delay="0.2" src="/images/app/tutorial-slider/slide2/rocket.png" alt="">
                <img class="tutorial-second-slide-first-response-image wow bounceInUp visible-sm visible-xs" data-wow-duration="1s" data-wow-delay="0.2" src="/images/app/tutorial-slider/slide2/rocket-response.png" alt="">
                <a href="{{ route('app.login') }}" class="app-button tutorial-button">SKIP</a>
            </div>
            <div class="slide-tutorial slide-tutorial-third">
                <div class="slide-text slide-third-text wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.8s">
                    <span class="text-slide-type-first">helping_people<br />
                    _to</span><span class="text-slide-type-second"> hack,<br />
                    upgrade<br />
                    and rewire</span><br />
                    <span class="text-slide-type-first">their_lives</span>
                </div>
                <img class="tutorial-third-slide-first-image wow fadeIn" data-wow-duration="0.3s" data-wow-delay="0.2s" src="/images/app/tutorial-slider/slide3/brain.png" alt="">
                <img class="tutorial-third-slide-second-image wow fadeIn" data-wow-duration="0.4s" data-wow-delay="0.4s" src="/images/app/tutorial-slider/slide3/line.png" alt="">
                <img class="tutorial-third-slide-third-image wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.6s" src="/images/app/tutorial-slider/slide3/plug.png" alt="">
                <a href="{{ route('app.login') }}" class="app-button tutorial-button third-slide-tutorial-button">SKIP</a>
            </div>
            <div class="slide-tutorial slide-tutorial-fourth">
                <div class="slide-text slide-fourth-text wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.8s">
                    <span class="text-slide-type-first">_for</span><br />
                    <span class="text-slide-type-second">version <br /> you 2.0</span>
                </div>
                <img class="tutorial-fourth-slide-second-image wow fadeIn" data-wow-duration="0.4s" data-wow-delay="0.4s" src="/images/app/tutorial-slider/slide4/brain.png" alt="">
                <img class="tutorial-fourth-slide-first-image wow bounceInDown" data-wow-duration="0.7s" data-wow-delay="0.6s" src="/images/app/tutorial-slider/slide4/lightning.png" alt="">
                <a href="{{ route('app.login') }}" class="app-button tutorial-button">GET STARTED</a>
            </div>
        </div>
    </section>
@endsection