@extends('site.master')

@section('title', Lang::get('site/meta.title'))

@section('content')

<section class="section-sorter">

    {{-- Intro --}}
    <section id="intro" class="home-intro-section intro-section">
        {{-- Content --}}
        <div class="contained-layout">

            @include('site.partials.scrollHinter',['target'=>'intro'])

            <div class="intro col-8 centered">

            @lang('site/home.intro.description')

            </div>
        </div>

        <div id="left-side-drip" class="header-drip left"></div>
        <div id="right-side-drip" class="header-drip right"></div>
    </section>

    {{-- Video: order on desktop by SectionSorter --}}
    <section class="video">

        {{--
            This is the container in 16:9 ratio
            it will be vertically centered in the header
        --}}
        <div class="video-container">
            {{-- Initialized in youtubeHandler.js --}}
            <div id="ytplayer"></div>
        </div>

        <div class="overlay">
            <div class="contained-layout">
                <div class="logo-holder col-5 offset-3">
                    @include('site.svg.kommaLogoWba')
                </div>
            </div>
        </div>

    </section>

    {{-- Award --}}
    <section class="award contained-layout">
        <div class="award-container col-8 centered">

            {{-- Logo --}}
            <div class="award-logo">
                <a href="/ondernemer-van-het-jaar-2017-cranendonck">
                    <img class="stretch" src="/img/komma/static/ovhj.jpg" alt="Komma ondernemer van het jaar 2017" />
                </a>
            </div>

            {{-- Award text--}}
            <section class="award-text">
                <h2>@lang('site/home.award.title')</h2>
                @lang('site/home.award.description')

                <p>Ter versterking van ons team, <strong>zoeken wij enthousiaste en gedreven collega’s</strong> met honger!</p>
                <a href="/vacatures" class="button stroked blue arrow">
                    Bekijk onze vacatures
                </a>
            </section>

        </div>
    </section>

    {{--Featured cases --}}
    @include('site.partials.cases.featured',[
        'featured' => ['zuiderbos','eenenaloor']
    ])

    {{-- About our company and services --}}
    <section class="about-our-company contained-layout">

        <div class="column-container col-12 centered">

            {{-- Summary --}}
            <section class="text-block col-6">
                <h2>@lang('site/home.summary.title')</h2>

                @lang('site/home.summary.description')

                <a href="@lang('site/partials/buttons.conversation.href')" class="button stroked blue arrow">
                    @lang('site/partials/buttons.conversation.label')
                </a>

            </section>

            {{-- Services--}}
            <section class="text-block col-6">
                @include('site.partials.servicesList')

            </section>

        </div>

    </section>


    {{-- Testimonials --}}
    <section class="featured-testimonials contained-layout">
        @include('site.partials.testimonials.testimonial',[
            'testimonial' => [
                'codeName' => 'promic',
                'slug' => 'promic',
                'image' => 'promic_rick.png',
            ]
        ])
        @include('site.partials.testimonials.testimonial',[
            'testimonial' => [
                'codeName' => 'topsWtwFilters',
                'slug' => 'tops-wtw-filters',
                'image' => 'tops_nico.png',
            ]
        ])
    </section>

    {{-- About the team --}}
    <section class="about-our-team contained-layout">

        <div class="flexable-layout">

            <img class="preload stretch" src="/img/komma/static/lunch.jpg" alt="office"/>

            <div class="flex-col">
                <div class="text-block">

                    <h2>@lang('site/home.ambiance.title')</h2>
                    @lang('site/home.ambiance.description')

                    <a href="@lang('site/partials/buttons.about.href')" class="button stroked blue arrow">
                        @lang('site/partials/buttons.about.label')
                    </a>
                </div>
            </div>
        </div>

    </section>

    {{-- Call to action bar --}}
    @include('site.partials.callToActionBar',['key' => 'stef'])

</section>

@endsection