renamed downloads page and added header text

docusaurus.config.js

@@ -69,9 +69,9 @@ const config = {
           ],
         },
         {
-          label: "Firmware",
+          label: "Downloads",
-          to: "firmware",
+          to: "downloads",
-          activeBasePath: "firmware",
+          activeBasePath: "downloads",
         },
         {
           label: "Showcase",

src/pages/downloads/_components/HeaderText.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const HeaderText = ({type, text, link}): JSX.Element => {
+
+  const anchor = React.createElement(
+    'a',
+    {className: "hash-link", href: `#${link}`, title: "Direct link to heading"}
+  )
+
+  const heading = React.createElement(
+    type || 'h1',
+    link ? {className: "anchor anchorWithHideOnScrollNavbar_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module"} : null,
+    text, link ? anchor : null
+  )
+
+  return heading
+
+};

src/pages/downloads/index.tsx

@@ -11,6 +11,7 @@ import {
   FirmwareCard,
   PlaceholderFirmwareCard,
 } from './_components/FirmwareCard';
+import { HeaderText } from './_components/HeaderText'
 
 const Firmware = (): JSX.Element => {
   const { data, error } = useSWR<Release[]>(
@@ -23,11 +24,41 @@ const Firmware = (): JSX.Element => {
   const alpha = data?.filter((release) => release.prerelease === true);
   return (
     <Layout
-      title="Firmware"
+      title="Downloads"
-      description="Firmware download for the Meshtastic project"
+      description="Downloads for the Meshtastic project"
     >
       <main className="margin-vert--xl">
         <div className="container">
+        <HeaderText
+          type="h1"
+          text="Downloads"
+        />
+        </div>
+        <div className="container">
+        <HeaderText
+          type="h2"
+          text="Install Meshtastic"
+          link=""
+        />
+        </div>
+        <div className="container">
+        <HeaderText
+          type="h2"
+          text="Mobile Downloads"
+          link="mobile-downloads"
+        />
+        </div>
+        <div className="container">
+        <HeaderText
+          type="h2"
+          text="Advanced"
+          link="advanced"
+        />
+        <HeaderText
+          type="h3"
+          text="Firmware Downloads"
+          link="firmware-downloads"
+        />
           <ul
             style={{
               position: "relative",
@@ -77,6 +108,11 @@ const Firmware = (): JSX.Element => {
               </>
             )}
           </ul>
+          <HeaderText
+            type="h3"
+            text="Sideload Android"
+            link="sideload-android"
+          />
         </div>
       </main>
     </Layout>