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

slide

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-17 15:01:42 -03:00
parent 987eb63825
commit 6f82af2f60
3 changed files with 87 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
superpage/src/components/ClientsLogo.astro Normal file
View File

@@ -0,0 +1,74 @@
---
import { Container } from '~/components/Container'
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
import Natura from '~/assets/logos/natura.svg'
import Nissan from '~/assets/logos/nissan.svg'
import Kordsa from '~/assets/logos/kordsa.svg'
import Manserv from '~/assets/logos/manserv.svg'
import Semeq from '~/assets/logos/semeq.svg'
const SVGLogos = [Natura, Nissan, Kordsa, Manserv, Semeq]
---
<Container className="py-6 xl:py-24 lg:text-center space-y-2.5 lg:space-y-6">
<h2 class="text-pretty font-semibold text-4xl">
Alguns clientes que acreditam em nós
</h2>
<div id="carousel" class="relative">
<button
id="prev"
class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden"
>
<ChevronLeftIcon className="w-6" />
</button>
<button
id="next"
class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden"
>
<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"
>
{
SVGLogos.map((Logo, idx) => (
<div
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
key={idx}
>
<Logo
class="size-48 lg:size-34 fill-white"
id={`slide${idx + 1}`}
/>
</div>
))
}
</div>
</div>
</Container>
<script type="module">
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
}
}
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
</script>

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

@@ -30,7 +30,7 @@ const year = new Date().getFullYear()
<body> <body>
<Container className="flex items-center py-3"> <Container className="flex items-center py-3">
<Logo className="h-8" /> <a href="/"><Logo className="h-8" /></a>
<div class="ml-auto"> <div class="ml-auto">
<a <a

71
superpage/src/pages/[slug].astro
View File

@@ -1,19 +1,15 @@
--- ---
import { Picture } from 'astro:assets' import { Picture } from 'astro:assets'
import Layout from '~/layouts/Layout.astro'
import { Container } from '~/components/Container' import { Container } from '~/components/Container'
import { Faq } from '~/components/Faq' import { Faq } from '~/components/Faq'
import { StarIcon, ClockIcon } from '@heroicons/react/24/outline' import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
import { CheckBadgeIcon } from '@heroicons/react/24/solid' import { CheckBadgeIcon } from '@heroicons/react/24/solid'
import { LinkedInIcon } from '~/components/LinkedInIcon' import { LinkedInIcon } from '~/components/LinkedInIcon'
import Layout from '~/layouts/Layout.astro'
import ClientsLogo from '~/components/ClientsLogo.astro'
import nr18plataforma from '~/assets/nr18-plataforma.png' import nr18plataforma from '~/assets/nr18-plataforma.png'
import mulherdenegocios from '~/assets/mulher-de-negocios.png' import mulherdenegocios from '~/assets/mulher-de-negocios.png'
import homemdenegocios from '~/assets/homem-de-negocios.png' import homemdenegocios from '~/assets/homem-de-negocios.png'
import Natura from '~/assets/logos/natura.svg'
import Nissan from '~/assets/logos/nissan.svg'
import Kordsa from '~/assets/logos/kordsa.svg'
import Manserv from '~/assets/logos/manserv.svg'
import Semeq from '~/assets/logos/semeq.svg'
import { getCollection, getEntry } from 'astro:content' import { getCollection, getEntry } from 'astro:content'
@@ -50,13 +46,15 @@ const trainer = data.course?.trainer
/> />
<section> <section>
<div class="space-y-5"> <div class="space-y-5">
{ <span class="font-medium">
data.course.reciclagem ? ( {
<span class="font-medium">Curso de reciclagem</span> data.course.reciclagem ? (
) : ( <>Curso de reciclagem</>
<span class="font-medium">Curso de formação</span> ) : (
) <>Curso de formação</>
} )
}
</span>
<h1 class="text-pretty font-semibold text-4xl lg:text-7xl"> <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
{data.title} {data.title}
</h1> </h1>
@@ -122,52 +120,7 @@ const trainer = data.course?.trainer
</section> </section>
</Container> </Container>
<Container className="py-6 xl:py-24 text-center space-y-2.5 hidden"> <ClientsLogo />
<div
class="flex lg:gap-12 itens-center justify-center max-lg:overflow-x-scroll snap-x snap-mandatory scroll-smoothscrollbar-hide"
>
<Natura class="snap-center flex-shrink-0 size-36 fill-white" />
<Nissan class="snap-center flex-shrink-0 size-36 fill-white" />
<Manserv class="snap-center flex-shrink-0 size-36 fill-white" />
<Kordsa class="snap-center flex-shrink-0 size-36 fill-white" />
<Semeq class="snap-center flex-shrink-0 size-36 fill-white" />
</div>
</Container>
<Container className="py-6 xl:py-24 lg:text-center space-y-2.5 lg:space-y-6">
<h2 class="text-pretty font-semibold text-4xl">
Alguns clientes que acreditam em nós
</h2>
<div
class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-12 lg:justify-center"
>
<div
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
>
<Natura class="size-52 lg:size-36 fill-white" />
</div>
<div
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
>
<Nissan class="size-52 lg:size-36 fill-white" />
</div>
<div
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
>
<Manserv class="size-52 lg:size-36 fill-white" />
</div>
<div
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
>
<Kordsa class="size-52 lg:size-36 fill-white" />
</div>
<div
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
>
<Semeq class="size-52 lg:size-36 fill-white" />
</div>
</div>
</Container>
<Container> <Container>
<div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3"> <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">