Stylistic changes and new illustrations

src/pages/contact.js

@@ -5,17 +5,52 @@ import SectionIntro from '../components/SectionIntro'
 
 const ContactPage = () => (
   <div>
-  <PageIntro intro="Contact" headline="Let's Connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
+  <PageIntro intro="Contact" headline="Let's connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
 
   <section className="container mx-auto my-12 p-4">
-        <SectionIntro
-          headline="Use the form below or any of the alternatives to connect"
-        />
+    <SectionIntro
+      headline="Use the form below or any of the alternatives to connect"
+    />
+
+    <p>Request a Proposal</p>
+    <p>Request a Video Call</p>
+    <p>Old-fashioned phone calls work as well: - +...</p>
+  </section>
+
+  <form className="container mx-auto max-w-md p-6">
+    <div className="flex flex-wrap -mx-3">
+
+      <div className="w-full md:w-1/2 p-3">
+        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+          Name
+        </label>
+        <input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-first-name" type="text" placeholder="Jane" required />
+      </div>
+
+      <div className="w-full md:w-1/2 p-3">
+        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+          E-mail
+        </label>
+        <input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="email" placeholder="Doe" required />
+      </div>
+
+      <div className="w-full p-3">
+        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+          Message
+        </label>
+        <textarea className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe" required />
+      </div>
+
+    </div>
+
+    <div className="w-full">
+      <button className="w-full shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="submit">
+        Send Mail
+      </button>
+    </div>
+
+</form>
 
-        <p>Request a Proposal</p>
-        <p>Request a Video Call</p>
-        <p>Old-fashioned phone calls work as well: - +...</p>
-      </section>
   </div>
 )