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

superpage/src/pages/[slug].astro

@@ -7,6 +7,7 @@ import { CheckBadgeIcon, LockClosedIcon } from '@heroicons/react/24/solid'
 import { LinkedInIcon } from '~/components/LinkedInIcon'
 import Layout from '~/layouts/Layout.astro'
 import ClientsLogo from '~/components/ClientsLogo.astro'
+import { Form } from '~/components/Form'
 import placeholder from '~/assets/placeholder.png'
 import mulherdenegocios from '~/assets/mulher-de-negocios.png'
 import homemdenegocios from '~/assets/homem-de-negocios.png'
@@ -33,7 +34,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
 
 <Layout title={data.title}>
   <div class="space-y-6 lg:space-y-24">
-    <Container className="lg:flex items-center justify-start gap-6">
+    <Container className="lg:flex items-center justify-start gap-6 max-lg:pt-6">
       <Picture
         src={data?.img ? data.img : placeholder}
         alt={data.title}
@@ -216,5 +217,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
         </div>
       </div>
     </Container>
+
+    <Form client:load />
   </div>
 </Layout>