sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dropdown

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-06 13:46:41 -03:00
parent e274760106
commit 907177b281
4 changed files with 218 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
superpage/src/components/Carousel.astro
View File

@@ -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
?.querySelector("[data-toggle=prev]")
?.addEventListener("click", () => {
scrollToSlide(currentIndex - 1); scrollToSlide(currentIndex - 1);
}); });
document.getElementById("next").addEventListener("click", () => { carousel
?.querySelector("[data-toggle=next]")
?.addEventListener("click", () => {
scrollToSlide(currentIndex + 1); scrollToSlide(currentIndex + 1);
}); });
</script> </script>

122
superpage/src/components/Course/BuyDropdown.astro
View File

@@ -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>
<ul class="p-3">
<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 <input
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5" 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"
checked
/> />
<span class="uppercase">EDUSEG&reg; Flexível</span> <div>
</li> <p class="uppercase font-semibold">
<li class="p-2.5 hover:bg-white/10 rounded-lg"> Matrícula única <span
<input class="px-0.5 text-black bg-lime-400"
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5" >{currency}</span
/> >
<span class="uppercase">EDUSEG&reg; In-Company</span> </p>
</li> <p class="text-sm text-white/50">
<li class="p-2.5 hover:bg-white/10 rounded-lg"> Contratação rápida e sem burocracia
<input </p>
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5" </div>
/> </label>
<span class="uppercase">EDUSEG&reg; Conteúdo</span>
</li>
<li class="p-2.5 hover:bg-white/10 rounded-lg">
<input
class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
/>
<span>Contratar {currency} p/ matrícula</span>
</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&reg; 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&reg; 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&reg; 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>

1
superpage/src/components/Course/HeaderNav.astro
View File

@@ -57,7 +57,6 @@ const { title } = Astro.props;
); );
}) })
} }
<li>aaa</li>
</ul> </ul>
</Container> </Container>
</dialog> </dialog>

33
superpage/src/components/Course/Solutions.astro
View File

@@ -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,9 +18,12 @@ 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"
>
<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"
> >
<h1 <h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black" class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
@@ -37,8 +41,8 @@ import Modal from "~/components/Modal.astro";
<li>Gestão e autonomia direto pela plataforma</li> <li>Gestão e autonomia direto pela plataforma</li>
</ul> </ul>
<p class="mt-auto"> <p class="mt-auto">
Ideal para empresas que treinam continuamente e precisam de Ideal para empresas que treinam continuamente e precisam
agilidade. de agilidade.
</p> </p>
<button <button
data-toggle="modal" data-toggle="modal"
@@ -50,7 +54,7 @@ import Modal from "~/components/Modal.astro";
</button> </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" 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"
> >
<h1 <h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black" class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
@@ -65,7 +69,9 @@ import Modal from "~/components/Modal.astro";
> >
<li>Atendemos nas principais cidades do Brasil</li> <li>Atendemos nas principais cidades do Brasil</li>
<li>Instrutores especialistas com vivência prática</li> <li>Instrutores especialistas com vivência prática</li>
<li>Ideal para grandes turmas ou treinamentos práticos</li> <li>
Ideal para grandes turmas ou treinamentos práticos
</li>
</ul> </ul>
<p class="mt-auto"> <p class="mt-auto">
Solução sob medida, direto no seu ambiente de trabalho. Solução sob medida, direto no seu ambiente de trabalho.
@@ -80,7 +86,7 @@ import Modal from "~/components/Modal.astro";
</button> </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" 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"
> >
<h1 <h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black" class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
@@ -110,6 +116,19 @@ import Modal from "~/components/Modal.astro";
</button> </button>
</div> </div>
</div> </div>
<div class="hidden max-lg:flex justify-center gap-2.5 mt-2.5">
<button
class="size-2.5 rounded-full bg-white/10 border border-white/15"
data-slide-to="0"></button>
<button
class="size-2.5 rounded-full bg-white/10 border border-white/15"
data-slide-to="1"></button>
<button
class="size-2.5 rounded-full bg-white/10 border border-white/15"
data-slide-to="2"></button>
</div>
</div>
</section> </section>
</Container> </Container>