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, "useTabs": false,
"semi": false, "semi": false,
"singleQuote": true, "singleQuote": true,

2
superpage/astro.config.mjs
View File

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

43
superpage/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "eduseg", "name": "eduseg",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@astrojs/alpinejs": "^0.4.6",
"@astrojs/partytown": "^2.1.4", "@astrojs/partytown": "^2.1.4",
"@astrojs/react": "^4.2.1", "@astrojs/react": "^4.2.1",
"@astrojs/sitemap": "^3.3.0", "@astrojs/sitemap": "^3.3.0",
@@ -16,8 +17,10 @@
"@heroicons/react": "^2.2.0", "@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13", "@tailwindcss/vite": "^4.0.13",
"@tanstack/react-query": "^5.68.0", "@tanstack/react-query": "^5.68.0",
"@types/alpinejs": "^3.13.11",
"@types/react": "^19.0.10", "@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4", "@types/react-dom": "^19.0.4",
"alpinejs": "^3.14.9",
"astro": "^5.7.2", "astro": "^5.7.2",
"astro-icon": "^1.1.5", "astro-icon": "^1.1.5",
"axios": "^1.8.3", "axios": "^1.8.3",
@@ -72,6 +75,16 @@
"url": "https://github.com/sponsors/antfu" "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": { "node_modules/@astrojs/compiler": {
"version": "2.11.0", "version": "2.11.0",
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.11.0.tgz", "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.11.0.tgz",
@@ -2233,6 +2246,12 @@
"node": ">=10.13.0" "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": { "node_modules/@types/babel__core": {
"version": "7.20.5", "version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", "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" "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": { "node_modules/acorn": {
"version": "8.14.1", "version": "8.14.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -2421,6 +2455,15 @@
"node": ">=0.4.0" "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": { "node_modules/ansi-align": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", "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" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/alpinejs": "^0.4.6",
"@astrojs/partytown": "^2.1.4", "@astrojs/partytown": "^2.1.4",
"@astrojs/react": "^4.2.1", "@astrojs/react": "^4.2.1",
"@astrojs/sitemap": "^3.3.0", "@astrojs/sitemap": "^3.3.0",
@@ -17,8 +18,10 @@
"@heroicons/react": "^2.2.0", "@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13", "@tailwindcss/vite": "^4.0.13",
"@tanstack/react-query": "^5.68.0", "@tanstack/react-query": "^5.68.0",
"@types/alpinejs": "^3.13.11",
"@types/react": "^19.0.10", "@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4", "@types/react-dom": "^19.0.4",
"alpinejs": "^3.14.9",
"astro": "^5.7.2", "astro": "^5.7.2",
"astro-icon": "^1.1.5", "astro-icon": "^1.1.5",
"axios": "^1.8.3", "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"> <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"> <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" /> <ChevronLeftIcon className="w-6" />
</button> </button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10"> <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" /> <ChevronRightIcon className="w-6" />
</button> </button>
<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" 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) => ( items.map((Component, idx) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0" key={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}`} /> <Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div> </div>
)) ))
} }
</div> </div>
</div> </div>
<script> <script>
const carousel = document.getElementById('carousel') const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center') const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0 let currentIndex = 0
const scrollToSlide = (index) => { const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) { if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({ slides[index].scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: 'nearest', block: 'nearest',
inline: 'center', inline: 'center',
}) })
currentIndex = index currentIndex = index
}
} }
}
document.getElementById('prev').addEventListener('click', () => { document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1) scrollToSlide(currentIndex - 1)
}) })
document.getElementById('next').addEventListener('click', () => { document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1) scrollToSlide(currentIndex + 1)
}) })
</script> </script>

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

@@ -1,15 +1,57 @@
--- ---
import { Icon } from 'astro-icon/components'
import Container from './Container.astro' import Container from './Container.astro'
--- ---
<nav class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"> <nav
<Container class="flex items-center"> class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
<!-- <Menu recentCourses={courses} client:load /> --> 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 <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" 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 <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
</button> <button
</Container> 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> </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 Layout from '~/layouts/Layout.astro'
import Container from '~/components/Container.astro' import Container from '~/components/Container.astro'
import Carousel from '~/components/Carousel.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 Kordsa from '~/components/logos/Kordsa.astro'
import Semeq from '~/components/logos/Semeq.astro' import Semeq from '~/components/logos/Semeq.astro'
import Natura from '~/components/logos/Natura.astro' import Natura from '~/components/logos/Natura.astro'
import Nissan from '~/components/logos/Nissan.astro' import Nissan from '~/components/logos/Nissan.astro'
import Manserv from '~/components/logos/Manserv.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' import { getCollection, getEntry } from 'astro:content'
export async function getStaticPaths() { 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 courses.map((course) => {
return { return {
params: { slug: course.id }, params: { slug: course.id },
props: { course }, props: { course },
} }
}) })
} }
const { const {
course: { data }, course: { data },
} = Astro.props } = Astro.props
const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : null
--- ---
<Fragment slot="head"> <Fragment slot="head">
<title>{data.title}</title> <title>{data.title}</title>
</Fragment> </Fragment>
<Layout> <Layout>
<div class="space-y-6 lg:space-y-24"> <div class="space-y-6 lg:space-y-24">
<Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6"> <Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
<Picture <Picture
src={data?.img ? data.img : placeholder} src={data?.img ? data.img : placeholder}
alt={data.title} alt={data.title}
formats={['webp']} formats={['webp']}
class="max-lg:hidden max-w-116 grayscale-15" class="max-lg:hidden max-w-116 grayscale-15"
/> />
<section class="lg:py-24"> <section class="lg:py-24">
<div class="space-y-5"> <div class="space-y-5">
<span class="font-medium"> <span class="font-medium">
{data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>} {data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>}
</span> </span>
<h1 class="text-pretty font-semibold text-4xl lg:text-7xl"> <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
{data.title} {data.title}
</h1> </h1>
<p class="text-base/6"> <p class="text-base/6">
{data.summary} {data.summary}
<a href="#modulos" class="text-blue-400 *:hover:underline"> <a href="#modulos" class="text-blue-400 *:hover:underline">
<sup>[1]</sup> <sup>[1]</sup>
</a> </a>
</p> </p>
<ul class="lg:flex gap-3"> <ul class="lg:flex gap-3">
<li class="flex gap-1"> <li class="flex gap-1">
<ClockIcon className="w-5" /> <ClockIcon className="w-5" />
<span>Carga horária de {data.course.hours} horas</span> <span>Carga horária de {data.course.hours} horas</span>
</li> </li>
<li class="flex gap-1"> <li class="flex gap-1">
<CheckBadgeIcon className="w-5 fill-blue-400" /> <CheckBadgeIcon className="w-5 fill-blue-400" />
<span> <span>
Certificado com assinatura digital Certificado com assinatura digital
<a href="#certificado" class="text-blue-400 *:hover:underline"> <a href="#certificado" class="text-blue-400 *:hover:underline">
<sup>[2]</sup> <sup>[2]</sup>
</a> </a>
</span> </span>
</li> </li>
</ul> </ul>
<div class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"> <div class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16">
<a <a
href="#" href="#"
class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150" class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
> >
Contratar agora Contratar agora
</a> </a>
<a <a
href="http://bit.ly/3RlROu6" href="http://bit.ly/3RlROu6"
class="flex flex-col hover:outline rounded outline-offset-3" class="flex flex-col hover:outline rounded outline-offset-3"
target="_blank" target="_blank"
> >
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<span class="font-bold">4.7</span> <span class="font-bold">4.7</span>
<ul class="flex"> <ul class="flex">
<li> <li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" /> <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
</li> </li>
<li> <li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" /> <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
</li> </li>
<li> <li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" /> <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
</li> </li>
<li> <li>
<StarIcon className="w-4 text-yellow-500 fill-yellow-500" /> <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
</li> </li>
<li><StarIcon className="w-4" /></li> <li><StarIcon className="w-4" /></li>
</ul> </ul>
</div> </div>
<span>66 avaliações no Google</span> <span>66 avaliações no Google</span>
</a> </a>
</div> </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> </div>
</div> </section>
</div>
</div>
</Container> </Container>
)
}
<Container id="certificado"> <Container class="lg:text-center space-y-2.5 lg:space-y-6">
<div <h2 class="text-pretty font-semibold text-4xl">Alguns clientes que acreditam em nós</h2>
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" <Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
> </Container>
<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"> <Container>
<h6 class="text-4xl lg:text-6xl/14 lg:font-black"> <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
Certificados digitais com respaldo legal e gestão completa <div
</h6> 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"
<ul class="lg:text-lg list-disc list-inside"> >
<li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li> <Picture
<li>Tudo digital e salvo para sempre na núvem</li> alt="Homem de negócios"
<li>Alertas automáticos de vencimento</li> formats={['webp']}
</ul> src={homemdenegocios}
</div> class="w-94 absolute bottom-0 -left-28"
</div> />
</Container> <Picture
alt="Mulher de negócios"
formats={['webp']}
src={mulherdenegocios}
class="w-96 absolute bottom-0 -right-24"
/>
</div>
<!-- <Form client:load /> --> <div class="col-span-2 flex items-center">
</div> <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> </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' import Container from '~/components/Container'
export async function getStaticPaths() { export async function getStaticPaths() {
const data = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts') const data = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
const posts = await data.json() const posts = await data.json()
return posts.map((post) => ({ return posts.map((post) => ({
params: { slug: post.slug }, params: { slug: post.slug },
props: { post }, props: { post },
})) }))
} }
const { post } = Astro.props const { post } = Astro.props
@@ -18,10 +18,10 @@ const { post } = Astro.props
<title slot="head">{post.title.rendered}</title> <title slot="head">{post.title.rendered}</title>
<Layout> <Layout>
<Container> <Container>
<article> <article>
<h1 set:html={post.title.rendered} /> <h1 set:html={post.title.rendered} />
<Fragment set:html={post.content.rendered} /> <Fragment set:html={post.content.rendered} />
</article> </article>
</Container> </Container>
</Layout> </Layout>

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

@@ -1,6 +1,6 @@
--- ---
import Layout from '~/layouts/Layout.astro' 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 res = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
let posts = await res.json() let posts = await res.json()