188 lines
7.6 KiB
Plaintext
188 lines
7.6 KiB
Plaintext
---
|
|
import { getCollection, getEntries, 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 FlyoutMenu from "~/components/Course/FlyoutMenu.astro";
|
|
import BuyButton from "./_components/BuyButton.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 title={data.title}>
|
|
<Fragment slot="head">
|
|
<title>{data.title} — EDUSEG®</title>
|
|
</Fragment>
|
|
|
|
<Fragment slot="nav">
|
|
<FlyoutMenu {...data} />
|
|
</Fragment>
|
|
|
|
<section class="space-y-6 lg:space-y-24">
|
|
<div class="relative">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 grid grid-cols-2 opacity-20 max-lg:hidden"
|
|
>
|
|
<div
|
|
class="blur-[106px] h-76 bg-gradient-to-br to-lime-400 from-lime-700"
|
|
>
|
|
</div>
|
|
<div
|
|
class="blur-[106px] h-62 bg-gradient-to-r from-lime-400 to-lime-600"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Course */}
|
|
<Container
|
|
class="lg:flex items-center justify-start gap-6 relative z-1"
|
|
>
|
|
<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">
|
|
Curso online de {
|
|
data.course.reciclagem ? (
|
|
<>reciclagem</>
|
|
) : (
|
|
<>formação</>
|
|
)
|
|
}
|
|
</span>
|
|
<h1
|
|
class="text-pretty font-bold text-4xl lg:text-7xl"
|
|
data-pagefind-meta="title"
|
|
data-pagefind-filter=`curso:${data.course.reciclagem ? 'reciclagem' : 'formação'}`
|
|
>
|
|
{data.title}
|
|
</h1>
|
|
<p class="text-base/6">
|
|
{data.excerpt}
|
|
<a
|
|
href="#modules"
|
|
class="text-blue-400 *:hover:underline"
|
|
>
|
|
<sup>[1]</sup>
|
|
</a>
|
|
</p>
|
|
<ul class="lg:flex gap-3" data-pagefind-ignore="all">
|
|
<li class="flex gap-1">
|
|
<Icon name="clock" class="size-5 mt-0.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 mt-0.5"
|
|
/>
|
|
<span>
|
|
Certificado com assinatura digital
|
|
<a
|
|
href="#cert"
|
|
class="text-blue-400 *:hover:underline"
|
|
>
|
|
<sup>[2]</sup>
|
|
</a>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div
|
|
class="flex max-lg:flex-col justify-center items-start gap-2.5 lg:gap-8 lg:mt-16"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-center gap-2.5 max-lg:w-full"
|
|
>
|
|
<BuyButton
|
|
id={data.id}
|
|
name={data.title}
|
|
unitPrice={data.course.unit_price}
|
|
/>
|
|
<a
|
|
href="#solutions"
|
|
class="text-blue-400 underline hover:no-underline text-center"
|
|
>
|
|
Ver mais modelos de contratação
|
|
</a>
|
|
</div>
|
|
<a
|
|
href="http://bit.ly/3RlROu6"
|
|
class="flex flex-col hover:outline rounded-xs 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>
|
|
{/* Course End */}
|
|
</div>
|
|
|
|
<Content />
|
|
</section>
|
|
</Layout>
|