@extends('site.pages.case')

@section('caseHeader')

    @include('site.partials.cases.caseHeader',[
        'title' => 'TOPS<br />Luchtfilters',
        'tags' => Lang::get('site/cases/' . $codeName . '.tags'),
        'image' => '/img/komma/cases/tops/tops_wtw_header.jpg',
    ])

@endsection

@section('caseProgress')

    {{-- Aside progress in reverserd order --}}
    @include('site.partials.cases.dynamic.progress',[
        'items' => [
            ['key'=>'mobile','label'=>'Mobiele webshop'],
            ['key'=>'experience','label'=>'Klantbeleving'],
            ['key'=>'webshop','label'=>'Webshop'],
            ['key'=>'diversity','label'=>'Diverse'],
            ['key'=>'identity','label'=>'Identiteit'],
        ]
    ])
@endsection

@section('caseDynamic')

    {{-- Identity section --}}
    <section class="contained-layout" id="identity">

        @include('site.partials.cases.dynamic.singleText',[
            'title' => Lang::get('site/cases/' . $codeName . '.identity.title'),
            'description' => Lang::get('site/cases/' . $codeName . '.identity.description')
        ])

        <div id="logo-animation" class="logo-wrapper animate">
            @include('site.svg.tops')
        </div>

    </section>

    {{-- Folder section --}}
    <section class="contained-layout" id="diversity">
        @include('site.partials.cases.dynamic.singleText',[
            'title' => Lang::get('site/cases/' . $codeName . '.diversity.title'),
            'description' => Lang::get('site/cases/' . $codeName . '.diversity.description')
        ])

        <div class="image-grid">
            <img class="stretch preload" src="/img/komma/cases/tops/tops_briefpapier.jpg" alt="TOPS WTW-filters"/>
            <img class="stretch preload" src="/img/komma/cases/tops/tops_bus.jpg" alt="TOPS WTW-filters"/>
        </div>
    </section>


    {{-- Webshop section --}}
    <section class="contained-layout" id="webshop">

        @include('site.partials.cases.dynamic.singleText',[
            'title' => Lang::get('site/cases/' . $codeName . '.webshop.title'),
            'description' => Lang::get('site/cases/' . $codeName . '.webshop.description')
        ])

        {{--<img class="stretch preload" src="/img/komma/cases/tops/tops_web.jpg" alt="TOPS WTW-filters"/>--}}

    </section>

    <section id="full-size-site-scroll">
        @include('site.partials.cases.dynamic.website', ['site' => 'tops'])
    </section>


    {{-- Folder section --}}
    <section id="experience">

        <div class="contained-layout">
            @include('site.partials.cases.dynamic.singleText',[
                'title' => Lang::get('site/cases/' . $codeName . '.experience.title'),
                'description' => Lang::get('site/cases/' . $codeName . '.experience.description')
            ])
        </div>

        <div class="image-grid">
            <img class="stretch preload" src="/img/komma/cases/tops/tops_sven_hobie.jpg" alt="TOPS WTW-filters"/>
            <img class="stretch preload" src="/img/komma/cases/tops/tops_wtw_bedankkaartje_briefpapier.jpg"
                 alt="TOPS WTW-filters"/>
        </div>

    </section>

    {{-- Folder section --}}
    <section class="contained-layout" id="mobile">

        @include('site.partials.cases.dynamic.singleText',[
            'title' => Lang::get('site/cases/' . $codeName . '.mobile.title'),
            'description' => Lang::get('site/cases/' . $codeName . '.mobile.description')
        ])

        <div class="image-grid">
            <img class="stretch preload" src="/img/komma/cases/tops/tops_mobile.jpg" alt="TOPS WTW-filters"/>
            <img class="stretch preload" src="/img/komma/cases/tops/tops_visitekaartje.jpg" alt="TOPS WTW-filters"/>
        </div>

        <div class="spacer"></div>

    </section>

@endsection

@section('caseTestimonial')
    @include('site.partials.cases.caseTestimonial',[
        'image' => 'tops_nico.png',
        'codeName' => $codeName
    ])
@endsection

{{-- Full width image beneath the dynamic section --}}
@section('closing')

@endsection