add font
This commit is contained in:
@@ -11,7 +11,7 @@ import Semeq from '~/assets/logos/semeq.svg'
|
||||
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">
|
||||
Alguns clientes que acreditam em nós
|
||||
</h2>
|
||||
|
||||
8
superpage/src/layouts/Head.astro
Normal file
8
superpage/src/layouts/Head.astro
Normal 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} — EDUSEG®</title>
|
||||
@@ -5,6 +5,7 @@ export interface Props {
|
||||
|
||||
import '~/styles/app.css'
|
||||
import { Regular as Logo } from '~/components/Logo'
|
||||
import Head from './Head.astro'
|
||||
import { Container } from '~/components/Container'
|
||||
import { Menu } from '~/components/Menu'
|
||||
import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
|
||||
@@ -12,20 +13,17 @@ import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
|
||||
import { getCollection } from 'astro:content'
|
||||
const courses = await getCollection('courses', ({ data }) => data.draft != true)
|
||||
|
||||
const { title } = Astro.props
|
||||
const { ...props } = Astro.props
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
import '@fontsource/roboto'
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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} ‐ EDUSEG® — Educação que garante sua segurança
|
||||
</title>
|
||||
<Head {...props} />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -37,199 +37,216 @@ const trainer = data.course?.trainer
|
||||
---
|
||||
|
||||
<Layout title={data.title}>
|
||||
<Container className="py-3 lg:py-12 lg:flex items-center justify-start gap-5">
|
||||
<Picture
|
||||
src={data?.img ? data.img : placeholder}
|
||||
alt={data.title}
|
||||
formats={['webp']}
|
||||
class="max-lg:hidden max-w-116 grayscale-15"
|
||||
/>
|
||||
<section>
|
||||
<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>
|
||||
|
||||
<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®
|
||||
</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®, sua empresa se beneficia de uma
|
||||
tecnologia eficiente e confiável.
|
||||
<div class="space-y-3 lg:space-y-26">
|
||||
<Container className="lg:flex items-center justify-start gap-5">
|
||||
<Picture
|
||||
src={data?.img ? data.img : placeholder}
|
||||
alt={data.title}
|
||||
formats={['webp']}
|
||||
class="max-lg:hidden max-w-116 grayscale-15"
|
||||
/>
|
||||
<section>
|
||||
<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>
|
||||
|
||||
<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 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="text-center">
|
||||
<a href="#" class="text-blue-400 underline hover:no-underline">
|
||||
Agendar uma demonstração
|
||||
<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>
|
||||
</Container>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
<Container
|
||||
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>
|
||||
<ClientsLogo />
|
||||
|
||||
{
|
||||
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>
|
||||
<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>
|
||||
|
||||
{trainer.data.bio.split(/\r?\n/).map((x) => (
|
||||
<p class="text-sm/6 text-white/70">{x}</p>
|
||||
))}
|
||||
<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®
|
||||
</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®, sua empresa se beneficia de uma
|
||||
tecnologia eficiente e confiável.
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -1,23 +1,9 @@
|
||||
---
|
||||
import { Picture } from 'astro:assets'
|
||||
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">
|
||||
<Picture
|
||||
src={nr18plataforma}
|
||||
@@ -247,4 +233,5 @@ import Semeq from '~/assets/logos/semeq.svg'
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
-->
|
||||
</Layout>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
@import "tailwindcss";
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--font-sans:
|
||||
"Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-sans:
|
||||
'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
--color-yellow-primary: #ffcf82;
|
||||
--color-yellow-secondary: #f2ebe1;
|
||||
--color-yellow-tertiary: #f9f7e8;
|
||||
--color-yellow-primary: #ffcf82;
|
||||
--color-yellow-secondary: #f2ebe1;
|
||||
--color-yellow-tertiary: #f9f7e8;
|
||||
|
||||
--color-green-primary: #2e3524;
|
||||
--color-green-secondary: #8cd366;
|
||||
--color-green-tertiary: #83926d;
|
||||
--color-green-support: #c9fcad;
|
||||
--color-green-pastel: #f9fff6;
|
||||
--color-green-light: #cad9b4;
|
||||
--color-green-dark: #4e8630;
|
||||
--color-green-primary: #2e3524;
|
||||
--color-green-secondary: #8cd366;
|
||||
--color-green-tertiary: #83926d;
|
||||
--color-green-support: #c9fcad;
|
||||
--color-green-pastel: #f9fff6;
|
||||
--color-green-light: #cad9b4;
|
||||
--color-green-dark: #4e8630;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply text-white bg-black;
|
||||
@apply text-white bg-black;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user