sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-21 12:17:14 -03:00
parent ae71d5a7ce
commit 24392f795b
12 changed files with 363 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
superpage/.prettierrc
View File

@@ -1,5 +1,4 @@
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,

2
superpage/astro.config.mjs
View File

@@ -5,6 +5,7 @@ import react from '@astrojs/react'
import tailwindcss from '@tailwindcss/vite'
import partytown from '@astrojs/partytown'
import sitemap from '@astrojs/sitemap'
import alpinejs from '@astrojs/alpinejs'
import icon from 'astro-icon'
// https://astro.build/config
@@ -14,6 +15,7 @@ export default defineConfig({
react(),
sitemap(),
icon(),
alpinejs(),
partytown({
config: {
forward: ['dataLayer.push', 'fbq'],

43
superpage/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "eduseg",
"version": "0.0.1",
"dependencies": {
"@astrojs/alpinejs": "^0.4.6",
"@astrojs/partytown": "^2.1.4",
"@astrojs/react": "^4.2.1",
"@astrojs/sitemap": "^3.3.0",
@@ -16,8 +17,10 @@
"@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13",
"@tanstack/react-query": "^5.68.0",
"@types/alpinejs": "^3.13.11",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"alpinejs": "^3.14.9",
"astro": "^5.7.2",
"astro-icon": "^1.1.5",
"axios": "^1.8.3",
@@ -72,6 +75,16 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@astrojs/alpinejs": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/@astrojs/alpinejs/-/alpinejs-0.4.6.tgz",
"integrity": "sha512-uogG08bVN8ER8ANVAmfipUw3tZMk+SrZICtH5NMHmsDnSIuLSrXNa9+rCbAXHe/pbTfNUvlp5gE9jSxbd0KYFQ==",
"license": "MIT",
"peerDependencies": {
"@types/alpinejs": "^3.0.0",
"alpinejs": "^3.0.0"
}
},
"node_modules/@astrojs/compiler": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.11.0.tgz",
@@ -2233,6 +2246,12 @@
"node": ">=10.13.0"
}
},
"node_modules/@types/alpinejs": {
"version": "3.13.11",
"resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.13.11.tgz",
"integrity": "sha512-3KhGkDixCPiLdL3Z/ok1GxHwLxEWqQOKJccgaQL01wc0EVM2tCTaqlC3NIedmxAXkVzt/V6VTM8qPgnOHKJ1MA==",
"license": "MIT"
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2409,6 +2428,21 @@
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
}
},
"node_modules/@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"license": "MIT",
"dependencies": {
"@vue/shared": "3.1.5"
}
},
"node_modules/@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
"license": "MIT"
},
"node_modules/acorn": {
"version": "8.14.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -2421,6 +2455,15 @@
"node": ">=0.4.0"
}
},
"node_modules/alpinejs": {
"version": "3.14.9",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.9.tgz",
"integrity": "sha512-gqSOhTEyryU9FhviNqiHBHzgjkvtukq9tevew29fTj+ofZtfsYriw4zPirHHOAy9bw8QoL3WGhyk7QqCh5AYlw==",
"license": "MIT",
"dependencies": {
"@vue/reactivity": "~3.1.1"
}
},
"node_modules/ansi-align": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",

3
superpage/package.json
View File

@@ -9,6 +9,7 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/alpinejs": "^0.4.6",
"@astrojs/partytown": "^2.1.4",
"@astrojs/react": "^4.2.1",
"@astrojs/sitemap": "^3.3.0",
@@ -17,8 +18,10 @@
"@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13",
"@tanstack/react-query": "^5.68.0",
"@types/alpinejs": "^3.13.11",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"alpinejs": "^3.14.9",
"astro": "^5.7.2",
"astro-icon": "^1.1.5",
"axios": "^1.8.3",

6
superpage/src/components/Accordion.astro
View File

@@ -0,0 +1,6 @@
<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>
<summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary>
<div class="mt-3 text-sm leading-6 text-gray-600">
<p>The mug is round. The jar is round. They should call it Roundtine.</p>
</div>
</details>

70
superpage/src/components/Carousel.astro
View File

@@ -5,48 +5,48 @@ const { items = [] } = Astro.props
---
<div id="carousel" class="relative">
<button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronLeftIcon className="w-6" />
</button>
<button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronLeftIcon className="w-6" />
</button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronRightIcon className="w-6" />
</button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronRightIcon className="w-6" />
</button>
<div
class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
>
{
items.map((Component, idx) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0" key={idx}>
<Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div>
))
}
</div>
<div
class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
>
{
items.map((Component, idx) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0">
<Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div>
))
}
</div>
</div>
<script>
const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0
const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0
const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
})
currentIndex = index
const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
})
currentIndex = index
}
}
}
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
</script>

58
superpage/src/components/HeaderNav.astro
View File

@@ -1,15 +1,57 @@
---
import { Icon } from 'astro-icon/components'
import Container from './Container.astro'
---
<nav class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm">
<Container class="flex items-center">
<!-- <Menu recentCourses={courses} client:load /> -->
<nav
class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
x-data="{ open: false }"
x-on:keydown.esc.prevent.stop="open = false"
>
<Container class="flex items-center">
<button
class="text-black font-semibold cursor-pointer flex items-center gap-1 hover:outline-2 rounded"
x-bind:aria-expanded="open"
x-on:click="open = true"
aria-haspopup="true"
>
<div class="truncate max-w-36 sm:max-w-72 md:max-w-124">NR-18 PEMT Plataforma Móvel de Trabalho</div>
<Icon name="chevron" aria-hidden="true" class="w-4" />
</button>
<button
class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
<button
class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
>
Contratar agora
</button>
</Container>
<div
x-cloak
x-show="open"
x-on:click.outside="open = false"
role="menu"
class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm"
style="display: none"
>
Contratar agora
</button>
</Container>
<Container class="text-black relative xl:w-10/12 2xl:w-5xl">
<button
class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
title="Fechar"
aria-hidden={true}
x-on:click="open = false"
>
<Icon name="xmark" />
</button>
<div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
<span>Curso de formação</span>
<h1 class="text-xl lg:text-2xl">NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</h1>
</div>
<div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
<h6 class="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
</div>
</Container>
</div>
</nav>

3
superpage/src/icons/chevron.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 22 13">
<path stroke-width="2" d="m1 1 10 10L21 1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 151 B

3
superpage/src/icons/xmark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 206 B

405
superpage/src/pages/[slug].astro
View File

@@ -7,233 +7,238 @@ 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 placeholder from '~/assets/placeholder.png'
import mulherdenegocios from '~/assets/mulher-de-negocios.png'
import homemdenegocios from '~/assets/homem-de-negocios.png'
import { getCollection, getEntry } from 'astro:content'
export async function getStaticPaths() {
const courses = await getCollection('courses', ({ data }) => data.draft != true)
const courses = await getCollection('courses', ({ data }) => data.draft != true)
return courses.map((course) => {
return {
params: { slug: course.id },
props: { course },
}
})
return courses.map((course) => {
return {
params: { slug: course.id },
props: { course },
}
})
}
const {
course: { data },
course: { data },
} = Astro.props
const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
---
<Fragment slot="head">
<title>{data.title}</title>
<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>
<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>
<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&reg;</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&reg, 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 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>
</div>
</div>
</div>
</section>
</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" />
<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>
<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>
<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>
<!-- <Form client:load /> -->
</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&reg;
</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&reg, 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>

24
superpage/src/pages/blog/[slug].astro
View File

@@ -3,13 +3,13 @@ import Layout from '~/layouts/Layout.astro'
import Container from '~/components/Container'
export async function getStaticPaths() {
const data = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
const posts = await data.json()
const data = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
const posts = await data.json()
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}))
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}))
}
const { post } = Astro.props
@@ -18,10 +18,10 @@ const { post } = Astro.props
<title slot="head">{post.title.rendered}</title>
<Layout>
<Container>
<article>
<h1 set:html={post.title.rendered} />
<Fragment set:html={post.content.rendered} />
</article>
</Container>
<Container>
<article>
<h1 set:html={post.title.rendered} />
<Fragment set:html={post.content.rendered} />
</article>
</Container>
</Layout>

2
superpage/src/pages/index.astro
View File

@@ -1,6 +1,6 @@
---
import Layout from '~/layouts/Layout.astro'
import Container from '~/components/Container'
import Container from '~/components/Container.astro'
let res = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
let posts = await res.json()