134 lines
5.6 KiB
Plaintext
134 lines
5.6 KiB
Plaintext
---
|
|
import Container from "~/components/Container.astro";
|
|
import Contact from "./Contact.jsx";
|
|
import Modal from "~/components/Modal.astro";
|
|
---
|
|
|
|
{/* Modal */}
|
|
<Modal id="planform">
|
|
<h1 class="text-2xl lg:text-4xl font-medium">
|
|
Preencha os dados da sua empresa
|
|
</h1>
|
|
<Contact url={Astro.request.url} client:load />
|
|
</Modal>
|
|
|
|
<Container {...Astro.props}>
|
|
<section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
|
|
<h1 class="text-pretty text-4xl lg:text-6xl">
|
|
Modelos de contratação para sua empresa
|
|
</h1>
|
|
<div class="grid lg:grid-cols-3 gap-5">
|
|
<div
|
|
class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
|
|
>
|
|
<h1
|
|
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
|
|
>
|
|
EDUSEG<sup>®</sup> Flexível
|
|
</h1>
|
|
<h2 class="text-xl/6 font-semibold">
|
|
Catálogo completo sempre à sua disposição
|
|
</h2>
|
|
<ul
|
|
class="list-disc max-lg:pl-3.5 space-y-1.5 text-sm/5 marker:text-lime-400"
|
|
>
|
|
<li>Acesse todos os cursos imediatamente</li>
|
|
<li>Pague apenas pelo que usar, mês a mês</li>
|
|
<li>Gestão e autonomia direto pela plataforma</li>
|
|
</ul>
|
|
<p class="mt-auto">
|
|
Ideal para empresas que treinam continuamente e precisam de
|
|
agilidade.
|
|
</p>
|
|
<button
|
|
data-toggle="modal"
|
|
data-target="#planform"
|
|
data-label="EDUSEG® FLEXÍVEL"
|
|
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
|
|
>
|
|
Saiba mais
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
|
|
>
|
|
<h1
|
|
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
|
|
>
|
|
EDUSEG<sup>®</sup> In-Company
|
|
</h1>
|
|
<h2 class="text-xl/6 font-semibold">
|
|
Treinamento presencial na sua empresa
|
|
</h2>
|
|
<ul
|
|
class="list-disc max-lg:pl-3.5 space-y-1.5 text-sm/5 marker:text-lime-400"
|
|
>
|
|
<li>Atendemos nas principais cidades do Brasil</li>
|
|
<li>Instrutores especialistas com vivência prática</li>
|
|
<li>Ideal para grandes turmas ou treinamentos práticos</li>
|
|
</ul>
|
|
<p class="mt-auto">
|
|
Solução sob medida, direto no seu ambiente de trabalho.
|
|
</p>
|
|
<button
|
|
data-toggle="modal"
|
|
data-target="#planform"
|
|
data-label="EDUSEG® IN-COMPANY"
|
|
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
|
|
>
|
|
Saiba mais
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
|
|
>
|
|
<h1
|
|
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
|
|
>
|
|
EDUSEG<sup>®</sup> Conteúdo
|
|
</h1>
|
|
<h2 class="text-xl/6 font-semibold">
|
|
Leve nosso conteúdo para sua plataforma
|
|
</h2>
|
|
<ul
|
|
class="list-disc max-lg:pl-3.5 space-y-1.5 text-sm/5 marker:text-lime-400"
|
|
>
|
|
<li>Customização completa com sua identidade visual</li>
|
|
<li>Entregamos em formato SCORM para qualquer LMS</li>
|
|
<li>Ideal para empresas com ambiente EAD próprio</li>
|
|
</ul>
|
|
<p class="mt-auto">
|
|
Seu time com o nosso conteúdo, na sua plataforma.
|
|
</p>
|
|
<button
|
|
data-toggle="modal"
|
|
data-target="#planform"
|
|
data-label="EDUSEG® CONTEÚDO"
|
|
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
|
|
>
|
|
Saiba mais
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
<script>
|
|
const buttons = document.querySelectorAll(
|
|
"[data-toggle=modal]",
|
|
) as NodeListOf<HTMLButtonElement>;
|
|
|
|
buttons.forEach((e) => {
|
|
e.addEventListener("click", (e) => {
|
|
const button = e.target as HTMLButtonElement;
|
|
// Dispatch a custom event with the selected solution label,
|
|
// so a React component can listen to it using `window.addEventListener`.
|
|
window.dispatchEvent(
|
|
new CustomEvent("custom_event:solution", {
|
|
detail: button.dataset.label,
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
</script>
|