---
import Section from "./Section.astro";
import HeroIlust from "../../assets/pics/hero.svg";
---

<Section id="home">
<div class="relative flex flex-col-reverse items-center md:flex-row" id="hero">
    <div class="row items-center py-5 md:w-6/12 md:pb-20 md:pt-10">
        <div class="text-left space-y-3">
            <h1 class="text-4xl font-medium leading-none md:text-6xl text-center md:text-left">Convertimos procesos manuales en sistemas inteligentes.</h1>
            <p class="mt-6 mb-8 text-lg font-normal leading-7 sm:mb-12 text-center md:text-left md:pr-12">Diseñamos automatizaciones, integraciones y soluciones con IA que conectan tus herramientas y ejecutan procesos completos de principio a fin.</p>
            <div class="w-full justify-center md:justify-start items-center inline-flex">
                <a href="/evaluacion" class="px-8 py-5 bg-zinc-900 hover:bg-white rounded-2xl text-center text-white hover:text-black border text-xl font-normal leading-7">Evaluar mi proceso
                </a>
            </div>
        </div>
    </div>
    <div class="flex items-center py-5 md:w-6/12 md:pb-20 md:pt-10">
        <img
            src={HeroIlust.src}
            width={HeroIlust.width}
            height={HeroIlust.height}
            class="h-auto w-full"
            alt="Ilustración sobre automatización de procesos"
            loading="eager"
        />
    </div>
</div>
</Section>