From 3c36b5f9ad5a5299776802620578d5b5e2562f4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Tue, 22 Apr 2025 10:37:01 -0300
Subject: [PATCH] add form

---
 superpage/src/pages/[slug].astro              |  8 +++++
 superpage/src/pages/_components/Contact.Astro | 35 +++++++++++++++++++
 superpage/src/pages/_components/_input.astro  |  7 ++++
 superpage/src/pages/_components/_label.astro  |  3 ++
 .../src/pages/_components/_textarea.astro     |  8 +++++
 5 files changed, 61 insertions(+)
 create mode 100644 superpage/src/pages/_components/_input.astro
 create mode 100644 superpage/src/pages/_components/_label.astro
 create mode 100644 superpage/src/pages/_components/_textarea.astro

diff --git a/superpage/src/pages/[slug].astro b/superpage/src/pages/[slug].astro
index 9d74663..c4b6c38 100644
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -9,6 +9,7 @@ import Semeq from '~/components/logos/Semeq.astro'
 import Natura from '~/components/logos/Natura.astro'
 import Nissan from '~/components/logos/Nissan.astro'
 import Manserv from '~/components/logos/Manserv.astro'
+import Contact from './_components/Contact.astro'
 
 import placeholder from './_assets/placeholder.png'
 import mulherdenegocios from './_assets/mulher-de-negocios.png'
@@ -276,5 +277,12 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
             </div>
         </Container>
         <!-- Cert End -->
+
+        <!-- Contact Form -->
+        <Container>
+            <Contact />
+        </Container>
+        <!-- Contact Form End -->
     </section>
+
 </Layout>
diff --git a/superpage/src/pages/_components/Contact.Astro b/superpage/src/pages/_components/Contact.Astro
index e69de29..d603871 100644
--- a/superpage/src/pages/_components/Contact.Astro
+++ b/superpage/src/pages/_components/Contact.Astro
@@ -0,0 +1,35 @@
+---
+import Label from './_label.astro'
+import Input from './_input.astro'
+import Textarea from './_textarea.astro'
+
+// https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562
+
+if (Astro.request.method === 'POST') {
+    try {
+        const data = await Astro.request.formData()
+        console.log(data)
+    } catch (error) {
+        if (error instanceof Error) {
+            console.error(error.message)
+        }
+    }
+}
+---
+
+<form method="POST" class="lg:w-6/12 mx-auto flex flex-col gap-2.5">
+    <Label>
+        <span class="lg:w-14">Nome</span>
+        <Input name="name" />
+    </Label>
+    <Label>
+        <span class="lg:w-14">Email</span>
+        <Input name="email" />
+    </Label>
+    <Label class="flex-col !items-start !gap-1">
+        <span>Mensagem</span>
+        <Textarea name="message" class="h-26" />
+    </Label>
+
+    <button type="submit">Enviar</button>
+</form>
diff --git a/superpage/src/pages/_components/_input.astro b/superpage/src/pages/_components/_input.astro
new file mode 100644
index 0000000..c31e110
--- /dev/null
+++ b/superpage/src/pages/_components/_input.astro
@@ -0,0 +1,7 @@
+<input
+    class:list={[
+        'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
+        Astro.props.class,
+    ]}
+    {...Astro.props}
+/>
diff --git a/superpage/src/pages/_components/_label.astro b/superpage/src/pages/_components/_label.astro
new file mode 100644
index 0000000..ffe2598
--- /dev/null
+++ b/superpage/src/pages/_components/_label.astro
@@ -0,0 +1,3 @@
+<label class:list={['flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', Astro.props.class]}>
+    <slot />
+</label>
diff --git a/superpage/src/pages/_components/_textarea.astro b/superpage/src/pages/_components/_textarea.astro
new file mode 100644
index 0000000..be2588d
--- /dev/null
+++ b/superpage/src/pages/_components/_textarea.astro
@@ -0,0 +1,8 @@
+<textarea
+    class:list={[
+        'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
+        Astro.props.class,
+    ]}
+    {...Astro.props}
+>
+</textarea>