<div class="o-eye-catcher">

    <div class="o-eye-catcher__images  hide-controls">
        @include('site.components.image', [
            'images' => $page->images,
            'imageFit' => true,
            'imageId' => 'home-slider',
            'autoSlide' => true,
            'imageSizes' => ['small' => 425, 'medium' => 820, 'large' => 1480, 'xlarge' => 2000]
        ])
    </div>

    <div class="o-eye-catcher__main">
        <div class="l-contain">
            @include('site.components.heroCta', [
                'modifiers' => 'full-width',
                'heroCtaTitle' => $page->translation->streamer,
                'heroCtaLink' => '#component-item-1',
                'heroCtaText' => __('site/home.subteaser')
            ])
        </div>
    </div>

    @if($mmhCta || !empty($page->translation->notification))

        <div class="o-eye-catcher__bottom">
            <div class="o-eye-catcher__flex  l-contain">

                @if(!empty($page->translation->notification))
                    <div class="o-eye-catcher__note">
                        <div class="o-eye-catcher__note-icon">
                            <img src="/img/attention.svg" alt="note icon">
                        </div>
                        <p class="o-eye-catcher__note-message">{{ $page->translation->notification }}</p>
                    </div>
                @endif

                @includeWhen($mmhCta, 'site.components.mmhCta')
            </div>
        </div>

    @endif

</div>

@if(!empty($page->translation->notification))
    <div class="o-eye-catcher__note  o-eye-catcher__note--no-eye-footer">
        <div class="o-eye-catcher__note-icon">
            <img src="/img/attention.svg" alt="note icon">
        </div>
        <p class="o-eye-catcher__note-message">
            {{ $page->translation->notification }}
        </p>
    </div>
@endif