Email signup

sass/_email-form.scss

@@ -0,0 +1,67 @@
+.footer-email-list {
+    margin-top: 2em;
+    margin-bottom: 1em;
+    text-align: left;
+    h2 {
+        margin-top: 0;
+    }
+
+    .footer-form {
+        div.field {
+            text-align: left;
+        }
+        .legal-consent-container, .hs-richtext {
+            text-align: left;
+            p {
+                max-width: none;
+                margin: auto;
+            }
+        }
+        input[type="submit"] {
+            background: none;
+            border: 1px solid white;
+            color: white;
+            padding: 0.5em 2em;
+            cursor: pointer;
+        }
+        .actions {
+            text-align: left;
+        }
+        .hs_submit {
+            padding-top: 1em;
+            height: 100px; /* this is due to the floating  captcha badge */
+        }
+        .hs_recaptcha {
+            float: right;
+            opacity: 0.5;
+            min-height: 60px;
+        }
+        .hs-error-msgs {
+            list-style-type: none;
+            color: red;
+            padding-left: 0;
+            margin-top: 0;
+            li {
+                adding-left: 0;
+            }
+        }
+
+        input[type="text"], 
+        input[type="email"],
+        select {
+            background: none;
+            border: none;
+            border-bottom: 1px solid white;
+            color: white;
+            &::placeholder {
+                opacity: 1;
+                color: white;
+            }
+            width: 100%;
+            margin-bottom: 0.75em;
+        }
+        select {
+            color: white;
+        }
+    }
+}

sass/_valkey.scss

@@ -389,6 +389,9 @@ p {
 }
 
 .footer {
+  & + .footer {
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
   background-color: #1a2026;
   @include sans-serif;
   font-size: 1.4rem;

sass/css/styles.scss

@@ -7,6 +7,7 @@
 @import '../typography';
 @import '../pygments';
 @import '../valkey';
+@import '../email-form';
 
 /* Styling for Markdown Tables */
 table {

templates/default.html

@@ -70,61 +70,65 @@
       {% block content %}{% endblock %}
   </div>
   <div class="footer">
-    <div class="row">
-      <div class="col col-6 icon-links">
-        <a href="https://valkey.io/slack" target="_blank">
-          <img src="/img/IconSlack.svg" alt="Slack Icon" width="20" height="20" />
-          Slack
-        </a>
-        <a href="https://github.com/valkey-io" target="_blank">
-          <img src="/img/IconGithub.svg" alt="GitHub Icon" width="20" height="20" />
-          GitHub
-        </a>
-        <a href="https://www.linkedin.com/company/valkey/" target="_blank">
-          <img src="/img/IconLinkedin.svg" alt="LinkedIn Icon" width="20" height="20" />
-          LinkedIn
-        </a>
-        <a href="https://x.com/valkey_io" target="_blank">
-          <img src="/img/IconX.svg" alt="X Icon" width="20" height="20" />
-          X.com
-        </a>
-        <a href="/connect">
-          <img src="/img/IconMail.svg" alt="Mail Icon" width="20" height="20" />
-          Connect
-        </a>
-      </div>
-
-      <div class="col col-6 links">
-        <a href="/code_of_conduct">Code of Conduct</a>
-        <a href="https://github.com/orgs/valkey-io/discussions" target="_blank">Forum</a>
-        <a href="/about">About</a>
-        <a href="/topics/faq">FAQ</a>
+      <div class="row">
+        <div class="col col-6 icon-links">
+          <a href="https://valkey.io/slack" target="_blank">
+            <img src="/img/IconSlack.svg" alt="Slack Icon" width="20" height="20" />
+            Slack
+          </a>
+          <a href="https://github.com/valkey-io" target="_blank">
+            <img src="/img/IconGithub.svg" alt="GitHub Icon" width="20" height="20" />
+            GitHub
+          </a>
+          <a href="https://www.linkedin.com/company/valkey/" target="_blank">
+            <img src="/img/IconLinkedin.svg" alt="LinkedIn Icon" width="20" height="20" />
+            LinkedIn
+          </a>
+          <a href="https://x.com/valkey_io" target="_blank">
+            <img src="/img/IconX.svg" alt="X Icon" width="20" height="20" />
+            X.com
+          </a>
+          <a href="/connect">
+            <img src="/img/IconMail.svg" alt="Mail Icon" width="20" height="20" />
+            Connect
+          </a>
+        </div>
+        <div class="col col-6 links">
+          <a href="/code_of_conduct">Code of Conduct</a>
+          <a href="https://github.com/orgs/valkey-io/discussions" target="_blank">Forum</a>
+          <a href="/about">About</a>
+          <a href="/topics/faq">FAQ</a>
+        </div>
       </div>
     </div>
-
-    <div class="footer_bottom">
-      <p>&copy; Valkey contributors.</p>
-      <p>Valkey and the Valkey logo are trademarks of LF Projects, LLC.</p>
-      <p>
-        <a href="https://lfprojects.org/policies/trademark-policy/">Trademark Policy</a>.
-        <a href="https://lfprojects.org/policies/privacy-policy/">Privacy Policy</a>.
-        <a href="https://lfprojects.org/policies/terms-of-use/">Terms of Use</a>.
-        For other policies, please see <a href="https://lfprojects.org/">lfprojects.org</a>.
-      </p>
-      <p>Valkey includes certain 3-Clause BSD-licensed Redis code from Redis Ltd. and other source code. Redis Ltd. is
-        not the source of that other source code. Redis is a registered trademark of Redis Ltd.</p>
-      <p>
-        Logo design by <a href="https://github.com/dizys" target="_blank">Ziyang.</a>
-      </p>
-    {%- if page and page.extra and page.extra.footer_add -%}
-      {{ page.extra.footer_add | markdown | safe  }}
-    {%- endif -%}
+    <div class="footer">
+      <div class="row">
+        {% include "includes/email-list.html" %}
+      </div>
     </div>
-    <img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=4682283c-f8b7-410c-9c31-c6d7944cee8b" />
-  </div>
-  <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MFFCB7SR"
+    <div class="footer">
+      <div class="footer_bottom">
+        <p>&copy; Valkey contributors.</p>
+        <p>Valkey and the Valkey logo are trademarks of LF Projects, LLC.</p>
+        <p>
+          <a href="https://lfprojects.org/policies/trademark-policy/">Trademark Policy</a>.
+          <a href="https://lfprojects.org/policies/privacy-policy/">Privacy Policy</a>.
+          <a href="https://lfprojects.org/policies/terms-of-use/">Terms of Use</a>.
+          For other policies, please see <a href="https://lfprojects.org/">lfprojects.org</a>.
+        </p>
+        <p>Valkey includes certain 3-Clause BSD-licensed Redis code from Redis Ltd. and other source code. Redis Ltd. is
+          not the source of that other source code. Redis is a registered trademark of Redis Ltd.</p>
+        <p>
+          Logo design by <a href="https://github.com/dizys" target="_blank">Ziyang.</a>
+        </p>
+      </div>
+      <img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=4682283c-f8b7-410c-9c31-c6d7944cee8b" />
+      <!-- Google Tag Manager (noscript) -->
+      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MFFCB7SR"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-  <!-- End Google Tag Manager (noscript) -->
+      <!-- End Google Tag Manager (noscript) -->
+    </div>
+
+
 </body>
 </html>

templates/includes/email-list.html

@@ -0,0 +1,18 @@
+<div class="row footer-email-list" id="email-signup">
+    <div class="col col-4">
+        <h2>Subscribe for updates, event info, and the latest Valkey news</h2>
+
+        <p>Stay connected with everything happening in the Valkey ecosystem: news, community stories, updates, and opportunities to get involved.</p>
+        <p>Subscriptions are open to all, so invite a friend or teammate. Thanks for joining and happy reading!</p>
+    </div>
+    <div class="footer-form col col-8">
+        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
+        <script>
+        hbspt.forms.create({
+            portalId: "8112310",
+            formId: "7d793edf-4628-41c5-8c66-1a40a5b345b6",
+            region: "na1"
+        });
+        </script>
+    </div>
+</div>