form to mobile

eduseg/src/components/Card.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 interface CardProps {
   children: React.ReactNode;
   color?: "gradient" | "darker" | "yellow";
-  className?: string | null;
+  className?: string | undefined;
 }
 
 export function Card({ children, color = "gradient", className }: CardProps) {

eduseg/src/components/Container.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 
 interface ContainerProps {
   children: React.ReactNode;
-  className?: string | null;
+  className?: string | undefined;
 }
 
 export function Container({ children, className }: ContainerProps) {

eduseg/src/components/Form.tsx

@@ -2,10 +2,13 @@ import { useForm } from "react-hook-form";
 import { useMutation } from "node_modules/@tanstack/react-query/build/legacy";
 import { queryClient } from "../queryClient";
 import axios from "axios";
+import { createElement } from "react";
+import clsx from "clsx";
 
 interface IFormInput {
   name: string;
   email: string;
+  message: string;
 }
 
 export function Form() {
@@ -29,20 +32,28 @@ export function Form() {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex flex-col gap-2.5 dark:text-green-primary space-y-5"
+      className="flex flex-col gap-2.5 lg:gap-5 dark:text-green-primary"
     >
       {formState.isSubmitSuccessful && (
         <p className="bg-green-700 text-white p-2.5 rounded-lg">OK!</p>
       )}
 
+      <div className="grid lg:grid-cols-2 gap-2.5 lg:gap-5">
+        <label>
+          Nome
+          <Input {...register("name")} />
+        </label>
+        <label>
+          Email
+          <Input {...register("email")} />
+        </label>
+      </div>
+
       <label>
-        Nome
-        <Input {...register("name")} />
-      </label>
-      <label>
-        Email
-        <Input {...register("email")} />
+        Mensagem
+        <Input as="textarea" className="h-26" {...register("message")} />
       </label>
+
       <button
         type="submit"
         className="font-medium bg-green-secondary hover:bg-green-support p-2.5 rounded-lg transition cursor-pointer h-12"
@@ -53,11 +64,17 @@ export function Form() {
   );
 }
 
-export function Input({ ...props }) {
-  return (
-    <input
-      className="border border-gray-300 focus:border-green-secondary focus:ring ring-green-secondary bg-white px-5 rounded-lg w-full outline-none h-12"
-      {...props}
-    />
-  );
+interface IInput extends React.HTMLAttributes<HTMLElement> {
+  as?: string;
+  className?: string | undefined;
+}
+
+export function Input({ as = "input", className, ...props }: IInput) {
+  return createElement(as, {
+    className: clsx(
+      "border border-gray-300 focus:border-green-secondary focus:ring ring-green-secondary bg-white p-2.5 rounded-lg w-full outline-none",
+      className,
+    ),
+    ...props,
+  });
 }

eduseg/src/pages/index.astro

@@ -57,11 +57,13 @@ import Layout from "@layouts/Layout.astro";
         </Card>
 
         <section class="grid lg:grid-cols-2 gap-6 p-5">
-            <div class="space-y-1">
-                <h4 class="text-2xl">Solicite um orçamento</h4>
+            <div class="space-y-1.5 lg:p-12">
+                <h4 class="font-medium text-4xl">Solicite um orçamento</h4>
                 <p>
-                    Quer saber como podemos capacitar sua equipe? Fale com nossa
-                    equipe e receba uma proposta personalizada.
+                    Quer saber como podemos capacitar sua equipe?<br
+                        class="max-lg:hidden"
+                    />
+                    Fale com nossa equipe e receba uma proposta personalizada.
                 </p>
             </div>