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