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

wip

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-21 12:17:14 -03:00
parent ae71d5a7ce
commit 24392f795b
12 changed files with 363 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
superpage/src/components/Accordion.astro
View File

@@ -0,0 +1,6 @@
<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>
<summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary>
<div class="mt-3 text-sm leading-6 text-gray-600">
<p>The mug is round. The jar is round. They should call it Roundtine.</p>
</div>
</details>

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

@@ -5,48 +5,48 @@ const { items = [] } = Astro.props
---
<div id="carousel" class="relative">
<button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronLeftIcon className="w-6" />
</button>
<button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronLeftIcon className="w-6" />
</button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronRightIcon className="w-6" />
</button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronRightIcon className="w-6" />
</button>
<div
class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
>
{
items.map((Component, idx) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0" key={idx}>
<Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div>
))
}
</div>
<div
class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
>
{
items.map((Component, idx) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0">
<Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div>
))
}
</div>
</div>
<script>
const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0
const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0
const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
})
currentIndex = index
const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
})
currentIndex = index
}
}
}
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
</script>

58
superpage/src/components/HeaderNav.astro
View File

@@ -1,15 +1,57 @@
---
import { Icon } from 'astro-icon/components'
import Container from './Container.astro'
---
<nav class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm">
<Container class="flex items-center">
<!-- <Menu recentCourses={courses} client:load /> -->
<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"
>
<Container class="flex items-center">
<button
class="text-black font-semibold cursor-pointer flex items-center gap-1 hover:outline-2 rounded"
x-bind:aria-expanded="open"
x-on:click="open = true"
aria-haspopup="true"
>
<div class="truncate max-w-36 sm:max-w-72 md:max-w-124">NR-18 PEMT Plataforma Móvel de Trabalho</div>
<Icon name="chevron" aria-hidden="true" class="w-4" />
</button>
<button
class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
<button
class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
>
Contratar agora
</button>
</Container>
<div
x-cloak
x-show="open"
x-on:click.outside="open = false"
role="menu"
class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm"
style="display: none"
>
Contratar agora
</button>
</Container>
<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"
title="Fechar"
aria-hidden={true}
x-on:click="open = false"
>
<Icon name="xmark" />
</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">NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</h1>
</div>
<div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
<h6 class="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
</div>
</Container>
</div>
</nav>