@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')

<div class="relative h-[400px]" style="background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url('/storage/bg-sobre-nosotros.png'); background-size: cover; background-position: center;">
    <div class="max-w-[1184px] mx-auto flex flex-col justify-end items-start h-full">
        <div class="ml-4 relative z-10">
            <h1 class="text-xl md:text-2xl ml-1 text-white font-bold mb-4">Sobre Nosotros</h1>
            <p class="text-sm md:text-base ml-1 mb-4 text-white">Conectamos personas con eventos únicos y experiencias inolvidables</p>
        </div>
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 mb-4">
    <div class="w-full">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-4 mt-5 md:mt-0">
            <!-- Left column -->
            <div class="col-span-full mt-4 lg:col-span-4 rounded-[20px] lg:rounded-[32px]">
                <div>
                    <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-4">
                        Nuestra misión
                    </h3>
                    <p class="text-sm md:text-base">
                        En Tuentrada, nuestra misión es acercar a las personas a las experiencias que aman. Sabemos que cada evento representa un momento especial, y trabajamos para que adquirir boletos y organizar eventos sea sencillo, seguro y emocionante para todos.
                    </p>
                </div>
            </div>
            <!-- Right column -->
            <div class="col-span-full lg:col-span-7">
                <div class="w-full p-0 text-end">
                    <x-slider-sobre-nosotros />
                </div>
            </div>
        </div>
    </div>
</div>

<div style="background: #530BB4;" class="my-4">
    <div style="padding: 30px 60px" class="max-w-[1184px] mx-auto">
        <h3 style="color: #f8f8f8;" class="text-xl md:text-2xl p-1 md:px-6 font-bold mb-4 text-center">
            Nuestra Misión
        </h3>
        <p style="color: #f8f8f8;" class="text-sm md:text-base p-1 md:px-6 text-center">
            Tuentrada nació en 20XX con la visión de facilitar el acceso a eventos, festivales, conciertos y espectáculos en toda la región. Desde entonces, hemos crecido para ofrecer una variedad de opciones de eventos y funciones en más de [Número de ciudades/países]. Nuestro compromiso con la innovación y la calidad de servicio ha impulsado nuestro crecimiento continuo y la fidelidad de nuestros usuarios.
        </p>
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div>
        <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6">
            Nuestros Valores
        </h3>
    </div>
    <div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                <img src="{{ asset('storage/sobre-nosotros/stadium.svg') }}" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-3">Pasión por la Experiencia</h4>
                <p class="mt-2 text-gray-600 text-sm">Tu seguridad es nuestra prioridad. Garantizamos que todas tus transacciones y datos estén protegidos.</p>
            </div>
            <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                <img src="{{ asset('storage/sobre-nosotros/admin_panel_settings.svg') }}" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-3">Seguridad y Confianza</h4>
                <p class="mt-2 text-gray-600 text-sm">Tu seguridad es nuestra prioridad. Garantizamos que todas tus transacciones y datos estén protegidos.</p>
            </div>
            <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                <img src="{{ asset('storage/sobre-nosotros/lightbulb_2.svg') }}" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-3">Compromiso con la Innovación</h4>
                <p class="mt-2 text-gray-600 text-sm">Trabajamos constantemente para mejorar nuestra plataforma y ofrecerte una experiencia excepcional.</p>
            </div>
            <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                <img src="{{ asset('storage/sobre-nosotros/familiar_face_and_zone.svg') }}" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-3">Enfoque en el Cliente</h4>
                <p class="mt-2 text-gray-600 text-sm">Nos importa tu experiencia y siempre estamos aquí para ayudarte.</p>
            </div>
        </div>
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div>
        <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6 text-start">
            Conoce al Equipo
        </h3>
        <p class="text-sm md:text-base text-start mb-6">
            En Tuentrada, nuestra misión es acercar a las personas a las experiencias que aman. Sabemos que cada evento representa un momento especial, y trabajamos para que adquirir boletos y organizar eventos sea sencillo, seguro y emocionante para todos.
        </p>
    </div>
    <div>
        <div class="max-w-[1184px] mx-auto bg-white rounded-[40px] p-4 m-4 md:mt-4 md:p-8 border-2 border-gray-[#D9D8D8]">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white p-4 rounded-[24px] text-center">
                    <div class="hidden md:block lg:w-full">
                        <img src="{{ asset('storage/sobre-nosotros/image-0.png') }}" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="{{ asset('storage/sobre-nosotros/image-0h.png') }}" alt="Event Image" class="w-full object-cover rounded-lg"> 
                    </div>
                    <h4 class="font-medium text-base my-4">Pasión por la Experiencia</h4>
                    <p class="mt-2 text-gray-600 text-sm">Tu seguridad es nuestra prioridad. Garantizamos que todas tus transacciones y datos estén protegidos.</p>
                </div>
                <div class="bg-white p-4 rounded-[24px] text-center">
                    <div class="hidden md:block lg:w-full">
                        <img src="{{ asset('storage/sobre-nosotros/image-1.png') }}" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="{{ asset('storage/sobre-nosotros/image-1h.png') }}" alt="Event Image" class="w-full object-cover rounded-lg"> 
                    </div>
                    <h4 class="font-medium text-base my-4">Pasión por la Experiencia</h4>
                    <p class="mt-2 text-gray-600 text-sm">Tu seguridad es nuestra prioridad. Garantizamos que todas tus transacciones y datos estén protegidos.</p>
                </div>
                <div class="bg-white p-4 rounded-[24px] text-center">
                    <div class="hidden md:block lg:w-full">
                        <img src="{{ asset('storage/sobre-nosotros/image-2.png') }}" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="{{ asset('storage/sobre-nosotros/image-2h.png') }}" alt="Event Image" class="w-full object-cover rounded-lg"> 
                    </div>
                    <h4 class="font-medium text-base my-4">Pasión por la Experiencia</h4>
                    <p class="mt-2 text-gray-600 text-sm">Tu seguridad es nuestra prioridad. Garantizamos que todas tus transacciones y datos estén protegidos.</p>
                </div>
                <div class="bg-white p-4 rounded-[24px] text-center">
                    <div class="hidden md:block lg:w-full">
                        <img src="{{ asset('storage/sobre-nosotros/image-3.png') }}" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="{{ asset('storage/sobre-nosotros/image-3h.png') }}" alt="Event Image" class="w-full object-cover rounded-lg"> 
                    </div>
                    <h4 class="font-medium text-base my-4">Pasión por la Experiencia</h4>
                    <p class="mt-2 text-gray-600 text-sm">Tu seguridad es nuestra prioridad. Garantizamos que todas tus transacciones y datos estén protegidos.</p>
                </div>
            </div>
        </div>
    </div>
    
    
    
</div>



<div class="max-w-[1184px] mx-auto p-4">
    <div>
        <h2 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6 text-start">
            Lo que dicen nuestros usuarios
        </h2>
    </div>
    <div class="grid m-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow">
            <p class="mt-2 text-gray-600 text-sm md:text-base text-start">
                “Gracias a Tuentrada, encontré y compré boletos para mi festival favorito de manera rápida y sin complicaciones. Definitivamente volveré a usarla para futuros eventos.”
            </p>
            <div class="flex justify-start items-center ml-4 mt-4 gap-5">
                <img src="{{ asset('storage/sobre-nosotros/Ellipse15.png') }}" alt="">
                <p class="mt-2 font-bold text-sm md:text-base">Sofía Molina</p>
            </div>
        </div>
        <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow">
            <p class="mt-2 text-gray-600 text-sm md:text-base text-start">
                “Gracias a Tuentrada, encontré y compré boletos para mi festival favorito de manera rápida y sin complicaciones. Definitivamente volveré a usarla para futuros eventos.”
            </p>
            <div class="flex justify-start items-center ml-4 mt-4 gap-5">
                <img src="{{ asset('storage/sobre-nosotros/Ellipse15-1.png') }}" alt="">
                <p class="mt-2 font-bold text-sm md:text-base text-start">Sofía Molina</p>
            </div>
        </div>
        <div class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow">
            <p class="mt-2 text-gray-600 text-sm md:text-base text-start">
                “Gracias a Tuentrada, encontré y compré boletos para mi festival favorito de manera rápida y sin complicaciones. Definitivamente volveré a usarla para futuros eventos.”
            </p>
            <div class="flex justify-start items-center ml-4 mt-4 gap-5">
                <img src="{{ asset('storage/sobre-nosotros/Ellipse15-2.png') }}" alt="">
                <p class="mt-2 font-bold text-sm md:text-base text-start">Sofía Molina</p>
            </div>
        </div>
    </div>
</div>
@endsection