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

<Layout title="Contacto">
    <div class="grid grid-cols-1 place-items-center mx-10 mt-10">
        <h1 class="text-3xl mb-4 font-bold text-slate-800">Contacto</h1>
        <p class="text-lg">Estamos aquí para escucharte. Comparte con nosotros tus dudas, inquietudes o detalles sobre tu</p>
        <p class="text-lg">proyecto. Haznos todas las preguntas que tengas y permítenos ayudarte a convertir tus ideas en</p>
        <p class="text-lg">realidad. <b class="text-slate-800">¡Queremos leerte!</b></p>
        
    </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="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
                <input type="email" placeholder="Email" required class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full 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= "border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"> 
                <input type="text" placeholder="Dirección" required class= "border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
            </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>


</Layout>