240 lines
8.8 KiB
Plaintext
240 lines
8.8 KiB
Plaintext
---
|
|
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'
|
|
import Carousel from '~/components/Carousel.astro'
|
|
import placeholder from '~/assets/placeholder.png'
|
|
import mulherdenegocios from '~/assets/mulher-de-negocios.png'
|
|
import homemdenegocios from '~/assets/homem-de-negocios.png'
|
|
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 { getCollection, getEntry } from 'astro:content'
|
|
|
|
export async function getStaticPaths() {
|
|
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 trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
|
|
---
|
|
|
|
<Fragment slot="head">
|
|
<title>{data.title}</title>
|
|
</Fragment>
|
|
|
|
<Layout>
|
|
<div 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}
|
|
alt={data.title}
|
|
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</>}
|
|
</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">
|
|
<sup>[1]</sup>
|
|
</a>
|
|
</p>
|
|
<ul class="lg:flex gap-3">
|
|
<li class="flex gap-1">
|
|
<ClockIcon className="w-5" />
|
|
<span>Carga horária de {data.course.hours} horas</span>
|
|
</li>
|
|
|
|
<li class="flex gap-1">
|
|
<CheckBadgeIcon className="w-5 fill-blue-400" />
|
|
<span>
|
|
Certificado com assinatura digital
|
|
<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">
|
|
<a
|
|
href="#"
|
|
class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
|
|
>
|
|
Contratar agora
|
|
</a>
|
|
<a
|
|
href="http://bit.ly/3RlROu6"
|
|
class="flex flex-col hover:outline rounded outline-offset-3"
|
|
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" />
|
|
</li>
|
|
<li>
|
|
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
|
|
</li>
|
|
<li>
|
|
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
|
|
</li>
|
|
<li>
|
|
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
|
|
</li>
|
|
<li><StarIcon className="w-4" /></li>
|
|
</ul>
|
|
</div>
|
|
<span>66 avaliações no Google</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</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>
|
|
<Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
|
|
</Container>
|
|
|
|
<Container>
|
|
<div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
|
|
<div
|
|
class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-5 relative h-136 max-lg:hidden -m-px max-xl:overflow-hidden"
|
|
>
|
|
<Picture
|
|
alt="Homem de negócios"
|
|
formats={['webp']}
|
|
src={homemdenegocios}
|
|
class="w-94 absolute bottom-0 -left-28"
|
|
/>
|
|
<Picture
|
|
alt="Mulher de negócios"
|
|
formats={['webp']}
|
|
src={mulherdenegocios}
|
|
class="w-96 absolute bottom-0 -right-24"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-2 flex items-center">
|
|
<div class="xl:w-8/12 xl:mx-auto space-y-5 p-6">
|
|
<h3 class="text-pretty text-4xl font-semibold">Por que capacitar sua equipe com a EDUSEG®</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®, 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">Ágilidade 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="#" class="text-blue-400 underline hover:no-underline"> Agendar uma demonstração </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
|
|
<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>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
<div class="lg:col-span-2 flex flex-col gap-1.5">
|
|
<Faq topics={data.course.modules} client:load />
|
|
</div>
|
|
</Container>
|
|
|
|
{
|
|
trainer && (
|
|
<Container>
|
|
<div class="bg-white/10 rounded-2xl p-5 xl:py-32">
|
|
<div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
|
|
<div class="shrink-0">
|
|
<Picture
|
|
src={trainer.data.image}
|
|
alt={trainer.data.name}
|
|
formats={['webp']}
|
|
class="rounded-xl size-32 outline-2 outline-offset-2 outline-lime-400"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2.5">
|
|
<h5 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h5>
|
|
<h5 class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</h5>
|
|
|
|
{trainer.data.bio.split(/\r?\n/).map((x) => (
|
|
<p class="text-sm/6 text-white/70">{x}</p>
|
|
))}
|
|
|
|
<div class="flex">
|
|
<a
|
|
href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/"
|
|
target="_blank"
|
|
aria-label="LinkedIn"
|
|
>
|
|
<Icon name="LinkedIn" class="fill-white/70 size-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
<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" />
|
|
|
|
<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">
|
|
Certificados digitais com respaldo legal e gestão completa
|
|
</h6>
|
|
<ul class="lg:text-lg list-disc list-inside">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
|
|
<!-- <Form client:load /> -->
|
|
</div>
|
|
</Layout>
|