@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')
    <section class="grid-row content-header"
             style="background-image: url('/img/about_header.jpg');"
    >
    </section>
    <section class="content">
        @if(!empty($page->translation->intro))
            @include('site.partials.home.afspraak', [ 'block' => $page->translation->intro ])
        @endif
        @if(!empty($page->translation->products && !empty($page->translation->references)))
            <div class="grid-row catBlock top">
                <div class="grid-col left">
                    <figure class="large"
                            style="background-image: url('{{$page->translation->products->images[0]['medium']}}');"></figure>
                </div>
                <div class="grid-col right">
                    <h2>{{$page->translation->products->typeName}}</h2>
                    {!! $page->translation->products->description  !!}

                    <a class="button arrow stroked yellow pull-right"
                       href="{{$page->translation->products->link}}">
                        {{$page->translation->products->link_text}}
                    </a>
                </div>
            </div>
            <div class="grid-row bottom">
                <div class="grid-col left">
                    <h2>{{$page->translation->references->typeName}}</h2>
                    {!! $page->translation->references->description  !!}

                    <a class="button arrow stroked yellow pull-right"
                       href="{{$page->translation->references->link}}">
                        {{$page->translation->references->link_text}}
                    </a>
                </div>
                <div class="grid-col right">
                    <figure class="large"
                            style="background-image: url('{{$page->translation->references->images[0]['medium']}}');"></figure>
                </div>
            </div>
        @endif
    </section>
@endsection