add

superpage/src/components/Container.astro

@@ -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>

superpage/src/components/Course/Cert.astro

@@ -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>

superpage/src/components/Course/Clients.astro

@@ -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>

superpage/src/components/Course/Contact.astro

@@ -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>

superpage/src/components/Course/Features.astro

@@ -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>

superpage/src/components/Course/Modules.astro

@@ -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>

superpage/src/components/Course/Trainer.astro

@@ -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>

superpage/src/components/Course/_Contact.jsx

@@ -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;
+}

superpage/src/components/Course/index.ts

@@ -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";

superpage/src/content/courses/lei-lucas.mdx

@@ -10,8 +10,20 @@ course:
 ---
 
 import { Accordion, Item, Header, Body } from "~/components/Accordion";
+import {
+  Modules,
+  Clients,
+  Features,
+  Cert,
+  Trainer,
+  Contact,
+} from "~/components/Course";
 
-<Fragment slot="modules">
+<Clients />
+
+<Features />
+
+<Modules>
     <Accordion>
         <Item>
             <Header>Introdução à Lei Lucas</Header>
@@ -27,11 +39,11 @@ import { Accordion, Item, Header, Body } from "~/components/Accordion";
         <Item>
             <Header>Aspectos gerais dos primeiros socorros</Header>
             <Body>
-            <ul>
-                <li>Definição e importância</li>
-                <li>Conceitos de urgência e emergência</li>
-                <li>Objetivos dos primeiros socorros</li>
-            </ul>
+                <ul>
+                    <li>Definição e importância</li>
+                    <li>Conceitos de urgência e emergência</li>
+                    <li>Objetivos dos primeiros socorros</li>
+                </ul>
             </Body>
         </Item>
 
@@ -39,6 +51,14 @@ import { Accordion, Item, Header, Body } from "~/components/Accordion";
             <Header>Sinais vitais e avaliação primária</Header>
             <Body></Body>
         </Item>
-
     </Accordion>
-</Fragment>
+
+</Modules>
+
+<Trainer name="francis" />
+
+<p class="w-6/12 mx-auto">...</p>
+
+<Cert />
+
+<Contact />

superpage/src/content/courses/nr-18-plataforma-de-trabalho-aereo.mdx

@@ -12,51 +12,76 @@ seo:
 
 course:
   hours: 4
-  trainer: francis
 ---
 
 import { Accordion, Item, Header, Body } from "~/components/Accordion";
+import {
+  Modules,
+  Clients,
+  Features,
+  Cert,
+  Trainer,
+  Contact,
+} from "~/components/Course";
 
-<Accordion>
-  <Item>
-    <Header>Aspectos regulamentares e legais da NR-18</Header>
-    <Body>
-      <p>Exploração dos requisitos legais e normativos da NR-18 e da ABNT 16776 aplicáveis às Plataformas de Trabalho Aéreo, garantindo conformidade e segurança no ambiente de trabalho.</p>
-    </Body>
-  </Item>
+<Clients />
 
-  <Item>
-    <Header>Tipos construtivos das PEMTs, aplicações, características técnicas e operacionais</Header>
-    <Body>
-      <p>Apresentação dos diferentes modelos de Plataformas Elevatórias Móveis de Trabalho (PEMTs), suas aplicações práticas, especificações técnicas e modos operacionais.</p>
-    </Body>
-  </Item>
+<Features />
 
-  <Item>
-    <Header>Acidentes previsíveis com PEMTs e como evitá-los</Header>
-    <Body>
-      <p>Análise de cenários de acidentes típicos envolvendo PEMTs, identificando causas e estabelecendo medidas preventivas para mitigar riscos.</p>
-    </Body>
-  </Item>
+<Modules>
+    <Accordion>
+        <Item>
+            <Header>Aspectos regulamentares e legais da NR-18</Header>
+            <Body>
+                <p>Exploração dos requisitos legais e normativos da NR-18 e da ABNT 16776 aplicáveis às Plataformas de Trabalho Aéreo, garantindo conformidade e segurança no ambiente de trabalho.</p>
+            </Body>
+        </Item>
 
-  <Item>
-    <Header>Plano de segurança da operação – PSO</Header>
-    <Body>
-      <p>Desenvolvimento e aplicação do Plano de Segurança da Operação (PSO) como ferramenta indispensável para operações seguras, abrangendo planejamento, execução e controle de atividades.</p>
-    </Body>
-  </Item>
+        <Item>
+            <Header>
+                Tipos construtivos das PEMTs, aplicações, características técnicas e
+                operacionais
+            </Header>
+            <Body>
+                <p>Apresentação dos diferentes modelos de Plataformas Elevatórias Móveis de
+                Trabalho (PEMTs), suas aplicações práticas, especificações técnicas e
+                modos operacionais.</p>
+            </Body>
+        </Item>
 
-  <Item>
-    <Header>Manutenção mínima de segurança nas PEMTs</Header>
-    <Body>
-      <p>Manutenção Mínima de Segurança nas PEMTs</p>
-    </Body>
-  </Item>
+        <Item>
+            <Header>Acidentes previsíveis com PEMTs e como evitá-los</Header>
+            <Body>
+                <p>Análise de cenários de acidentes típicos envolvendo PEMTs, identificando causas e estabelecendo medidas preventivas para mitigar riscos.</p>
+            </Body>
+        </Item>
 
-  <Item>
-    <Header>Noções de primeiros socorros</Header>
-    <Body>
-      <p>Capacitação em práticas essenciais de primeiros socorros, com foco em respostas rápidas e eficazes a possíveis incidentes durante o uso das PEMTs.</p>
-    </Body>
-  </Item>
-</Accordion>
+        <Item>
+            <Header>Plano de segurança da operação – PSO</Header>
+            <Body>
+                <p>Desenvolvimento e aplicação do Plano de Segurança da Operação (PSO) como ferramenta indispensável para operações seguras, abrangendo planejamento, execução e controle de atividades.</p>
+            </Body>
+        </Item>
+
+        <Item>
+            <Header>Manutenção mínima de segurança nas PEMTs</Header>
+            <Body>
+                <p>Manutenção Mínima de Segurança nas PEMTs</p>
+            </Body>
+        </Item>
+
+        <Item>
+            <Header>Noções de primeiros socorros</Header>
+            <Body>
+              <p>Capacitação em práticas essenciais de primeiros socorros, com foco em respostas rápidas e eficazes a possíveis incidentes durante o uso das PEMTs.</p>
+            </Body>
+        </Item>
+    </Accordion>
+
+</Modules>
+
+<Trainer name="francis" />
+
+<Cert />
+
+<Contact />

superpage/src/layouts/Layout.astro

@@ -25,30 +25,31 @@ const year = new Date().getFullYear();
     </head>
 
     <body>
-        <Container class="flex items-center py-3">
-            <a href="/" aria-label="Página inicial">
-                <Logo className="h-8" />
-            </a>
-
-            <div class="ml-auto">
-                <a
-                    href="//app.betaeducacao.com.br"
-                    class="flex gap-1 items-center hover:outline rounded-xs"
-                >
-                    <Icon
-                        name="arrow-left-end-on-rectangle"
-                        class="size-5 rotate-180"
-                    />
-                    <>Entrar</>
+        <header>
+            <Container class="flex items-center py-3">
+                <a href="/" aria-label="Página inicial">
+                    <Logo className="h-10" />
                 </a>
-            </div>
-        </Container>
+
+                <div class="ml-auto">
+                    <a
+                        href="//app.betaeducacao.com.br"
+                        class="flex gap-1 items-center hover:outline rounded-xs"
+                    >
+                        <Icon
+                            name="arrow-left-end-on-rectangle"
+                            class="size-5 rotate-180"
+                        />
+                        <>Entrar</>
+                    </a>
+                </div>
+            </Container>
+        </header>
 
         <HeaderNav />
 
         <main id="content">
             <slot />
-            <slot name="modules" />
         </main>
 
         <footer class="py-6 text-white/70">

superpage/src/pages/[slug].astro

@@ -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} &mdash; EDUSEG&reg;</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&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>
-
-        <!-- 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>

superpage/src/pages/_components/Contact.jsx

@@ -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
-}