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

GA

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-02 11:56:05 -03:00
parent 93ededf81d
commit 0cfc2b92ce
6 changed files with 103 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
superpage/src/components/Accordion/Body.astro
View File

@@ -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>

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

@@ -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>

11
superpage/src/components/Modal.astro
View File

@@ -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));
});

24
superpage/src/layouts/Layout.astro
View File

@@ -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>

2
superpage/src/pages/index.astro
View File

@@ -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="#"

3
superpage/src/styles/app.css
View File

@@ -9,6 +9,9 @@
html,
body {
@apply text-white bg-black antialiased;
}
html:not(.overflow-hidden) {
@apply scroll-pt-22 lg:scroll-pt-32;
}