Updated footer on PNI and maintenance page

maintenance/maintenance.html

@@ -100,37 +100,61 @@ <h2 class="h3-header">We Are Undergoing Maintenance</h1>
       </div>
     </div>
 
-    <footer class="mofo-footer">
+    <div class="donate-banner dark-theme py-5">
       <div class="container">
-        <ul class="list-unstyled footer-links row justify-content-center mb-0">
-          <li class="col-auto"><a class="footer-link-twitter" href="https://twitter.com/mozilla" target="_blank"
-              rel="noopener noreferrer">Twitter</a></li>
-          <li class="col-auto"><a class="footer-link-github"
-              href="https://www.github.com/mozilla/foundation.mozilla.org/" target="_blank"
-              rel="noopener noreferrer">Github</a></li>
-          <li class="col-auto"><a class="footer-link-participation-guidelines"
-              href="https://www.mozilla.org/about/governance/policies/participation/" target="_blank"
-              rel="noopener noreferrer">Participation Guidelines</a></li>
-          <li class="col-auto"><a class="footer-link-cc-license" href="https://creativecommons.org/licenses/by/4.0"
-              target="_blank" rel="noopener noreferrer">License</a></li>
-          <li class="col-auto"><a class="footer-link-legal" href="https://mozilla.org/en-US/about/legal/"
-              target="_blank" rel="noopener noreferrer">Legal</a></li>
-          <li class="col-auto"><a class="footer-link-privacy" href="https://mozilla.org/en-US/privacy/websites/"
-              target="_blank" rel="noopener noreferrer">Privacy</a></li>
-          <li class="col-auto"><a class="footer-link-donate" id="donate-footer-btn"
-              href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&amp;utm_medium=referral&amp;utm_content=footer"
-              target="_blank" rel="noopener noreferrer">Donate</a></li>
-        </ul>
-        <div class="org-info mozilla">
-          <div class="logo-container"><a class="logo" href="https://mozilla.org/" target="_blank"
-              rel="noopener noreferrer"></a></div>
-          <p>Mozilla is a global non-profit dedicated to putting you
-            in control of your online experience and shaping the future of the web
-            for the public good. Visit us at <a href="https://mozilla.org/" target="_blank"
-              rel="noopener noreferrer">mozilla.org</a>.</p>
+        <div class="row">
+          <div class="col-12">
+            <h3 class="h3-heading mb-0">We all love the Web. Join Mozilla in defending it.</h3>
+            <h4 class="h3-heading mb-4">Let’s protect the world’s largest resource for future generations.</h4>
+            <div>
+              <a href="https://donate.mozilla.org?utm_source=foundation.mozilla.org&amp;utm_medium=referral&amp;utm_content=footer-cta" target="_blank" rel="noopener noreferrer" c class="btn btn-secondary dark-theme">Donate now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="site-footer dark-theme py-5">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-5">
+            <div class="join-us mb-5" data-layout="side-button"></div>
+            <div class="my-5">
+              <a class="logo" href="https://mozilla.org"><img src="static/images/mozilla-block-white.svg"></a>
+            </div>
+          </div>
+          <div class="col-md-6 offset-md-1">
+            <div class="row">
+              <div class="col-md-4">
+                <h5 class="h5-heading">More about us</h5>
+                <ul class="d-flex">
+                  <li class="mr-3"><a class="" href="https://twitter.com/mozilla"><img src="static/images/twitter-dark-theme.svg" alt="Twitter"><span class="sr-only">Twitter</span></a></li>
+                  <li class="mr-3"><a class="" href="https://www.instagram.com/mozilla/"><img src="static/images/instagram-dark-theme.svg" alt="Instagram"><span class="sr-only">Instagram</span></a></li>
+                  <li class="mr-3"><a class="" href="https://www.github.com/mozilla/foundation.mozilla.org/"><img src="static/images/github-dark-theme.svg" alt="Github"><span class="sr-only">Github</span></a></li>
+                </ul>
+              </div>
+              <div class="col-md-8">
+                <ul class="link-list list-unstyled mb-0">
+                  <li class="mb-2"><a id="donate-footer-btn" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_content=footer" target="_blank" rel="noopener noreferrer" class="dark-theme">Donate</a></li>
+                  <li class="mb-2"><a href="https://mozilla.org/en-US/about/legal/" class="dark-theme">Legal</a></li>
+                  <li class="mb-2"><a href="https://creativecommons.org/licenses/by/4.0" class="dark-theme">License</a></li>
+                  <li class="mb-2"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="dark-theme">Participation Guidelines</a></li>
+                  <li class="mb-2"><a href="https://mozilla.org/en-US/privacy/websites/" class="dark-theme">Privacy</a></li>
+                </ul>
+              </div>
+            </div>
+            <hr class="mt-3 mt-md-5" />
+            <div class="row">
+              <div class="col-12">
+                <p class="dark-theme">Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good.</p>
+                <p class="dark-theme mb-0">Visit us at <a href="https://mozilla.org">mozilla.org</a></p>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </footer>
+
   </div>
 </body>