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

update

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-23 10:05:58 -03:00
parent 270a9c6e68
commit 2794934520
21 changed files with 1083 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,38 +1,43 @@
---
import { Picture } from 'astro:assets'
import { Icon } from 'astro-icon/components'
import Layout from '~/layouts/Layout.astro'
import Container from '~/components/Container.astro'
import Carousel from '~/components/Carousel.astro'
import Kordsa from '~/components/logos/Kordsa.astro'
import Semeq from '~/components/logos/Semeq.astro'
import Natura from '~/components/logos/Natura.astro'
import Nissan from '~/components/logos/Nissan.astro'
import Manserv from '~/components/logos/Manserv.astro'
import Contact from './_components/Contact.jsx'
import { Picture } from "astro:assets";
import { Icon } from "astro-icon/components";
import Layout from "~/layouts/Layout.astro";
import Container from "~/components/Container.astro";
import Carousel from "~/components/Carousel.astro";
import Kordsa from "~/components/logos/Kordsa.astro";
import Semeq from "~/components/logos/Semeq.astro";
import Natura from "~/components/logos/Natura.astro";
import Nissan from "~/components/logos/Nissan.astro";
import Manserv from "~/components/logos/Manserv.astro";
import Contact from "./_components/Contact.jsx";
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'
import { getCollection, getEntry, render } from "astro:content";
export async function getStaticPaths() {
const courses = await getCollection('courses', ({ data }) => data.draft != true)
const courses = await getCollection(
"courses",
({ data }) => data.draft != true,
);
return courses.map((course) => {
return {
params: { slug: course.id },
props: { course },
}
})
};
});
}
const {
course: { data },
} = Astro.props
const { course } = Astro.props;
const { data } = course;
const { Content } = await render(course);
const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
const trainer = data.course?.trainer
? await getEntry(data.course?.trainer)
: null;
---
<Fragment slot="head">
@@ -45,41 +50,60 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<Picture
src={data?.image ? data.image : placeholder}
alt={data.title}
formats={['webp']}
formats={["webp"]}
class="max-lg:hidden max-w-116 grayscale-15"
/>
<section class="lg:py-24">
<div class="space-y-5">
<span class="font-medium">
{data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>}
{
data.course.reciclagem ? (
<>Curso de reciclagem</>
) : (
<>Curso de formação</>
)
}
</span>
<h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
{data.title}
</h1>
<p class="text-base/6">
{data.summary}
<a href="#modulos" class="text-blue-400 *:hover:underline">
<a
href="#modulos"
class="text-blue-400 *:hover:underline"
>
<sup>[1]</sup>
</a>
</p>
<ul class="lg:flex gap-3">
<li class="flex gap-1">
<Icon name="clock" class="size-5" />
<span>Carga horária de {data.course.hours} horas</span>
<span
>Carga horária de {data.course.hours} horas</span
>
</li>
<li class="flex gap-1">
<Icon name="check-badge" class="size-5 text-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">
<a
href="#certificado"
class="text-blue-400 *:hover:underline"
>
<sup>[2]</sup>
</a>
</span>
</li>
</ul>
<div class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16">
<div
class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"
>
<a
href="#"
class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
@@ -95,18 +119,35 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<span class="font-bold">4.7</span>
<ul class="flex">
<li>
<Icon name="star" class="size-4 text-yellow-500" />
<Icon
name="star"
class="size-4 text-yellow-500"
/>
</li>
<li>
<Icon name="star" class="size-4 text-yellow-500" />
<Icon
name="star"
class="size-4 text-yellow-500"
/>
</li>
<li>
<Icon name="star" class="size-4 text-yellow-500" />
<Icon
name="star"
class="size-4 text-yellow-500"
/>
</li>
<li>
<Icon name="star" class="size-4 text-yellow-500" />
<Icon
name="star"
class="size-4 text-yellow-500"
/>
</li>
<li>
<Icon
name="star"
class="size-4 text-gray-500"
/>
</li>
<li><Icon name="star" class="size-4 text-gray-500" /></li>
</ul>
</div>
<span>66 avaliações no Google</span>
@@ -117,7 +158,9 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</Container>
<Container class="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>
<h2 class="text-pretty font-semibold text-4xl">
Alguns clientes que acreditam em nós
</h2>
<Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
</Container>
@@ -125,15 +168,21 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<Container class="flex justify-between lg:w-6/12">
<ul class="space-y-2.5">
<li class="text-5xl">+ 100k</li>
<li class="uppercase font-bold text-white/50">Profissionais capacitados</li>
<li class="uppercase font-bold text-white/50">
Profissionais capacitados
</li>
</ul>
<ul class="space-y-2.5">
<li class="text-5xl">+ 5k</li>
<li class="uppercase font-bold text-white/50">Empresas atendidas</li>
<li class="uppercase font-bold text-white/50">
Empresas atendidas
</li>
</ul>
<ul class="space-y-2.5">
<li class="text-5xl">12 anos</li>
<li class="uppercase font-bold text-white/50">de experiência</li>
<li class="uppercase font-bold text-white/50">
de experiência
</li>
</ul>
</Container>
</div>
@@ -145,13 +194,13 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
>
<Picture
alt="Homem de negócios"
formats={['webp']}
formats={["webp"]}
src={homemdenegocios}
class="w-94 absolute bottom-0 -left-28"
/>
<Picture
alt="Mulher de negócios"
formats={['webp']}
formats={["webp"]}
src={mulherdenegocios}
class="w-96 absolute bottom-0 -right-24"
/>
@@ -163,20 +212,33 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
Por que capacitar sua equipe com a EDUSEG&reg;
</h3>
<p>
Nós cuidamos da burocracia, oferecemos uma plataforma completa para simplicar a gestão e
capacitação em larga escala de seus colaboradores. Com a EDUSEG&reg, sua empresa se
beneficia de uma tecnologia eficiente e confiável.
Nós cuidamos da burocracia, oferecemos uma
plataforma completa para simplicar a gestão e
capacitação em larga escala de seus colaboradores.
Com a EDUSEG&reg, sua empresa se beneficia de uma
tecnologia eficiente e confiável.
</p>
<ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Centralização de todos os certificados</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Agilidade na liberação de cursos</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Agendamento para liberação de cursos</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Aviso de vencimento para certificados</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
Centralização de todos os certificados
</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
Agilidade na liberação de cursos
</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
Agendamento para liberação de cursos
</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
Aviso de vencimento para certificados
</li>
</ul>
<div class="text-center">
<a href="#contato" class="text-blue-400 underline hover:no-underline">
<a
href="#contato"
class="text-blue-400 underline hover:no-underline"
>
Agendar uma demonstração
</a>
</div>
@@ -186,51 +248,22 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</Container>
<!-- Course Modules -->
<Container id="modulos" class="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6">
<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>
<h4 class="text-pretty text-4xl lg:text-5xl">
Módulos deste curso
</h4>
<p class="text-base/6">
O curso é dividido em módulos para facilitar seu aprendizado e garantir que você domine todos os
aspectos teóricos e práticos.
O curso é dividido em módulos para facilitar seu aprendizado
e garantir que você domine todos os aspectos teóricos e
práticos.
</p>
</div>
<div class="lg:col-span-2 flex flex-col gap-1.5">
{
data.course.modules.map((data) => {
if (typeof data === 'string') {
return <div class="bg-white/10 rounded-lg w-full px-5 py-3">{data}</div>
}
const { summary, content } = data
return (
<div
x-data="{ open: false }"
class="bg-white/10 rounded-lg w-full"
:class="{'bg-white/15': open === true}"
>
<div
class="cursor-pointer flex items-center justify-between px-5 py-3"
x-on:click="open = !open"
>
<span>{summary}</span>
<Icon
name="chevron"
class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
:class="{'-rotate-180': open === true}"
/>
</div>
<div
x-show="open"
class="text-sm/6 text-white/70 space-y-2 px-5 pb-3"
style="display: none;"
>
{content}
</div>
</div>
)
})
}
<Content />
</div>
</Container>
<!-- Course Modules End -->
@@ -240,14 +273,21 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<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"
>
<Icon name="lock-closed" class="size-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
<Icon
name="lock-closed"
class="size-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">
<h5 class="text-4xl lg:text-6xl/14 lg:font-black">
Certificados digitais com respaldo legal e gestão completa
Certificados digitais com respaldo legal e gestão
completa
</h5>
<ul class="lg:text-lg list-disc list-inside">
<li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li>
<li>
Certificado com assinatura digital conforme o padrão
ICP-Brasil
</li>
<li>Tudo digital e salvo para sempre na núvem</li>
<li>Alertas automáticos de vencimento</li>
</ul>
@@ -266,24 +306,40 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<Picture
src={trainer.data.image}
alt={trainer.data.name}
formats={['webp']}
formats={["webp"]}
class="rounded-xl size-32 outline-2 outline-offset-2 outline-lime-400"
/>
</div>
<div class="space-y-2.5">
<h6 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h6>
<p class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</p>
<h6 class="text-xl text-pretty">
Quem é o(a) instrutor(a)?
</h6>
<p class="text-4xl lg:text-5xl text-pretty">
{trainer.data.name}
</p>
<div class="text-sm/6 text-white/70 space-y-2.5" set:html={trainer?.rendered?.html} />
<div
class="text-sm/6 text-white/70 space-y-2.5"
set:html={trainer?.rendered?.html}
/>
<div class="flex">
{trainer.data.networks.map(({ url, alt }) => {
return (
<a href={url} target="_blank" aria-labelledby={alt}>
<Icon name={alt.toLowerCase()} class="fill-white/70 size-5" />
</a>
)
})}
{trainer.data.networks.map(
({ url, alt }) => {
return (
<a
href={url}
target="_blank"
aria-labelledby={alt}
>
<Icon
name={alt.toLowerCase()}
class="fill-white/70 size-5"
/>
</a>
);
},
)}
</div>
</div>
</div>