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

<Layout title="Trabaja con nostros">
    <div>

        <div class="grid place-items-center my-10">
            <h1 class="text-3xl font-bold text-slate-800 mb-3"><b class="text-lime-700">Se busca gente para</b> unirse a nuestro equipo</h1>
            <p>Dolor ad proident pariatur ex laborum voluptate non sunt excepteur non.</p>
            <p>Elit quis aliquip irure magna occaecat cillum dolor nisi cupidatat cillum minim consectetur.</p>
            <p>Laboris irure culpa sint elit.</p>
            <p>Amet nisi adipisicing laboris labore velit occaecat id amet ad ullamco enim.</p>
            <p>Eu amet aliquip aute proident dolor.</p>

            <div class="my-10"></div>

            <h1 class="text-3xl font-bold text-slate-800 mb-3 ">¿Tienes alguno de estos <b class="text-lime-700">perfiles</b>?</h1>
            <p>Cillum magna minim in qui duis deserunt incididunt aliqua voluptate.</p>
            <p>Labore eu fugiat dolor aliquip irure aute laborum occaecat.</p>
            <p>Tempor dolore fugiat minim ut ipsum duis ex incididunt in officia Lorem.</p>
            <p>Esse cupidatat amet elit voluptate enim tempor dolore id deserunt minim elit aliquip.</p>

            <div class="mt-10">
                <div class="space-y-6">
                  <div class="flex space-x-4">
                    <i class="fa-solid fa-circle-right fa-2xl mt-3" style="color: #2d8128;"></i>
                    <p>Irure tempor tempor veniam ipsum culpa sunt</p>
                  </div>
                  <div class="flex space-x-4">
                    <i class="fa-solid fa-circle-right fa-2xl mt-3" style="color: #2d8128;"></i>
                    <p>Consectetur ut excepteur aute nostrud magna</p>
                  </div>
                  <div class="flex space-x-4">
                    <i class="fa-solid fa-circle-right fa-2xl mt-3" style="color: #2d8128;"></i>
                    <p>Incididunt non Lorem do ex eu veniam</p>
                  </div>
                </div>
              </div>
        </div>

        <div class="flex justify-center mt-10 ">
            <form action="POST" autocomplete="on">
                <div class="flex flex-col-2 space-x-3">
                    <input type="text" placeholder="Nombre" required class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700">
                    <input type="email" placeholder="Apellido" required class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700">
                </div>
    
                <div class="flex flex-col-2 space-x-3">
                    <input type="text" placeholder="Teléfono"  required class= "mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"> 
                    <input type="text" placeholder="Dirección" required class= "mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700 ">
                </div>

                <div class="flex justify-center flex-row-1 w-full my-6 ">
                    <textarea name="Mensaje" id="" cols="90" rows="4" placeholder="Mensaje" 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>
                </div>

                <div>
                    <p class="text-slate-800 mb-2">Adjunte tu CV</p>
                    <input type="file" name="CV" id="cv">
                </div>

                <div class="grid place-items-center my-10">
                    <p>INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS</p>
                    <p class="text-sm">Esse sint sunt est magna et incididunt ullamco exercitation laborum cillum elit tempor ea.</p>
                    <p class="text-sm">Mollit commodo laborum nulla pariatur non pariatur quis aliqua proident adipisicing tempor.</p>
                    <p class="text-sm"><input type="checkbox" required>  Nisi dolore voluptate fugiat labore dolore ex non sunt dolore cupidatat qui.</p>
                </div>


                <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300" 
                type="submit">Enviar</button>
    
                
            </form> 
        </div>
    

    </div>

</Layout>