@extends('layouts.master')


@section('title', Lang::get('home.meta_title'))

@section('description', Lang::get('home.meta_description'))


@section('content')

    @parent


    <nav class="mobile-nav">

        <img class="logo" src="{{ asset('/assets/images/logo-colored.svg') }}" title="{{ Lang::get('home.logo-title') }}">

        <span class="close">
            <img class="icon" src="{{ asset('/assets/images/close.svg') }}">
        </span>

        <a class="link" href="#about">{{ Lang::get('home.menu.element1') }}</a>
        <a class="link" href="#how-it-works">{{ Lang::get('home.menu.element2') }}</a>
        <!--<a class="link" href="/events">{{ Lang::get('home.menu.element5') }}</a>-->
        <a class="link" href="https://blog.hopla.co">{{ Lang::get('home.menu.element3') }}</a>
        <a class="button big" href="https://teacher.hopla.co/{{ Lang::locale() }}" target="_blank">{{ Lang::get('home.menu.element4') }}</a>

        <div class="socials">
            <a href="https://www.facebook.com/hoplaApp" target="_blank">
                <img class="icon" src="{{ asset('/assets/images/facebook.svg') }}">
            </a>
            <a href="https://twitter.com/HoplaApp" target="_blank">
                <img class="icon" src="{{ asset('/assets/images/twitter.svg') }}">
            </a>
            <a href="https://instagram.com/HoplaApp" target="_blank">
                <img class="icon" src="{{ asset('/assets/images/instagram.svg') }}">
            </a>
        </div>

    </nav>


    <header class="header">

        <div class="block-top">
            
            <a href="{{ route('home') }}">
                <img class="logo" src="{{ asset('/assets/images/logo.svg') }}" title="{{ Lang::get('home.logo-title') }}">
            </a>

            <nav class="navigation">
                <a class="link light" href="#about">{{ Lang::get('home.menu.element1') }}</a>
                <a class="link light" href="#how-it-works">{{ Lang::get('home.menu.element2') }}</a>
                <!--<a class="link light" href="/events">{{ Lang::get('home.menu.element5') }}</a>-->
                <a class="link light" href="https://blog.hopla.co">{{ Lang::get('home.menu.element3') }}</a>
                <a class="button light" href="https://teacher.hopla.co/{{ Lang::locale() }}" target="_blank">{{ Lang::get('home.menu.element4') }}</a>
            </nav>

            <span class="mobile-nav-toggle link" href="#"><img class="icon" src="{{ asset('/assets/images/menu.svg') }}"></span>

        </div>

        <div class="tagline">
            <h1 class="title title-1 light">{!! Lang::get('home.header.tagline') !!}</h1>
            <p class="reading-text light">{{ Lang::get('home.header.text') }}</p>
            <a class="button-plain big" href="#about">{{ Lang::get('home.header.cta') }}</a>    
            <div class="button-video modal-trigger">
                <span class="action">{{ Lang::get('home.header.cta2') }}</span>
                <img class="icon" src="{{ asset('/assets/images/icon-play.svg') }}">
            </div>
        </div>

    </header>



    <section id="about" class="intro">
        
        <div class="wrapper small">

            <h2 class="title title-3">{!! Lang::get('home.about.title') !!}</h2>

            <p class="reading-text">{!! Lang::get('home.about.text') !!}</p>

            <p class="title-box">{!! Lang::get('home.about.availability') !!}</p>

        </div>

    </section>



    <aside class="cta">
        
        <div class="wrapper">

            <div class="block-text">
                <p class="text title-4 light">{!! Lang::get('home.cta.text') !!}</p>
            </div>

            <div class="block-button">
                <a class="button light big" href="https://teacher.hopla.co/{{ Lang::locale() }}" target="_blank">{!! Lang::get('home.cta.cta') !!}</a>
            </div>

        </div>

    </aside>



    <section id="how-it-works" class="about">
        
        <div class="wrapper">

            <article class="step">
                
                <aside class="illustration left">
                    <img src="{{ asset('/assets/images/anytime.svg') }}">
                </aside>

                <div class="content">
                    <div class="heading">
                        <div class="number">
                            <span class="number-round">1</span>
                        </div>
                        <h3 class="text title-2">{{ Lang::get('home.steps.step1.title') }}</h3>
                    </div>
                    <p class="reading-text">{!! Lang::get('home.steps.step1.text') !!}</p>
                </div>

            </article>


            <article class="step">
                
                <div class="content">
                    <div class="heading">
                        <div class="number">
                            <span class="number-round">2</span>
                        </div>
                        <h3 class="text title-2">{{ Lang::get('home.steps.step2.title') }}</h3>
                    </div>
                    <p class="reading-text">{!! Lang::get('home.steps.step2.text') !!}</p>
                </div>

                <aside class="illustration right">
                    <img src="{{ asset('/assets/images/anywhere.svg') }}">
                </aside>

            </article>


            <article class="step">
                
                <aside class="illustration left">
                    <img src="{{ asset('/assets/images/affordable.svg') }}">
                </aside>

                <div class="content">
                    <div class="heading">
                        <div class="number">
                            <span class="number-round">3</span>
                        </div>
                        <h3 class="text title-2">{{ Lang::get('home.steps.step3.title') }}</h3>
                    </div>
                    <p class="reading-text">{!! Lang::get('home.steps.step3.text') !!}</p>
                </div>

            </article>


            <article class="step">
                
                <div class="content">
                    <div class="heading">
                        <div class="number">
                            <span class="number-round">4</span>
                        </div>
                        <h3 class="text title-2">{{ Lang::get('home.steps.step4.title') }}</h3>
                    </div>
                    <p class="reading-text">{!! Lang::get('home.steps.step4.text') !!}</p>
                </div>

                <aside class="illustration right">
                    <img src="{{ asset('/assets/images/no-subscription.svg') }}">
                </aside>

            </article>

        </div>

    </section>


    <section class="sign-up">
        
        <div class="picture"></div>

        {{ Form::open(['url' => route('newsletter.register'), 'method' => 'post', 'id' => 'sign-up', 'class' => 'form', 'autocomplete' => 'off', 'novalidate']) }}

            <h3 class="title-2 light">{{ Lang::get('home.signup.title') }}</h3>

            <p class="text reading-text light">{!! Lang::get('home.signup.text') !!}</p>

            <div class="form-wrapper">

                <p class="label light">{{ Lang::get('home.signup.interest.title') }}</p>

                <div class="radio-group @if( $errors->has('interest') ) error @endif">

                    <div class="radio">
                        <input id="radio-practicing" type="radio" name="interest" value="practicing" checked="checked">
                        <label for="radio-practicing"><span></span>{{ Lang::get('home.signup.interest.type1') }}</label>
                    </div>

                    <div class="radio">
                        <input id="radio-teaching" type="radio" name="interest" value="teaching">
                        <label for="radio-teaching"><span></span>{{ Lang::get('home.signup.interest.type2') }}</label>
                    </div>

                    <div class="radio">
                        <input id="radio-both" type="radio" name="interest" value="all">
                        <label for="radio-both"><span></span>{{ Lang::get('home.signup.interest.type3') }}</label>
                    </div>

                    @if( $errors->has('interest') )
                        <p class="error-message">{{ $errors->first('interest') }}</p>
                    @endif

                </div>

                <div class="input-group @if( $errors->has('email') ) error @endif">
                    <input class="input" type="text" name="email" placeholder="{{ Lang::get('home.signup.email_placeholder') }}">

                    @if( $errors->has('email') )
                        <p class="error-message">{{ $errors->first('email') }}</p>
                    @endif

                </div>

                <input type="hidden" name="lang" value="{{ App::getLocale() }}">

                <input class="button light" type="submit" value ="{{ Lang::get('home.signup.submit') }}">

                <p class="text reading-text light small">{{ Lang::get('home.signup.spam') }}</p>

            </div>

            <p id="thank-you" class="title-5 light thank-you"></p>

        </form>

    </section>


    <section class="blog">
        
        <div class="wrapper">

            <div class="block-text">
                <p class="text title-4">{!! Lang::get('home.blog.text') !!}</p>
            </div>

            <div class="block-button">
                <a class="button dark big" href="//blog.hopla.co">{!! Lang::get('home.blog.cta') !!}</a>
            </div>

        </div>

    </section>


    <footer class="footer">
        
        <p class="block-left reading-text">{{ Lang::get('home.footer.copyrights') }}</p>

        <p class="block-center reading-text">
            <a href="https://www.facebook.com/hoplaApp" target="_blank">
                <img class="icon" src="/assets/images/facebook.svg">
            </a>
            <a href="https://twitter.com/HoplaApp" target="_blank">
                <img class="icon" src="/assets/images/twitter.svg">
            </a>
            <a href="https://instagram.com/HoplaApp" target="_blank">
                <img class="icon" src="/assets/images/instagram.svg">
            </a>
        </p>

        <nav class="block-right">

            <a class="link" href="mailto:support@hopla.co" target="_blank">{{ Lang::get('home.footer.contact') }}</a>

            <a class="link" href="{{ asset('files/hopla-media-kit.zip') }}" target="_blank">{{ Lang::get('home.footer.mediakit') }}</a>

            @if( App::getLocale() == 'en' )
                <a class="button small dark" href="{{ route('switchLocale', ['language' => 'fr']) }}" title="{{ Lang::get('home.language-toggle-title') }}">{{ Lang::get('home.language-toggle') }}</a>
            @else
                <a class="button small dark" href="{{ route('switchLocale', ['language' => 'en']) }}" title="{{ Lang::get('home.language-toggle-title') }}">{{ Lang::get('home.language-toggle') }}</a>
            @endif

        </nav>

    </footer>


    <div id="video-modal" class="modal">
        <div class="container">
            <div id="close-video" class="popup">
                <div class="popup-content">
                    <div class='embed-container'>
                        <iframe src='https://player.vimeo.com/video/177469371?title=0&byline=0&portrait=0' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                    </div>
                </div>
            </div>
        </div>                   
    </div>

@stop


@section('js')
    
    <script src="{{ asset('assets/js/app.js') }}?t=287287"></script>

@stop