Add newsletter subscription form (#840)

Author: jasongrout

_includes/page-header.html

@@ -7,11 +7,4 @@
     <h1>{{ include.title }}</h1>
   {% endif %}
   <p>{{ include.tagline }}</p>
-
-  <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
-  <script>
-    document.addEventListener('DOMContentLoaded', function(event) {
-      anchors.add();
-    });
-  </script>
 </header>

_layouts/default.html

@@ -75,6 +75,13 @@
     <link rel="apple-touch-icon" sizes="167x167" href="/assets/favicons/apple-touch-icon-167x167.png">
     <link rel="me" href="https://hachyderm.io/@ProjectJupyter">
     <script>console.log('Welcome to Project Jupyter! Explore the various tools available and their corresponding documentation. If you are interested in contributing to the platform, please visit the community resources section at https://jupyter.org/community.html.')</script>
+    <script defer src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function(event) {
+        anchors.add();
+      });
+    </script>
+
     <!-- Privacy-friendly analytics by Plausible -->
     <script async src="https://plausible.io/js/pa-B75UO5--FNXYQSG7GBWkf.js"></script>
     <script>
@@ -180,6 +187,33 @@ <h2>Legal</h2>
         </div>
       </div>
       </section>
+      <section class="newsletter">
+          <div class="content content--wide">
+            <h2 id="newsletter">Subscribe for updates, event info, webinars, and the latest community news</h2>
+            <!-- Newsletter subscription -->
+            <script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/embed/v2.js"></script>
+            <script>
+              hbspt.forms.create({
+                portalId: "8112310",
+                formId: "3a79d744-5260-4a98-b069-39defccc8f42",
+                region: "na1",
+                css: "\
+                  .hs-form { display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-end; }\
+                  .hs-form-field { flex: 1 1 200px; position: relative; padding-bottom: 1.5em; }\
+                  .hs-form-field .input { margin: 0 !important; }\
+                  .hs-input { width: 100% !important; background: transparent !important; border: none !important; border-bottom: 2px solid #4d4d4d !important; padding: 0.6em 0 !important; margin: 0 !important; outline: none !important; box-shadow: none !important; }\
+                  .hs-input:focus { border-bottom-color: #000 !important; }\
+                  .hs-input.error { border-bottom-style: dashed !important; }\
+                  select.hs-input { appearance: auto; }\
+                  .hs-richtext { flex: 1 1 300px; color: #000; font-size: 0.85em; line-height: 1.5; }\
+                  .hs-submit { flex: 0 0 auto; }\
+                  .hs-button { background: #f37626 !important; color: #fff !important; text-shadow: 0px 0px 4px #000 !important; border: none !important; padding: 0.75em 3em; font-size: 1.1em; font-weight: 600; cursor: pointer; border-radius: 4px; }\
+                  .hs-error-msgs { position: absolute; left: 0; bottom: 0; color: #000; list-style: none; padding: 0; margin: 0; font-size: 0.8em; }\
+                "
+              });
+            </script>
+          </div>
+      </section>
       <section class="footer-text">
         <div class="content content--wide">
           <img src="/assets/logos/rectanglelogo-blacktext-blackbody-blackplanets.svg" width="189" height="51" alt="Project Jupyter logo">

_sass/components/_footer.scss

@@ -38,6 +38,17 @@
       }
     }
   }
+  .newsletter {
+    background-color: lighten($orange, 24%);
+    h2 {
+      color: $black;
+      font-size: 1.3em;
+      font-weight: bold;
+      margin: 0 0 1.5em 0;
+      padding: 0;
+    }
+    // Form renders in iframe; styles injected via css param in hbspt.forms.create()
+  }
   .footer-text {
     background-color: $orange;
     img {
@@ -48,6 +59,10 @@
       color: $black;
       padding-top: 10px;
       font-size: 0.9em;
+      a {
+        color: $black;
+        text-decoration: underline;
+      }
     }
   }
 }