update form

superpage/src/components/Form.tsx

@@ -32,28 +32,26 @@ export function Form() {
 
   return (
     <Container>
-      <form onSubmit={handleSubmit(onSubmit)} className="w-6/12 mx-auto py-6">
+      <form onSubmit={handleSubmit(onSubmit)} className="lg:w-6/12 mx-auto flex flex-col gap-2.5">
         {formState.isSubmitSuccessful && <p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>}
 
-        <label>
+        <Label>
-          Nome
+          <span className="lg:w-14">Nome</span>
           <Input {...register('name')} />
-        </label>
+        </Label>
-        <label>
+
-          Email
+        <Label>
+          <span className="lg:w-14">Email</span>
           <Input {...register('email')} />
-        </label>
+        </Label>
 
-        <label>
+        <Label className="flex-col !items-start !gap-1">
-          Mensagem
+          <span>Mensagem</span>
           <Input as="textarea" className="h-26" {...register('message')} />
-        </label>
+        </Label>
 
-        <button
+        <button type="submit" className="">
-          type="submit"
+          Enviar
-          className="font-medium bg-green-secondary hover:text-black hover:bg-green-support p-3 rounded-lg transition cursor-pointer h-12"
-        >
-          Quero um orçamento
         </button>
       </form>
     </Container>
@@ -67,7 +65,18 @@ interface IInput extends React.HTMLAttributes<HTMLElement> {
 
 export function Input({ as = 'input', className, ...props }: IInput) {
   return createElement(as, {
-    className: clsx('border', className),
+    className: clsx(
+      'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
+      className,
+    ),
     ...props,
   })
 }
+
+interface ILabel extends React.HTMLAttributes<HTMLElement> {
+  className?: string | undefined
+}
+
+function Label({ children, className }: ILabel) {
+  return <label className={clsx('flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', className)}>{children}</label>
+}

superpage/src/styles/app.css

@@ -20,5 +20,5 @@
 
 html,
 body {
-  @apply text-white bg-black scroll-pt-24;
+  @apply text-white bg-black scroll-pt-22;
 }