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

add font

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-17 16:30:36 -03:00
parent a7d87c3ef9
commit 1665a4e526
8 changed files with 251 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
superpage/package-lock.json generated
View File

@@ -9,6 +9,8 @@
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@astrojs/react": "^4.2.1", "@astrojs/react": "^4.2.1",
"@fontsource/roboto": "^5.2.5",
"@fontsource/twinkle-star": "^5.2.5",
"@headlessui/react": "^2.2.1", "@headlessui/react": "^2.2.1",
"@heroicons/react": "^2.2.0", "@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13", "@tailwindcss/vite": "^4.0.13",
@@ -883,6 +885,24 @@
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@fontsource/roboto": {
"version": "5.2.5",
"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.5.tgz",
"integrity": "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/twinkle-star": {
"version": "5.2.5",
"resolved": "https://registry.npmjs.org/@fontsource/twinkle-star/-/twinkle-star-5.2.5.tgz",
"integrity": "sha512-vD8t14W/zjlg/DKYJGqBK47HE5NToPk8t3o2AiXe5B9Wzch3Kd0PO+d5D8JK7SrwLSPDf+E7jcDMym3XMkSimw==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@headlessui/react": { "node_modules/@headlessui/react": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.1.tgz",

2
superpage/package.json
View File

@@ -10,6 +10,8 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/react": "^4.2.1", "@astrojs/react": "^4.2.1",
"@fontsource/roboto": "^5.2.5",
"@fontsource/twinkle-star": "^5.2.5",
"@headlessui/react": "^2.2.1", "@headlessui/react": "^2.2.1",
"@heroicons/react": "^2.2.0", "@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.0.13", "@tailwindcss/vite": "^4.0.13",

2
superpage/src/components/ClientsLogo.astro
View File

@@ -11,7 +11,7 @@ import Semeq from '~/assets/logos/semeq.svg'
const SVGLogos = [Natura, Nissan, Kordsa, Manserv, Semeq] const SVGLogos = [Natura, Nissan, Kordsa, Manserv, Semeq]
--- ---
<Container className="py-6 xl:py-24 lg:text-center space-y-2.5 lg:space-y-6"> <Container className="lg:text-center space-y-2.5 lg:space-y-6">
<h2 class="text-pretty font-semibold text-4xl"> <h2 class="text-pretty font-semibold text-4xl">
Alguns clientes que acreditam em nós Alguns clientes que acreditam em nós
</h2> </h2>

8
superpage/src/layouts/Head.astro Normal file
View File

@@ -0,0 +1,8 @@
---
const { title = 'Educação que garante sua segurança', ...props } = Astro.props
---
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title} &mdash; EDUSEG&reg;</title>

12
superpage/src/layouts/Layout.astro
View File

@@ -5,6 +5,7 @@ export interface Props {
import '~/styles/app.css' import '~/styles/app.css'
import { Regular as Logo } from '~/components/Logo' import { Regular as Logo } from '~/components/Logo'
import Head from './Head.astro'
import { Container } from '~/components/Container' import { Container } from '~/components/Container'
import { Menu } from '~/components/Menu' import { Menu } from '~/components/Menu'
import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid' import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
@@ -12,20 +13,17 @@ import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
import { getCollection } from 'astro:content' import { getCollection } from 'astro:content'
const courses = await getCollection('courses', ({ data }) => data.draft != true) const courses = await getCollection('courses', ({ data }) => data.draft != true)
const { title } = Astro.props const { ...props } = Astro.props
const year = new Date().getFullYear() const year = new Date().getFullYear()
import '@fontsource/roboto'
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <Head {...props} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>
{title} &dash; EDUSEG&reg; &mdash; Educação que garante sua segurança
</title>
</head> </head>
<body> <body>

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

@@ -37,199 +37,216 @@ const trainer = data.course?.trainer
--- ---
<Layout title={data.title}> <Layout title={data.title}>
<Container className="py-3 lg:py-12 lg:flex items-center justify-start gap-5"> <div class="space-y-3 lg:space-y-26">
<Picture <Container className="lg:flex items-center justify-start gap-5">
src={data?.img ? data.img : placeholder} <Picture
alt={data.title} src={data?.img ? data.img : placeholder}
formats={['webp']} alt={data.title}
class="max-lg:hidden max-w-116 grayscale-15" formats={['webp']}
/> class="max-lg:hidden max-w-116 grayscale-15"
<section> />
<div class="space-y-5"> <section>
<span class="font-medium"> <div class="space-y-5">
{ <span class="font-medium">
data.course.reciclagem ? ( {
<>Curso de reciclagem</> data.course.reciclagem ? (
) : ( <>Curso de reciclagem</>
<>Curso de formação</> ) : (
) <>Curso de formação</>
} )
</span> }
<h1 class="text-pretty font-semibold text-4xl lg:text-7xl"> </span>
{data.title} <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
</h1> {data.title}
<p class="text-base/6"> </h1>
{data.summary} <p class="text-base/6">
<a href="#modulos" class="text-blue-400 *:hover:underline"> {data.summary}
<sup>[1]</sup> <a href="#modulos" class="text-blue-400 *:hover:underline">
</a> <sup>[1]</sup>
</p> </a>
<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>
<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>
<ClientsLogo />
<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-6 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> </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>
<ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5"> <li class="flex gap-1">
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg"> <CheckBadgeIcon className="w-5 fill-blue-400" />
Centralização de todos os certificados <span>
</li> Certificado com assinatura digital
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg"> <a href="#certificado" class="text-blue-400 *:hover:underline">
Ágilidade na liberação de cursos <sup>[2]</sup>
</li> </a>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg"> </span>
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> </li>
</ul> </ul>
<div class="text-center"> <div
<a href="#" class="text-blue-400 underline hover:no-underline"> class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"
Agendar uma demonstração >
<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> </a>
</div> </div>
</div> </div>
</div> </section>
</div> </Container>
</Container>
<Container <ClientsLogo />
className="py-3 lg:py-24 grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6 "
>
<div class="space-y-2.5">
<h4 class="text-4xl lg:text-5xl text-pretty" id="modulos">
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>
{ <Container>
trainer && ( <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
<Container> <div
<div class="bg-white/10 rounded-2xl p-2.5 lg:py-6 xl:py-24"> class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-6 relative h-136 max-lg:hidden -m-px max-xl:overflow-hidden"
<div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto"> >
<div class="shrink-0"> <Picture
<Picture alt="Homem de negócios"
src={trainer.data.img} formats={['webp']}
alt={trainer.data.name} src={homemdenegocios}
formats={['webp']} class="w-94 absolute bottom-0 -left-28"
class="rounded-xl size-32 outline-2 outline-offset-2 outline-lime-400" />
/> <Picture
</div> alt="Mulher de negócios"
<div class="space-y-2.5"> formats={['webp']}
<h5 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h5> src={mulherdenegocios}
<h5 class="text-4xl lg:text-5xl text-pretty"> class="w-96 absolute bottom-0 -right-24"
{trainer.data.name} />
</h5> </div>
{trainer.data.bio.split(/\r?\n/).map((x) => ( <div class="col-span-2 flex items-center">
<p class="text-sm/6 text-white/70">{x}</p> <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>
<div class="flex"> <ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
<a <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/" Centralização de todos os certificados
target="_blank" </li>
> <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
<LinkedInIcon className="fill-white/70 w-6" /> Ágilidade na liberação de cursos
</a> </li>
</div> <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>
</div> </div>
</Container> </div>
) </Container>
}
<Container className="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6 ">
<div class="space-y-2.5">
<h4 class="text-4xl lg:text-5xl text-pretty" id="modulos">
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>
<Container>
<div class="border border-lime-500 p-12 rounded-2xl">
<div class="lg:w-8/12 mx-auto space-y-5">
<h6 class="text-6xl/12 font-medium">
Certificados digitais com respaldo legal e gestão completa
</h6>
<ul class="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 do vencimento</li>
</ul>
</div>
</div>
</Container>
{
trainer && (
<Container>
<div class="bg-white/10 rounded-2xl p-2.5 lg:py-6 xl:py-24">
<div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
<div class="shrink-0">
<Picture
src={trainer.data.img}
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"
>
<LinkedInIcon className="fill-white/70 w-6" />
</a>
</div>
</div>
</div>
</div>
</Container>
)
}
</div>
</Layout> </Layout>

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

@@ -1,23 +1,9 @@
--- ---
import { Picture } from 'astro:assets'
import Layout from '~/layouts/Layout.astro' import Layout from '~/layouts/Layout.astro'
import { Container } from '~/components/Container'
import { Faq } from '~/components/Faq'
import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
import { CheckBadgeIcon } from '@heroicons/react/24/solid'
import { LinkedInIcon } from '~/components/LinkedInIcon'
import nr18plataforma from '~/assets/nr18-plataforma.png'
import mulherdenegocios from '~/assets/mulher-de-negocios.png'
import homemdenegocios from '~/assets/homem-de-negocios.png'
import francis from '~/assets/francis.jpeg'
import Natura from '~/assets/logos/natura.svg'
import Nissan from '~/assets/logos/nissan.svg'
import Kordsa from '~/assets/logos/kordsa.svg'
import Manserv from '~/assets/logos/manserv.svg'
import Semeq from '~/assets/logos/semeq.svg'
--- ---
<Layout title=""> <Layout>
<!--
<Container className="py-3 lg:py-12 lg:flex items-center gap-5"> <Container className="py-3 lg:py-12 lg:flex items-center gap-5">
<Picture <Picture
src={nr18plataforma} src={nr18plataforma}
@@ -247,4 +233,5 @@ import Semeq from '~/assets/logos/semeq.svg'
</div> </div>
</div> </div>
</Container> </Container>
-->
</Layout> </Layout>

30
superpage/src/styles/app.css
View File

@@ -1,24 +1,24 @@
@import "tailwindcss"; @import 'tailwindcss';
@theme { @theme {
--font-sans: --font-sans:
"Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", 'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--color-yellow-primary: #ffcf82; --color-yellow-primary: #ffcf82;
--color-yellow-secondary: #f2ebe1; --color-yellow-secondary: #f2ebe1;
--color-yellow-tertiary: #f9f7e8; --color-yellow-tertiary: #f9f7e8;
--color-green-primary: #2e3524; --color-green-primary: #2e3524;
--color-green-secondary: #8cd366; --color-green-secondary: #8cd366;
--color-green-tertiary: #83926d; --color-green-tertiary: #83926d;
--color-green-support: #c9fcad; --color-green-support: #c9fcad;
--color-green-pastel: #f9fff6; --color-green-pastel: #f9fff6;
--color-green-light: #cad9b4; --color-green-light: #cad9b4;
--color-green-dark: #4e8630; --color-green-dark: #4e8630;
} }
html, html,
body { body {
@apply text-white bg-black; @apply text-white bg-black;
} }