Add news subscription form to landing page

themes/vue/layout/index.ejs

@@ -67,6 +67,40 @@
   </div>
 </div>
 
+<div id="news">
+  <div class="inner">
+    <h3>Subscribe to our Weekly Newsletter</h3>
+    <form
+      class="newsletter-form"
+      id="revue-form"
+      name="revue-form"
+      target="_blank"
+      action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
+      method="post"
+      @submit="subscribe"
+    >
+      <input
+        class="newsletter-input"
+        type="email"
+        name="member[email]"
+        id="member_email"
+        required
+        placeholder="Email address"
+      >
+      <input
+        class="button newsletter-button"
+        type="submit"
+        value="Subscribe"
+        name="member[subscribe]"
+        id="member_submit"
+      >
+    </form>
+    <p>
+      You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a>.
+    </p>
+  </div>
+</div>
+
 <div id="footer">
   <p>
     <a class="social-icon" href="https://github.com/vuejs/vue" target="_blank">

themes/vue/source/css/_common.styl

@@ -48,7 +48,8 @@ em
 p
   word-spacing: 0.05em
 
-a.button
+a.button,
+input.button
   padding: 0.75em 2em
   border-radius: 2em
   display: inline-block
@@ -216,4 +217,3 @@ sup.beta.beta
   h2+p
     page-break-before: avoid
   a:link:after, a:visited:after { content:" [" attr(href) "] "; }
-

themes/vue/source/css/index.styl

@@ -26,7 +26,8 @@ body
     .logo
       display: none
 
-#hero
+#hero,
+#news
   padding: $space 40px 30px
   background-color: #fff
   .inner
@@ -71,6 +72,37 @@ body
       vertical-align: middle
       margin-right: 15px
 
+#news
+  padding: $space 20px 70px
+  text-align: center
+  p
+    margin-top: 10px
+  a
+    color: $green
+  .newsletter-form
+    position: relative
+    max-width: 550px
+    margin: 0 auto
+    box-sizing: border-box
+  .newsletter-input
+    width: 100%
+    box-sizing: border-box
+    padding: 10px 80px 10px 20px
+    height: 50px
+    border-radius: 50px
+    border: 1px solid #ccc
+    font-size: 16px
+    &:focus
+      outline: none
+      border-color: #42b983
+  .newsletter-button.button
+    position: absolute
+    padding: 4px 20px
+    margin: 0
+    height: calc(100% - 8px)
+    right: 4px
+    top: 4px
+
 #special-sponsor
   background-color: #fff
   text-align: center