add
This commit is contained in:
@@ -1,22 +1,11 @@
|
||||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import { Picture } from "astro:assets";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Layout from "~/layouts/CourseLayout.astro";
|
||||
import Layout from "~/layouts/Layout.astro";
|
||||
import Container from "~/components/Container.astro";
|
||||
import Carousel from "~/components/Carousel.astro";
|
||||
|
||||
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 Contact from "./_components/Contact.jsx";
|
||||
|
||||
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, render } from "astro:content";
|
||||
import placeholder from "~/assets/placeholder.png";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const courses = await getCollection(
|
||||
@@ -35,15 +24,11 @@ export async function getStaticPaths() {
|
||||
const { course } = Astro.props;
|
||||
const { data } = course;
|
||||
const { Content } = await render(course);
|
||||
|
||||
const trainer = data.course?.trainer
|
||||
? await getEntry(data.course?.trainer)
|
||||
: null;
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Fragment slot="head">
|
||||
<title>{data.title}</title>
|
||||
<title>{data.title} — EDUSEG®</title>
|
||||
</Fragment>
|
||||
|
||||
<section class="space-y-6 lg:space-y-24">
|
||||
@@ -158,202 +143,6 @@ const trainer = data.course?.trainer
|
||||
</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>
|
||||
|
||||
<div class="bg-white/10 py-12 lg:py-24">
|
||||
<Container class="flex justify-between lg:w-6/12">
|
||||
<ul class="space-y-2.5">
|
||||
<li class="text-5xl">+ 100k</li>
|
||||
<li class="uppercase font-bold text-white/50">
|
||||
Profissionais capacitados
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="space-y-2.5">
|
||||
<li class="text-5xl">+ 5k</li>
|
||||
<li class="uppercase font-bold text-white/50">
|
||||
Empresas atendidas
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="space-y-2.5">
|
||||
<li class="text-5xl">12 anos</li>
|
||||
<li class="uppercase font-bold text-white/50">
|
||||
de experiência
|
||||
</li>
|
||||
</ul>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<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®
|
||||
</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>
|
||||
|
||||
<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">
|
||||
Agilidade 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="#contato"
|
||||
class="text-blue-400 underline hover:no-underline"
|
||||
>
|
||||
Agendar uma demonstração
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<!-- Course Modules -->
|
||||
<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">
|
||||
<Content />
|
||||
</div>
|
||||
</Container>
|
||||
<!-- Course Modules End -->
|
||||
|
||||
<!-- Cert -->
|
||||
<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"
|
||||
>
|
||||
<Icon
|
||||
name="lock-closed"
|
||||
class="size-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">
|
||||
<h5 class="text-4xl lg:text-6xl/14 lg:font-black">
|
||||
Certificados digitais com respaldo legal e gestão
|
||||
completa
|
||||
</h5>
|
||||
<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>
|
||||
<!-- Cert End -->
|
||||
|
||||
<!-- Trainer -->
|
||||
{
|
||||
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">
|
||||
<h6 class="text-xl text-pretty">
|
||||
Quem é o(a) instrutor(a)?
|
||||
</h6>
|
||||
<p class="text-4xl lg:text-5xl text-pretty">
|
||||
{trainer.data.name}
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="text-sm/6 text-white/70 space-y-2.5"
|
||||
set:html={trainer?.rendered?.html}
|
||||
/>
|
||||
|
||||
<div class="flex">
|
||||
{trainer.data.networks.map(
|
||||
({ url, alt }) => {
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
aria-labelledby={alt}
|
||||
>
|
||||
<Icon
|
||||
name={alt.toLowerCase()}
|
||||
class="fill-white/70 size-5"
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
<!-- Trainer End -->
|
||||
|
||||
<!-- Contact Form -->
|
||||
<Container id="contato">
|
||||
<Contact client:load />
|
||||
</Container>
|
||||
<!-- Contact Form End -->
|
||||
<Content />
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
@@ -1,81 +0,0 @@
|
||||
import { Form, useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { createElement } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { z } from 'zod'
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().nonempty({ message: 'Deve preencher o nome' }),
|
||||
email: z.string().nonempty({ message: 'Deve preencher o email' }).email({ message: 'Deve ser um email válido' }),
|
||||
message: z.string().nonempty({ message: 'Deve preencher a mensagem' }),
|
||||
})
|
||||
|
||||
export default function Contact() {
|
||||
const { register, formState, control, reset } = useForm({ resolver: zodResolver(schema) })
|
||||
|
||||
return (
|
||||
<Form
|
||||
action="https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562"
|
||||
onSuccess={() => reset()}
|
||||
control={control}
|
||||
className="lg:w-6/12 mx-auto flex flex-col gap-2.5"
|
||||
>
|
||||
{formState.isSubmitSuccessful && (
|
||||
<p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
|
||||
Sua mensagem foi enviada com sucesso.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
<span className="lg:w-14">Nome</span>
|
||||
<Input aria-invalid={!!formState.errors?.name} {...register('name')} />
|
||||
</Label>
|
||||
<Error>{formState.errors.name?.message}</Error>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
<span className="lg:w-14">Email</span>
|
||||
<Input aria-invalid={!!formState.errors?.name} {...register('email')} />
|
||||
</Label>
|
||||
<Error>{formState.errors.email?.message}</Error>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="flex-col !items-start !gap-1">
|
||||
<span>Mensagem</span>
|
||||
<Input as="textarea" className="h-28" aria-invalid={!!formState.errors?.message} {...register('message')} />
|
||||
</Label>
|
||||
<Error className="lg:!pl-0">{formState.errors.message?.message}</Error>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="p-2.5 border border-lime-400/50 rounded-xl cursor-pointer transition">
|
||||
Enviar
|
||||
</button>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export function Input({ as = 'input', className, ...props }) {
|
||||
return createElement(as, {
|
||||
className: clsx(
|
||||
'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-0 transition duration-150',
|
||||
'aria-invalid:outline-2 aria-invalid:outline-red-600',
|
||||
className,
|
||||
),
|
||||
...props,
|
||||
})
|
||||
}
|
||||
|
||||
function Label({ children, className }) {
|
||||
return <label className={clsx('flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', className)}>{children}</label>
|
||||
}
|
||||
|
||||
function Error({ children, className }) {
|
||||
if (children) {
|
||||
return <p className={clsx('text-sm text-red-500 lg:pl-16', className)}>{children}</p>
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user