@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="ml-4 pb-4 flex flex-col justify-end items-start h-full 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 class="max-w-[1184px] mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 p-4 mt-8">
    <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>
        <x-slider-sobre-nosotros />
    </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 font-bold mb-4 text-center">
            Nuestra Misión
        </h3>
        <p style="color: #f8f8f8;" class="text-sm md:text-base text-center">
            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 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="/storage/centro-ayuda/comprar entradas.svg" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-1">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="/storage/centro-ayuda/Durante evento.svg" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-1">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="/storage/centro-ayuda/Devoluciones.svg" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-1">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="/storage/centro-ayuda/Medios Pago.svg" class="flex mx-auto" alt="">
                <h4 class="font-medium text-base my-1">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 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="storage/sobre-nosotros/image-0.png" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="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="storage/sobre-nosotros/image-1.png" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="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="storage/sobre-nosotros/image-2.png" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="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="storage/sobre-nosotros/image-3.png" alt="Event Image" class="h-full object-cover rounded-lg">
                    </div>
                    <div class="block md:hidden">
                        <img src="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="/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="/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="/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