From 0cfc2b92ce1a75341ecea4753ed6db751b19c2de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Fri, 2 May 2025 11:56:05 -0300
Subject: [PATCH] GA

---
 superpage/src/components/Accordion/Body.astro |   4 +-
 .../src/components/Course/HeaderNav.astro     | 191 +++++++-----------
 superpage/src/components/Modal.astro          |  11 +-
 superpage/src/layouts/Layout.astro            |  24 ++-
 superpage/src/pages/index.astro               |   2 +-
 superpage/src/styles/app.css                  |   3 +
 6 files changed, 103 insertions(+), 132 deletions(-)

diff --git a/superpage/src/components/Accordion/Body.astro b/superpage/src/components/Accordion/Body.astro
index 38089aa..0842deb 100644
--- a/superpage/src/components/Accordion/Body.astro
+++ b/superpage/src/components/Accordion/Body.astro
@@ -1,5 +1,5 @@
-<main
+<div
     class="text-sm/6 text-white/70 space-y-2.5 px-5 pb-3 [&_ul]:list-disc [&_ul]:list-inside"
 >
     <slot />
-</main>
+</div>
diff --git a/superpage/src/components/Course/HeaderNav.astro b/superpage/src/components/Course/HeaderNav.astro
index 308baa9..8eaa7ba 100644
--- a/superpage/src/components/Course/HeaderNav.astro
+++ b/superpage/src/components/Course/HeaderNav.astro
@@ -11,145 +11,92 @@ const courses = await getCollection(
 const { title } = Astro.props;
 ---
 
-<nav
-    class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
-    x-data="{ open: false }"
-    x-on:keydown.esc.prevent.stop="open = false"
-    x-effect="document.body.classList.toggle('overflow-hidden', open)"
->
-    <Container class="flex items-center">
+<nav class="sticky top-0 z-10 bg-lime-400 py-3 drop-shadow shadow-sm">
+    <Container class="flex items-center relative">
         <button
-            class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition"
-            x-bind:aria-expanded="open"
-            x-on:click="open = true"
-            aria-haspopup="true"
+            data-toggle="menu"
+            data-target="#heromenu"
+            class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition flex items-center gap-1"
         >
-            <div class="flex items-center gap-1">
-                <div class="truncate max-w-36 sm:max-w-72">
-                    {title}
-                </div>
-                <Icon
-                    name="chevron-down"
-                    aria-hidden="true"
-                    class="size-4 mt-1"
-                />
+            <div class="truncate max-w-36 sm:max-w-72">
+                {title}
             </div>
+            <Icon name="chevron-down" aria-hidden="true" class="size-4 mt-1" />
         </button>
 
         <button
+            type="button"
             class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition"
         >
             Contratar agora
         </button>
     </Container>
 
-    {/* Dropdown Menu */}
-    <div
-        x-cloak
-        x-show="open"
-        role="menu"
-        class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm max-h-screen overflow-auto"
-        style="display: none;"
+    <dialog
+        id="heromenu"
+        class="absolute text-black bg-lime-400 w-full inset-0 rounded-b-2xl h-fit overflow-hidden"
+        closedby="any"
     >
-        <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
-            <button
-                class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
-                aria-labelledby="Fechar"
-                x-on:click="open = false"
-            >
-                <Icon name="x-mark" class="size-4" />
-            </button>
-
-            <div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
-                <span>Curso de formação</span>
-                <h1 class="text-xl lg:text-2xl">
-                    {title}
-                </h1>
-            </div>
-
-            <div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
+        <Container class="relative overflow-auto h-100">
+            <div class="sticky top-0 py-2.5 backdrop-blur-sm">
                 <h6 class="font-medium text-xl lg:text-2xl">
                     Conheça outros cursos da EDUSEG&reg;
                 </h6>
-
-                <div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
-                    {/* Search */}
-                    <label class="flex gap-1 items-center">
-                        <span class="text-nowrap max-lg:w-2/5 text-right"
-                            >Buscar por</span
-                        >
-                        <div
-                            class="flex items-center border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 bg-white/20 focus-within:bg-white w-full"
-                        >
-                            <input class="outline-none w-full" />
-                            <Icon name="magnifying-glass" class="size-5" />
-                        </div>
-                    </label>
-                    {/* Search End */}
-
-                    <!-- Filter -->
-                    <label class="flex gap-1 items-center">
-                        <span class="text-nowrap max-lg:w-2/5 text-right"
-                            >Exibir apenas</span
-                        >
-                        <div class="relative w-full lg:w-30 bg-white/20">
-                            <select
-                                class="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full lowercase"
-                            >
-                                <option value="formacao">Formação</option>
-                                <option value="reciclagem">Reciclagem</option>
-                            </select>
-                            <Icon
-                                name="chevron-down"
-                                class="absolute top-2.5 right-2.5 pointer-events-none size-3.5"
-                            />
-                        </div>
-                    </label>
-                    <!-- Filder End -->
-                </div>
             </div>
 
-            <div x-data="{ expanded: false }">
-                <div class="relative">
-                    <div
-                        x-show="! expanded"
-                        class="absolute bottom-0 h-16 w-full bg-gradient-to-t from-lime-400 to-lime-400/30"
-                    >
-                    </div>
-                    <ul
-                        class="list-disc list-inside max-lg:[&_li]:truncate font-medium overflow-hidden"
-                        :class="expanded ? 'h-none' : 'h-36'"
-                    >
-                        {
-                            courses.map(({ data: { title, slug } }) => {
-                                return (
-                                    <li>
-                                        <a
-                                            href={`/${slug}`}
-                                            class=" hover:underline p-0.5"
-                                        >
-                                            {title}
-                                        </a>
-                                    </li>
-                                );
-                            })
-                        }
-                    </ul>
-                </div>
-                <button
-                    :aria-expanded="expanded"
-                    x-on:click="expanded = ! expanded"
-                    class="border border-black rounded-full px-5 py-1 cursor-pointer mt-2.5"
-                    aria-expanded="false"
-                >
-                    <span
-                        x-text="expanded ? 'Ocultar' : 'Exibir todos os cursos'"
-                    >
-                        Exibir todos os cursos
-                    </span>
-                </button>
-            </div>
+            <ul
+                class="list-disc list-inside max-lg:[&_li]:truncate font-medium"
+            >
+                {
+                    courses.map(({ data: { title, slug } }) => {
+                        return (
+                            <li>
+                                <a
+                                    href={`/${slug}`}
+                                    class=" hover:underline p-0.5"
+                                >
+                                    {title}
+                                </a>
+                            </li>
+                        );
+                    })
+                }
+                <li>aaa</li>
+            </ul>
         </Container>
-    </div>
-    {/* Dropdown Menu End */}
+    </dialog>
 </nav>
+
+<script>
+    const button = document.querySelector(
+        "[data-toggle=menu]",
+    ) as HTMLButtonElement;
+
+    button?.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const target = button.dataset.target as string;
+        const menu = document.querySelector(target) as HTMLDialogElement;
+        const close = menu.querySelector("[data-dismiss]") as HTMLButtonElement;
+
+        document.documentElement.classList.toggle("overflow-hidden");
+        menu.show();
+
+        menu.addEventListener(
+            "close",
+            () => {
+                document.documentElement.classList.toggle("overflow-hidden");
+            },
+            { once: true },
+        );
+
+        close?.addEventListener(
+            "click",
+            () => {
+                menu.close();
+            },
+            { once: true },
+        );
+    });
+</script>
diff --git a/superpage/src/components/Modal.astro b/superpage/src/components/Modal.astro
index 3900a62..4ed83d2 100644
--- a/superpage/src/components/Modal.astro
+++ b/superpage/src/components/Modal.astro
@@ -9,7 +9,6 @@ import { Icon } from "astro-icon/components";
 >
     <button
         class="cursor-pointer fixed top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
-        aria-hidden="true"
         data-dismiss
     >
         <Icon name="x-mark" class="size-4" />
@@ -21,13 +20,15 @@ import { Icon } from "astro-icon/components";
 </dialog>
 
 <script>
-    const modals = document.querySelectorAll("[data-toggle='modal']");
+    const modals = document.querySelectorAll(
+        "[data-toggle=modal]",
+    ) as NodeListOf<HTMLButtonElement>;
 
     function openModal(modal: HTMLDialogElement) {
         const close = modal.querySelector("[data-dismiss]");
 
-        modal.showModal();
         document.documentElement.classList.toggle("overflow-hidden");
+        modal.showModal();
 
         modal.addEventListener(
             "close",
@@ -49,8 +50,8 @@ import { Icon } from "astro-icon/components";
     }
 
     modals.forEach((el) => {
-        const target = el.dataset.target;
-        const modal = document.querySelector(target);
+        const target = el.dataset.target as string;
+        const modal = document.querySelector(target) as HTMLDialogElement;
 
         el.addEventListener("click", () => openModal(modal));
     });
diff --git a/superpage/src/layouts/Layout.astro b/superpage/src/layouts/Layout.astro
index 5e2d498..71b65b1 100644
--- a/superpage/src/layouts/Layout.astro
+++ b/superpage/src/layouts/Layout.astro
@@ -1,9 +1,13 @@
 ---
 import "~/styles/app.css";
-import Container from "~/components/Container.astro";
-import { Icon } from "astro-icon/components";
 import Header from "./_components/Header.astro";
 import Footer from "./_components/Footer.astro";
+
+const buildTime = new Date().toLocaleString("pt-BR", {
+    timeZone: "America/Sao_Paulo",
+    dateStyle: "short",
+    timeStyle: "medium",
+});
 ---
 
 <!doctype html>
@@ -19,6 +23,22 @@ import Footer from "./_components/Footer.astro";
                 Educação que garante sua segurança &mdash; EDUSEG&reg;
             </title>
         </slot>
+
+        <script
+            is:inline
+            type="text/partytown"
+            src="https://www.googletagmanager.com/gtag/js?id=G-GSTQ17E9DJ"
+        ></script>
+
+        <script is:inline type="text/partytown">
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag("js", new Date());
+
+            gtag("config", "G-GSTQ17E9DJ");
+        </script>
     </head>
 
     <body>
diff --git a/superpage/src/pages/index.astro b/superpage/src/pages/index.astro
index af8ed0f..c0b681e 100644
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -151,7 +151,7 @@ const trends = await getEntries([
                     </div>
 
                     <div
-                        class="flex flex-col justify-center items-center border-white/15 hover:border-lime-400"
+                        class="flex flex-col justify-center items-center border-white/10 max-lg:border-transparent"
                     >
                         <a
                             href="#"
diff --git a/superpage/src/styles/app.css b/superpage/src/styles/app.css
index 51dd9e4..2deeef2 100644
--- a/superpage/src/styles/app.css
+++ b/superpage/src/styles/app.css
@@ -9,6 +9,9 @@
 html,
 body {
     @apply text-white bg-black antialiased;
+}
+
+html:not(.overflow-hidden) {
     @apply scroll-pt-22 lg:scroll-pt-32;
 }