From 968738f17da63f5de97415eee76b7fa33b1adea8 Mon Sep 17 00:00:00 2001
From: Damian Dulisz <damian.dulisz@gmail.com>
Date: Sun, 30 Sep 2018 16:36:15 +0200
Subject: [PATCH] Add news subscription form to landing page (#1806)

* Add news subscription form to landing page

* Update index.ejs
---
 themes/vue/layout/index.ejs        | 34 ++++++++++++++++++++++++++++++
 themes/vue/source/css/_common.styl |  4 ++--
 themes/vue/source/css/index.styl   | 34 +++++++++++++++++++++++++++++-
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 72346dc15..d0f74ae3d 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -69,6 +69,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">
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
index fb0beb8ee..9132f234d 100644
--- a/themes/vue/source/css/_common.styl
+++ b/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
@@ -232,4 +233,3 @@ sup.beta.beta
   h2+p
     page-break-before: avoid
   a:link:after, a:visited:after { content:" [" attr(href) "] "; }
-  
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 347a87b7f..0613877a0 100644
--- a/themes/vue/source/css/index.styl
+++ b/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