154 lines
5.8 KiB
Plaintext
154 lines
5.8 KiB
Plaintext
---
|
|
import { getCollection, render } from "astro:content";
|
|
import { Picture } from "astro:assets";
|
|
import { Icon } from "astro-icon/components";
|
|
import Layout from "~/layouts/Layout.astro";
|
|
import Container from "~/components/Container.astro";
|
|
import HeaderNav from "~/components/Course/HeaderNav.astro";
|
|
|
|
import placeholder from "~/assets/placeholder.png";
|
|
|
|
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 } = Astro.props;
|
|
const { data } = course;
|
|
const { Content } = await render(course);
|
|
---
|
|
|
|
<Layout>
|
|
<Fragment slot="head">
|
|
<title>{data.title} — EDUSEG®</title>
|
|
</Fragment>
|
|
|
|
<Fragment slot="nav">
|
|
<HeaderNav />
|
|
</Fragment>
|
|
|
|
<section class="space-y-6 lg:space-y-24">
|
|
<Container class="lg:flex items-center justify-start gap-6">
|
|
<Picture
|
|
src={data?.image ? data.image : placeholder}
|
|
alt={data.title}
|
|
formats={["webp"]}
|
|
class="max-lg:hidden max-w-116 grayscale-15"
|
|
/>
|
|
<section class="max-lg:pt-6 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.excerpt}
|
|
<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
|
|
>
|
|
</li>
|
|
|
|
<li class="flex gap-1">
|
|
<Icon
|
|
name="check-badge"
|
|
class="size-5 text-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-2"
|
|
target="_blank"
|
|
>
|
|
<div class="flex items-center gap-1">
|
|
<span class="font-bold">4.7</span>
|
|
<ul class="flex">
|
|
<li>
|
|
<Icon
|
|
name="star"
|
|
class="size-4 text-yellow-500"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<Icon
|
|
name="star"
|
|
class="size-4 text-yellow-500"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<Icon
|
|
name="star"
|
|
class="size-4 text-yellow-500"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<Icon
|
|
name="star"
|
|
class="size-4 text-yellow-500"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<Icon
|
|
name="star"
|
|
class="size-4 text-gray-500"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<span>66 avaliações no Google</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
<Content />
|
|
</section>
|
|
</Layout>
|