update contact

superpage/src/components/Accordion/Item.astro

@@ -1,7 +1,6 @@
 <div
     x-data="{ open: false }"
-    class="bg-white/10 w-full [&:not([aria-expanded='true']):hover]:outline rounded-lg outline-white/15"
-    :class="{'bg-white/15': open === true}"
+    class="bg-white/10 w-full hover:bg-white/15 aria-expanded:bg-white/15 rounded-lg transition"
     x-bind:aria-expanded="open"
 >
     <slot />

superpage/src/components/Course/Cert.astro

@@ -3,7 +3,7 @@ import { Icon } from "astro-icon/components";
 import Container from "~/components/Container.astro";
 ---
 
-<Container id="certificado">
+<Container id="certificado" {...Astro.props}>
     <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"
     >

superpage/src/components/Course/Contact.astro

@@ -1,18 +0,0 @@
----
-import Container from "~/components/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-bold">Fale conosco</h1>
-            <p>
-                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/Contact.jsx

@@ -10,6 +10,8 @@ const schema = z.object({
     .string()
     .nonempty({ message: "Deve preencher o email" })
     .email({ message: "Deve ser um email válido" }),
+  telephone: z.string().nonempty({ message: "Deve preencher o telefone" }),
+  orgname: z.string().nonempty({ message: "Deve preencher a empresa" }),
   message: z.string().nonempty({ message: "Deve preencher a mensagem" }),
 });
 
@@ -23,7 +25,7 @@ export default function Contact() {
       action="https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562"
       onSuccess={() => reset()}
       control={control}
-      className="flex flex-col gap-2.5"
+      className="flex flex-col gap-3"
     >
       {formState.isSubmitSuccessful && (
         <p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
@@ -31,44 +33,56 @@ export default function Contact() {
         </p>
       )}
 
-      <div>
-        <Label>
-          <span className="lg:w-14">Nome</span>
-          <Input
-            aria-invalid={!!formState.errors?.name}
-            {...register("name")}
-          />
-        </Label>
+      <Control>
+        <Input
+          aria-invalid={!!formState.errors?.name}
+          placeholder="Digite seu nome"
+          {...register("name")}
+        />
         <Error>{formState.errors.name?.message}</Error>
-      </div>
+      </Control>
 
-      <div>
-        <Label>
-          <span className="lg:w-14">Email</span>
-          <Input
-            aria-invalid={!!formState.errors?.name}
-            {...register("email")}
-          />
-        </Label>
+      <Control>
+        <Input
+          aria-invalid={!!formState.errors?.name}
+          placeholder="Email corporativo"
+          {...register("email")}
+        />
         <Error>{formState.errors.email?.message}</Error>
-      </div>
+      </Control>
 
-      <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>
+      <Control>
+        <Input
+          aria-invalid={!!formState.errors?.name}
+          placeholder="Telefone"
+          {...register("telephone")}
+        />
+        <Error>{formState.errors.telephone?.message}</Error>
+      </Control>
+
+      <Control>
+        <Input
+          aria-invalid={!!formState.errors?.name}
+          placeholder="Empresa"
+          {...register("orgname")}
+        />
+        <Error>{formState.errors.orgname?.message}</Error>
+      </Control>
+
+      <Control>
+        <Input
+          as="textarea"
+          className="h-28"
+          placeholder="Mensagem"
+          aria-invalid={!!formState.errors?.message}
+          {...register("message")}
+        />
+        <Error>{formState.errors.message?.message}</Error>
+      </Control>
 
       <button
         type="submit"
-        className="p-2.5 border border-lime-400/50 rounded-xl cursor-pointer transition"
+        className="p-2.5 border border-lime-400 rounded-lg cursor-pointer"
       >
         Enviar
       </button>
@@ -79,33 +93,23 @@ export default function Contact() {
 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",
+      "bg-white/5 focus:bg-white/15 rounded-lg p-3 w-full border border-white/10 focus:border-lime-400 focus:outline-0 transition",
+      "placeholder-white/70",
+      "aria-invalid:border-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 Control({ children, className }) {
+  return <label className={className}>{children}</label>;
 }
 
 function Error({ children, className }) {
   if (children) {
     return (
-      <p className={clsx("text-sm text-red-500 lg:pl-16", className)}>
-        {children}
-      </p>
+      <p className={clsx("text-sm text-red-400", className)}>{children}</p>
     );
   }
 

superpage/src/components/Course/Features.astro

@@ -5,7 +5,7 @@ import mulherdenegocios from "~/assets/mulher-de-negocios.png";
 import homemdenegocios from "~/assets/homem-de-negocios.png";
 ---
 
-<Container>
+<Container {...Astro.props}>
     <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"

superpage/src/components/Course/HeaderNav.astro

@@ -19,15 +19,21 @@ const { title } = Astro.props;
 >
     <Container class="flex items-center">
         <button
-            class="text-black font-semibold cursor-pointer flex items-center gap-1 hover:outline-2 rounded"
+            class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition"
             x-bind:aria-expanded="open"
             x-on:click="open = true"
             aria-haspopup="true"
         >
-            <div class="truncate max-w-36 sm:max-w-72 md:max-w-124">
-                {title}
+            <div class="flex items-center gap-1">
+                <div class="truncate max-w-36 sm:max-w-72">
+                    {title}
+                </div>
+                <Icon
+                    name="chevron-down"
+                    aria-hidden="true"
+                    class="size-4 mt-1"
+                />
             </div>
-            <Icon name="chevron-down" aria-hidden="true" class="size-4" />
         </button>
 
         <button

superpage/src/components/Course/Modules.astro

@@ -2,7 +2,7 @@
 import Container from "~/components/Container.astro";
 ---
 
-<Container class="2xl:w-5/12 lg:py-24 space-y-6" {...Astro.props}>
+<Container id="modulos" 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>

superpage/src/components/Course/Plans.astro

@@ -1,8 +1,9 @@
 ---
 import Container from "~/components/Container.astro";
+import Form from "./Contact.jsx";
 ---
 
-<Container id="planos">
+<Container id="modelos" {...Astro.props}>
     <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
         <h1 class="text-pretty text-4xl lg:text-6xl">
             Modelos de contratação para sua empresa
@@ -90,3 +91,21 @@ import Container from "~/components/Container.astro";
         </div>
     </section>
 </Container>
+
+<div class="relative z-40" style="display: none;">
+    <div class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter">
+    </div>
+
+    <div class="fixed inset-0 overflow-y-auto">
+        <div class="flex justify-center items-center h-full max-lg:p-2.5">
+            <div
+                class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow"
+            >
+                <h1 class="text-3xl lg:text-4xl font-medium">
+                    Preencha os dados da sua empresa
+                </h1>
+                <Form client:load />
+            </div>
+        </div>
+    </div>
+</div>

superpage/src/components/Course/index.ts

@@ -1,4 +1,3 @@
-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";

superpage/src/content/courses/cipa-grau-de-risco-1.mdx

@@ -17,7 +17,6 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Plans,
 } from "~/components/Course";
 
@@ -91,5 +90,3 @@ import {
 <Trainer name="francis" />
 
 <Cert />
-
-<Contact />

superpage/src/content/courses/cipa-grau-de-risco-2.mdx

@@ -17,7 +17,6 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Plans,
 } from "~/components/Course";
 
@@ -91,5 +90,3 @@ import {
 <Trainer name="francis" />
 
 <Cert />
-
-<Contact />

superpage/src/content/courses/cipa-grau-de-risco-3.mdx

@@ -17,7 +17,6 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Plans,
 } from "~/components/Course";
 
@@ -91,5 +90,3 @@ import {
 <Trainer name="francis" />
 
 <Cert />
-
-<Contact />

superpage/src/content/courses/cipa-grau-de-risco-4.mdx

@@ -17,7 +17,6 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Plans,
 } from "~/components/Course";
 
@@ -91,5 +90,3 @@ import {
 <Trainer name="francis" />
 
 <Cert />
-
-<Contact />

superpage/src/content/courses/cipa.mdx

@@ -7,5 +7,4 @@ draft: true
 
 course:
   hours: 8
-  trainer: francis
 ---

superpage/src/content/courses/combate-a-incendio.mdx

@@ -17,7 +17,6 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Plans,
 } from "~/components/Course";
 
@@ -63,5 +62,3 @@ import {
 <Trainer name="francis" />
 
 <Cert />
-
-<Contact />

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

@@ -17,9 +17,8 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Faq,
-  Plans
+  Plans,
 } from "~/components/Course";
 
 <Plans />
@@ -61,5 +60,3 @@ import {
 <Faq />
 
 <Cert />
-
-<Contact />

superpage/src/content/courses/loto-lockout-e-tagout.md

@@ -7,6 +7,4 @@ draft: false
 
 course:
   hours: 8
-  trainer: francis
-  modules: []
 ---

superpage/src/content/courses/noes-em-primeiros-socorros.md

@@ -7,6 +7,4 @@ draft: false
 
 course:
   hours: 8
-  trainer: francis
-  modules: []
 ---

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

@@ -21,7 +21,6 @@ import {
   Features,
   Cert,
   Trainer,
-  Contact,
   Plans,
 } from "~/components/Course";
 
@@ -86,5 +85,3 @@ import {
 <Trainer name="francis" />
 
 <Cert />
-
-<Contact />

superpage/src/icons/arrow-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
+</svg>

superpage/src/layouts/Layout.astro

@@ -23,12 +23,8 @@ const year = new Date().getFullYear();
 
     <body>
         <header>
-            <Container class="flex items-center py-3">
-                <a
-                    href="/"
-                    aria-label="Página inicial"
-                    class="hover:outline rounded-xs outline-offset-2"
-                >
+            <Container class="flex items-center py-2.5">
+                <a href="/" aria-label="Página inicial">
                     <Icon name="logos/eduseg" class="w-28 h-auto" />
                 </a>
 
@@ -54,8 +50,17 @@ const year = new Date().getFullYear();
         </main>
 
         <footer class="py-2.5 lg:py-6 text-white/70">
-            <Container>
-                &copy; {year} EDUSEG&reg; Todos os direitos reservados. CNPJ15.608.435/0001-90
+            <Container class="flex max-lg:flex-col gap-2.5 justify-between">
+                <div>
+                    &copy; {year} EDUSEG&reg; Todos os direitos reservados. CNPJ15.608.435/0001-90
+                </div>
+                <a
+                    href="#"
+                    class="underline hover:no-underline flex items-center gap-1 max-lg:self-center"
+                >
+                    <Icon name="arrow-up" />
+                    <span>Voltar ao início</span>
+                </a>
             </Container>
         </footer>
 

superpage/src/pages/[slug].astro

@@ -4,6 +4,7 @@ import { Picture } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
+import Stats from "~/components/Stats.astro";
 import HeaderNav from "~/components/Course/HeaderNav.astro";
 
 import placeholder from "~/assets/placeholder.png";
@@ -114,7 +115,7 @@ const { Content } = await render(course);
                                 } p/ matrícula
                             </a>
                             <a
-                                href="#planos"
+                                href="#modelos"
                                 class="text-blue-400 underline hover:no-underline text-center"
                             >
                                 Ver mais modelos de contratação

superpage/src/pages/_components/Stats.astro

@@ -0,0 +1,11 @@
+---
+import Container from "~/components/Container.astro";
+---
+
+<Container>
+    <div class="w-4/6 mx-auto">
+        <div>+100.000 Profissionais capacitados</div>
+        <div>+5.000 Empresas atendidas</div>
+        <div>12 anos de experiência</div>
+    </div>
+</Container>

superpage/src/pages/index.astro

@@ -5,6 +5,7 @@ import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
 import Search from "./_components/Search.astro";
 import { Clients } from "~/components/Course";
+import Stats from "./_components/Stats.astro";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
 const trends = [
@@ -70,6 +71,8 @@ const trends = [
             </nav>
         </Container>
 
+        <Stats />
+
         <Clients />
     </div>
 </Layout>