From 3fcd2c154377b55917e81e46dc0be73929426a6d Mon Sep 17 00:00:00 2001
From: Gabriel Fosse <kraken+majesticio@users.noreply.github.com>
Date: Thu, 21 Mar 2024 11:18:17 -0700
Subject: [PATCH] Added first name and last name fields for mailchimp in the
 frontpage footer

---
 themes/openaq/layouts/partials/footer.html | 242 ++++++++++++++-------
 1 file changed, 163 insertions(+), 79 deletions(-)

diff --git a/themes/openaq/layouts/partials/footer.html b/themes/openaq/layouts/partials/footer.html
index d4e0864b..5e0ae502 100644
--- a/themes/openaq/layouts/partials/footer.html
+++ b/themes/openaq/layouts/partials/footer.html
@@ -1,83 +1,167 @@
 <footer class="footer">
-    <div class="footer__content">
-        <section class="nav-section">
-            <img src="/svg/logo_white.svg" alt="" class="footer-logo">
-            <nav class="footer-nav">
-                <a class="type-navigation-2 text-white footer-home" href="/">Home</a>
-                <a class="type-navigation-2 text-white footer-explore" href="https://explore.openaq.org">Explore</a>
-                <a class="type-navigation-2 text-white footer-api" href="https://docs.openaq.org/docs">API</a>
-                <a class="type-navigation-2 text-white footer-about" href="/about">About</a>
-                <a class="type-navigation-2 text-white footer-contact" href="/contact">Contact</a>
-                <a class="type-navigation-2 text-white footer-help" href="/developers/help">Help</a>
-            </nav>
-        </section>
-        <section class="contact-section">
-            <span class="type-subtitle-3 text-white">Stay up to date</span>
-                <form                
-                action="//openaq.us10.list-manage.com/subscribe/post?u=ca93b2911fff40db15f6e7203&amp;id=e65a8618a1"
-                method="post"
-                id="mc-embedded-subscribe-form"
-                class="subscribe-form"
-                name="mc-embedded-subscribe-form"
-                target="_blank"
-                rel="noreferrer"
-                noValidate>
-            
-                <input
-                type="email"
-                name="EMAIL"
-                id="mce-EMAIL"
-                placeholder="Enter your email"
-                class="text-input"
-                required
-              />
-                <button class="btn btn-primary js-footer-subscribe" type="submit">Subscribe</button>
-                <div
-                style="position: absolute; left: -5000px;"
-                aria-hidden="true"
-                >
-                <input
-                  type="text"
-                  name="b_ca93b2911fff40db15f6e7203_e65a8618a1"
-                  tabIndex="-1"
-                  defaultValue=""
-                />
+  <div class="footer__content">
+    <section class="nav-section">
+      <img src="/svg/logo_white.svg" alt="" class="footer-logo" />
+      <nav class="footer-nav">
+        <a class="type-navigation-2 text-white footer-home" href="/"
+          >Home</a
+        >
+        <a
+          class="type-navigation-2 text-white footer-explore"
+          href="https://explore.openaq.org"
+          >Explore</a
+        >
+        <a
+          class="type-navigation-2 text-white footer-api"
+          href="https://docs.openaq.org/docs"
+          >API</a
+        >
+        <a
+          class="type-navigation-2 text-white footer-about"
+          href="/about"
+          >About</a
+        >
+        <a
+          class="type-navigation-2 text-white footer-contact"
+          href="/contact"
+          >Contact</a
+        >
+        <a
+          class="type-navigation-2 text-white footer-help"
+          href="/developers/help"
+          >Help</a
+        >
+      </nav>
+    </section>
+    <section class="contact-section">
+      <span class="type-subtitle-3 text-white">Stay up to date</span>
+      <form
+        action="//openaq.us10.list-manage.com/subscribe/post?u=ca93b2911fff40db15f6e7203&amp;id=e65a8618a1"
+        method="post"
+        id="mc-embedded-subscribe-form"
+        class="subscribe-form"
+        name="mc-embedded-subscribe-form"
+        target="_blank"
+        rel="noreferrer"
+        novalidate
+      >
+        <input
+          type="email"
+          name="EMAIL"
+          id="mce-EMAIL"
+          placeholder="Enter your email"
+          class="text-input"
+          required
+        />
 
-              </div>
-            </form>
-            <div class="social-links">
-                <a href="https://twitter.com/openaq" class="social-circle twitter-nav js-footer-twitter-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/twitter.svg" alt="twitter">
-                </a>
-                <a href="https://join.slack.com/t/openaq/shared_invite/zt-yzqlgsva-v6McumTjy2BZnegIK9XCVw" class="social-circle slack-nav js-footer-slack-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/slack.svg" alt="slack">
-                </a>
-                <a href="https://github.com/openaq" class="social-circle github-nav js-footer-github-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/github.svg" alt="github">
-                </a>
-                <a href="https://www.linkedin.com/company/openaq" class="social-circle linkedIn-nav js-footer-linkedIn-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/linkedin.svg" alt="linkedin">
-                </a>
-                <a href="https://openaq.medium.com/" class="social-circle medium-nav js-footer-medium-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/medium.svg" alt="medium">
-                </a>                
-                <a href="https://www.youtube.com/@openaq4768" class="social-circle youtube-nav js-footer-youtube-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/youtube.svg" alt="youtube">
-                </a>
-                <a href="https://www.facebook.com/openaq/" class="social-circle fb-nav js-footer-fb-link" target="_blank" rel="noreferrer noopener">
-                    <img src="/svg/facebook.svg" alt="facebook">
-                </a>
-            </div>
-        </section>
+        <!-- First Name Field -->
+        <input
+          type="text"
+          name="FNAME"
+          id="mce-FNAME"
+          placeholder="First Name"
+          class="text-input"
+        />
 
-    </div>
-    <div class="sub-footer">
-        <span class="copyright text-white type-body-4">&#169; {{ replace .Site.Copyright "{year}" now.Year }}</span>
-        <nav class="sub-footer-nav">
-            <a class="type-body-4 text-white" href="/terms/">Terms</a>
-            <a class="type-body-4 text-white" href="/privacy/">Privacy Policy</a>
-            <a class="type-body-4 text-white" href="/cookies/">Cookies</a>
-        </nav>
-    </div>
+        <!-- Last Name Field -->
+        <input
+          type="text"
+          name="LNAME"
+          id="mce-LNAME"
+          placeholder="Last Name"
+          class="text-input"
+        />
 
-</footer>
\ No newline at end of file
+        <button
+          class="btn btn-primary js-footer-subscribe"
+          type="submit"
+        >
+          Subscribe
+        </button>
+
+        <div
+          style="position: absolute; left: -5000px"
+          aria-hidden="true"
+        >
+          <input
+            type="text"
+            name="b_ca93b2911fff40db15f6e7203_e65a8618a1"
+            tabindex="-1"
+            defaultValue=""
+          />
+        </div>
+      </form>
+
+      <div class="social-links">
+        <a
+          href="https://twitter.com/openaq"
+          class="social-circle twitter-nav js-footer-twitter-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/twitter.svg" alt="twitter" />
+        </a>
+        <a
+          href="https://join.slack.com/t/openaq/shared_invite/zt-yzqlgsva-v6McumTjy2BZnegIK9XCVw"
+          class="social-circle slack-nav js-footer-slack-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/slack.svg" alt="slack" />
+        </a>
+        <a
+          href="https://github.com/openaq"
+          class="social-circle github-nav js-footer-github-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/github.svg" alt="github" />
+        </a>
+        <a
+          href="https://www.linkedin.com/company/openaq"
+          class="social-circle linkedIn-nav js-footer-linkedIn-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/linkedin.svg" alt="linkedin" />
+        </a>
+        <a
+          href="https://openaq.medium.com/"
+          class="social-circle medium-nav js-footer-medium-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/medium.svg" alt="medium" />
+        </a>
+        <a
+          href="https://www.youtube.com/@openaq4768"
+          class="social-circle youtube-nav js-footer-youtube-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/youtube.svg" alt="youtube" />
+        </a>
+        <a
+          href="https://www.facebook.com/openaq/"
+          class="social-circle fb-nav js-footer-fb-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <img src="/svg/facebook.svg" alt="facebook" />
+        </a>
+      </div>
+    </section>
+  </div>
+  <div class="sub-footer">
+    <span class="copyright text-white type-body-4"
+      >&#169; {{ replace .Site.Copyright "{year}" now.Year }}</span
+    >
+    <nav class="sub-footer-nav">
+      <a class="type-body-4 text-white" href="/terms/">Terms</a>
+      <a class="type-body-4 text-white" href="/privacy/"
+        >Privacy Policy</a
+      >
+      <a class="type-body-4 text-white" href="/cookies/">Cookies</a>
+    </nav>
+  </div>
+</footer>