modified the footer

Author: Selasi3

_includes/footer.html

@@ -1,6 +1,44 @@
 <footer role="contentinfo">
   <div class="wrapper">
-    <nav class="social-links">{%- include social.html -%}</nav>
+    <div class="footer-grid">
+      <div class="footer-column">
+        <h4>About</h4>
+        <ul>
+          <li><a href="/about/">About BPD</a></li>
+          <li><a href="/leadership">Leadership</a></li>
+          <li><a href="/mission">Mission</a></li>
+          <li><a href="/coc/">Code of Conduct</a></li>
+        </ul>
+      </div>
+
+      <!-- Support Column -->
+      <div class="footer-column">
+        <h4>Support</h4>
+        <ul>
+          <li><a href="#">Support</a></li>
+        </ul>
+      </div>
+
+      <!-- Programs and Events Column -->
+      <div class="footer-column">
+        <h4>Programs and Events</h4>
+        <ul>
+          <li><a href="/events">Events</a></li>
+          <li><a href="/meetup">Meetup</a></li>
+          <li><a href="programs">Programs</a></li>
+        </ul>
+      </div>
+
+      <!-- Community Column -->
+      <div class="footer-column">
+        <h4>Community</h4>
+        <ul>
+          <li><a href="/community.md">Community</a></li>
+          <li>{%- include social.html -%}</li>
+        </ul>
+      </div>
+    </div>
+
     <div class="footer-col-wrapper">
       <div class="footer-col">
         <a href="/coc/">Code of Conduct</a>

assets/css/bpd.css

@@ -517,3 +517,44 @@ ul.speaking-list {
     max-width: 60%;
   }
 }
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
+  gap: 20px; /* space between columns */
+  padding: 20px;
+}
+
+.footer-column h4 {
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #333;
+}
+
+.footer-column ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-column ul li {
+  margin-bottom: 5px;
+}
+
+.footer-column ul li a {
+  text-decoration: none;
+  color: #666;
+}
+
+.footer-column ul li a:hover {
+  color: #000;
+}
+
+.footer-col-wrapper {
+  text-align: center;
+  margin-top: 20px;
+}
+
+footer small {
+  font-size: 12px;
+  color: #999;
+}