@extends('layouts.master')

@section('content')


    <div class="grid-container">

        {{-- Banner --}}

        <div class="banner">

            <div class="fixable-container">

                <div class="fixable-wrapper">

                    <div class="swiper-container swiper-resize" data-custom="home">
                        <div class="swiper-wrapper">

                            @foreach($images as $image)

                                <div class="swiper-slide">
                                    <img class="image preload fill" src="{{ $image->large_image_url }}" alt="{{ $page->name }}"/>
                                </div>

                            @endforeach

                        </div>
                    </div>

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

    <section class="alt-background">

        <div class="grid-container">

            {{-- Background left-side from mid-section --}}
            <div class="background left-outer-background"></div>

            {{-- Background right-side from mid-section --}}
            <div class="background left-inner-background"></div>

            <div class="transparent-smile">


                <a class="column-4 corner-button" href="/zakelijk">
                    <span class="title">Zakelijk</span>
                    <span class="square-button"></span>
                </a>
            </div>

            <div class="margin-left-1 padding-left-2 padding-right-2 column-9 intro">
                {{ $page->description }}
            </div>
            {{-- First album --}}
            <div class="column-7">
                @include('layouts.partials.callToActionImage',[
                    'name' => $albumPages[0]->name,
                    'route' => $albumPages[0]->route,
                    'thumb' => $albumPages[0]->large_image_url
                ])
            </div>
            <div class="column-7 home-quote-holder valign-parent ratio">
                <span class="valign-child">
                    &rsquo;Een fotoshoot voor uw bedrijf
                    of uw gezin? Smile vindt d&eacute;
                    passende oplossing voor u.&lsquo;
                </span>
            </div>

            {{-- Background right-side from mid-section --}}
            <div class="background right-outer-background"></div>

        </div>
        <div class="white-bottom-bar"></div>

    </section>

    <section class="white-background">

        <div class="grid-container">

            {{-- Second album --}}
            <div class="margin-left-7 column-7 second-album">
                @include('layouts.partials.callToActionImage',[
                    'name' => $albumPages[1]->name,
                        'route' => $albumPages[1]->route,
                        'thumb' => $albumPages[1]->large_image_url
                ])
            </div>

            {{-- Third album --}}
            <div class="column-7 margin-right-7 last-album">
                @include('layouts.partials.callToActionImage',[
                    'name' => $albumPages[2]->name,
                    'route' => $albumPages[2]->route,
                    'thumb' => $albumPages[2]->large_image_url
                ])
            </div>

        </div>
    </section>

@stop