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

fix

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-05-08 12:59:46 -03:00
parent 11dd53a9eb
commit ea1f2f0f0e
6 changed files with 160 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
superpage/src/@types/pagefind-default-ui.d.ts vendored Normal file
View File

@@ -0,0 +1,11 @@
declare module "@pagefind/default-ui" {
export class PagefindUI {
constructor(options: {
element: string;
bundlePath: string;
autofocus?: boolean;
showImages?: boolean;
pageSize?: number;
});
}
}

7
superpage/src/CookieConsentConfig.ts
View File

@@ -1,12 +1,5 @@
import type { CookieConsentConfig } from "vanilla-cookieconsent";
declare global {
interface Window {
dataLayer: Record<string, any>[];
gtag: (...args: any[]) => void;
}
}
export const config: CookieConsentConfig = {
guiOptions: {
consentModal: {

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

@@ -6,112 +6,142 @@ const currency = new Intl.NumberFormat("pt-BR", {
}).format(course.unit_price);
---
<details class:list={["group/dropdown", Astro.props.class]}>
<summary
class="flex bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer transition
<buy-dropdown class:list={[Astro.props.class]}>
<details class="group/dropdown">
<summary
class="flex bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer transition
group-open/dropdown:text-black group-open/dropdown:bg-white"
>
Contratar agora
</summary>
<div
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"
>
<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>
<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"
Contratar agora
</summary>
<div
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"
>
<h6
class="p-2.5 lg:px-5 lg:py-3.5 font-semibold border-b border-white/10 bg-white/5"
>
Continuar
</button>
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>
<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:px-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>
</buy-dropdown>
<script>
class BuyDropdown extends HTMLElement {
constructor() {
super();
this.handleClickOutside = this.handleClickOutside.bind(this);
}
connectedCallback() {
document.addEventListener("click", this.handleClickOutside);
}
disconnectedCallback() {
document.removeEventListener("click", this.handleClickOutside);
}
private handleClickOutside(e: MouseEvent) {
const menu = this.querySelector("details") as HTMLDetailsElement;
const target = e.target as HTMLElement;
if (!menu.contains(target)) {
menu.open = false;
}
}
}
customElements.define("buy-dropdown", BuyDropdown);
</script>

6
superpage/src/components/Course/Contact.jsx
View File

@@ -17,12 +17,6 @@ const schema = z.object({
message: z.string().nonempty({ message: "Deve preencher a mensagem" }),
});
const solutions = [
"EDUSEG® FLEXÍVEL",
"EDUSEG® IN-COMPANY",
"EDUSEG® CONTEÚDO",
];
export default function Contact({ url }) {
const { register, formState, control, reset, setValue } = useForm({
resolver: zodResolver(schema),

19
superpage/src/components/Course/FlyoutMenu.astro
View File

@@ -26,7 +26,7 @@ const relatedCourses = data?.relatedCourses
<Icon
name="chevron-down"
aria-hidden="true"
class="size-4 mt-1"
class="size-4 mt-1 transition group-open/menu:-rotate-180"
/>
</button>
@@ -38,7 +38,8 @@ const relatedCourses = data?.relatedCourses
>
<div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
<button
class="border border-black absolute rounded-full top-2.5 max-lg:right-5 right-2.5 cursor-pointer outline-none"
class="border border-black absolute rounded-full cursor-pointer outline-none
top-2.5 lg:top-5 right-5"
data-dismiss
>
<Icon name="x-mark" class="size-4 p-0.5" />
@@ -90,9 +91,11 @@ const relatedCourses = data?.relatedCourses
<script>
class FlyoutMenu extends HTMLElement {
private isOpen: boolean;
constructor() {
super();
this._isOpen = false;
this.isOpen = false;
}
connectedCallback() {
@@ -109,13 +112,13 @@ const relatedCourses = data?.relatedCourses
});
button.addEventListener("click", () => {
if (this._isOpen) {
if (this.isOpen) {
menu.close();
} else {
menu.show();
}
this._setIsOpen(!this._isOpen);
this.setIsOpen(!this.isOpen);
});
menu.addEventListener("blur", () => {
@@ -125,7 +128,7 @@ const relatedCourses = data?.relatedCourses
});
menu.addEventListener("close", () => {
this._setIsOpen(false);
this.setIsOpen(false);
});
document.addEventListener("touchstart", (e) => {
@@ -143,8 +146,8 @@ const relatedCourses = data?.relatedCourses
});
}
_setIsOpen(value) {
this._isOpen = value;
private setIsOpen(value: boolean) {
this.isOpen = value;
if (value) {
this.setAttribute("open", "");

7
superpage/src/components/Search.astro
View File

@@ -15,16 +15,15 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
</div>
<script>
window.dataLayer = window.dataLayer || [];
import { PagefindUI } from "@pagefind/default-ui";
const element = "#pagefind-ui";
const selector = document.querySelector(element);
async function initPagefindUI() {
if (selector) {
const bundlePath = selector.getAttribute("data-bundle-path");
const bundlePath = selector?.getAttribute("data-bundle-path");
if (bundlePath) {
// Pagefind UI configuration options
// https://pagefind.app/docs/ui/
new PagefindUI({