
{{-- USO: PAGINA PRINCIPAL - HOME --}}

{{-- Uso de un componente --}}
{{-- La vista welcome se forma de EXTENDER la plantilla principal
        1- Usando {x-} para llamar al componente hubicado en : APP/VIEW/COMPONENTS/AppLayout.php
        2- Componente que a su vez llama a la vista: (app) hubicada en : RESOURCES/VIEWS/LAYOUTS/app.blade.php  
           conocida como plantilla principal
        3- Todo lo que se agregue aqui se sustituira por el SLOT en la plantilla principal --}}

<x-app-layout>


    {{-- Portada --}}
    <section>

        {{-- Moño --}}
        {{-- <img style="width:50%" class="z-10 absolute bottom-0 left-0" src="{{ asset('img/home/AdobeStock_292882187.png') }}" alt=""> --}}
       
        {{-- Background --}}
        <div class="w-full mx-auto px-4 sm:px-6 lg:px-64 py-32 bg-cover" style="background-image: url('{{ asset('img/home/A_271271242.jpeg') }}') ;background-position:center">
        
            <div class="w-full md:w-3/4 lg:w-1/2">
                <h1 class="text-white text-7xl py-6" style="font-family: Sche">THE PALACE</h1>
                <h1 class="text-white text-bold text-4xl" style="font-family: Montserrat">
                    Seleciona el vestido mas hermoso del Palacio
                </h1>
                <p class="text-white font-bold text-lg mt-2 mb-4" style="font-family: Montserrat">
                    Aqui encontraras los estilos y marcas mas distinguidas en todo el pais, ven y visitanos en nuestras
                    sucursales
                </p>

                {{-- OCULTE EL BUSCADOR TEMPORALMENTE --}}
                @livewire('search')
            </div>
        </div>
        
    </section>

    {{-- VIDEO  --}}
    {{-- <section>
        <video id="my-video" class="video-js" controls preload="auto" width="auto" height="600" data-setup="{}" autoplay="off">
            <source src="/img/video/morilee.mp4" type='video/mp4'>
        </video>
        <div class="media">
            <div class="media-body">
                <iframe width="560" height="315" src="/img/video/morilee.mp4" frameborder="0" allowfullscreen>
                </iframe>
            </div>
        </div>
    </section> --}}

    
    

    {{-- Contenido --}}
    <section class="mt-4">
        <h1 class="text-gray-600 text-center text-3xl mb-6 font-bold" style="font-family: Montserrat">CONTENIDO</h1>
        <div
            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-8">
            <article>
                <figure>
                    <a href="{{ route('storefront') }}"><img class="rounded-xl h-36 w-full object-cover" src="{{ asset('img/home/one-3264681_640.jpg') }}" alt=""></a>
                   
                    <header mt-2>
                        <a href="{{ route('storefront') }}">
                            <h1 class="text-center text-xl text-gray-700">Mis quince</h1>
                        </a>
                    </header>

                    <a href="{{ route('storefront') }}">
                        <p>La mas grandes colleciones de vestidos en el centro del pais, pregunta por tu el paquete todo
                            incluido,
                            pon tu orden aqui y obten un coupon de descuento.</p>
                    </a>

                </figure>
            </article>

            <article>
                <figure>
                    <img class="rounded-xl h-36 w-full object-cover"
                        src="{{ asset('img/home/bride-1486004_640.jpg') }}" alt="">
                    <header mt-2>
                        <a href="{{ route('storefront') }}">
                            <h1 class="text-center text-xl text-gray-700">Estilos</h1>
                        </a>
                    </header>
                    <a href="{{ route('storefront') }}">
                        <p>Cada una de estas colleciones se han hecho con la mayor calidad en materiales y mano obra
                            artesanal, y
                            los diseñadores ponen en cada pieza nuestro valores, construmbres y tradiciones
                            mexicanas, en convinacion de colores y telas en la mas alta costura</p>
                    </a>

                </figure>
            </article>

            <article>
                <figure>
                    <img class="rounded-xl h-36 w-full object-cover" src="{{ asset('img/home/lr_quince_014.jpg') }}"
                        alt="">
                    <header mt-2>
                        <h1 class="text-center text-xl text-gray-700">Mi evento</h1>
                    </header>
                    <p>Viste y luce algunos de nuestros modelos, que en tu gran dia para ser el centro de tus quince con
                        el vestido de tus sueños.</p>
                </figure>
            </article>

            <article>
                <figure>
                    <img class="rounded-xl h-36 w-full object-cover" src="{{ asset('img/home/lr_quince_012.jpg') }}"
                        alt="">
                    <header mt-2>
                        <h1 class="text-center text-xl text-gray-700">Las fotografias</h1>
                    </header>
                    <p>Las fotografias son la historia misma de ese dia especial, nunca dejes de tener en imagenes tu
                        evento,
                        documenta lo mas que puedas, para asi recordarlo toda la vida.</p>
                </figure>
            </article>


        </div>
    </section>

    {{-- Banda 1 --}}
    <section class="mt-24 bg-gray-700 py-12">
        <h1 class="text-center text-white text-3xl">Buscar organizar tu evento ?</h1>
        <p class="text-center text-white">Dirigete al catalago de vestidos y seleciona tu favorito</p>

        <article>
            <figure>
                <img class="m-auto w-36 h-36" src="{{ asset('img/home/shield_05.png') }}" alt="">
                <header class="mt-2 W-FULL">
                    <a href="{{ route('storefront') }}">
                        <h1 class="text-center text-xl text-gray-700">Estilos</h1>
                    </a>
                </header>
            </figure>
        </article>
        <h1 class="text-center text-white text-3xl">THE PALACE COLLECTION</h1>

        <div class="flex justify-center my-4">
            <a href="{{ route('storefront') }}"
                class="bg-pink-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Catalagos de Vestidos
            </a>
        </div>

    </section>


    {{-- Portada --}}
    <section
        style="background-image: url('{{ asset('img/home/lr_quince_014.jpg') }}');background-size: 100%;background-repeat:no-repeat">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-48">
            <div class="w-full md:w-3/4 lg:w-1/2">
                <h1 class="text-white text-bold text-6xl py-6 justify-center font-Playfair Display SC">MY HEELS</h1>
                <h1 class="text-white text-bold text-4xl">
                    Sofisticados y con clase
                </h1>
                <p class="text-white font-bold text-lg mt-2 mb-4">
                    En varios colores y materiales los tacones no pueden faltar
                </p>

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

    {{-- Ultimos cursos o collecciones --}}
    <section class="my-24">
        <h1 class="text-center text-3xl text-gray-600">Ultimas Collectiones</h1>
        <p class="text-center text-gray-500 text-sm mb-6">Nuestro trabajo continuo es para la satisfaccion de nuestros
            clientes</p>

        {{-- Course Card - Tarjeta --}}

        {{-- NICE - (grid grid-cols-4 gap-x-6 gap-y-8) AGREGA UNA GRID CON CUATRO COLUMNAS --}}
        {{-- NICE 2 - (grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-8)  MISMNO GRID CON 4 COLUMNAS PERO RESPONSIVAS --}}

        {{-- 1- Aqui la tarjeta que es un componente de blade se manda llamar
                 2- Al mismo tiempo se envian los datos de la variable $course
                OJO EN COGIDO PHP para lo cual se le ponen 2 puntos (:) --}}
        {{-- <div
            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-8">
            @foreach ($courses as $course)
                <x-course-card :course="$course" />
            @endforeach
        </div> --}}


        {{-- Product Card --}}
        <div
            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-8">
            @foreach ($products as $product)
                <x-product-card :product="$product" />
            @endforeach
        </div>


    </section>

    <section>
        <hr>
        <p class=" text-sm max-w-7xl mx-auto px-4">THE PALACE is a Trademark with Copyright 2021 THE PALACE Inc. DESIGN
            by Nucleus-Technologies Copyright 2021<a class="text-blue-500 font-bold" href="">Terminnos y condiciones</a>
        </p>
    </section>

</x-app-layout>
