@extends('web.layouts.layout')

@section('content')


    <style type="text/css">
        .tp-caption {
            text-shadow: none;
        }
        .tp-caption.large_bold_white {
            font-size:40px;
            line-height:52px;
        }
    </style>

    <!-- REVOLUTION SLIDER -->
    <section id="slider" class="slider fullwidthbanner-container roundedcorners">

        <div class="fullwidthbanner" data-height="500" data-navigationStyle="">
            <ul class="hide">

                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off"
                    data-title="Slide">

                    <img src="{{ asset('assets/images/1x1.png') }}" data-lazyload="{{ asset('assets/images/slider-hg_gruen-mitte.jpg') }}" alt=""
                         data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat"/>

                    <div class="overlay dark-0"><!-- dark overlay [1 to 9 opacity] --></div>

                    <div class="tp-caption customin ltl tp-resizeme large_bold_white"
                         data-x="center"
                         data-y="50"
                         data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-speed="800"
                         data-start="1000"
                         data-easing="easeOutQuad"
                         data-splitin="none"
                         data-splitout="none"
                         data-elementdelay="0.01"
                         data-endelementdelay="0.1"
                         data-endspeed="1000"
                         data-endeasing="Power4.easeIn" style="z-index: 10;">
                        <span class="h1">{!! __('website.slider_subl') !!}</span>
                    </div>

                    <div class="tp-caption customin ltl tp-resizeme large_bold_white"
                         data-x="center"
                         data-y="120"
                         data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-speed="800"
                         data-start="1200"
                         data-easing="easeOutQuad"
                         data-splitin="none"
                         data-splitout="none"
                         data-elementdelay="0.01"
                         data-endelementdelay="0.1"
                         data-endspeed="1000"
                         data-endeasing="Power4.easeIn" style="z-index: 10;">
                        <span class="weight-400">{!! __('website.slider_hl') !!}</span>
                    </div>
                </li>
            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </section>
    <!-- /REVOLUTION SLIDER -->


    <!-- -->
    <section>
        <div class="container">
            <div class="row">
                        <div class="col-md-12">
                    @if($site->hasImage())
                        <img class="img-responsive margin-bottom-20" src="{{ route('iq_image', [$site->iq_image->slug]) }}" alt="">
                    @endif
                    <p class="">{!! __('website.start_copy_mivita') !!}</p>

            <div class="divider divider-center divider-color"><!-- divider -->
                <i class="fa fa-chevron-down"></i>
            </div>
                        </div>
            </div>
            <article class="row">
                <div class="col-md-6">
                    <!-- OWL SLIDER -->
                    <div class="owl-carousel buttons-autohide controlls-over nomargin"
                         data-plugin-options='{"items": 1, "autoHeight": true, "navigation": true, "pagination": true, "transitionStyle":"backSlide", "progressBar":"true"}'>
                        <div>
                            <img class="img-responsive" src="{{ asset('assets/images/aloe-vera-farm-mallorca.jpg') }}" alt="">
                        </div>
                        <div>
                            <img class="img-responsive" src="{{ asset('assets/images/beratung-ruth-mallorca.jpg') }}" alt="">
                        </div>
                        <div>
                            <img class="img-responsive" src="{{ asset('assets/images/mivita-schulung-mallorca.jpg') }}" alt="">
                        </div>

                    </div>
                    <!-- /OWL SLIDER -->
                </div>
                <div class="col-md-6">
                    <h2>{!! __('website.start_why_hl') !!} </h2>
                    {!! __('website.start_why_copy') !!} 
                </div>
            </article>

        </div>
    </section>
    <!-- / -->


    <!-- -->
    <section>
        <div class="container">

            <!-- FEATURED BOXES 3 -->
            <div class="row">
                <div class="col-md-4 col-xs-6">
                    <div class="text-center">
                        <h3 class="h3">{{ __('website.start_aloe_hl') }} </h3>
                        <p class="">{{ __('website.start_aloe_copy') }} </p>

                        <a href="/aloevera">
                            {{ __('website.more') }} 
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
										<span class="items">
											<span> {{ __('website.read') }} </span>
											<span> {{ __('website.NOW') }} </span>
										</span>
									</span><!-- /word rotator -->
                            <i class="glyphicon glyphicon-menu-right size-12"></i>
                        </a>

                    </div>
                </div>
                <div class="col-md-4 col-xs-6">
                    <div class="text-center">
                        <h3 class="h3">{{ __('website.start_products_hl') }} </h3>
                        <p class="">{{ __('website.start_products_copy') }} </p>

                        <a href="/produkte">
                            {{ __('website.more') }} 
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
										<span class="items">
											<span> {{ __('website.read') }} </span>
											<span> {{ __('website.NOW') }} </span>
										</span>
									</span><!-- /word rotator -->
                            <i class="glyphicon glyphicon-menu-right size-12"></i>
                        </a>

                    </div>
                </div>
                <div class="col-md-4 col-xs-6">
                    <div class="text-center">
                        <h3 class="h3">{{ __('website.start_salespartner_hl') }} </h3>
                        <p class="">{{ __('website.start_salespartner_copy') }} </p>

                        <a href="/geschaeftsmodell/karrierechancen">
                            {{ __('website.more') }} 
                            <!-- /word rotator -->
                            <span class="word-rotator" data-delay="2000">
										<span class="items">
											<span> {{ __('website.read') }} </span>
											<span> {{ __('website.NOW') }} </span>
										</span>
									</span><!-- /word rotator -->
                            <i class="glyphicon glyphicon-menu-right size-12"></i>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    {!! __('website.start_mivitapartner_copy') !!} 
                </div>
                <div class="col-lg-6" id="youtube-ChHAxy6SbkM">
                    @if(Request::get('youtube') === 'ChHAxy6SbkM')
                    <div class="embed-responsive embed-responsive-16by9 box-shadow-1">
                        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ChHAxy6SbkM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    @else
                        <div class="text-center">
                            <h4 class="mb-2">{{ __('website.youtube_accepted_copy') }}  </h4>
                            <a class="text-link" href="{{ url('/datenschutz') }}">{{ __('website.to_privacy_policy') }} </a><br>
                            <a class="btn btn-primary" href="{{ url('/') }}?youtube=ChHAxy6SbkM#youtube-ChHAxy6SbkM" rel="nofollow">{{ __('website.accept_youtube_load') }} n</a>
                        </div>
                        <br>
                        <div class="embed-responsive embed-responsive-16by9 box-shadow-1">
                            <img src="/images/youtube-screen-1.jpg" alt="" class="img-responsive">
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

@endsection