---
import Layout from "../../layouts/Layout.astro";
---

<Layout title="Nosotros">
  <div class="">
    <h1 class=" mx-10 font-bold text-4xl text-lime-800 mt-16">Bienvenidos a Oliva Mia</h1>
    <hr class="mx-10 border-2 border-lime-700 rounded"/>
  </div>

  <div class="grid md:grid-cols-2 grid-rows-2 mx-10 my-16 gap-10">
  
    <section id="Nosotros" class="row-span-2">
      <div class="bg-white p-8 rounded-3xl hover:shadow-2xl hover:scale-105 transition-transform duration-300">
        <h1 class="text-left font-bold text-3xl mb-4 text-slate-800">Nosotros</h1>
        <p class="text-xl text-slate-600 leading-relaxed">Somos una empresa dedicada a ofrecer los mejores productos de aceite de oliva, cuidadosamente seleccionados y elaborados para brindarte calidad y sabor en cada gota. En Oliva Mia nos apasiona el mundo de la oliva, y trabajamos con productores locales que comparten nuestra filosofía de ofrecer productos frescos, naturales y sostenibles.</p>
        <img src="/public/img/focaccia.png" 
        alt="Foccacia" 
        class="w-full h-96 mx-auto my-4 rounded-xl object-cover"/>
      </div>
  </section>
    
    <div class="bg-white p-8 rounded-3xl hover:shadow-2xl hover:scale-105 transition-transform duration-300">
      <h1 class="font-bold text-3xl mb-4 text-slate-800">Nuestra historia</h1>
      <p class="text-xl text-slate-600 leading-relaxed">Fundada en [Año de fundación], Oliva Mia nació con el objetivo de llevar a tu mesa aceites de oliva de la más alta calidad, directamente desde los campos de cultivo hasta tu hogar. Desde nuestros primeros días, nos comprometimos a crear una marca que no solo se destacara por su sabor y respeto a la naturaleza, sino por el compromiso con las personas involucradas en cada etapa del proceso.</p>
    </div>
  
    <section id="Mision">
      <div class="bg-white p-8 pb-24 rounded-3xl hover:shadow-2xl hover:scale-105 transition-transform duration-300">
        <h1 class="font-bold text-3xl mb-4 text-slate-800">Nuestra misión</h1>
        <p class="text-xl text-slate-600 leading-relaxed">En Oliva Mia, nuestra misión es ofrecer a nuestros clientes productos de aceite de oliva excepcionales, elaborados con los más altos estándares de calidad, siempre en armonía con el medio ambiente. Nos esforzamos por promover una vida más saludable, brindando opciones naturales y frescas para aquellos que buscan mejorar su alimentación y bienestar.</p>
      </div>
    </section>
  </div>
  
     
         
      <div class="mt-24 text-center col-span-2">
          <h1 class="font-bold text-3xl mb-16 text-slate-800">Nuestros valores</h1>
      </div>

      <div class="grid grid-cols-3 col-span-2 gap-6">
        <div class="flex flex-col items-center text-center space-y-10">
          <i class="fa-solid fa-star fa-2xl border-4 border-slate-800 p-10 rounded-full" style="color: green"></i>
          <p class="text-xl">Reprehenderit fugiat ipsum excepteur adipisicing excepteur sint.</p>
        </div>
        <div class="flex flex-col items-center text-center space-y-10">
          <i class="fa-solid fa-leaf fa-2xl border-4 border-slate-800 p-10 rounded-full" style="color: green;"></i>
          <p class="text-xl">Laborum officia nulla tempor pariatur incididunt nulla dolore excepteur proident.</p>
        </div>
        <div class="flex flex-col items-center text-center space-y-10">
          <i class="fa-solid fa-hand-holding-heart fa-2xl border-4 border-slate-800 p-10 rounded-full" style="color: green;"></i>
          <p class="text-xl">Ullamco nisi esse dolore deserunt duis do ut anim eiusmod quis.</p>
        </div>
      </div>

      <section id="Vision" class="my-24 col-span-2">
        <div class="mt-10 mx-24">
          <h1 class="font-bold text-center text-3xl mb-4 text-slate-800">Nuestra Visión</h1>
          <p class="text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis minus deserunt a sit quam nostrum rerum magni harum incidunt, quasi, dolores nobis, 
            neque inventore! Hic perspiciatis blanditiis sunt in accusantium Elit anim aliqua enim do mollit dolor in Irure et sint deserunt exercitation labore 
            qui Deserunt ex et eiusmod qui mollit do ex veniam voluptate incididunt labore consectetur velit ullamco.Cupidatat labore commodo eiusmod eu ut aliqua 
            occaecat sint velit cillum aliqua exercitation Lorem sunt.</p>
        </div>
      </section>

      <div class="text-center col-span-2">
        <h1 class="font-bold text-3xl mb-16 text-slate-800">Nuestro Equipo</h1>
      </div>

        <section id="Equipo" class="grid col-span-2">
          <div class="grid md:grid-cols-3 gap-8 mx-24">
            <div class="flex flex-col items-center text-center space-y-10">
              <img src="/img/sucursal.png" alt="Personas" class="w-60 h-56">
              <p class="font-bold text-2xl text-slate-800">20+ Sucursales</p>
            </div>
            <div class="flex flex-col items-center text-center space-y-10">
              <img src="/img/empleados.png" alt="Personas" class="w-60 h-56">
              <p class="font-bold text-2xl text-slate-800">80+ Empleados</p>
            </div>
            <div class="flex flex-col items-center text-center space-y-10">
              <img src="/img/Clientes.png" alt="Clientes" class="w-60 h-56">              
              <p class="font-bold text-2xl text-slate-800">20,000+ Clientes</p>
            </div>
          </div>
        </section>

        <section id="Comentarios" class="my-24 place-items-center col-span-2">
          <div class="my-10">
           <h1 class="font-bold text-3xl mb-7 text-slate-800 text-center">Comparte tu experiencia</h1>
           <form action="POST">
            <textarea name="Comentario" cols="90" rows="6" placeholder="Comentario" class="border-2 border-lime-700 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2 placeholder:text-slate-600"></textarea>
            <button type="submit" class="grid bg-lime-700 rounded-lg px-3 py-1 my-3 font-bold text-white duration-300 hover:shadow-md hover:shadow-black hover:bg-lime-900 hover:scale-105">Enviar comentarios</button>
           </form>        
         </div>
       </section>
      </div>

</Layout>