update superpage

This commit is contained in:
2025-04-15 19:07:36 -03:00
parent 27769ba363
commit c702ca870b
24 changed files with 538 additions and 605 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

View File

@@ -1,77 +1,234 @@
---
import { Bookmark } from "@components/Bookmark";
import { Card } from "@components/Card";
import { Container } from "@components/Container";
import { Form } from "@components/Form";
import Layout from "@layouts/Layout.astro";
import { Image } from 'astro:assets'
import { Card } from '@components/Card'
import { Container } from '@components/Container'
import { Form } from '@components/Form'
import Layout from '@layouts/Layout.astro'
import { Example } from '@components/List'
import {
AcademicCapIcon,
GlobeAmericasIcon,
PhoneIcon,
BanknotesIcon,
StarIcon,
ClockIcon,
} from '@heroicons/react/24/outline'
import { CheckBadgeIcon } from '@heroicons/react/24/solid'
import nr18plataforma from './nr18-plataforma.png'
import mulherdenegocios from './mulher-de-negocios.png'
import homemdenegocios from './homem-de-negocios.png'
---
<Layout>
<Container className="lg:space-y-5 lg:p-3">
<!-- <div class="max-lg:px-5">
<Bookmark className="h-96" />
</div> -->
<Card>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
quis mattis tortor, sit amet mollis lorem. In imperdiet, ante
sit amet maximus dictum, est elit ultrices lacus, in placerat
ante risus vel massa. Maecenas porta purus non feugiat
venenatis. Sed tempus quam id commodo interdum. Aliquam id
ullamcorper diam. Morbi a porttitor tellus. Fusce viverra
euismod laoreet. Cras id sapien quis orci rutrum lacinia. Donec
vitae libero at felis auctor blandit commodo sed libero. Aliquam
tellus risus, sagittis a libero eget, hendrerit feugiat mauris.
Ut vehicula id est non iaculis. Suspendisse potenti. Maecenas in
tellus risus. Proin quis libero et ero s ullamcorper faucibus
non vitae lacus. Vestibulum at ultricies sem, vel euismod dolor.
</p><p>
In tempor vel felis ut imperdiet. Pellentesque ac vulputate
lorem, id pellentesque velit. Sed rutrum, nisi vel convallis
rhoncus, ex mi vulputate leo, id hendrerit ipsum sapien in
dolor. Nullam auctor eu nunc sed euismod. Donec molestie velit
nec est bibendum pulvinar. Nullam mattis mollis neque, nec
cursus mi iaculis et. Morbi tempus purus sit amet orci pulvinar
accumsan. Fusce mattis, nisl ac fringilla euismod, orci odio
condimentum sapien, a convallis lacus diam et libero. Nunc non
urna a orci eleifend porttitor in eget nisi. Ut scelerisque
egestas hendrerit. Aenean in tortor cursus, lobortis dolor
iaculis, dignissim velit. Nulla facilisi.
</p>
</Card>
<Container className="py-3 lg:py-12 lg:flex items-center gap-5">
<Image
src={nr18plataforma}
alt="NR-18"
class="size-1/3 object-bottom hidden lg:block"
/>
<section>
<div class="space-y-5">
<span class="font-medium">Curso de formação</span>
<h1 class="font-semibold text-5xl lg:text-7xl">
NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
</h1>
<p class="text-base/6">
NR 18 PEMT capacita operadores de plataformas elevatórias para
trabalhos em altura com segurança. Com foco na manutenção, inspeção e
uso correto dos EPIs, previne sempre acidentes, garante certificação
MTE e valoriza sua carreira.
</p>
<ul class="lg:flex gap-3">
<li class="flex gap-1">
<ClockIcon className="w-5" />
<span>Carga horária de 40 horas</span>
</li>
<Card color="darker">
<p>
In tempor vel felis ut imperdiet. Pellentesque ac vulputate
lorem, id pellentesque velit. Sed rutrum, nisi vel convallis
rhoncus, ex mi vulputate leo, id hendrerit ipsum sapien in
dolor. Nullam auctor eu nunc sed euismod. Donec molestie velit
nec est bibendum pulvinar. Nullam mattis mollis neque, nec
cursus mi iaculis et. Morbi tempus purus sit amet orci pulvinar
accumsan. Fusce mattis, nisl ac fringilla euismod, orci odio
condimentum sapien, a convallis lacus diam et libero. Nunc non
urna a orci eleifend porttitor in eget nisi. Ut scelerisque
egestas hendrerit. Aenean in tortor cursus, lobortis dolor
iaculis, dignissim velit. Nulla facilisi.
</p>
</Card>
<li class="flex gap-1">
<CheckBadgeIcon className="w-5 fill-blue-400" />
<span>Certificado com assinatura digital</span>
</li>
</ul>
<section class="grid lg:grid-cols-2 gap-6 p-3">
<div class="flex items-center justify-center">
<div class="space-y-3">
<h4 class="font-medium text-4xl">Solicite um orçamento</h4>
<p>
Quer saber como podemos capacitar sua equipe?<br
class="max-lg:hidden"
/>
Fale com nossa equipe e receba uma proposta personalizada.
</p>
</div>
<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"
>
Contratar agora
</a>
<a href="http://bit.ly/3RlROu6" class="flex flex-col">
<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>
<Card color="zinc" className="rounded-xl p-4">
<Form client:load />
</Card>
<span>66 avaliações no Google</span>
</a>
</div>
</div>
</section>
</Container>
<Container className="h-full">
<div class="border border-lime-400 rounded-2xl grid grid-cols-3">
<div class="bg-lime-300 rounded-2xl p-6 relative h-[36rem]">
<Image
alt="Homem de negócios"
src={homemdenegocios}
class="absolute bottom-0 -left-32"
/>
<Image
alt="Mulher de negócios"
src={mulherdenegocios}
class="absolute bottom-0 -right-26"
/>
</div>
<div class="col-span-2 flex items-center">
<div class="w-7/12 mx-auto space-y-5 p-6">
<h2 class="text-4xl font-semibold">
Por que capacitar sua equipe com a EDUSEG&reg;
</h2>
<p>
Nós cuidamos da burocracia, oferecemos uma plataforma completa para
simplicar a gestão e capacitação em massa de seus colaboradores. Com
a EDUSEG&reg, sua empresa se beneficia de uma tecnologia eficiente e
confiável.
</p>
<ul class="grid grid-cols-2 gap-2.5">
<li class="bg-white/10 p-5 rounded-lg">
Conformidade legal garantida
</li>
<li class="bg-white/10 p-5 rounded-lg">
Economia de tempo e recursos
</li>
<li class="bg-white/10 p-5 rounded-lg">
Relatórios e monitoramento
</li>
<li class="bg-white/10 p-5 rounded-lg">
Suporte especializado para gestores
</li>
</ul>
</div>
</div>
</div>
</Container>
<Container
className="py-3 lg:py-12 grid gap-2.5 lg:grid-cols-3 lg:gap-5 lg:w-3/6"
>
<div class="space-y-2.5">
<h1 class="text-4xl lg:text-5xl text-pretty">Módulos deste curso</h1>
<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">
<Example client:load />
</div>
</Container>
<Container className="py-6 hidden">
<ul class="flex gap-2.5">
<li class="flex items-center gap-2.5">
<span class="bg-white/10 p-2 rounded">
<BanknotesIcon className="w-6" />
</span>
<span class="text-base/5">Economize até 70% com o curso online</span>
</li>
<li class="flex items-center gap-2.5">
<span class="bg-white/10 p-2 rounded">
<AcademicCapIcon className="w-6" />
</span>
<span class="text-base/6"
>Certificado digital reconhecido em até 24 horas</span
>
</li>
<li class="flex items-center gap-2.5">
<span class="bg-white/10 p-2 rounded">
<GlobeAmericasIcon className="w-6" />
</span>
<span>Aprenda no seu tempo e de qualquer lugar</span>
</li>
<li class="flex items-center gap-2.5">
<span class="bg-white/10 p-2 rounded">
<PhoneIcon className="w-6" />
</span>
<span>Suporte de especialistas sempre que precisar</span>
</li>
</ul>
</Container>
<Container className="hidden">
<h2>Quem é o instrutor?</h2>
</Container>
<!--
<Container className="lg:space-y-5 lg:p-3">
<Card className="space-y-2.5">
<h1 class="text-2xl font-medium">
Garanta a capacitação para sua empresa
</h1>
<ul>
<li>Pagamento flexível</li>
<li>Acesso imediato</li>
<li>Carga horária</li>
</ul>
<ul>
<li>Economize até 70% com o curso online</li>
<li>Certificado Digital reconhecido em até 24 Horas</li>
<li>Aprenda no seu tempo e de qualquer lugar</li>
<li>Suporte de especialistas sempre que precisar</li>
</ul>
</Card>
<section class="lg:grid grid-cols-4">
<div>
<h1 class="text-2xl font-medium">Módulos deste treinamento</h1>
<div>
O curso é dividido em módulos para facilitar seu aprendizado
e garantir que você domine todos os aspectos teóricos e
práticos.
</div>
</div>
<div><Example client:load /></div>
</section>
</Container>
<section class="grid lg:grid-cols-2 gap-6 p-3">
<div class="flex items-center justify-center">
<div class="space-y-3">
<h4 class="font-medium text-4xl">Solicite um orçamento</h4>
<p>
Quer saber como podemos capacitar sua equipe?
<br class="max-lg:hidden" />
Fale com nossa equipe e receba uma proposta personalizada.
</p>
</div>
</div>
<Card color="zinc" className="rounded-xl p-4">
<Form client:load />
</Card>
</section>
-->
</Layout>

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 KiB