Add BottomNav

src/components/BottomNav.astro

@@ -0,0 +1,108 @@
+---
+const navSections = [
+  {
+    heading: "The Project",
+    links: [
+      { label: "About", href: "/about" },
+      { label: "Roadmap", href: "/roadmap" },
+      { label: "News", href: "/news" },
+    ],
+  },
+  {
+    heading: "Support",
+    links: [
+      { label: "Sponsors", href: "/sponsors" },
+      { label: "Financial Reports", href: "/about/reports" },
+      { label: "Brand Assets", href: "/about#brand-assets" },
+    ],
+  },
+  {
+    heading: "Get in Touch",
+    links: [
+      { label: "Community", href: "/community" },
+      { label: "Slack", href: "https://slack.openstreetmap.us" },
+      { label: "GitHub", href: "https://github.com/maplibre" },
+    ],
+  },
+  {
+    heading: "Ecosystem",
+    links: [
+      { label: "Made with MapLibre", href: "https://madewithmaplibre.com/" },
+      {
+        label: "Awesome MapLibre",
+        href: "https://github.com/maplibre/awesome-maplibre",
+      },
+      {
+        label: "All repositories",
+        href: "https://github.com/orgs/maplibre/repositories",
+      },
+    ],
+  },
+];
+
+const isExternal = (href: string) => !href.startsWith("/");
+---
+
+<nav class="bottom-nav">
+  <hr />
+  <div class="container py-5">
+    <div class="row gy-5">
+      {
+        navSections.map((section) => (
+          <div class:list={["col col-12 col-sm-6 col-lg-3 text-center"]}>
+            <h5 class="bottom-nav-heading">{section.heading}</h5>
+            <ul class="bottom-nav-list">
+              {section.links.map((link) => (
+                <li>
+                  <a
+                    href={link.href}
+                    {...(isExternal(link.href)
+                      ? { target: "_blank", rel: "noopener" }
+                      : {})}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</nav>
+
+<style lang="scss">
+  .bottom-nav-heading {
+    color: #fff;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+
+  .bottom-nav-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    a {
+      display: block;
+      padding: 0.5rem 0;
+      color: rgb(203, 213, 225);
+      text-decoration: none;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #87b2f0;
+      }
+    }
+
+    li:first-child a {
+      padding-top: 0;
+    }
+
+    li:last-child a {
+      padding-bottom: 0;
+    }
+  }
+</style>

src/components/Footer.astro

@@ -1,10 +1,11 @@
 ---
 import { Image } from "astro:assets";
 import { Icon } from "astro-icon/components";
+import BottomNav from "./BottomNav.astro";
 ---
 
-<footer class="mt-auto">
-  <div class="container pb-4 pt-6"></div>
+<footer class="mt-auto pt-5">
+  <BottomNav />
   <hr />
   <div class="container">
     <div class="row py-3">

src/pages/about/index.astro

@@ -59,7 +59,7 @@ import { BoardAndTeam } from "../../components/BoardAndTeam";
         </p>
         <BoardAndTeam board={board} team={team} client:only />
         <div class="text-center">
-          <h1 class="text-center pt-3">Brand Assets</h1>
+          <h1 id="brand-assets" class="text-center pt-3">Brand Assets</h1>
           <p class="text-center">
             Below are the official MapLibre brand assets.
           </p>