<div class="o-hero">
    <div class="u-bg-triangle-primary"></div>
    <div class="o-hero__main">

        <div class="o-hero__figure">
            <div class="c-hex-shape">
                @include('site.components.heroSlider')
            </div>
        </div>

        <div class="o-hero__content">

            @if(isset($backButtonText) && isset($backButtonLink))
                <div class="o-hero__back">
                    @include('site.components.button', [
                        'buttonText' => $backButtonText,
                        'buttonLink' => $backButtonLink,
                        'type' => 'text',
                        'modifiers' => ['icon', 'on-dark', 'is-reversed']
                    ])
                </div>
            @endif

            <p class="o-hero__title">
                @if(isset($heroTitle))
                    {!! $heroTitle !!}
                @else
                    {{ $page->translation->name }}
                @endif
            </p>

            <h1 class="o-hero__header">
                @if(isset($heroHeader))
                    {!! $heroHeader !!}
                @else
                    Grenzeloos maatwerk uit het hart van Maarheeze{{ $page->translation->name }}
                @endif
            </h1>

            <div class="o-hero__text">
                @if(isset($heroText))
                    {!! $heroText  !!}
                @else
                    Stukje over de geschiedenis van Stafa en de kernwaarden. Lorem ipsum dolor sit amet, consectetur
                    adipisicing elit. Accusantium ad aperiam atque commodi delectus, dolor expedita, harum hic
                    necessitatibus nulla optio perspiciatis quis, reiciendis sequi sit sunt tenetur vel. Repudiandae.
                @endif
            </div>

            @if(isset($heroActionButtonLabel) && isset($heroActionButtonLink))
                <div class="o-hero__action">
                    @include('site.components.button', [
                        'buttonText' => $heroActionButtonLabel,
                        'buttonLink' => $heroActionButtonLink,
                        'modifiers'  => ['icon']
                    ])
                </div>
            @endif
        </div>
    </div>
</div>