From d9cf8ac60bdc829314ad058b4b1f1f9b3f2ee846 Mon Sep 17 00:00:00 2001
From: Paul Copplestone <pcopplestone@gmail.com>
Date: Mon, 28 Oct 2019 15:19:00 +0000
Subject: [PATCH] Adding signup and thanks

---
 packages/web/components/SignUpForm.js | 43 ++++++++++++++++++++++-----
 packages/web/pages/thanks.js          | 26 ++++++++++++++++
 2 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/pages/thanks.js

diff --git a/packages/web/components/SignUpForm.js b/packages/web/components/SignUpForm.js
index b0541dc4a52..367835aacbd 100644
--- a/packages/web/components/SignUpForm.js
+++ b/packages/web/components/SignUpForm.js
@@ -1,14 +1,41 @@
-export default function Footer() {
+import React, { useState, useEffect } from 'react'
+
+export default function SignUpForm() {
+  const [email, setEmail] = useState('')
   return (
-    <form className="field is-grouped" name="contact" method="POST" data-netlify="true">
+    <form
+      action="https://gmail.us5.list-manage.com/subscribe/post?u=c6785f4e1c9c77f231e367f6e&amp;id=18cccc8b62"
+      method="post"
+      id="mc-embedded-subscribe-form"
+      name="mc-embedded-subscribe-form"
+      className="field is-grouped"
+      target="_blank"
+      novalidate
+    >
       <p className="control is-expanded">
-        <input className="input" type="email" name="email" placeholder="your@email.com" />
-      </p>
-      <p className="control">
-        <button className="button is-primary" type="submit">
-          Early Sign Up
-        </button>
+        <input
+          type="email"
+          value={email}
+          name="EMAIL"
+          className="input email"
+          id="mce-EMAIL"
+          placeholder="your@email.com"
+          onChange={e => setEmail(e.target.value)}
+          required
+        />
       </p>
+      <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
+        <input type="text" name="b_c6785f4e1c9c77f231e367f6e_18cccc8b62" tabindex="-1" value="" />
+      </div>
+      <div className="control">
+        <input
+          type="submit"
+          value="Early Sign Up"
+          name="subscribe"
+          id="mc-embedded-subscribe"
+          className="button is-primary"
+        />
+      </div>
     </form>
   )
 }
diff --git a/packages/web/pages/thanks.js b/packages/web/pages/thanks.js
new file mode 100644
index 00000000000..81ca0d73049
--- /dev/null
+++ b/packages/web/pages/thanks.js
@@ -0,0 +1,26 @@
+import MainLayout from '~/components/layouts/MainLayout'
+import Link from 'next/link'
+export default class Thanks extends React.Component {
+  render() {
+    return (
+      <MainLayout>
+        <div className="section container m-xxl ">
+          <div className="columns is-centered">
+            <div className="column" style={{ maxWidth: 450 }}>
+              <h1 className="title is-1">Thanks!</h1>
+              <p className="subtitle">You're super early.</p>
+              <p className="">We've put you on the early-bird list.</p>
+              <p className="">
+                If you're feeling really brave, why don't you check out our{' '}
+                <Link href={`/docs/[category]/[slug]`} as={`/docs/-/about`}>
+                  <a className="">docs</a>
+                </Link>{' '}
+                and start using our free &amp; opensource products?
+              </p>
+            </div>
+          </div>
+        </div>
+      </MainLayout>
+    )
+  }
+}