This commit is contained in:
2025-04-30 20:47:37 -03:00
parent ff14089513
commit 93ededf81d
3 changed files with 140 additions and 136 deletions

View File

@@ -4,13 +4,13 @@ import Modules from "./Modules.astro";
import Features from "../Features.astro"; import Features from "../Features.astro";
import Cert from "./Cert.astro"; import Cert from "./Cert.astro";
import Trainer from "./Trainer.astro"; import Trainer from "./Trainer.astro";
import Plans from "./Plans.astro"; import Solutions from "./Solutions.astro";
import Faq from "./Faq.astro"; import Faq from "./Faq.astro";
const { trainer } = Astro.props; const { trainer } = Astro.props;
--- ---
<Plans id="plans" data-pagefind-ignore="all" /> <Solutions id="solutions" data-pagefind-ignore="all" />
<Clients id="clients" data-pagefind-ignore="all" /> <Clients id="clients" data-pagefind-ignore="all" />

View File

@@ -36,152 +36,156 @@ const { Content } = await render(course);
<HeaderNav {...data} /> <HeaderNav {...data} />
</Fragment> </Fragment>
<section class="space-y-6 lg:space-y-24 relative"> <section class="space-y-6 lg:space-y-24">
<div <div class="relative">
aria-hidden="true"
class="absolute inset-0 grid grid-cols-2 opacity-20 max-lg:hidden"
>
<div <div
class="blur-[106px] h-76 bg-gradient-to-br to-lime-400 from-lime-700" 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> </div>
<div
class="blur-[106px] h-62 bg-gradient-to-r from-lime-400 to-lime-600" {/* Course */}
<Container
class="lg:flex items-center justify-start gap-6 relative z-1"
> >
</div> <Picture
</div> src={data?.image ? data.image : placeholder}
alt={data.title}
{/* Course */} formats={["webp"]}
<Container class="lg:flex items-center justify-start gap-6"> class="max-lg:hidden max-w-116 grayscale-15"
<Picture />
src={data?.image ? data.image : placeholder} <section class="max-lg:pt-6 lg:py-24">
alt={data.title} <div class="space-y-5">
formats={["webp"]} <span class="font-medium">
class="max-lg:hidden max-w-116 grayscale-15" {
/> data.course.reciclagem ? (
<section class="max-lg:pt-6 lg:py-24"> <>Curso de reciclagem</>
<div class="space-y-5"> ) : (
<span class="font-medium"> <>Curso de formação</>
{ )
data.course.reciclagem ? ( }
<>Curso de reciclagem</> </span>
) : ( <h1
<>Curso de formação</> class="text-pretty font-bold text-4xl lg:text-7xl"
) data-pagefind-meta="title"
} data-pagefind-filter=`curso:${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"
> >
{data.title}
</h1>
<p class="text-base/6">
{data.excerpt}
<a <a
href="#" href="#modules"
class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black transition" class="text-blue-400 *:hover:underline"
> >
Contratar { <sup>[1]</sup>
new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(data.course.unit_price)
} p/ matrícula
</a> </a>
<a </p>
href="#plans" <ul class="lg:flex gap-3" data-pagefind-ignore="all">
class="text-blue-400 underline hover:no-underline text-center" <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"
> >
Ver mais modelos de contratação <a
href="#"
class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black transition"
>
Contratar {
new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(data.course.unit_price)
} p/ matrícula
</a>
<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> </a>
</div> </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>
</div> </section>
</section> </Container>
</Container> {/* Course End */}
{/* Course End */} </div>
<Content /> <Content />
</section> </section>