@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
<div class="bg-gradient-to-r from-purple-200 to-purple-900 relative">
    <x-input-main />
    <x-slider-category />
</div>
<div class="max-w-[1280px] mx-auto mt-[-100px] md:mt-[-150px]">
    <x-slider-main />
</div>
    <div class="max-w-[1184px] mx-auto bg-white md:rounded-[40px] mt-4 py-4">
        <div class="max-w-[1280px] mx-auto md:px-[20px] px-2">
            <div class="flex items-center justify-between">
                <h1 class="md:text-xl text-lg font-bold pt-5">Encuentra algo cerca de ti en vaope.com <span class="text-purple-600">Lima <i class="fas fa-chevron-down"></i></span></h1>
            </div>
            
            <div id="tabContainer"
                class="flex mt-4 whitespace-nowrap no-scrollbar touch-pan-x snap-x snap-mandatory scroll-smooth overflow-x-hidden"
                style="scroll-behavior: smooth;">
                
                <a href="#" 
                class="pb-1 mr-16 select-none snap-start tab-link" 
                data-tab="todos">Todos</a>
                
                <a href="#" 
                class="pb-1 mr-16 select-none snap-start tab-link" 
                data-tab="hoy">Hoy</a>
                
                <a href="#" 
                class="pb-1 mr-16 select-none snap-start tab-link" 
                data-tab="finde">Este fin de semana</a>
                
                <a href="#" 
                class="pb-1 mr-16 select-none snap-start tab-link" 
                data-tab="gratis">Gratis</a>
            </div>
        
        <script>
        document.addEventListener("DOMContentLoaded", () => {
            const container = document.getElementById("tabContainer");
            let isDragging = false;
            let startX = 0;
            let scrollLeft = 0;
        
            // Función para manejar el inicio del arrastre
            function handleMouseDown(e) {
                if (e.target.tagName === "A") return; // Evitar arrastre si se hace clic en un enlace
                isDragging = true;
                startX = e.pageX - container.offsetLeft;
                scrollLeft = container.scrollLeft;
            }
        
            // Función para manejar el movimiento del mouse
            function handleMouseMove(e) {
                if (!isDragging) return;
                e.preventDefault();
                const x = e.pageX - container.offsetLeft;
                const walk = (x - startX) * 2; // Multiplicador para ajustar la sensibilidad
                container.scrollLeft = scrollLeft - walk;
            }
        
            // Función para detener el arrastre
            function handleMouseUp() {
                isDragging = false;
            }
        
            // Función para centrar un tab al hacer clic
            function scrollToCenter(tab) {
                const containerWidth = container.offsetWidth;
                const tabWidth = tab.offsetWidth;
                const offset = tab.offsetLeft - (containerWidth / 2) + (tabWidth / 2);
        
                container.scrollTo({
                    left: offset,
                    behavior: "smooth",
                });
            }
        
            // Función para activar un tab
            function activateTab(tab) {
                // Desactivar todos los tabs
                document.querySelectorAll("#tabContainer .tab-link").forEach((link) => {
                    link.classList.remove("text-purple-600", "border-b-2", "border-purple-600");
                    link.classList.add("text-gray-600");
                });
        
                // Activar el tab seleccionado
                tab.classList.remove("text-gray-600");
                tab.classList.add("text-purple-600", "border-b-2", "border-purple-600");
            }
        
            // Eventos de ratón
            container.addEventListener("mousedown", handleMouseDown);
            container.addEventListener("mousemove", handleMouseMove);
            container.addEventListener("mouseup", handleMouseUp);
            container.addEventListener("mouseleave", handleMouseUp);
        
            // Eventos táctiles para dispositivos móviles
            container.addEventListener("touchstart", (e) => {
                const touch = e.touches[0];
                handleMouseDown(touch);
            });
        
            container.addEventListener("touchmove", (e) => {
                const touch = e.touches[0];
                handleMouseMove(touch);
            });
        
            container.addEventListener("touchend", handleMouseUp);
        
            // Agregar eventos de clic a los tabs
            document.querySelectorAll("#tabContainer .tab-link").forEach((tab) => {
                tab.addEventListener("click", (e) => {
                    e.preventDefault(); // Evitar el comportamiento predeterminado del enlace
                    activateTab(tab); // Activar el tab
                    scrollToCenter(tab); // Desplazar suavemente al centro
                });
            });
        });
        </script>
        
        <style>
            /* Ocultar la barra de desplazamiento */
            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }
            .no-scrollbar {
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE y Edge */
            }
            
            /* Estilos para los tabs */
            .tab-link {
                text-decoration: none;
                cursor: pointer;
                transition: all 0.3s ease;
            }
            .tab-link.text-purple-600 {
                color: #7e22ce; /* Color activo */
            }
            .tab-link.border-b-2 {
                border-bottom-width: 2px;
            }
            .tab-link.text-gray-600 {
                color: #6b7280; /* Color inactivo */
            }
        </style>

            <h1 class="md:text-xl text-lg font-bold pt-6">Eventos Destacados <span class="text-purple-600 text-sm">Ver más</span></h1>
            <div class="flex flex-col gap-y-3 md:grid md:grid-cols-2 lg:grid-cols-3 gap-4  mt-4 justify-center">
                <x-card>  
                    <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                    
                    <div class="md:px-1 md:pt-4">
                        <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                                <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                    <img src="storage/icons/calendar_today.svg" />
                                    <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre • 8:00pm</span>
                                </div>
                                <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                    <span class="text-grey-400 text-xs px-1 py-1">Concierto</span>
                                </div>
                        </div>
                            <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To The Earth?</div>
                            <p class="text-grey-300 text-base mb-2">
                                Estadio Nacional
                            </p>
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-500 bg-white bg-opacity-75">
                        <a href="/detalle-evento">
                            <button class="btn-sm btn-primary text-white flex items-center gap-x-2">
                                <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.83334 14.0152C1.37501 14.0152 0.982644 13.8521 0.656255 13.5257C0.329866 13.1993 0.166672 12.8069 0.166672 12.3486V9.53608C0.166672 9.3833 0.215283 9.25136 0.312505 9.14025C0.409727 9.02914 0.534727 8.95969 0.687505 8.93192C1.02084 8.8208 1.29514 8.61942 1.51042 8.32775C1.7257 8.03608 1.83334 7.70969 1.83334 7.34858C1.83334 6.98747 1.7257 6.66108 1.51042 6.36942C1.29514 6.07775 1.02084 5.87636 0.687505 5.76525C0.534727 5.73747 0.409727 5.66803 0.312505 5.55692C0.215283 5.4458 0.166672 5.31386 0.166672 5.16108V2.34858C0.166672 1.89025 0.329866 1.49789 0.656255 1.1715C0.982644 0.84511 1.37501 0.681915 1.83334 0.681915H15.1667C15.625 0.681915 16.0174 0.84511 16.3438 1.1715C16.6701 1.49789 16.8333 1.89025 16.8333 2.34858V5.16108C16.8333 5.31386 16.7847 5.4458 16.6875 5.55692C16.5903 5.66803 16.4653 5.73747 16.3125 5.76525C15.9792 5.87636 15.7049 6.07775 15.4896 6.36942C15.2743 6.66108 15.1667 6.98747 15.1667 7.34858C15.1667 7.70969 15.2743 8.03608 15.4896 8.32775C15.7049 8.61942 15.9792 8.8208 16.3125 8.93192C16.4653 8.95969 16.5903 9.02914 16.6875 9.14025C16.7847 9.25136 16.8333 9.3833 16.8333 9.53608V12.3486C16.8333 12.8069 16.6701 13.1993 16.3438 13.5257C16.0174 13.8521 15.625 14.0152 15.1667 14.0152H1.83334ZM1.83334 12.3486H15.1667V10.2236C14.6528 9.91803 14.2465 9.51178 13.9479 9.00483C13.6493 8.49789 13.5 7.9458 13.5 7.34858C13.5 6.75136 13.6493 6.19928 13.9479 5.69233C14.2465 5.18539 14.6528 4.77914 15.1667 4.47358V2.34858H1.83334V4.47358C2.34723 4.77914 2.75348 5.18539 3.05209 5.69233C3.3507 6.19928 3.50001 6.75136 3.50001 7.34858C3.50001 7.9458 3.3507 8.49789 3.05209 9.00483C2.75348 9.51178 2.34723 9.91803 1.83334 10.2236V12.3486ZM8.50001 11.5152C8.73612 11.5152 8.93403 11.4354 9.09376 11.2757C9.25348 11.1159 9.33334 10.918 9.33334 10.6819C9.33334 10.4458 9.25348 10.2479 9.09376 10.0882C8.93403 9.92844 8.73612 9.84858 8.50001 9.84858C8.26389 9.84858 8.06598 9.92844 7.90626 10.0882C7.74653 10.2479 7.66667 10.4458 7.66667 10.6819C7.66667 10.918 7.74653 11.1159 7.90626 11.2757C8.06598 11.4354 8.26389 11.5152 8.50001 11.5152ZM8.50001 8.18192C8.73612 8.18192 8.93403 8.10205 9.09376 7.94233C9.25348 7.78261 9.33334 7.58469 9.33334 7.34858C9.33334 7.11247 9.25348 6.91455 9.09376 6.75483C8.93403 6.59511 8.73612 6.51525 8.50001 6.51525C8.26389 6.51525 8.06598 6.59511 7.90626 6.75483C7.74653 6.91455 7.66667 7.11247 7.66667 7.34858C7.66667 7.58469 7.74653 7.78261 7.90626 7.94233C8.06598 8.10205 8.26389 8.18192 8.50001 8.18192ZM8.50001 4.84858C8.73612 4.84858 8.93403 4.76872 9.09376 4.609C9.25348 4.44928 9.33334 4.25136 9.33334 4.01525C9.33334 3.77914 9.25348 3.58122 9.09376 3.4215C8.93403 3.26178 8.73612 3.18192 8.50001 3.18192C8.26389 3.18192 8.06598 3.26178 7.90626 3.4215C7.74653 3.58122 7.66667 3.77914 7.66667 4.01525C7.66667 4.25136 7.74653 4.44928 7.90626 4.609C8.06598 4.76872 8.26389 4.84858 8.50001 4.84858Z" fill="#262626"/>
                                </svg>                
                                Comprar
                            </button>
                        </a>
                    </div>
                </x-card>
                <x-card>  
                    <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                    
                    <div class="md:px-1 md:pt-4">
                        <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                                <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                    <img src="storage/icons/calendar_today.svg" />
                                    <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre • 8:00pm</span>
                                </div>
                                <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                    <span class="text-grey-400 text-xs px-1 py-1">Concierto</span>
                                </div>
                        </div>
                            <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To The Earth?</div>
                            <p class="text-grey-300 text-base mb-2">
                                Estadio Nacional
                            </p>
                            <p class="text-grey-500 text-base mb-2">
                                Desde S/120.00
                            </p>
                
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-500 bg-white bg-opacity-75">
                        <a href="/detalle-evento">
                            <button class="btn-sm btn-primary text-white flex items-center gap-x-2">
                                <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.83334 14.0152C1.37501 14.0152 0.982644 13.8521 0.656255 13.5257C0.329866 13.1993 0.166672 12.8069 0.166672 12.3486V9.53608C0.166672 9.3833 0.215283 9.25136 0.312505 9.14025C0.409727 9.02914 0.534727 8.95969 0.687505 8.93192C1.02084 8.8208 1.29514 8.61942 1.51042 8.32775C1.7257 8.03608 1.83334 7.70969 1.83334 7.34858C1.83334 6.98747 1.7257 6.66108 1.51042 6.36942C1.29514 6.07775 1.02084 5.87636 0.687505 5.76525C0.534727 5.73747 0.409727 5.66803 0.312505 5.55692C0.215283 5.4458 0.166672 5.31386 0.166672 5.16108V2.34858C0.166672 1.89025 0.329866 1.49789 0.656255 1.1715C0.982644 0.84511 1.37501 0.681915 1.83334 0.681915H15.1667C15.625 0.681915 16.0174 0.84511 16.3438 1.1715C16.6701 1.49789 16.8333 1.89025 16.8333 2.34858V5.16108C16.8333 5.31386 16.7847 5.4458 16.6875 5.55692C16.5903 5.66803 16.4653 5.73747 16.3125 5.76525C15.9792 5.87636 15.7049 6.07775 15.4896 6.36942C15.2743 6.66108 15.1667 6.98747 15.1667 7.34858C15.1667 7.70969 15.2743 8.03608 15.4896 8.32775C15.7049 8.61942 15.9792 8.8208 16.3125 8.93192C16.4653 8.95969 16.5903 9.02914 16.6875 9.14025C16.7847 9.25136 16.8333 9.3833 16.8333 9.53608V12.3486C16.8333 12.8069 16.6701 13.1993 16.3438 13.5257C16.0174 13.8521 15.625 14.0152 15.1667 14.0152H1.83334ZM1.83334 12.3486H15.1667V10.2236C14.6528 9.91803 14.2465 9.51178 13.9479 9.00483C13.6493 8.49789 13.5 7.9458 13.5 7.34858C13.5 6.75136 13.6493 6.19928 13.9479 5.69233C14.2465 5.18539 14.6528 4.77914 15.1667 4.47358V2.34858H1.83334V4.47358C2.34723 4.77914 2.75348 5.18539 3.05209 5.69233C3.3507 6.19928 3.50001 6.75136 3.50001 7.34858C3.50001 7.9458 3.3507 8.49789 3.05209 9.00483C2.75348 9.51178 2.34723 9.91803 1.83334 10.2236V12.3486ZM8.50001 11.5152C8.73612 11.5152 8.93403 11.4354 9.09376 11.2757C9.25348 11.1159 9.33334 10.918 9.33334 10.6819C9.33334 10.4458 9.25348 10.2479 9.09376 10.0882C8.93403 9.92844 8.73612 9.84858 8.50001 9.84858C8.26389 9.84858 8.06598 9.92844 7.90626 10.0882C7.74653 10.2479 7.66667 10.4458 7.66667 10.6819C7.66667 10.918 7.74653 11.1159 7.90626 11.2757C8.06598 11.4354 8.26389 11.5152 8.50001 11.5152ZM8.50001 8.18192C8.73612 8.18192 8.93403 8.10205 9.09376 7.94233C9.25348 7.78261 9.33334 7.58469 9.33334 7.34858C9.33334 7.11247 9.25348 6.91455 9.09376 6.75483C8.93403 6.59511 8.73612 6.51525 8.50001 6.51525C8.26389 6.51525 8.06598 6.59511 7.90626 6.75483C7.74653 6.91455 7.66667 7.11247 7.66667 7.34858C7.66667 7.58469 7.74653 7.78261 7.90626 7.94233C8.06598 8.10205 8.26389 8.18192 8.50001 8.18192ZM8.50001 4.84858C8.73612 4.84858 8.93403 4.76872 9.09376 4.609C9.25348 4.44928 9.33334 4.25136 9.33334 4.01525C9.33334 3.77914 9.25348 3.58122 9.09376 3.4215C8.93403 3.26178 8.73612 3.18192 8.50001 3.18192C8.26389 3.18192 8.06598 3.26178 7.90626 3.4215C7.74653 3.58122 7.66667 3.77914 7.66667 4.01525C7.66667 4.25136 7.74653 4.44928 7.90626 4.609C8.06598 4.76872 8.26389 4.84858 8.50001 4.84858Z" fill="#262626"/>
                                </svg>                
                                Comprar
                            </button>
                        </a>
                    </div>
                </x-card>
                <a href="" class="col-span-2 lg:col-span-1 md:col-span-1"><img src="storage/create-event.png" alt="Event Image" class="w-full rounded-lg h-[95%] hidden md:block"></a>
                <x-card>  
                    <img class="w-full" src="/storage/detalle-evento/1351-WEB-FESTIVAL-ROCK-.jpg" alt="Event Image">
                    
                    <div class="md:px-1 md:pt-4">
                        <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                                <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                    <img src="storage/icons/calendar_today.svg" />
                                    <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre • 8:00pm</span>
                                </div>
                                <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                    <span class="text-grey-400 text-xs px-1 py-1">Concierto</span>
                                </div>
                        </div>
                            <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To The Earth?</div>
                            <p class="text-grey-300 text-base mb-2">
                                Estadio Nacional
                            </p>
                            <p class="text-grey-500 text-base mb-2">
                                Desde S/120.00
                            </p>
                
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-500 bg-white bg-opacity-75">
                        <a href="/detalle-evento-2">
                            <button class="btn-sm btn-primary text-white flex items-center gap-x-2">
                                <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.83334 14.0152C1.37501 14.0152 0.982644 13.8521 0.656255 13.5257C0.329866 13.1993 0.166672 12.8069 0.166672 12.3486V9.53608C0.166672 9.3833 0.215283 9.25136 0.312505 9.14025C0.409727 9.02914 0.534727 8.95969 0.687505 8.93192C1.02084 8.8208 1.29514 8.61942 1.51042 8.32775C1.7257 8.03608 1.83334 7.70969 1.83334 7.34858C1.83334 6.98747 1.7257 6.66108 1.51042 6.36942C1.29514 6.07775 1.02084 5.87636 0.687505 5.76525C0.534727 5.73747 0.409727 5.66803 0.312505 5.55692C0.215283 5.4458 0.166672 5.31386 0.166672 5.16108V2.34858C0.166672 1.89025 0.329866 1.49789 0.656255 1.1715C0.982644 0.84511 1.37501 0.681915 1.83334 0.681915H15.1667C15.625 0.681915 16.0174 0.84511 16.3438 1.1715C16.6701 1.49789 16.8333 1.89025 16.8333 2.34858V5.16108C16.8333 5.31386 16.7847 5.4458 16.6875 5.55692C16.5903 5.66803 16.4653 5.73747 16.3125 5.76525C15.9792 5.87636 15.7049 6.07775 15.4896 6.36942C15.2743 6.66108 15.1667 6.98747 15.1667 7.34858C15.1667 7.70969 15.2743 8.03608 15.4896 8.32775C15.7049 8.61942 15.9792 8.8208 16.3125 8.93192C16.4653 8.95969 16.5903 9.02914 16.6875 9.14025C16.7847 9.25136 16.8333 9.3833 16.8333 9.53608V12.3486C16.8333 12.8069 16.6701 13.1993 16.3438 13.5257C16.0174 13.8521 15.625 14.0152 15.1667 14.0152H1.83334ZM1.83334 12.3486H15.1667V10.2236C14.6528 9.91803 14.2465 9.51178 13.9479 9.00483C13.6493 8.49789 13.5 7.9458 13.5 7.34858C13.5 6.75136 13.6493 6.19928 13.9479 5.69233C14.2465 5.18539 14.6528 4.77914 15.1667 4.47358V2.34858H1.83334V4.47358C2.34723 4.77914 2.75348 5.18539 3.05209 5.69233C3.3507 6.19928 3.50001 6.75136 3.50001 7.34858C3.50001 7.9458 3.3507 8.49789 3.05209 9.00483C2.75348 9.51178 2.34723 9.91803 1.83334 10.2236V12.3486ZM8.50001 11.5152C8.73612 11.5152 8.93403 11.4354 9.09376 11.2757C9.25348 11.1159 9.33334 10.918 9.33334 10.6819C9.33334 10.4458 9.25348 10.2479 9.09376 10.0882C8.93403 9.92844 8.73612 9.84858 8.50001 9.84858C8.26389 9.84858 8.06598 9.92844 7.90626 10.0882C7.74653 10.2479 7.66667 10.4458 7.66667 10.6819C7.66667 10.918 7.74653 11.1159 7.90626 11.2757C8.06598 11.4354 8.26389 11.5152 8.50001 11.5152ZM8.50001 8.18192C8.73612 8.18192 8.93403 8.10205 9.09376 7.94233C9.25348 7.78261 9.33334 7.58469 9.33334 7.34858C9.33334 7.11247 9.25348 6.91455 9.09376 6.75483C8.93403 6.59511 8.73612 6.51525 8.50001 6.51525C8.26389 6.51525 8.06598 6.59511 7.90626 6.75483C7.74653 6.91455 7.66667 7.11247 7.66667 7.34858C7.66667 7.58469 7.74653 7.78261 7.90626 7.94233C8.06598 8.10205 8.26389 8.18192 8.50001 8.18192ZM8.50001 4.84858C8.73612 4.84858 8.93403 4.76872 9.09376 4.609C9.25348 4.44928 9.33334 4.25136 9.33334 4.01525C9.33334 3.77914 9.25348 3.58122 9.09376 3.4215C8.93403 3.26178 8.73612 3.18192 8.50001 3.18192C8.26389 3.18192 8.06598 3.26178 7.90626 3.4215C7.74653 3.58122 7.66667 3.77914 7.66667 4.01525C7.66667 4.25136 7.74653 4.44928 7.90626 4.609C8.06598 4.76872 8.26389 4.84858 8.50001 4.84858Z" fill="#262626"/>
                                </svg>                
                                Comprar
                            </button>
                        </a>
                    </div>
                </x-card>
                <x-card>  
                    <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                    
                    <div class="md:px-1 md:pt-4">
                        <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                                <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                    <img src="storage/icons/calendar_today.svg" />
                                    <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre • 8:00pm</span>
                                </div>
                                <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                    <span class="text-grey-400 text-xs px-1 py-1">Concierto</span>
                                </div>
                        </div>
                            <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To The Earth?</div>
                            <p class="text-grey-300 text-base mb-2">
                                Estadio Nacional
                            </p>
                            <p class="text-grey-500 text-base mb-2">
                                Desde S/120.00
                            </p>
                
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-500 bg-white bg-opacity-75">
                        <a href="/detalle-evento">
                            <button class="btn-sm btn-primary text-white flex items-center gap-x-2">
                                <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.83334 14.0152C1.37501 14.0152 0.982644 13.8521 0.656255 13.5257C0.329866 13.1993 0.166672 12.8069 0.166672 12.3486V9.53608C0.166672 9.3833 0.215283 9.25136 0.312505 9.14025C0.409727 9.02914 0.534727 8.95969 0.687505 8.93192C1.02084 8.8208 1.29514 8.61942 1.51042 8.32775C1.7257 8.03608 1.83334 7.70969 1.83334 7.34858C1.83334 6.98747 1.7257 6.66108 1.51042 6.36942C1.29514 6.07775 1.02084 5.87636 0.687505 5.76525C0.534727 5.73747 0.409727 5.66803 0.312505 5.55692C0.215283 5.4458 0.166672 5.31386 0.166672 5.16108V2.34858C0.166672 1.89025 0.329866 1.49789 0.656255 1.1715C0.982644 0.84511 1.37501 0.681915 1.83334 0.681915H15.1667C15.625 0.681915 16.0174 0.84511 16.3438 1.1715C16.6701 1.49789 16.8333 1.89025 16.8333 2.34858V5.16108C16.8333 5.31386 16.7847 5.4458 16.6875 5.55692C16.5903 5.66803 16.4653 5.73747 16.3125 5.76525C15.9792 5.87636 15.7049 6.07775 15.4896 6.36942C15.2743 6.66108 15.1667 6.98747 15.1667 7.34858C15.1667 7.70969 15.2743 8.03608 15.4896 8.32775C15.7049 8.61942 15.9792 8.8208 16.3125 8.93192C16.4653 8.95969 16.5903 9.02914 16.6875 9.14025C16.7847 9.25136 16.8333 9.3833 16.8333 9.53608V12.3486C16.8333 12.8069 16.6701 13.1993 16.3438 13.5257C16.0174 13.8521 15.625 14.0152 15.1667 14.0152H1.83334ZM1.83334 12.3486H15.1667V10.2236C14.6528 9.91803 14.2465 9.51178 13.9479 9.00483C13.6493 8.49789 13.5 7.9458 13.5 7.34858C13.5 6.75136 13.6493 6.19928 13.9479 5.69233C14.2465 5.18539 14.6528 4.77914 15.1667 4.47358V2.34858H1.83334V4.47358C2.34723 4.77914 2.75348 5.18539 3.05209 5.69233C3.3507 6.19928 3.50001 6.75136 3.50001 7.34858C3.50001 7.9458 3.3507 8.49789 3.05209 9.00483C2.75348 9.51178 2.34723 9.91803 1.83334 10.2236V12.3486ZM8.50001 11.5152C8.73612 11.5152 8.93403 11.4354 9.09376 11.2757C9.25348 11.1159 9.33334 10.918 9.33334 10.6819C9.33334 10.4458 9.25348 10.2479 9.09376 10.0882C8.93403 9.92844 8.73612 9.84858 8.50001 9.84858C8.26389 9.84858 8.06598 9.92844 7.90626 10.0882C7.74653 10.2479 7.66667 10.4458 7.66667 10.6819C7.66667 10.918 7.74653 11.1159 7.90626 11.2757C8.06598 11.4354 8.26389 11.5152 8.50001 11.5152ZM8.50001 8.18192C8.73612 8.18192 8.93403 8.10205 9.09376 7.94233C9.25348 7.78261 9.33334 7.58469 9.33334 7.34858C9.33334 7.11247 9.25348 6.91455 9.09376 6.75483C8.93403 6.59511 8.73612 6.51525 8.50001 6.51525C8.26389 6.51525 8.06598 6.59511 7.90626 6.75483C7.74653 6.91455 7.66667 7.11247 7.66667 7.34858C7.66667 7.58469 7.74653 7.78261 7.90626 7.94233C8.06598 8.10205 8.26389 8.18192 8.50001 8.18192ZM8.50001 4.84858C8.73612 4.84858 8.93403 4.76872 9.09376 4.609C9.25348 4.44928 9.33334 4.25136 9.33334 4.01525C9.33334 3.77914 9.25348 3.58122 9.09376 3.4215C8.93403 3.26178 8.73612 3.18192 8.50001 3.18192C8.26389 3.18192 8.06598 3.26178 7.90626 3.4215C7.74653 3.58122 7.66667 3.77914 7.66667 4.01525C7.66667 4.25136 7.74653 4.44928 7.90626 4.609C8.06598 4.76872 8.26389 4.84858 8.50001 4.84858Z" fill="#262626"/>
                                </svg>                
                                Comprar
                            </button>
                        </a>
                    </div>
                </x-card>
                <x-card>  
                    <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                    
                    <div class="md:px-1 md:pt-4">
                        <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                                <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                    <img src="storage/icons/calendar_today.svg" />
                                    <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre • 8:00pm</span>
                                </div>
                                <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                    <span class="text-grey-400 text-xs px-1 py-1">Concierto</span>
                                </div>
                        </div>
                            <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To The Earth?</div>
                            <p class="text-grey-300 text-base mb-2">
                                Estadio Nacional
                            </p>
                            <p class="text-grey-500 text-base mb-2">
                                Desde S/120.00
                            </p>
                
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-500 bg-white bg-opacity-75">
                        <a href="/checkout">
                            <button class="btn-sm btn-primary text-white flex items-center gap-x-2">
                                <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.83334 14.0152C1.37501 14.0152 0.982644 13.8521 0.656255 13.5257C0.329866 13.1993 0.166672 12.8069 0.166672 12.3486V9.53608C0.166672 9.3833 0.215283 9.25136 0.312505 9.14025C0.409727 9.02914 0.534727 8.95969 0.687505 8.93192C1.02084 8.8208 1.29514 8.61942 1.51042 8.32775C1.7257 8.03608 1.83334 7.70969 1.83334 7.34858C1.83334 6.98747 1.7257 6.66108 1.51042 6.36942C1.29514 6.07775 1.02084 5.87636 0.687505 5.76525C0.534727 5.73747 0.409727 5.66803 0.312505 5.55692C0.215283 5.4458 0.166672 5.31386 0.166672 5.16108V2.34858C0.166672 1.89025 0.329866 1.49789 0.656255 1.1715C0.982644 0.84511 1.37501 0.681915 1.83334 0.681915H15.1667C15.625 0.681915 16.0174 0.84511 16.3438 1.1715C16.6701 1.49789 16.8333 1.89025 16.8333 2.34858V5.16108C16.8333 5.31386 16.7847 5.4458 16.6875 5.55692C16.5903 5.66803 16.4653 5.73747 16.3125 5.76525C15.9792 5.87636 15.7049 6.07775 15.4896 6.36942C15.2743 6.66108 15.1667 6.98747 15.1667 7.34858C15.1667 7.70969 15.2743 8.03608 15.4896 8.32775C15.7049 8.61942 15.9792 8.8208 16.3125 8.93192C16.4653 8.95969 16.5903 9.02914 16.6875 9.14025C16.7847 9.25136 16.8333 9.3833 16.8333 9.53608V12.3486C16.8333 12.8069 16.6701 13.1993 16.3438 13.5257C16.0174 13.8521 15.625 14.0152 15.1667 14.0152H1.83334ZM1.83334 12.3486H15.1667V10.2236C14.6528 9.91803 14.2465 9.51178 13.9479 9.00483C13.6493 8.49789 13.5 7.9458 13.5 7.34858C13.5 6.75136 13.6493 6.19928 13.9479 5.69233C14.2465 5.18539 14.6528 4.77914 15.1667 4.47358V2.34858H1.83334V4.47358C2.34723 4.77914 2.75348 5.18539 3.05209 5.69233C3.3507 6.19928 3.50001 6.75136 3.50001 7.34858C3.50001 7.9458 3.3507 8.49789 3.05209 9.00483C2.75348 9.51178 2.34723 9.91803 1.83334 10.2236V12.3486ZM8.50001 11.5152C8.73612 11.5152 8.93403 11.4354 9.09376 11.2757C9.25348 11.1159 9.33334 10.918 9.33334 10.6819C9.33334 10.4458 9.25348 10.2479 9.09376 10.0882C8.93403 9.92844 8.73612 9.84858 8.50001 9.84858C8.26389 9.84858 8.06598 9.92844 7.90626 10.0882C7.74653 10.2479 7.66667 10.4458 7.66667 10.6819C7.66667 10.918 7.74653 11.1159 7.90626 11.2757C8.06598 11.4354 8.26389 11.5152 8.50001 11.5152ZM8.50001 8.18192C8.73612 8.18192 8.93403 8.10205 9.09376 7.94233C9.25348 7.78261 9.33334 7.58469 9.33334 7.34858C9.33334 7.11247 9.25348 6.91455 9.09376 6.75483C8.93403 6.59511 8.73612 6.51525 8.50001 6.51525C8.26389 6.51525 8.06598 6.59511 7.90626 6.75483C7.74653 6.91455 7.66667 7.11247 7.66667 7.34858C7.66667 7.58469 7.74653 7.78261 7.90626 7.94233C8.06598 8.10205 8.26389 8.18192 8.50001 8.18192ZM8.50001 4.84858C8.73612 4.84858 8.93403 4.76872 9.09376 4.609C9.25348 4.44928 9.33334 4.25136 9.33334 4.01525C9.33334 3.77914 9.25348 3.58122 9.09376 3.4215C8.93403 3.26178 8.73612 3.18192 8.50001 3.18192C8.26389 3.18192 8.06598 3.26178 7.90626 3.4215C7.74653 3.58122 7.66667 3.77914 7.66667 4.01525C7.66667 4.25136 7.74653 4.44928 7.90626 4.609C8.06598 4.76872 8.26389 4.84858 8.50001 4.84858Z" fill="#262626"/>
                                </svg>                
                                Comprar
                            </button>
                        </a>
                    </div>
                </x-card>
            </div>
        </div>
    </div>
        <div class="max-w-[1180px] mx-auto px-2">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div class="hidden md:block md:w-full md:col-span-2">
                    <a href="/crear-evento">
                        <img src="storage/create-event-lg.png" alt="Event Image" class="w-full rounded-lg h-auto">
                    </a>
                </div>
                <div class="block md:hidden p-4 mx-auto">
                    <a href="/crear-evento">
                        <img src="storage/create-event.png" alt="Event Image" class="w-auto rounded-lg h-auto">
                    </a> 
                </div>
            </div>
        </div>
@endsection