add model
This commit is contained in:
@@ -2,140 +2,105 @@
|
|||||||
import { Icon } from "astro-icon/components";
|
import { Icon } from "astro-icon/components";
|
||||||
import Container from "~/components/Container.astro";
|
import Container from "~/components/Container.astro";
|
||||||
import Contact from "./Contact.jsx";
|
import Contact from "./Contact.jsx";
|
||||||
|
import Modal from "~/components/Modal.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
{/* Modal */}
|
||||||
x-data="{ open: false, plan: null }"
|
<Modal id="planform">
|
||||||
x-on:keydown.esc.prevent.stop="open = false"
|
<h1 class="text-3xl lg:text-4xl font-medium">
|
||||||
x-effect="document.body.classList.toggle('overflow-hidden', open);
|
Preencha os dados da sua empresa
|
||||||
|
</h1>
|
||||||
|
<Contact url={Astro.request.url} client:load />
|
||||||
|
</Modal>
|
||||||
|
|
||||||
if (plan) {
|
<Container {...Astro.props}>
|
||||||
$refs.plan.dataset.plan = plan;
|
<section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
|
||||||
window.dispatchEvent(new CustomEvent('planUpdate', { detail: plan }));
|
<h1 class="text-pretty text-4xl lg:text-6xl">
|
||||||
}"
|
Modelos de contratação para sua empresa
|
||||||
>
|
</h1>
|
||||||
{/* Modal */}
|
<div class="grid lg:grid-cols-3 gap-5">
|
||||||
<div style="display: none;" x-show="open">
|
|
||||||
<div class="fixed inset-0 z-40 overflow-y-auto">
|
|
||||||
{/* Backdrop */}
|
|
||||||
<div
|
<div
|
||||||
x-on:click="open = false"
|
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"
|
||||||
aria-hidden="true"
|
|
||||||
class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
|
|
||||||
>
|
>
|
||||||
</div>
|
<h1
|
||||||
|
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
|
||||||
<div class="flex justify-center items-center lg:h-full p-2.5">
|
|
||||||
<div
|
|
||||||
class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow relative"
|
|
||||||
>
|
>
|
||||||
{/* Close button */}
|
EDUSEG<sup>®</sup> Flexível
|
||||||
<button
|
</h1>
|
||||||
x-on:click="open = false"
|
<h2 class="text-xl/6 font-semibold">
|
||||||
class="cursor-pointer absolute top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
|
Catálogo completo sempre à sua disposição
|
||||||
>
|
</h2>
|
||||||
<Icon name="x-mark" class="size-4" />
|
<ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
|
||||||
</button>
|
<li>Acesse todos os cursos imediatamente</li>
|
||||||
|
<li>Pague apenas pelo que usar, mês a mês</li>
|
||||||
<h1 class="text-3xl lg:text-4xl font-medium">
|
<li>Gestão e autonomia direto pela plataforma</li>
|
||||||
Preencha os dados da sua empresa
|
</ul>
|
||||||
</h1>
|
<p class="mt-auto">
|
||||||
<div x-ref="plan" id="plan-ref" data-plan=""></div>
|
Ideal para empresas que treinam continuamente e precisam de
|
||||||
<Contact url={Astro.request.url} client:load />
|
agilidade.
|
||||||
</div>
|
</p>
|
||||||
|
<button
|
||||||
|
data-toggle="modal"
|
||||||
|
data-target="#planform"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
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 space-y-1.5 text-sm/5">
|
||||||
|
<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"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
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 space-y-1.5 text-sm/5">
|
||||||
|
<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"
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
{/* Modal End */}
|
</Container>
|
||||||
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
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 space-y-1.5 text-sm/5">
|
|
||||||
<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
|
|
||||||
x-on:click="open = true; plan = 'flexivel'"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
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 space-y-1.5 text-sm/5">
|
|
||||||
<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
|
|
||||||
x-on:click="open = true; plan = 'incompany'"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
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 space-y-1.5 text-sm/5">
|
|
||||||
<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
|
|
||||||
x-on:click="open = true; plan = 'conteudo'"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
|
|||||||
56
superpage/src/components/Modal.astro
Normal file
56
superpage/src/components/Modal.astro
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
---
|
||||||
|
|
||||||
|
<dialog
|
||||||
|
closedby="any"
|
||||||
|
class="text-white bg-black fixed inset-1/2 w-full lg:w-112 -translate-1/2 p-5 lg:p-12 rounded-2xl border border-white/15 backdrop:bg-black/50 backdrop:backdrop-blur backdrop:backdrop-filter"
|
||||||
|
{...Astro.props}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="cursor-pointer fixed top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
|
||||||
|
data-dismiss
|
||||||
|
>
|
||||||
|
<Icon name="x-mark" class="size-4" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="space-y-5">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const modals = document.querySelectorAll("[data-toggle='modal']");
|
||||||
|
|
||||||
|
function openModal(modal: HTMLDialogElement) {
|
||||||
|
const close = modal.querySelector("[data-dismiss]");
|
||||||
|
|
||||||
|
modal.showModal();
|
||||||
|
document.body.classList.toggle("overflow-y-hidden");
|
||||||
|
|
||||||
|
modal.addEventListener(
|
||||||
|
"close",
|
||||||
|
() => {
|
||||||
|
document.body.classList.toggle("overflow-y-hidden");
|
||||||
|
},
|
||||||
|
{ once: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
if (close) {
|
||||||
|
close.addEventListener(
|
||||||
|
"click",
|
||||||
|
() => {
|
||||||
|
modal.close();
|
||||||
|
},
|
||||||
|
{ once: true },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
modals.forEach((el) => {
|
||||||
|
const target = el.dataset.target;
|
||||||
|
const modal = document.querySelector(target);
|
||||||
|
|
||||||
|
el.addEventListener("click", () => openModal(modal));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user