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

add

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-25 10:01:49 -03:00
parent 1c235b41ba
commit 0c96fe4196
17 changed files with 438 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
superpage/src/components/Container.astro
View File

@@ -1,3 +1,6 @@
<div class:list={[Astro.props.class, 'max-w-7xl mx-auto max-2xl:px-3']} {...Astro.props}>
<slot />
<div
class:list={[Astro.props.class, "max-w-7xl mx-auto max-2xl:px-3"]}
{...Astro.props}
>
<slot />
</div>

29
superpage/src/components/Course/Cert.astro Normal file
View File

@@ -0,0 +1,29 @@
---
import { Icon } from "astro-icon/components";
import Container from "~/components/Container.astro";
---
<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>

17
superpage/src/components/Course/Clients.astro Normal file
View File

@@ -0,0 +1,17 @@
---
import Carousel from "~/components/Carousel.astro";
import Container from "~/components/Container.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";
---
<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>

18
superpage/src/components/Course/Contact.astro Normal file
View File

@@ -0,0 +1,18 @@
---
import Container from "../Container.astro";
import Form from "./_Contact.jsx";
---
<Container id="contato">
<section class="space-y-6 lg:w-6/12 mx-auto lg:mb-12">
<div class="space-y-2.5">
<h1 class="text-4xl lg:text-6xl/14 lg:font-black">Fale conosco</h1>
<p class="lg:text-lg/6">
Tem uma necessidade mais específica ou gostaria de agendar uma
demonstração da nossa plataforma? Entre em contato conosco.
</p>
</div>
<Form client:load />
</section>
</Container>

65
superpage/src/components/Course/Features.astro Normal file
View File

@@ -0,0 +1,65 @@
---
import { Picture } from "astro:assets";
import Container from "~/components/Container.astro";
import mulherdenegocios from "~/assets/mulher-de-negocios.png";
import homemdenegocios from "~/assets/homem-de-negocios.png";
---
<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">
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>

16
superpage/src/components/Course/Modules.astro Normal file
View File

@@ -0,0 +1,16 @@
---
import Container from "../Container.astro";
---
<Container class="2xl:w-5/12 lg:py-24 space-y-6" {...Astro.props}>
<div class="space-y-2.5">
<h4 class="text-pretty text-4xl lg:text-6xl">Módulos deste curso</h4>
<p class="lg:text-lg/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">
<slot />
</div>
</Container>

53
superpage/src/components/Course/Trainer.astro Normal file
View File

@@ -0,0 +1,53 @@
---
import { getEntry } from "astro:content";
import { Picture } from "astro:assets";
import { Icon } from "astro-icon/components";
import Container from "../Container.astro";
const trainer = await getEntry("trainers", Astro.props.name);
---
<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>

113
superpage/src/components/Course/_Contact.jsx Normal file
View File

@@ -0,0 +1,113 @@
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="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;
}

6
superpage/src/components/Course/index.ts Normal file
View File

@@ -0,0 +1,6 @@
export { default as Contact } from "./Contact.astro";
export { default as Cert } from "./Cert.astro";
export { default as Clients } from "./Clients.astro";
export { default as Features } from "./Features.astro";
export { default as Modules } from "./Modules.astro";
export { default as Trainer } from "./Trainer.astro";