add form

superpage/src/components/Form.tsx

@@ -4,6 +4,7 @@ import { queryClient } from '../queryClient'
 import axios from 'axios'
 import { createElement } from 'react'
 import clsx from 'clsx'
+import { Container } from './Container'
 
 interface IFormInput {
   name: string
@@ -30,37 +31,34 @@ export function Form() {
   }
 
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex flex-col gap-3 lg:gap-6"
-    >
-      {formState.isSubmitSuccessful && (
-        <p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>
-      )}
+    <Container>
+      <form onSubmit={handleSubmit(onSubmit)} className="w-6/12 mx-auto py-6">
+        {formState.isSubmitSuccessful && <p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>}
+
+        <div className="grid lg:grid-cols-2 gap-3 lg:gap-6">
+          <label>
+            Nome
+            <Input {...register('name')} />
+          </label>
+          <label>
+            Email
+            <Input {...register('email')} />
+          </label>
+        </div>
 
-      <div className="grid lg:grid-cols-2 gap-3 lg:gap-6">
         <label>
-          Nome
-          <Input {...register('name')} />
+          Mensagem
+          <Input as="textarea" className="h-26" {...register('message')} />
         </label>
-        <label>
-          Email
-          <Input {...register('email')} />
-        </label>
-      </div>
 
-      <label>
-        Mensagem
-        <Input as="textarea" className="h-26" {...register('message')} />
-      </label>
-
-      <button
-        type="submit"
-        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>
+        <button
+          type="submit"
+          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>
   )
 }
 
@@ -71,10 +69,7 @@ interface IInput extends React.HTMLAttributes<HTMLElement> {
 
 export function Input({ as = 'input', className, ...props }: IInput) {
   return createElement(as, {
-    className: clsx(
-      'border border-transparent focus:border-green-secondary focus:ring ring-green-secondary text-white bg-black p-3 rounded-lg w-full outline-none',
-      className,
-    ),
+    className: clsx('border', className),
     ...props,
   })
 }