<div class="landing-slider slider-area">
    <div class="background"></div>
    <div class="content-container slider">
        <div class="nav">
            @for($i = 1; $i <=4; $i++)
                <div class="nav-item @if($i == 1) active @endif" data-nav="{{$i}}">
                    <?php $item = 'landing_slider' . $i ?>
                    @if(isset($page->content->$item))
                        <p>{{$page->content->$item->translation->name}}</p>
                    @endif
                </div>
            @endfor
        </div>
        <div class="slider-content">
            @for($i = 1; $i <=4; $i++)
                <?php $item = 'landing_slider' . $i ?>
                <div class="content  @if($i == 1) active @endif" data-item="{{$i}}"
                     @if($page->content->$item->images->count() != 0) style="background-image: url('{{$page->content->$item->images->first()->large_image_url}}')" @endif>
                    <div class="text-holder">
                        <div class="inner">
                            <h4>{{$page->content->$item->translation->name}}</h4>
                            <div class="text">
                                {{$page->content->$item->translation->description}}
                            </div>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
    </div>

    <div class="mobile content-container">
        @for($i = 1; $i <=4; $i++)
            <div class="mobile-slider-items">
                <?php $item = 'landing_slider' . $i ?>
                <div class="header-image"
                     @if($page->content->$item->images->count() != 0) style="background-image: url('{{$page->content->$item->images->first()->large_image_url}}')" @endif>
                </div>
                <div class="text-holder">
                    <h4>{{$page->content->$item->translation->name}}</h4>
                    <div class="text">
                        {{$page->content->$item->translation->description}}
                    </div>
                </div>
            </div>
        @endfor
    </div>

    <div class="more-info">
        <a href="#contactForm" class="internalLink">
            <p>@lang('translations.ctaContact')</p>
            <span></span>
        </a>
    </div>


</div>