From 907177b281112d2823d949ba0d06a268eb6fad81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Tue, 6 May 2025 13:46:41 -0300
Subject: [PATCH] dropdown

---
 superpage/src/components/Carousel.astro       |  30 +--
 .../src/components/Course/BuyDropdown.astro   | 130 ++++++++----
 .../src/components/Course/HeaderNav.astro     |   1 -
 .../src/components/Course/Solutions.astro     | 185 ++++++++++--------
 4 files changed, 218 insertions(+), 128 deletions(-)

diff --git a/superpage/src/components/Carousel.astro b/superpage/src/components/Carousel.astro
index 14be6b7..069fb61 100644
--- a/superpage/src/components/Carousel.astro
+++ b/superpage/src/components/Carousel.astro
@@ -4,9 +4,9 @@ import { Icon } from "astro-icon/components";
 const { items = [] } = Astro.props;
 ---
 
-<div id="carousel" class="relative">
+<div data-ride="carousel" class="relative">
     <button
-        id="prev"
+        data-toggle="prev"
         class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
         aria-label="Anterior"
     >
@@ -14,7 +14,7 @@ const { items = [] } = Astro.props;
     </button>
 
     <button
-        id="next"
+        data-toggle="next"
         class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
         aria-label="Próximo"
     >
@@ -38,11 +38,15 @@ const { items = [] } = Astro.props;
 </div>
 
 <script>
-    const carousel = document.getElementById("carousel");
-    const slides = carousel.querySelectorAll(".snap-center");
+    const carousel = document.querySelector("[data-ride=carousel]");
+    const slides = carousel?.querySelectorAll(".snap-center");
     let currentIndex = 0;
 
     const scrollToSlide = (index: number) => {
+        if (!slides) {
+            return;
+        }
+
         if (index >= 0 && index < slides.length) {
             slides[index].scrollIntoView({
                 behavior: "smooth",
@@ -53,11 +57,15 @@ const { items = [] } = Astro.props;
         }
     };
 
-    document.getElementById("prev").addEventListener("click", () => {
-        scrollToSlide(currentIndex - 1);
-    });
+    carousel
+        ?.querySelector("[data-toggle=prev]")
+        ?.addEventListener("click", () => {
+            scrollToSlide(currentIndex - 1);
+        });
 
-    document.getElementById("next").addEventListener("click", () => {
-        scrollToSlide(currentIndex + 1);
-    });
+    carousel
+        ?.querySelector("[data-toggle=next]")
+        ?.addEventListener("click", () => {
+            scrollToSlide(currentIndex + 1);
+        });
 </script>
diff --git a/superpage/src/components/Course/BuyDropdown.astro b/superpage/src/components/Course/BuyDropdown.astro
index ea01dac..fa63b86 100644
--- a/superpage/src/components/Course/BuyDropdown.astro
+++ b/superpage/src/components/Course/BuyDropdown.astro
@@ -6,47 +6,111 @@ const currency = new Intl.NumberFormat("pt-BR", {
 }).format(course.unit_price);
 ---
 
-<details class:list={["group relative group", Astro.props.class]}>
+<details class:list={["group", Astro.props.class]}>
     <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"
     >
         Contratar agora
     </summary>
     <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>
-        <ul>
-            <li
-                class="p-2.5 hover:bg-white/10 rounded-lg flex gap-2.5 items-center"
-            >
-                <input
-                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
-                />
-                <span class="uppercase">EDUSEG&reg; Flexível</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 class="uppercase">EDUSEG&reg; In-Company</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 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>
+        <h6
+            class="p-2.5 lg:px-5 lg:py-3.5 font-semibold border-b border-white/10 bg-white/5"
+        >
+            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
+                        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
+                    />
+                    <div>
+                        <p class="uppercase font-semibold">
+                            Matrícula única <span
+                                class="px-0.5 text-black bg-lime-400"
+                                >{currency}</span
+                            >
+                        </p>
+                        <p class="text-sm text-white/50">
+                            Contratação rápida e sem burocracia
+                        </p>
+                    </div>
+                </label>
             </li>
         </ul>
-        <button
-            class="p-2.5 bg-lime-400 rounded-lg w-full text-black text-semibold"
-            >Continuar</button
-        >
+        <h6 class="px-5 font-semibold">Modelos de contratação</h6>
+        <ul class="p-3 space-y-0.5">
+            <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>
 </details>
diff --git a/superpage/src/components/Course/HeaderNav.astro b/superpage/src/components/Course/HeaderNav.astro
index a57910a..cbeb8a7 100644
--- a/superpage/src/components/Course/HeaderNav.astro
+++ b/superpage/src/components/Course/HeaderNav.astro
@@ -57,7 +57,6 @@ const { title } = Astro.props;
                         );
                     })
                 }
-                <li>aaa</li>
             </ul>
         </Container>
     </dialog>
diff --git a/superpage/src/components/Course/Solutions.astro b/superpage/src/components/Course/Solutions.astro
index 388741a..aecfdf7 100644
--- a/superpage/src/components/Course/Solutions.astro
+++ b/superpage/src/components/Course/Solutions.astro
@@ -2,6 +2,7 @@
 import Container from "~/components/Container.astro";
 import Contact from "./Contact.jsx";
 import Modal from "~/components/Modal.astro";
+import { Icon } from "astro-icon/components";
 ---
 
 {/* Modal */}
@@ -17,97 +18,115 @@ import Modal from "~/components/Modal.astro";
         <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="relative">
             <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
-                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
+                <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"
                 >
-                    EDUSEG<sup>&reg;</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"
+                    <h1
+                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
+                    >
+                        EDUSEG<sup>&reg;</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="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>
-                    <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"
+                    <h1
+                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
+                    >
+                        EDUSEG<sup>&reg;</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="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
-                </button>
+                    <h1
+                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase bg-black"
+                    >
+                        EDUSEG<sup>&reg;</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
-                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>&reg;</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>
+
+            <div class="hidden max-lg:flex justify-center gap-2.5 mt-2.5">
                 <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>&reg;</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>
+                    class="size-2.5 rounded-full bg-white/10 border border-white/15"
+                    data-slide-to="0"></button>
                 <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>
+                    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>