From 89390c33330499ed9a813ab15498034f76a03464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 28 Oct 2020 11:51:57 +0100
Subject: [PATCH] WL-11 [Test] - Netlify form implementation

---
 components/Contact.vue | 62 ++++++++++++++++++++++++++++++++++++++++++
 components/Hero.vue    |  2 +-
 pages/index.vue        |  1 +
 static/Contact.html    | 52 +++++++++++++++++++++++++++++++++++
 4 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 components/Contact.vue
 create mode 100644 static/Contact.html

diff --git a/components/Contact.vue b/components/Contact.vue
new file mode 100644
index 0000000..a708045
--- /dev/null
+++ b/components/Contact.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="contact-me" class="container mx-auto p-16">
+    <h2 class="text-4xl mb-6">Contact me !</h2>
+    <form
+      class="w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 rounded shadow-xl flex flex-col items-end bg-gradient-to-br from-indigo-800 to-blue-800"
+      name="contact"
+      method="POST"
+      data-netlify="true"
+      data-netlify-honeypot="bot-field"
+    >
+      <input type="hidden" name="form-name" value="contact" />
+      <div class="flex flex-wrap -mx-3 mb-4">
+        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+          <label
+            class="block uppercase tracking-wide text-white text-xs font-bold mb-2"
+            for="grid-first-name"
+          >
+            Name
+          </label>
+          <input
+            class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
+            id="grid-first-name"
+            type="text"
+            placeholder="Jane Doe"
+          />
+        </div>
+        <div class="w-full md:w-1/2 px-3">
+          <label
+            class="block uppercase tracking-wide text-white text-xs font-bold mb-2"
+            for="grid-email"
+          >
+            Email
+          </label>
+          <input
+            class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
+            id="grid-email"
+            type="text"
+            placeholder="janedoe@example.com"
+          />
+        </div>
+      </div>
+
+      <textarea
+        rows="3"
+        class="w-full mb-4 bg-gray-100 appearance-none rounded py-2 px-4 placeholder-gray-700 text-gray-700 sm:text-sm sm:leading-5 focus:outline-none focus:bg-white"
+        placeholder="Hi, ..."
+      ></textarea>
+      <button
+        type="submit"
+        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
+      >
+        Submit
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/components/Hero.vue b/components/Hero.vue
index 3e487fb..20732ad 100644
--- a/components/Hero.vue
+++ b/components/Hero.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="HeroWrapper rounded-b-3xl shadow-xl bg-gradient-to-r from-blue-300 to-blue-700 flex items-center"
+    class="HeroWrapper rounded-b-3xl shadow-xl bg-gradient-to-br from-blue-300 to-blue-700 flex items-center"
   >
     <div
       class="rounded-3xl bg-white w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 shadow-xl text-center"
diff --git a/pages/index.vue b/pages/index.vue
index 4b40dc1..ebbadcb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,7 @@
   <div>
     <Hero />
     <Grid />
+    <Contact />
   </div>
 </template>
 
diff --git a/static/Contact.html b/static/Contact.html
new file mode 100644
index 0000000..97c4652
--- /dev/null
+++ b/static/Contact.html
@@ -0,0 +1,52 @@
+<form
+  class="w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 rounded shadow-xl flex flex-col items-end bg-gradient-to-br from-indigo-800 to-blue-800"
+  name="contact"
+  method="POST"
+  data-netlify="true"
+  data-netlify-honeypot="bot-field"
+  hidden
+>
+  <input type="hidden" name="form-name" value="contact" />
+  <div class="flex flex-wrap -mx-3 mb-4">
+    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+      <label
+        class="block uppercase tracking-wide text-white text-xs font-bold mb-2"
+        for="grid-first-name"
+      >
+        Name
+      </label>
+      <input
+        class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
+        id="grid-first-name"
+        type="text"
+        placeholder="Jane Doe"
+      />
+    </div>
+    <div class="w-full md:w-1/2 px-3">
+      <label
+        class="block uppercase tracking-wide text-white text-xs font-bold mb-2"
+        for="grid-email"
+      >
+        Email
+      </label>
+      <input
+        class="appearance-none block w-full bg-gray-100 placeholder-gray-700 text-gray-700 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
+        id="grid-email"
+        type="text"
+        placeholder="janedoe@example.com"
+      />
+    </div>
+  </div>
+
+  <textarea
+    rows="3"
+    class="w-full mb-4 bg-gray-100 appearance-none rounded py-2 px-4 placeholder-gray-700 text-gray-700 sm:text-sm sm:leading-5 focus:outline-none focus:bg-white"
+    placeholder="Hi, ..."
+  ></textarea>
+  <button
+    type="submit"
+    class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
+  >
+    Submit
+  </button>
+</form>