dropdown
This commit is contained in:
@@ -4,9 +4,9 @@ import { Icon } from "astro-icon/components";
|
|||||||
const { items = [] } = Astro.props;
|
const { items = [] } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="carousel" class="relative">
|
<div data-ride="carousel" class="relative">
|
||||||
<button
|
<button
|
||||||
id="prev"
|
data-toggle="prev"
|
||||||
class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
|
class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
|
||||||
aria-label="Anterior"
|
aria-label="Anterior"
|
||||||
>
|
>
|
||||||
@@ -14,7 +14,7 @@ const { items = [] } = Astro.props;
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
id="next"
|
data-toggle="next"
|
||||||
class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
|
class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
|
||||||
aria-label="Próximo"
|
aria-label="Próximo"
|
||||||
>
|
>
|
||||||
@@ -38,11 +38,15 @@ const { items = [] } = Astro.props;
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const carousel = document.getElementById("carousel");
|
const carousel = document.querySelector("[data-ride=carousel]");
|
||||||
const slides = carousel.querySelectorAll(".snap-center");
|
const slides = carousel?.querySelectorAll(".snap-center");
|
||||||
let currentIndex = 0;
|
let currentIndex = 0;
|
||||||
|
|
||||||
const scrollToSlide = (index: number) => {
|
const scrollToSlide = (index: number) => {
|
||||||
|
if (!slides) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (index >= 0 && index < slides.length) {
|
if (index >= 0 && index < slides.length) {
|
||||||
slides[index].scrollIntoView({
|
slides[index].scrollIntoView({
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
@@ -53,11 +57,15 @@ const { items = [] } = Astro.props;
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.getElementById("prev").addEventListener("click", () => {
|
carousel
|
||||||
scrollToSlide(currentIndex - 1);
|
?.querySelector("[data-toggle=prev]")
|
||||||
});
|
?.addEventListener("click", () => {
|
||||||
|
scrollToSlide(currentIndex - 1);
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById("next").addEventListener("click", () => {
|
carousel
|
||||||
scrollToSlide(currentIndex + 1);
|
?.querySelector("[data-toggle=next]")
|
||||||
});
|
?.addEventListener("click", () => {
|
||||||
|
scrollToSlide(currentIndex + 1);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -6,47 +6,111 @@ const currency = new Intl.NumberFormat("pt-BR", {
|
|||||||
}).format(course.unit_price);
|
}).format(course.unit_price);
|
||||||
---
|
---
|
||||||
|
|
||||||
<details class:list={["group relative group", Astro.props.class]}>
|
<details class:list={["group", Astro.props.class]}>
|
||||||
<summary
|
<summary
|
||||||
class="flex bg-black hover:bg-white hover:text-black group-open:text-black group-open:bg-white font-semibold py-2.5 px-3 rounded-md cursor-pointer transition"
|
class="flex bg-black hover:bg-white hover:text-black group-open:text-black group-open:bg-white font-semibold py-2.5 px-3 rounded-md cursor-pointer transition"
|
||||||
>
|
>
|
||||||
Contratar agora
|
Contratar agora
|
||||||
</summary>
|
</summary>
|
||||||
<div
|
<div
|
||||||
class="absolute right-0 top-full translate-y-1 bg-stone-900 border border-white/15 min-w-78 rounded-lg shadow drop-shadow p-2.5"
|
class="absolute inset-x-2.5 top-full translate-y-1.5 md:inset-auto md:right-2.5 2xl:right-0 md:w-auto md:min-w-96 bg-stone-900 border border-white/15 rounded-xl shadow-lg"
|
||||||
>
|
>
|
||||||
<strong>Selecione a opção:</strong>
|
<h6
|
||||||
<ul>
|
class="p-2.5 lg:px-5 lg:py-3.5 font-semibold border-b border-white/10 bg-white/5"
|
||||||
<li
|
>
|
||||||
class="p-2.5 hover:bg-white/10 rounded-lg flex gap-2.5 items-center"
|
Selecione uma opção
|
||||||
>
|
</h6>
|
||||||
<input
|
<ul class="p-3">
|
||||||
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
|
<li>
|
||||||
/>
|
<label
|
||||||
<span class="uppercase">EDUSEG® Flexível</span>
|
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
|
||||||
</li>
|
>
|
||||||
<li class="p-2.5 hover:bg-white/10 rounded-lg">
|
<input
|
||||||
<input
|
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
|
||||||
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
|
name="selected"
|
||||||
/>
|
type="radio"
|
||||||
<span class="uppercase">EDUSEG® In-Company</span>
|
checked
|
||||||
</li>
|
/>
|
||||||
<li class="p-2.5 hover:bg-white/10 rounded-lg">
|
<div>
|
||||||
<input
|
<p class="uppercase font-semibold">
|
||||||
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
|
Matrícula única <span
|
||||||
/>
|
class="px-0.5 text-black bg-lime-400"
|
||||||
<span class="uppercase">EDUSEG® Conteúdo</span>
|
>{currency}</span
|
||||||
</li>
|
>
|
||||||
<li class="p-2.5 hover:bg-white/10 rounded-lg">
|
</p>
|
||||||
<input
|
<p class="text-sm text-white/50">
|
||||||
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
|
Contratação rápida e sem burocracia
|
||||||
/>
|
</p>
|
||||||
<span>Contratar {currency} p/ matrícula</span>
|
</div>
|
||||||
|
</label>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button
|
<h6 class="px-5 font-semibold">Modelos de contratação</h6>
|
||||||
class="p-2.5 bg-lime-400 rounded-lg w-full text-black text-semibold"
|
<ul class="p-3 space-y-0.5">
|
||||||
>Continuar</button
|
<li>
|
||||||
>
|
<label
|
||||||
|
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
|
||||||
|
name="selected"
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p class="uppercase font-semibold">
|
||||||
|
EDUSEG® Flexível
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-white/50">
|
||||||
|
Catálogo completo sempre à sua disposição
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label
|
||||||
|
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
|
||||||
|
name="selected"
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p class="uppercase font-semibold">
|
||||||
|
EDUSEG® In-Company
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-white/50">
|
||||||
|
Treinamento presencial na sua empresa
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label
|
||||||
|
class="flex gap-2 items-start cursor-pointer hover:bg-white/10 rounded-lg has-checked:outline has-checked:outline-white/20 has-checked:bg-white/10 p-3"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="box-content size-1.5 border-5 border-black bg-black appearance-none rounded-full ring-1 ring-white/15 checked:border-lime-400 checked:ring-lime-400 mt-1.5"
|
||||||
|
name="selected"
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p class="uppercase font-semibold">
|
||||||
|
EDUSEG® Conteúdo
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-white/50">
|
||||||
|
Leve nosso conteúdo para sua plataforma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="p-2.5 lg:p-5 border-t border-white/10">
|
||||||
|
<button
|
||||||
|
class="p-3 bg-lime-400 rounded-lg w-full text-black font-semibold cursor-pointer hover:bg-white hover:text-black transition"
|
||||||
|
>
|
||||||
|
Continuar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|||||||
@@ -57,7 +57,6 @@ const { title } = Astro.props;
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<li>aaa</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</Container>
|
</Container>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
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";
|
import Modal from "~/components/Modal.astro";
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
---
|
---
|
||||||
|
|
||||||
{/* Modal */}
|
{/* Modal */}
|
||||||
@@ -17,97 +18,115 @@ import Modal from "~/components/Modal.astro";
|
|||||||
<h1 class="text-pretty text-4xl lg:text-6xl">
|
<h1 class="text-pretty text-4xl lg:text-6xl">
|
||||||
Modelos de contratação para sua empresa
|
Modelos de contratação para sua empresa
|
||||||
</h1>
|
</h1>
|
||||||
<div class="grid lg:grid-cols-3 gap-5">
|
<div class="relative">
|
||||||
<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"
|
class="flex lg:grid lg:grid-cols-3 gap-5 max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide"
|
||||||
>
|
>
|
||||||
<h1
|
<div
|
||||||
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
|
class="snap-center flex-shrink-0 max-lg:w-full 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"
|
||||||
>
|
>
|
||||||
EDUSEG<sup>®</sup> Flexível
|
<h1
|
||||||
</h1>
|
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
|
||||||
<h2 class="text-xl/6 font-semibold">
|
>
|
||||||
Catálogo completo sempre à sua disposição
|
EDUSEG<sup>®</sup> Flexível
|
||||||
</h2>
|
</h1>
|
||||||
<ul
|
<h2 class="text-xl/6 font-semibold">
|
||||||
class="list-disc max-lg:pl-3.5 space-y-1.5 text-sm/5 marker:text-lime-400"
|
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="snap-center flex-shrink-0 max-lg:w-full 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"
|
||||||
>
|
>
|
||||||
<li>Acesse todos os cursos imediatamente</li>
|
<h1
|
||||||
<li>Pague apenas pelo que usar, mês a mês</li>
|
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
|
||||||
<li>Gestão e autonomia direto pela plataforma</li>
|
>
|
||||||
</ul>
|
EDUSEG<sup>®</sup> In-Company
|
||||||
<p class="mt-auto">
|
</h1>
|
||||||
Ideal para empresas que treinam continuamente e precisam de
|
<h2 class="text-xl/6 font-semibold">
|
||||||
agilidade.
|
Treinamento presencial na sua empresa
|
||||||
</p>
|
</h2>
|
||||||
<button
|
<ul
|
||||||
data-toggle="modal"
|
class="list-disc max-lg:pl-3.5 space-y-1.5 text-sm/5 marker:text-lime-400"
|
||||||
data-target="#planform"
|
>
|
||||||
data-label="EDUSEG® FLEXÍVEL"
|
<li>Atendemos nas principais cidades do Brasil</li>
|
||||||
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
|
<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="snap-center flex-shrink-0 max-lg:w-full 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"
|
||||||
>
|
>
|
||||||
Saiba mais
|
<h1
|
||||||
</button>
|
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>
|
</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"
|
<div class="hidden max-lg:flex justify-center gap-2.5 mt-2.5">
|
||||||
>
|
|
||||||
<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
|
<button
|
||||||
data-toggle="modal"
|
class="size-2.5 rounded-full bg-white/10 border border-white/15"
|
||||||
data-target="#planform"
|
data-slide-to="0"></button>
|
||||||
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
|
<button
|
||||||
data-toggle="modal"
|
class="size-2.5 rounded-full bg-white/10 border border-white/15"
|
||||||
data-target="#planform"
|
data-slide-to="1"></button>
|
||||||
data-label="EDUSEG® CONTEÚDO"
|
<button
|
||||||
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
|
class="size-2.5 rounded-full bg-white/10 border border-white/15"
|
||||||
>
|
data-slide-to="2"></button>
|
||||||
Saiba mais
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user