@extends('master', ['footerHasRequestBrochure' => true])

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

@section('content')

    @include('organisms.hero', ['heroImage' => "/img/home_header.jpg"])

    @include('organisms.homeIntro')

    <div class="l-contain">
        @include('components.video', [
            'videoLink' => 'zd8yYeybA0g',
            'videoAutoplay' => false,
            'videoPlayerId' => 'home-video-1',
        ])
    </div>

    @include('organisms.how')

    <hr class="l-contain  u-spacing-mt8">

    <div class="o-duo">
        <div class="o-duo__main  l-contain">
            <div class="o-duo__item" data-kal="slide-up">
                <h2 class="u-color-tertiary--400  u-spacing-mb7">{{__('site/home.videoCalculation.videoHeader')}}</h2>
                @include('components.video', [
                    'videoLink' => 'XdfHXeCe5Ck',
                    'videoAutoplay' => false,
                    'videoPlayerId' => 'video-slider',
                ])
            </div>
            <div class="o-duo__item"  data-kal="slide-up" style="--kal-delay: 200ms;">
                <h2 class="u-color-tertiary--400  u-spacing-mb7">{{__('site/home.videoCalculation.calculateHeader')}}</h2>
                @include('components.paybackPeriodWidget')
            </div>
        </div>
    </div>

    @include('organisms.cta.advisoryMeeting', [
        'modifiers' => ['on-dark'],
        'ctaPerson' => config('cta.persons.john')
    ])


     <div class="o-duo">
        <div class="o-duo__main  l-contain">
            <div class="o-duo__item" data-kal="slide-up">
                <h2 class="u-color-tertiary--400  u-spacing-mb7">{{__('site/home.videoTestimonial.videoHeader')}}</h2>
                @include('components.video', [
                    'videoLink' => 'RFTpjM_NxLs',
                    'videoAutoplay' => false,
                    'videoPlayerId' => 'video-testimonials',
                ])
            </div>
            <div class="o-duo__item  u-spacing-mt3" data-kal="slide-up" style="--kal-delay: 200ms;">
                @include('components.testimonialSlider')
            </div>
        </div>
    </div>

    @include('organisms.flag')

    @include('organisms.postsGrid')


@endsection