launch banner (To be merged Nov 1) (#470)

* launch banner

* Downloads page overhaul start

* Fix link to launch content

* 2.0 updates

docs/developers/Firmware/device-api.mdx

@@ -24,7 +24,7 @@ The 4 byte header is constructed to both provide framing and to not look line 'n
 - Byte 2: MSB of protobuf length
 - Byte 3: LSB of protobuf length
 
-The receiver will validate length and if >512 it will assume the packet is corrupted and return to looking for START1. While looking for START1 any other characters are printed as "debug output". For small example implementation of this reader see the meshtastic-python implementation.
+The receiver will validate length and if >512 it will assume the packet is corrupted and return to looking for START1. While looking for START1 any other characters are printed as "debug output". For small example implementation of this reader see the python implementation.
 
 ## MeshBluetoothService (the BLE API)
 

docusaurus.config.js

@@ -15,6 +15,11 @@ const config = {
   organizationName: 'meshtastic',
   projectName: 'meshtastic',
   themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ {
+    announcementBar: {
+      id: '2_0',
+      content:
+        '🎉 Meshtastic 2.0 Has Now Launched! Check it Out <a href="/2.0">Here</a> 🎉',
+    },
     colorMode: {
       respectPrefersColorScheme: true,
     },

package.json

@@ -39,7 +39,7 @@
     "@meshtastic/eslint-config": "^1.0.8",
     "@tailwindcss/typography": "^0.5.7",
     "@tsconfig/docusaurus": "^1.0.6",
-    "@types/node": "^18.11.8",
+    "@types/node": "^18.11.9",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "prettier": "^2.7.1",

pnpm-lock.yaml

@@ -13,7 +13,7 @@ specifiers:
   '@meshtastic/eslint-config': ^1.0.8
   '@tailwindcss/typography': ^0.5.7
   '@tsconfig/docusaurus': ^1.0.6
-  '@types/node': ^18.11.8
+  '@types/node': ^18.11.9
   '@types/react': ^18.0.24
   '@types/react-dom': ^18.0.8
   autoprefixer: ^10.4.13
@@ -58,7 +58,7 @@ devDependencies:
   '@meshtastic/eslint-config': 1.0.8
   '@tailwindcss/typography': 0.5.7_tailwindcss@3.2.1
   '@tsconfig/docusaurus': 1.0.6
-  '@types/node': 18.11.8
+  '@types/node': 18.11.9
   '@types/react': 18.0.24
   '@types/react-dom': 18.0.8
   prettier: 2.7.1
@@ -2929,26 +2929,26 @@ packages:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/bonjour/3.5.10:
     resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/connect-history-api-fallback/1.3.5:
     resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
     dependencies:
       '@types/express-serve-static-core': 4.17.28
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/connect/3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/eslint-scope/3.7.3:
@@ -2969,7 +2969,7 @@ packages:
   /@types/express-serve-static-core/4.17.28:
     resolution: {integrity: sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
     dev: false
@@ -2999,7 +2999,7 @@ packages:
   /@types/http-proxy/1.17.8:
     resolution: {integrity: sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/json-schema/7.0.11:
@@ -3012,7 +3012,7 @@ packages:
   /@types/keyv/3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/mdast/3.0.10:
@@ -3029,8 +3029,8 @@ packages:
     resolution: {integrity: sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==}
     dev: false
 
-  /@types/node/18.11.8:
+  /@types/node/18.11.9:
-    resolution: {integrity: sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==}
+    resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
 
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
@@ -3087,7 +3087,7 @@ packages:
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/retry/0.12.1:
@@ -3097,7 +3097,7 @@ packages:
   /@types/sax/1.2.4:
     resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/scheduler/0.16.2:
@@ -3113,13 +3113,13 @@ packages:
     resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
     dependencies:
       '@types/mime': 1.3.2
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/sockjs/0.3.33:
     resolution: {integrity: sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@types/unist/2.0.6:
@@ -3129,7 +3129,7 @@ packages:
   /@types/ws/8.5.3:
     resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: false
 
   /@typescript-eslint/eslint-plugin/5.22.0_4bcn5aatkhkr3q2dzj4ewaqjbe:
@@ -5050,7 +5050,7 @@ packages:
     resolution: {integrity: sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==}
     engines: {node: '>= 0.8'}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
       require-like: 0.1.2
     dev: false
 
@@ -6235,7 +6235,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
       merge-stream: 2.0.0
       supports-color: 8.1.1
 

src/pages/2.0/index.tsx

@@ -10,9 +10,9 @@ import Layout from '@theme/Layout';
 
 const TwoPointZero = (): JSX.Element => {
   const stats = [
-    { label: 'Active Nodes', value: 'xx+' },
+    { label: 'Active Nodes', value: 'A Lot!' },
     { label: 'Community Members', value: '4000+' },
-    { label: 'Total Commits', value: '4800+' },
+    { label: 'Firmware Commits', value: '4900+' },
     { label: 'Community Donations', value: '$5700+' },
   ];
   const logos = [
@@ -87,12 +87,12 @@ const TwoPointZero = (): JSX.Element => {
                       giveaways, so jump in and win some prizes.
                     </p>
                     <div className="flex gap-2">
-                      <button
+                      <a
-                        type="submit"
+                        href="#start"
-                        className="block w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
+                        className="flex w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 hover:text-black hover:no-underline focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
                       >
-                        Find Out More
+                        <span className="m-auto">Find Out More</span>
-                      </button>
+                      </a>
                       <a
                         className="flex w-16 rounded-md border border-transparent bg-[#1DA1F2] shadow hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
                         target="_blank"
@@ -236,16 +236,14 @@ const TwoPointZero = (): JSX.Element => {
                             <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
                           </svg>
                           <p className="relative">
-                            Tincidunt integer commodo, cursus etiam aliquam
+                            Meshtastic is the neatest open source I've ever
-                            neque, et. Consectetur pretium in volutpat, diam.
+                            seen!
-                            Montes, magna cursus nulla feugiat dignissim id
-                            lobortis amet.
                           </p>
                         </div>
 
                         <footer className="mt-4">
                           <p className="text-base font-semibold text-rose-200">
-                            Quote author
+                            Elvis Presley
                           </p>
                         </footer>
                       </blockquote>
@@ -254,34 +252,64 @@ const TwoPointZero = (): JSX.Element => {
                 </div>
               </div>
 
-              <div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
+              <div
+                id="start"
+                className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0"
+              >
                 {/* Content area */}
                 <div className="pt-12 sm:pt-16 lg:pt-20">
                   <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                     A brief overview of all the changes and improvements
                   </h2>
                   <div className="mt-6 space-y-6 text-gray-500">
-                    <p className="text-lg">
+                    <h2>Monumental stuff!</h2>
-                      Sagittis scelerisque nulla cursus in enim consectetur
-                      quam. Dictum urna sed consectetur neque tristique
-                      pellentesque. Blandit amet, sed aenean erat arcu morbi.
-                      Cursus faucibus nunc nisl netus morbi vel porttitor vitae
-                      ut. Amet vitae fames senectus vitae.
-                    </p>
                     <p className="text-base leading-7">
-                      Sollicitudin tristique eros erat odio sed vitae, consequat
+                      <li>
-                      turpis elementum. Lorem nibh vel, eget pretium arcu vitae.
+                        Completely new LoRA band plan with faster messaging
-                      Eros eu viverra donec ut volutpat donec laoreet quam urna.
+                      </li>
-                      Sollicitudin tristique eros erat odio sed vitae, consequat
+                      <li>Smarter and more reliable mesh routing</li>
-                      turpis elementum. Lorem nibh vel, eget pretium arcu vitae.
+                      <li>
-                      Eros eu viverra donec ut volutpat donec laoreet quam urna.
+                        Unlimited nodes* (80 Connected at a time, oldest node
+                        will be removed when a new node joins the mesh)
+                      </li>
+                      <li>
+                        New messaging additions: waypoints, reactions
+                        (tap-backs), and telemetry
+                      </li>
+                      <li>
+                        Improvements for Canned Messages module and CardKB
+                        messaging for stand alone communicator devices
+                      </li>
+                      <li>Sensor, Screen, and Input device auto-detection</li>
+                      <li>New devices supported (6 new targets!)</li>
+                      <li>
+                        Added over the air bluetooth updates for NRF devices
+                        (RAK-4631)
+                      </li>
+                      <li>Ethernet support via RAK-13800</li>
+                      <li>
+                        Compass improvements for larger screens and
+                        customizations
+                      </li>
                     </p>
+                    <h2>Nerd stuff!</h2>
                     <p className="text-base leading-7">
-                      Rhoncus nisl, libero egestas diam fermentum dui. At quis
+                      <li>New filesystem for ESP32 (LittleFS)</li>
-                      tincidunt vel ultricies. Vulputate aliquet velit faucibus
+                      <li>
-                      semper. Pellentesque in venenatis vestibulum consectetur
+                        Upgraded Arduino framework for both NRF52 and ESP32
-                      nibh id. In id ut tempus egestas. Enim sit aliquam nec, a.
+                      </li>
-                      Morbi enim fermentum lacus in. Viverra.
+                      <li>New bluetooth stack for ESP32 (NimBLE)</li>
+                      <li>Unified GPS stack now using NMEA</li>
+                      <li>Support for more I2C sensors</li>
+                      <li>Support for ATECCA608B Cryptographic Coprocessor</li>
+                      <li>More Serial module I/O modes</li>
+                      <li>JSON messages over MQTT</li>
+                      <li>
+                        Device codebase refactored and optimized in many areas
+                      </li>
+                      <li>
+                        Completely restructured protobufs and configuration
+                      </li>
                     </p>
                   </div>
                 </div>
@@ -303,11 +331,6 @@ const TwoPointZero = (): JSX.Element => {
                       </div>
                     ))}
                   </dl>
-                  <div className="mt-10">
-                    <a href="#" className="text-base font-medium text-rose-500">
-                      Further reading...
-                    </a>
-                  </div>
                 </div>
               </div>
             </div>
@@ -415,7 +438,7 @@ const TwoPointZero = (): JSX.Element => {
                   </div>
                   <FlipClockCountdown
                     className="m-auto"
-                    to={new Date(2022, 12, 1).getTime()}
+                    to={new Date(2022, 11, 1).getTime()}
                   />
                 </div>
               </div>

src/pages/downloads/_components/FirmwareCard.tsx

@@ -14,7 +14,7 @@ export const FirmwareCard = ({
   release,
 }: releaseCardProps): JSX.Element => {
   return (
-    <div className="card">
+    <div className="card m-4 border-2 border-secondary">
       <div
         className="card__header"
         style={{ display: 'flex', justifyContent: 'space-between' }}

src/pages/downloads/index.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
 
+import { FaAndroid, FaApple } from 'react-icons/fa';
 import useSWR from 'swr';
 
-// import { Endpoints } from '@octokit/types';
+import {
+  ArrowTopRightOnSquareIcon,
+  BoltIcon,
+  ComputerDesktopIcon,
+  CpuChipIcon,
+  GlobeAltIcon,
+} from '@heroicons/react/24/solid';
 import Layout from '@theme/Layout';
 
 import { Release } from '../../utils/github';
 import { fetcher } from '../../utils/swr';
-import { DownloadCard } from './_components/DownloadCard';
 import {
   FirmwareCard,
   PlaceholderFirmwareCard,
 } from './_components/FirmwareCard';
-import { HeaderText } from './_components/HeaderText';
 
 const Firmware = (): JSX.Element => {
   const { data, error } = useSWR<Release[]>(
@@ -28,87 +33,112 @@ const Firmware = (): JSX.Element => {
       title="Downloads"
       description="Downloads for the Meshtastic project"
     >
-      <main className="margin-vert--xl">
+      <div className="container mt-8 flex flex-col gap-3">
-        <div className="container">
+        <h1 className="m-2">Flasher</h1>
-          <HeaderText type="h1" text="Downloads" />
+        <div className="flex h-48 w-full overflow-hidden rounded-xl">
+          <div className="flex w-1/5 bg-gradient-to-r from-green-500 to-primary">
+            <BoltIcon className="m-auto h-20" />
           </div>
-        <div className="container">
+          <div className="w-full bg-primary">
-          <HeaderText
+            <div className="m-auto mt-8 w-96">
-            type="h2"
+              <h3>Meshtastic Flasher</h3>
-            text="Install Meshtastic"
+              <p className="mb-3">
-            link="install-meshtastic"
+                Desktop application to flash fimware to your devices.
-          />
+              </p>
-          <DownloadCard
-            client="Meshtastic Flasher"
-            buttonText="Download Meshtastic Flasher"
-            url="https://github.com/meshtastic/Meshtastic-gui-installer/releases/latest"
-            notes={[
-              'To download using ',
-              <code>pip</code>,
-              ' follow ',
-              <a href="/docs/software/python/meshtastic-flasher#install-using-pip">
-                these instructions
-              </a>,
-              '.',
-            ]}
-          />
-        </div>
-        <div className="container">
-          <HeaderText
-            type="h2"
-            text="Mobile Downloads"
-            link="mobile-downloads"
-          />
-          <ul
-            style={{
-              position: 'relative',
-              display: 'grid',
-              gap: '1.5rem',
-              gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-              paddingLeft: '0',
-            }}
-          >
-            <DownloadCard
-              client="Android"
-              imgUrl="https://f-droid.org/badge/get-it-on.png"
-              url="https://meshtastic.org/docs/software/android/#f-droid"
-              imgUrl2="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
-              url2="https://play.google.com/store/apps/details?id=com.geeksville.mesh&referrer=utm_source=downloads-page"
-              notes={[
-                'To sideload, ',
               <a
-                  href="https://github.com/meshtastic/Meshtastic-Android/releases/latest"
-                  rel="noreferrer"
                 target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/meshtastic/Meshtastic-gui-installer/releases/latest"
+                className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
               >
-                  download the latest .apk
+                Download
-                </a>,
+                <ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
-                ' from Github',
+              </a>
-              ]}
-            />
-            <DownloadCard
-              client="iOS"
-              url="https://testflight.apple.com/join/c8nNl8q1"
-              buttonText="Download on TestFlight"
-              notes="Currently only available in TestFlight"
-            />
-          </ul>
             </div>
-        <div className="container">
+          </div>
-          <HeaderText
+        </div>
-            type="h2"
+        {/*  */}
-            text="Firmware Downloads"
+        <h1 className="m-2">Apps</h1>
-            link="firmware-downloads"
+        <div className="flex h-48 w-full overflow-hidden rounded-xl">
-          />
+          <div className="flex w-1/5 bg-gradient-to-r from-rose-500 to-primary">
-          <ul
+            <ComputerDesktopIcon className="m-auto h-20" />
-            style={{
+          </div>
-              position: 'relative',
+          <div className="flex w-full bg-primary">
-              display: 'grid',
+            <div className="flex w-1/3 p-4">
-              gap: '1.5rem',
+              <div className="flex flex-grow rounded-md border-2 border-secondary bg-primary shadow-md hover:brightness-90">
-              gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                <div className="m-auto">
-              paddingLeft: '0',
+                  <FaApple className="h-20 w-20" />
-            }}
+                </div>
+                <div className="m-auto flex flex-col gap-3">
+                  <h2>Apple</h2>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://testflight.apple.com/join/c8nNl8q1"
+                    className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
                   >
+                    App Store
+                    <ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="flex w-1/3 p-4">
+              <div className="relative flex flex-grow rounded-md border-2 border-secondary bg-primary shadow-md hover:brightness-90">
+                <div className="m-auto">
+                  <FaAndroid className="h-20 w-20" />
+                </div>
+                <div className="m-auto flex flex-col gap-3">
+                  <h2>Android</h2>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://play.google.com/store/apps/details?id=com.geeksville.mesh&referrer=utm_source=downloads-page"
+                    className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
+                  >
+                    Play Store
+                    <ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
+                  </a>
+                  <a
+                    className="absolute bottom-2 flex"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://meshtastic.org/docs/software/android/#f-droid"
+                  >
+                    F-Droid
+                    <ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="flex w-1/3 p-4">
+              <div className="flex flex-grow rounded-md border-2 border-secondary bg-primary shadow-md hover:brightness-90">
+                <div className="m-auto">
+                  <GlobeAltIcon className="h-20 w-20" />
+                </div>
+                <div className="m-auto flex flex-col gap-3">
+                  <h2>Web</h2>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://client.meshtastic.org"
+                    className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
+                  >
+                    meshtastic.org
+                    <ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/*  */}
+        <h1 className="m-2">Firmware</h1>
+        <div className="flex w-full overflow-hidden rounded-xl">
+          <div className="flex w-1/5 bg-gradient-to-r from-orange-500 to-primary">
+            <CpuChipIcon className="m-auto h-20" />
+          </div>
+          <div className="flex w-full bg-primary">
             {data && !error ? (
               <>
                 <FirmwareCard
@@ -121,7 +151,7 @@ const Firmware = (): JSX.Element => {
                   description="Upcoming changes for testing. For those who want new features."
                   release={alpha}
                 />
-                <div className="card">
+                <div className="card m-4 border-2 border-secondary">
                   <div className="card__header">
                     <h3>Bleeding</h3>
                   </div>
@@ -148,39 +178,9 @@ const Firmware = (): JSX.Element => {
                 <PlaceholderFirmwareCard />
               </>
             )}
-          </ul>
-          Once downloaded, follow the flashing instructions for{' '}
-          <a
-            href="/docs/getting-started/flashing-firmware/flashing-esp32"
-            rel="noreferrer"
-            target="_blank"
-          >
-            ESP32 chipsets
-          </a>
-          ,{' '}
-          <a
-            href="/docs/getting-started/flashing-firmware/flashing-nrf52"
-            rel="noreferrer"
-            target="_blank"
-          >
-            NRF52 chipsets
-          </a>
-          , or the{' '}
-          <a
-            href="/docs/software/python/meshtastic-flasher"
-            rel="noreferrer"
-            target="_blank"
-          >
-            GUI instructions for Meshtastic Flasher
-          </a>
-          .
           </div>
-        <div className="container">
-          <i>
-            Google Play and the Google Play logo are trademarks of Google LLC.
-          </i>
         </div>
-      </main>
+      </div>
     </Layout>
   );
 };