@section('title', 'HOME')
<div>

    <section class="w-full h-full ">
        <div class="w-full md:h-screen xl:h-[90vh]  bg-white md:bg-primary ">
            <div class="flex xl:container h-full w-full mx-auto wow fadeInUp  " data-wow-delay=".2s">
                <div class="w-full md:w-2/5  flex flex-wrap items-start  md:p-10 ">
                    <div class="h-full" >
                        <div class=" bg-no-repeat bg-[length:100%_100%] bg-center bg-[url('/img/jumbo-mobile.png')]  md:bg-[url('/img/jumbo-mobile2.png')] ">
                            <img class="hidden md:inline-flex w-1/2 h-auto mx-auto my-5" src="{{ asset('img/logotipo.png') }}" alt="">
                            <img class="md:hidden w-1/3 h-auto mt-5 ml-5" src="{{ asset('img/logo-2.png') }}" alt="">
                            <h1 class="text-primary md:text-white font-extrabold text-xl md:text-4xl p-5 md:p-0 md:my-5 " >
                                Descubre el poder del conocimiento y las nuevas oportunidades.
                            </h1>
                        </div>
                        <div class="py-5">
                            <h2 class="flex md:hidden bg-secondary text-white font-bold w-4/5 justify-end px-2 py-1 text-xl">¿Qué te ofrece MASSCER?</h2>
                            <p class="text-sm md:text-base text-primary md:text-white text-center md:text-justify p-6 md:px-0" >
                                Un espacio para la formación integral en áreas técnicas y de desarrollo humano, en un entorno virtual, personalizado, con todas aquellas funcionalidades que simplifican y hacen más sencillo el proceso de autoaprendizaje a nivel global.
                            </p>
                            <p>
                                <a href="{{ route('register') }}" class="hidden md:inline-block bg-secondary text-white rounded-md my-5 py-2 px-4">Ingresar</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="hidden md:inline-flex md:w-3/5 h-full flex items-center pr-2">
                    <div class="container flex items-center h-[65vh] bg-center bg-no-repeat bg-contain bg-[url('/img/dots2.png')]">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/1bGpSFzRm_8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                        <!--<img class="md:w-4/5 h-auto mx-auto" src="{{ asset('img/working.png') }}" alt="">-->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="md:container py-5">
        <h1 class=" w-full inline-block bg-secondary text-white md:bg-transparent md:text-titles font-bold text-right md:text-left w-4/5 py-1 px-2 md:p-4 text-2xl md:text-2xl">
            Próximos Cursos LIVE
        </h1>

        <div class="flex w-full h-1/2 recents">
            @each('site.partials.product',$products,'product')
        </div>
    </div>


    {{--@include('site.partials.about')--}}

    {{-- @include('site.partials.interests2') --}}

    @if(count($recents) > 0)
        <div class="md:container py-10">
            <h2 class=" w-full inline-block bg-secondary text-white md:bg-transparent md:text-titles font-bold text-right md:text-left w-4/5 py-1 px-2 md:p-4 text-xl md:text-2xl">
                Sugerencias para ti
            </h2>
            <h3 class="text-center md:text-justify p-4 ">
                Clases prácticas, concretas y especializadas en las áreas de mayor demanda.
            </h3>
            <div class="flex w-full h-1/2 recents">

                @each('site.partials.course',$recents,'course')
            </div>
        </div>
    @endif

    @if(count($speakers) > 0)
        @include('site.partials.team',['speakers'=>$speakers])
    @endif

    <div class="bg-white">
        @include('site.partials.highlighted')
    </div>
</div>