update contact

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>
     );
   }