<div class="o-hero  o-hero--main">
    <div class="o-hero__main">
{{--        <img class="o-hero__image" sizes="(max-width: 1920px) 100vw, 1920px" alt=""--}}
{{--             srcset="--}}
{{--                    /img/home/farmfun-020.jpg 460w,--}}
{{--                    /img/home/farmfun-025.jpg 575w,--}}
{{--                    /img/home/farmfun-050.jpg 1200w,--}}
{{--                    /img/home/farmfun-075.jpg 1680w"--}}
{{--             src="/img/home/farmfun.jpg">--}}

        <div class="o-hero__video">
            @include('site.components.video', [
                'videoLink' => 'YI8v4k1Ejug',
                'videoAutoplay' => true,
                'videoDisableKB' => 1,
                'videoControls' => 0,
                'videoPlayerId' => 'home-hero-video',
                'videoLoop' => 1
            ])
        </div>

        <div class="o-hero__title-area" data-kal="slide-up">
            <h1 class="o-hero__title">Plan jouw<br/> farmtastische<br/> dag vol koe-le<br/> activiteiten</h1>
            @include('site.components.button', [
                   'buttonLink' => $links->products->route,
                   'buttonText' => 'Bekijk activiteiten',
               ])

            <div class="o-hero__rating">
                @include('site.components.rating', ['modifiers' => ['boxed']])
            </div>

        </div>

    </div>
</div>