@extends('site.master')

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

@section('content')

    {{-- Intro header --}}
    @include('site.partials.header',['key' => 'about'])

    {{-- The team section --}}
    <section id="arrow-target" class="contained-layout">

        {{-- Center content on a 12-based grid --}}
        <div class="col-12 centered">

            {{--@include('site.partials.breadcrumb')--}}

            {{-- Use a grid based layout to be flexable in two directions --}}
            <div class="grid-layout about-our-team">

                {{-- Grid item with intro text --}}
                <div class="text">

                    <div class="text-block">

                        <h2>@lang('site/about.team.title')</h2>

                        {{-- These divs contain some inline paragraphs, so it can both be one of two column text--}}
                        @lang('site/about.team.description')

                        {{-- Request an offer --}}
                        <a href="@lang('site/partials/buttons.taste.href')" class="button stroked blue arrow">
                            @lang('site/partials/buttons.taste.label')
                        </a>

                    </div>

                </div>

                {{-- The team --}}
                @foreach($team as $member)
                    @include('site.partials.teamPortrait',['member' => $member])
                @endforeach

                {{-- Job offer tile --}}
                <a href="/vacatures" class="job-offer team-portrait">
                    <div class="portrait">

                        <div class="content">
                            <span class="title">Join<br />our<br />team</span>
                            <p>We zijn altijd op zoek naar talent, ook als er geen vacatures openstaan.</p>
                        </div>
                    </div>
                    <div class="caption">
                        <span class="button stroked white arrow">Jobs</span>
                    </div>
                </a>

            </div>
        </div>
    </section>

    {{-- Facebook call to action block--}}
    @include('site.partials.callToActionBlock',[
        'streamer' => Lang::get('site/partials/callToActions.facebook.streamer'),
        'callToAction' => Lang::get('site/partials/callToActions.facebook.callToAction'),
        'comment' => Lang::get('site/partials/callToActions.facebook.comment'),
        'buttonLabel' => Lang::get('site/partials/callToActions.facebook.button'),
        'buttonHref' => Lang::get('site/partials/callToActions.facebook.href'),
        'buttonIcon' => 'like',
        'target' => '_blank'
    ])

    {{-- Images --}}
    <div class="contained-layout">
        <div class="image-grid with-gaps">
            <img class="preload stretch" src="/img/komma/static/hq.jpg" alt="office"/>
            <img class="preload stretch" src="/img/komma/static/vrimibo.jpg" alt="Vrijdag middag borrel bij Komma" />
        </div>
    </div>

    {{-- Why Komma / Services --}}
    <div class="why-us contained-layout">

        {{-- Why komma --}}
        <section class="text-block col-6 offset-1 col-sm-12 offset-sm-0">

            <h2>@lang('site/about.why.title')</h2>

            @lang('site/about.why.description')

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

        </section>

        {{-- Services--}}
        <section class="text-block col-5 col-sm-12 offset-sm-0">
            @include('site.partials.servicesList')
        </section>
    </div>

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

    {{-- Call to action bar --}}
    @include('site.partials.callToActionBar',[
        'key' => 'claire',
        'streamer' => 'Loopt het water je al in de mond?'
    ])


@endsection

{{-- Footer --}}
@section('footer_button')
    @include('site.partials.footerButton',[
            'label' => "Aanpak",
            'href' => "/aanpak"
        ])
@endsection