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,13 +31,9 @@ export function Form() {
   }
 
   return (
-    <form
+    <Container>
-      onSubmit={handleSubmit(onSubmit)}
+      <form onSubmit={handleSubmit(onSubmit)} className="w-6/12 mx-auto py-6">
-      className="flex flex-col gap-3 lg:gap-6"
+        {formState.isSubmitSuccessful && <p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>}
-    >
-      {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>
@@ -61,6 +58,7 @@ export function Form() {
           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(
+    className: clsx('border', className),
-      '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,
-    ),
     ...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>