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

add accordtion

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-21 13:51:29 -03:00
parent 4cd136ea04
commit 735e35ff71
17 changed files with 73 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,5 @@
---
import { Picture } from 'astro:assets'
import { Faq } from '~/components/Faq'
import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
import { CheckBadgeIcon, LockClosedIcon } from '@heroicons/react/24/solid'
import { Icon } from 'astro-icon/components'
import Layout from '~/layouts/Layout.astro'
import Container from '~/components/Container.astro'
@@ -13,9 +10,9 @@ import Natura from '~/components/logos/Natura.astro'
import Nissan from '~/components/logos/Nissan.astro'
import Manserv from '~/components/logos/Manserv.astro'
import placeholder from '~/assets/placeholder.png'
import mulherdenegocios from '~/assets/mulher-de-negocios.png'
import homemdenegocios from '~/assets/homem-de-negocios.png'
import placeholder from './_assets/placeholder.png'
import mulherdenegocios from './_assets/mulher-de-negocios.png'
import homemdenegocios from './_assets/homem-de-negocios.png'
import { getCollection, getEntry } from 'astro:content'
@@ -42,7 +39,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</Fragment>
<Layout>
<div class="space-y-6 lg:space-y-24">
<section class="space-y-6 lg:space-y-24">
<Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
<Picture
src={data?.img ? data.img : placeholder}
@@ -66,12 +63,12 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</p>
<ul class="lg:flex gap-3">
<li class="flex gap-1">
<ClockIcon className="w-5" />
<Icon name="clock" class="size-5" />
<span>Carga horária de {data.course.hours} horas</span>
</li>
<li class="flex gap-1">
<CheckBadgeIcon className="w-5 fill-blue-400" />
<Icon name="check-badge" class="size-5 text-blue-400" />
<span>
Certificado com assinatura digital
<a href="#certificado" class="text-blue-400 *:hover:underline">
@@ -90,25 +87,25 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</a>
<a
href="http://bit.ly/3RlROu6"
class="flex flex-col hover:outline rounded outline-offset-3"
class="flex flex-col hover:outline rounded outline-offset-2"
target="_blank"
>
<div class="flex items-center gap-1">
<span class="font-bold">4.7</span>
<ul class="flex">
<li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
<Icon name="star" class="size-4 text-yellow-500" />
</li>
<li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
<Icon name="star" class="size-4 text-yellow-500" />
</li>
<li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
<Icon name="star" class="size-4 text-yellow-500" />
</li>
<li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
<Icon name="star" class="size-4 text-yellow-500" />
</li>
<li><StarIcon className="w-4" /></li>
<li><Icon name="star" class="size-4 text-gray-500" /></li>
</ul>
</div>
<span>66 avaliações no Google</span>
@@ -170,6 +167,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</div>
</Container>
<!-- Course Modules -->
<Container id="modulos" class="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6">
<div class="space-y-2.5">
<h4 class="text-pretty text-4xl lg:text-5xl">Módulos deste curso</h4>
@@ -179,10 +177,35 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</p>
</div>
<div class="lg:col-span-2 flex flex-col gap-1.5">
<Faq topics={data.course.modules} client:load />
{
data.course.modules.map((summary) => (
<details class="bg-white/10 rounded-lg w-full px-5 py-3 open:bg-white/15 open:[&_svg]:-rotate-180">
<summary class="cursor-pointer flex items-center justify-between">
<span>{summary}</span>
<Icon
name="chevron"
class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
/>
</summary>
<div class="text-sm/6 text-white/70 space-y-2 mt-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque id
libero semper vulputate a ut ex. Pellentesque semper ultrices mi in efficitur.
</p>
<p>
Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu commodo sem.
Suspendisse ac lobortis massa, ac mattis mauris. Integer malesuada bibendum ante,
sed consequat augue convallis et.
</p>
</div>
</details>
))
}
</div>
</Container>
<!-- Course Modules End -->
<!-- Trainer -->
{
trainer && (
<Container>
@@ -219,12 +242,14 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</Container>
)
}
<!-- Trainer End -->
<!-- Cert -->
<Container id="certificado">
<div
class="text-black bg-linear-to-t from-lime-600 to-lime-400 border border-lime-400 p-5 lg:py-36 rounded-2xl relative overflow-hidden"
>
<LockClosedIcon className="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
<Icon name="lock-closed" class="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
<div class="lg:w-8/12 2xl:w-6/14 mx-auto space-y-5">
<h6 class="text-4xl lg:text-6xl/14 lg:font-black">
@@ -238,7 +263,6 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</div>
</div>
</Container>
<!-- <Form client:load /> -->
</div>
<!-- Cert End -->
</section>
</Layout>