@extends('master')

@section('title', !empty($page->translation->meta_title) ? $page->translation->meta_title : config('site.company.name'))
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-body">
        <div class="o-hero">
            <picture class="o-hero__frame">
                @if(isset($page->images) && $page->images->isNotEmpty())
                    <source media="(min-width: 1100px)" srcset="{{ $page->images->first()->large_image_url }}">
                    <source media="(min-width:475px)" srcset="{{ $page->images->first()->medium_image_url }}">
                    <img class="o-hero__img" alt="{{ $page->images->first()->name }}" src="{{ $page->images->first()->small_image_url }}" data-kal="photo-zoom-out" style="--kal-duration: 2.0s;">
                @endif
            </picture>
        </div>
        <div class="u-spacing-p5">
            <div class="l-contain">
                @include('components.breadcrumb')
            </div>
        </div>

        @include('organisms.components')

        <div class="l-block  l-contain">
            @include('organisms.cta', [
                'ctaTitle' => __('site/about.cta.title'),
                'ctaButtonText1' => __('site/global.cta.buttonText1'),
                'ctaButtonText2' => __('site/global.cta.buttonText2'),
            ])
        </div>

        <div class="l-block">
            @include('organisms.certificates')
        </div>

        <div class="l-block  l-contain">
            @include('organisms.bubbles')
        </div>


    </div>

@endsection