diff --git a/website/components/mega-nav/img/hashicorp-logo.svg b/website/components/mega-nav/img/hashicorp-logo.svg
deleted file mode 100644
index e420635de..000000000
--- a/website/components/mega-nav/img/hashicorp-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="105" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35.716 19.035v-5.637h-4.954v5.637h-2.528V5.637h2.528v5.51h4.954V5.663h2.528V19.06h-2.528v-.025zm11.779 0h-1.997l-.177-.657a5.356 5.356 0 01-2.906.859c-1.795 0-2.553-1.213-2.553-2.907 0-1.997.859-2.755 2.856-2.755h2.35v-1.037c0-1.087-.303-1.466-1.87-1.466-.91 0-1.82.101-2.705.278l-.303-1.87a12.538 12.538 0 013.362-.456c3.084 0 3.968 1.087 3.968 3.54l-.025 6.47zm-2.452-3.69H43.25c-.81 0-1.037.227-1.037.96 0 .682.228.986.986.986.657 0 1.29-.177 1.845-.506v-1.44zm7.204 3.892a12.022 12.022 0 01-3.387-.556l.354-1.87c.96.277 1.921.404 2.907.429 1.087 0 1.238-.253 1.238-.986 0-.607-.126-.91-1.718-1.29-2.402-.58-2.68-1.187-2.68-3.083 0-1.972.86-2.831 3.665-2.831.986 0 1.972.126 2.933.328l-.253 1.947a19.261 19.261 0 00-2.68-.278c-1.061 0-1.238.252-1.238.834 0 .784.05.834 1.39 1.188 2.73.733 3.008 1.087 3.008 3.084 0 1.921-.581 3.084-3.539 3.084zm10.844-.202V12.21c0-.531-.227-.784-.784-.784-.606 0-1.668.354-2.553.834v6.775h-2.451V5.258l2.452-.354v5.081a8.397 8.397 0 013.563-.935c1.618 0 2.2 1.137 2.2 2.907v7.103H63.09v-.025zm4.247-11.173V5.03h2.451v2.832h-2.451zm0 11.173V9.252h2.451v9.783h-2.451zm4.17-9.707c0-2.452 1.416-3.868 4.752-3.868 1.213 0 2.452.152 3.64.455l-.278 2.174a20.415 20.415 0 00-3.286-.354c-1.744 0-2.3.607-2.3 2.023v5.156c0 1.416.556 2.023 2.3 2.023a20.394 20.394 0 003.286-.329l.278 2.2a14.652 14.652 0 01-3.64.454c-3.336 0-4.752-1.415-4.752-3.867V9.328zm13.422 9.909c-3.362 0-4.272-1.845-4.272-3.868v-2.477c0-2.022.91-3.868 4.272-3.868s4.272 1.846 4.272 3.868v2.477c-.025 2.023-.935 3.868-4.272 3.868zm0-8.09c-1.314 0-1.795.582-1.795 1.694v2.63c0 1.112.506 1.693 1.795 1.693 1.29 0 1.795-.581 1.795-1.694v-2.629c0-1.112-.506-1.693-1.795-1.693zm10.768.153c-.91.404-1.77.884-2.603 1.415v6.32h-2.452V9.252h2.073l.151 1.087c.809-.53 1.668-.96 2.578-1.29l.253 2.25zM105 15.8c0 2.173-.961 3.462-3.235 3.462-.885 0-1.745-.1-2.604-.278v4.045l-2.452.328V9.252h1.947l.252.834c.885-.657 1.972-1.036 3.084-1.011 1.972 0 3.008 1.163 3.008 3.387V15.8zm-5.864 1.086c.708.152 1.441.253 2.174.253.884 0 1.238-.43 1.238-1.315v-3.438c0-.808-.303-1.238-1.213-1.238a3.542 3.542 0 00-2.2.885v4.853zM9.656 0L0 5.561V18.96l3.64 2.098V7.659l6.016-3.463V0z" fill="#fff"/><path d="M13.523 0v10.668H9.656V6.674L6.04 8.772v13.675l3.615 2.099V13.902h3.867v3.944l3.615-2.073V2.098L13.523 0z" fill="#fff"/><path d="M13.523 24.546l9.656-5.587V5.587l-3.64-2.099v13.373l-6.016 3.488v4.197z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/icon-angle.svg b/website/components/mega-nav/img/temporary_suite/icon-angle.svg
deleted file mode 100644
index be57f0f48..000000000
--- a/website/components/mega-nav/img/temporary_suite/icon-angle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="hidden-print" aria-hidden="true" style="position:absolute;width:0;height:0" width="0" height="0" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="mega-nav-icon-angle" viewBox="0 0 13 7"><path d="M6.5 6.5L.7 1.6l.6-.8 5.2 4.4L11.7.8l.6.8z"/></symbol><symbol id="mega-nav-icon-close" viewBox="0 0 13 15"><path vector-effect="non-scaling-stroke" d="M1.1 14L11.9 1m0 13L1.1 1"/></symbol></defs></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-consul.svg b/website/components/mega-nav/img/temporary_suite/logo-consul.svg
deleted file mode 100644
index d86dd56fb..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-consul.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="66"><path d="M30.9 39.3c-3.6 0-6.4-2.8-6.4-6.4 0-3.6 2.8-6.4 6.4-6.4s6.4 2.8 6.4 6.4c0 3.6-2.8 6.4-6.4 6.4" fill-rule="evenodd" clip-rule="evenodd" fill="#961d59"/><path d="M43.4 35.9c-1.6 0-3-1.3-3-3 0-1.6 1.3-3 3-3 1.6 0 3 1.3 3 3s-1.4 3-3 3m10.8 2.8c-.4 1.6-2 2.5-3.6 2.1-1.6-.4-2.5-2-2.1-3.6.4-1.6 2-2.5 3.6-2.1 1.5.4 2.5 1.8 2.2 3.4 0 0 0 .1-.1.2m-2.1-7.6c-1.6.4-3.2-.6-3.6-2.2-.4-1.6.6-3.2 2.2-3.6 1.6-.4 3.2.6 3.6 2.2.1.4.1.8 0 1.2-.1 1.1-.9 2.1-2.2 2.4m10.6 7.2c-.3 1.6-1.8 2.7-3.4 2.4-1.6-.3-2.7-1.8-2.4-3.4.3-1.6 1.8-2.7 3.4-2.4 1.5.3 2.6 1.7 2.5 3.2-.1.1-.1.1-.1.2m-2.4-7.4c-1.6.3-3.1-.8-3.4-2.4-.3-1.6.8-3.1 2.4-3.4 1.6-.3 3.1.8 3.4 2.4 0 .3.1.5 0 .8-.1 1.3-1.1 2.4-2.4 2.6m-2.1 17.7c-.8 1.4-2.6 1.9-4 1.1-1.4-.8-1.9-2.6-1.1-4 .8-1.4 2.6-1.9 4-1.1 1 .6 1.6 1.7 1.5 2.8-.1.4-.2.8-.4 1.2m-1.1-27.2c-1.4.8-3.2.3-4-1.1-.8-1.4-.3-3.2 1.1-4 1.4-.8 3.2-.3 4 1.1.3.6.4 1.1.4 1.7-.1.9-.6 1.8-1.5 2.3" fill="#d62783" fill-rule="evenodd" clip-rule="evenodd"/><path d="M31 62.8c-8 0-15.4-3.1-21.1-8.7C4.4 48.4 1.3 40.9 1.3 33c0-8 3.1-15.4 8.7-21.1 5.6-5.6 13.1-8.7 21-8.7 6.6 0 12.9 2.1 18.1 6.1l-3.7 4.8c-4.2-3.2-9.2-4.9-14.4-4.9-6.3 0-12.3 2.5-16.8 7S7.3 26.6 7.3 33c0 6.3 2.5 12.3 7 16.8s10.4 6.9 16.8 6.9c5.3 0 10.3-1.7 14.4-4.9l3.6 4.8c-5.2 4-11.5 6.2-18.1 6.2z" fill="#d62783"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg b/website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg
deleted file mode 100644
index 14f72784e..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-hashicorp-wordmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="86.2" height="20"><style>.st0{fill:#fff}</style><path class="st0" d="M30.1 15.6v-4.8H26v4.8h-2V4.7h2v4.5h4.2V4.7h1.9v10.9h-2zm9.7 0h-1.7L38 15c-.7.5-1.6.7-2.4.7-1.5 0-2.1-1-2.1-2.3 0-1.6.7-2.2 2.3-2.2h2v-.9c0-.9-.3-1.2-1.6-1.2-.7 0-1.5.1-2.2.2l-.3-1.5c.8-.2 1.9-.4 2.7-.4 2.5 0 3.2.9 3.2 2.9v5.3zm-2-3.2h-1.6c-.7 0-.8.2-.8.8 0 .6.2.8.9.8.6 0 1.2-.2 1.6-.4v-1.2zm5.8 3.2c-.9 0-2-.2-2.8-.5l.3-1.5c.7.2 1.6.3 2.4.3.9 0 1-.2 1-.8 0-.5-.1-.7-1.4-1-1.9-.5-2.2-1-2.2-2.5 0-1.6.7-2.3 3-2.3.7 0 1.7.1 2.4.3l-.2 1.6c-.6-.1-1.6-.2-2.2-.2-.9 0-1 .2-1 .7 0 .6 0 .7 1.1 1 2.2.6 2.4.9 2.4 2.5.1 1.5-.4 2.4-2.8 2.4zm8.7 0V9.9c0-.4-.1-.6-.6-.6s-1.4.3-2 .7v5.7h-2.2V4.2l2.2-.2v4.1c.6-.5 1.9-.8 2.8-.8 1.3 0 1.7.9 1.7 2.4v5.9h-1.9zm3.5-9.3V4.1h1.9v2.2h-1.9zm0 9.3v-8h1.9v8h-1.9zm3.5-8c0-2 1.2-3.2 3.9-3.2 1 0 2.1.1 3 .4L66 6.5c-.9-.2-1.8-.3-2.6-.3-1.4 0-1.8.5-1.8 1.7v4.2c0 1.2.4 1.7 1.8 1.7.8 0 1.7-.1 2.6-.3l.2 1.8c-.9.2-2 .4-3 .4-2.7 0-3.9-1.2-3.9-3.2V7.6zm10.9 8c-2.7 0-3.5-1.5-3.5-3.1v-2c0-1.6.8-3.1 3.5-3.1s3.5 1.5 3.5 3.1v2c0 1.6-.7 3.1-3.5 3.1zm0-6.6c-1.1 0-1.6.5-1.6 1.4v2.1c0 .9.5 1.4 1.6 1.4s1.6-.5 1.6-1.4v-2.1c0-.9-.5-1.4-1.6-1.4zm8.8.2c-.8.3-1.4.7-2.1 1.2v5.3H75v-8h1.5l.1.8c.4-.3 1.4-.9 2.1-1.1l.3 1.8zm7.2 3.6c0 1.8-.6 2.8-2.5 2.8-.7 0-1.3-.1-2-.2v3.3l-2.2.3V7.6h1.7l.2.6c.7-.5 1.4-.9 2.4-.9 1.6 0 2.4.9 2.4 2.7v2.8zm-4.4.9c.3.1 1.1.2 1.7.2.7 0 .9-.3.9-1.1V10c0-.7-.1-1-.9-1-.7 0-1.4.3-1.7.7v4zM2.9 6.5l4.8-2.8V0L0 4.5v11.1l2.9 1.6V7.1zm13.5-3.7v10.7l-4.9 2.8V20l7.7-4.4V4.5z"/><path class="st0" d="M14.4 1.7L11.5 0v8.9H7.7v-3L4.8 7.6v10.7L7.7 20v-8.6h3.8v2.7l2.9-1.7z"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg b/website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg
deleted file mode 100644
index 66e0b9147..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-hashicorp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="21" height="22"><style>.st0{fill:#fff}</style><path class="st0" d="M3.1 7.1l5.3-3V0L0 4.9v12.2l3.1 1.8V7.8zm14.7-4v11.8l-5.2 3V22l8.4-4.9V4.9z"/><path class="st0" d="M15.7 1.8L12.6 0v9.8H8.4V6.5L5.2 8.4v11.8L8.4 22v-9.4h4.2v2.9l3.1-1.8z"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-nomad.svg b/website/components/mega-nav/img/temporary_suite/logo-nomad.svg
deleted file mode 100644
index 77765cb6a..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-nomad.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="57" height="66" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#1F9967" d="M40.858 24.93v10.759l-7.445 4.326-5.207-3.242v28.084l.148.003 28.06-16.215v-32.39l-.524-.002"/><path fill="#25BA81" d="M27.974 0L0 16.262l18.872 11.15 3.82-2.339 9.276 5.205V19.465l8.89-5.374V24.93l15.556-8.674v-.04"/><path fill="#25BA81" d="M0 16.262v32.383l28.207 16.213V36.772l-3.76-2.16v10.804l-8.463 5.399V29.203l3.209-1.989L.165 16.257"/></g></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-packer.svg b/website/components/mega-nav/img/temporary_suite/logo-packer.svg
deleted file mode 100644
index fad79eb5b..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-packer.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="42" height="66"><path d="M1 8.5l20.9 12.1V65L1 53z" fill-rule="evenodd" clip-rule="evenodd" fill="#1daeff"/><path d="M32.2 14.1L9.5 1v9.1L24.9 19v27.2l7.3 4.2c4.5 2.6 8.2 1 8.2-3.4V27c-.1-4.6-3.7-10.4-8.2-12.9z" fill="#1d94dd"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-terraform.svg b/website/components/mega-nav/img/temporary_suite/logo-terraform.svg
deleted file mode 100644
index cb8bcf4df..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-terraform.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="58" height="66"><style>.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#5c4ee5}</style><path class="st0" d="M20.4 12.3l17.5 10.1v20.2L20.4 32.5z"/><path d="M39.8 22.4v20.2l17.5-10.1V12.3z" fill="#4040b2" fill-rule="evenodd" clip-rule="evenodd"/><path class="st0" d="M1 1v20.2l17.5 10.1V11.1zm19.4 53.9L37.9 65V44.8L20.4 34.7z"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-vagrant.svg b/website/components/mega-nav/img/temporary_suite/logo-vagrant.svg
deleted file mode 100644
index f0b1ec3d1..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-vagrant.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="64" height="66"><style>.st0{fill:#104eb2}.st1{fill:#1563ff}</style><path class="st0" d="M62.9 11.8V5.9l-14.1 8.2v5L37.7 44.4 32 47.2V65l12-7z"/><path class="st1" d="M9.4 32.5L20 58.1 32 65V47.2l-5.7-2.8-11.2-25.3v-5L1 5.9V12l5.6 13.5M40.4 9.2v5.7l-3 6.5-2.9 7.1-2.5 6.1v7l5.7 2.8 11.1-25.3v-5z"/><path class="st0" d="M32 34.6l-8.5-19.7V9.3l-8.4 4.8v5l11.2 25.3 5.7-2.8z"/><path class="st1" d="M32 41.1l-6 3.3 5.6 3.3 6.1-3.3z"/><path class="st0" d="M9.1 1L1 5.9l14.1 8.2 8.4-4.9z"/><path class="st1" d="M54.1 1l8.8 4.9-14.1 8.2-8.4-4.9z"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/img/temporary_suite/logo-vault.svg b/website/components/mega-nav/img/temporary_suite/logo-vault.svg
deleted file mode 100644
index 5c9ddce22..000000000
--- a/website/components/mega-nav/img/temporary_suite/logo-vault.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="66"><path d="M59 4L29.9 62 1 4z"/><path d="M23.3 15.6h3.4V19h-3.4zm5 0h3.4V19h-3.4zm5 0h3.4V19h-3.4zm-10 5.1h3.4v3.4h-3.4zm5 0h3.4v3.4h-3.4zm5 0h3.4v3.4h-3.4zm-10 5h3.4v3.4h-3.4zm5 0h3.4v3.4h-3.4zm0 5.1h3.4v3.4h-3.4zm5.1-5.1h3.4v3.4h-3.4z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/website/components/mega-nav/index.jsx b/website/components/mega-nav/index.jsx
deleted file mode 100644
index 6f40445ae..000000000
--- a/website/components/mega-nav/index.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import InlineSvg from '@hashicorp/react-inline-svg'
-import hashicorpLogo from './img/hashicorp-logo.svg?include'
-import TemporarySuite from './temporary_suite'
-
-export default function MegaNav({ product }) {
-  return (
-    <div className="g-mega-nav">
-      <div className="g-nav-inner">
-        <a href="https://www.hashicorp.com">
-          <InlineSvg src={hashicorpLogo} className="hashicorp-logo" />
-        </a>
-        <TemporarySuite product={product} />
-      </div>
-    </div>
-  )
-}
diff --git a/website/components/mega-nav/style.css b/website/components/mega-nav/style.css
deleted file mode 100644
index ee699e477..000000000
--- a/website/components/mega-nav/style.css
+++ /dev/null
@@ -1,22 +0,0 @@
-@import './temporary_suite.css';
-
-.g-mega-nav {
-  background: black;
-  width: 100%;
-  height: 48px;
-  display: flex;
-  align-items: center;
-
-  & .hashicorp-logo {
-    line-height: 0;
-  }
-
-  & .g-nav-inner {
-    width: 100%;
-    padding-left: 32px;
-    padding-right: 32px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
diff --git a/website/components/mega-nav/temporary_suite.css b/website/components/mega-nav/temporary_suite.css
deleted file mode 100644
index 4f7bb7ae2..000000000
--- a/website/components/mega-nav/temporary_suite.css
+++ /dev/null
@@ -1,918 +0,0 @@
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox * {
-  font-size: 14px;
-  letter-spacing: 0;
-  line-height: 1.42857143;
-  margin-bottom: 0;
-  margin-top: 0;
-  text-transform: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h1,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h2,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h3,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h4,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h5,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox h6 {
-  line-height: 1.1;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner {
-  background-color: black;
-  color: white;
-  font-family: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial,
-    sans-serif;
-  font-size: 16px;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner
-  > .container {
-  align-items: center;
-  display: flex;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner
-  .text-muted {
-  color: #a4b1b2;
-  font-family: metro-web;
-  font-weight: 500;
-  margin-right: 5px;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner-logo {
-  opacity: 1;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner-logo:hover {
-  opacity: 0.7;
-  transition: opacity 0.25s ease-in-out;
-  -moz-transition: opacity 0.25s ease-in-out;
-  -webkit-transition: opacity 0.25s ease-in-out;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner-logo
-  > img {
-  height: 25px;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner-item:first-child {
-  display: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-banner-item:last-child {
-  margin-left: auto;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tagline {
-  align-items: center;
-  display: inline-flex;
-  margin-bottom: 0;
-  vertical-align: -1px;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tagline
-  > img {
-  margin: 0 0.375em 0 0.5em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox .mega-nav {
-  display: inline-block;
-  font-family: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial,
-    sans-serif;
-  font-size: 14px;
-  line-height: 1.35714;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  h1,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  h2,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  h3,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  h4,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  h5,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  h6,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  ul,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  p {
-  margin-top: 0;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  img {
-  max-width: 100%;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox .mega-nav,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  * {
-  box-sizing: border-box;
-  transition: background-color 0.25s ease, border-color 0.25s ease,
-    color 0.25s ease, fill 0.25s ease, transform 0.25s ease, stroke 0.25s ease;
-}
-.mega-nav-tagline
-  + .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav {
-  margin-left: 0.57143em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav
-  .visuallyhidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-icon {
-  display: inline-block;
-  fill: currentColor;
-  height: 1em;
-  stroke: currentColor;
-  width: 1em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-icon-angle-right {
-  height: 0.8em;
-  transform: rotate(-90deg);
-  width: 0.8em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .open
-  > .mega-nav-ctrl
-  .mega-nav-icon-angle-right {
-  transform: rotate(0);
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl {
-  background-color: transparent;
-  border: 0;
-  margin-left: 0.5em;
-  padding: 0;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  transition: opacity 0.25s ease;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl:hover {
-  opacity: 0.8;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl:active,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl:visited {
-  outline: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl
-  strong {
-  margin: 0 0.8em 0px 0.5em;
-  color: white;
-  font-family: klavika-web, sans-serif;
-  font-size: 0.9rem;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-ctrl-items {
-  align-items: center;
-  display: flex;
-  padding-top: 1px;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-icon-outline {
-  border: 1px solid;
-  margin-top: -1px;
-  padding: 0.5em;
-  color: white;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-icon-outline
-  .mega-nav-icon {
-  display: block;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-body-ct {
-  bottom: 0;
-  display: none;
-  left: 0;
-  overflow-y: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 1100;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav.open
-  .mega-nav-body-ct {
-  display: block;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-body {
-  background-color: white;
-  box-shadow: 0 2px 16px rgba(79, 99, 122, 0.2);
-  color: black;
-  margin: 1em;
-  padding: 1em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-body-footer {
-  color: #a4b1b2;
-  display: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-body-footer
-  > :last-child {
-  margin-bottom: 0;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-close {
-  background-color: transparent;
-  border: 1px solid currentColor;
-  float: right;
-  margin-left: 1em;
-  margin-bottom: 1em;
-  padding: 0.5em;
-  text-align: center;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-close:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-close:focus {
-  color: #333333;
-  outline: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-close:active {
-  outline: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-close
-  .mega-nav-icon {
-  display: block;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-h1 {
-  font-size: 1.28571em;
-  font-weight: bold;
-  margin-bottom: 0.11111em;
-  text-transform: uppercase;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-h2 {
-  color: #a4b1b2;
-  font-size: 1.14286em;
-  font-weight: 500;
-  margin-bottom: 1.1875em;
-  text-transform: uppercase;
-  font-weight: 600;
-  font-family: metro-web, Metro;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-h3 {
-  color: #a4b1b2;
-  font-size: 1em;
-  font-weight: 500;
-  margin-bottom: 0.5em;
-  text-transform: uppercase;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid {
-  list-style: none;
-  margin-bottom: 1em;
-  padding-left: 0;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid
-  > li {
-  display: flex;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item {
-  align-items: center;
-  border: 1px solid #d4dcdd;
-  display: flex;
-  margin-bottom: -1px;
-  min-height: 3.57143em;
-  padding: 0.28571em 0.71429em;
-  position: relative;
-  width: 100%;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item.is-active {
-  color: inherit;
-  text-decoration: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item.is-active {
-  border-color: #bfc6c7;
-  z-index: 1;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item
-  > b {
-  display: block;
-  font-size: 1.28571em;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item
-  > ul {
-  list-style: none;
-  margin-left: auto;
-  padding-left: 0;
-  text-align: right;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item
-  > ul
-  > li
-  + li {
-  margin-top: 0.28571em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vagrant:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vagrant:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vagrant.is-active {
-  border-color: #1563ff;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-packer:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-packer:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-packer.is-active {
-  border-color: #1daeff;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-terraform:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-terraform:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-terraform.is-active {
-  border-color: #5c4ee5;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vault:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vault:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vault.is-active {
-  border-color: #000;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-nomad:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-nomad:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-nomad.is-active {
-  border-color: #25ba81;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-consul:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-consul:focus,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-consul.is-active {
-  border-color: #c62a71;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-img {
-  margin-right: 0.67857em;
-  text-align: center;
-  width: 2em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-img
-  > img {
-  max-height: 2em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag {
-  background-color: white;
-  border: 1px solid currentColor;
-  color: #a4b1b2;
-  display: inline-block;
-  font-size: 0.85714em;
-  line-height: 1;
-  font-weight: 500;
-  padding: 0.16667em 0.25em;
-  text-transform: uppercase;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag:focus {
-  background-color: #949fa0;
-  border-color: #949fa0;
-  color: white;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vagrant:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vagrant:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vagrant.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-vagrant:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-vagrant:focus {
-  background-color: #1563ff;
-  border-color: #1563ff;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-packer:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-packer:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-packer.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-packer:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-packer:focus {
-  background-color: #1daeff;
-  border-color: #1daeff;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-terraform:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-terraform:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-terraform.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-terraform:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-terraform:focus {
-  background-color: #5c4ee5;
-  border-color: #5c4ee5;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vault:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vault:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-vault.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-vault:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-vault:focus {
-  background-color: #000;
-  border-color: #000;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-nomad:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-nomad:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-nomad.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-nomad:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-nomad:focus {
-  background-color: #25ba81;
-  border-color: #25ba81;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-consul:hover
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-consul:focus
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-grid-item-consul.is-active
-  .mega-nav-tag,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-consul:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-tag-consul:focus {
-  background-color: #c62a71;
-  border-color: #c62a71;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn {
-  align-items: center;
-  background-color: #1563ff;
-  box-shadow: 3px 3px 0 rgba(21, 99, 255, 0.32);
-  display: inline-flex;
-  font-size: 1.07143em;
-  font-weight: 500;
-  line-height: 1;
-  margin-bottom: 1.26667em;
-  padding: 0.7em 1.07143em;
-  text-transform: uppercase;
-  width: 100%;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn:focus {
-  color: white;
-  text-decoration: none;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn:hover,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn:focus {
-  background-color: #2c73ff;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn
-  > img:first-child {
-  margin-right: 0.63333em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn
-  > svg:last-child {
-  margin-left: 0.63333em;
-}
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn:hover
-  > .mega-nav-icon-angle-right:last-child,
-.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-  .mega-nav-btn:focus
-  > .mega-nav-icon-angle-right:last-child {
-  transform: translateX(3px) rotate(-90deg);
-}
-@media (min-width: 570px) {
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-btn {
-    margin-bottom: 2.53333em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body {
-    padding: 2em 2em 1em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(1) {
-    width: 100%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(2) {
-    width: 33.33333%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(3) {
-    width: 33.33333%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(4) {
-    width: 33.33333%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-h1 {
-    font-size: 2em;
-    margin-bottom: 0.07143em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-h2 {
-    font-size: 1.28571em;
-    margin-bottom: 1.05556em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-h3 {
-    color: black;
-    font-size: 1.28571em;
-    font-weight: bold;
-    margin-bottom: 0.64286em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid {
-    border: 0;
-    display: flex;
-    margin-bottom: 2.71429em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid
-    > li {
-    flex-grow: 1;
-    margin-bottom: -1px;
-    margin-right: -1px;
-    width: calc(100% + 1px);
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item {
-    display: block;
-    border: 1px solid #d4dcdd;
-    margin-bottom: 0;
-    padding: 1.35714em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item
-    > ul {
-    text-align: center;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item
-    > ul {
-    display: flex;
-    justify-content: center;
-    margin-top: 1.35714em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item
-    > ul
-    > li
-    + li {
-    margin-left: 0.67857em;
-    margin-top: 0;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-img {
-    margin-right: 0;
-    width: auto;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-img
-    > img {
-    max-height: 4.71429em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-tag {
-    font-size: 1em;
-    padding: 0.14286em 0.21429em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-btn {
-    width: auto;
-  }
-}
-@media (min-width: 768px) {
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-banner-item:first-child {
-    display: flex;
-    align-items: center;
-  }
-}
-@media (min-width: 992px) {
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav {
-    position: relative;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav::before {
-    border-bottom: 1em solid white;
-    border-left: 0.71429em solid transparent;
-    border-right: 0.71429em solid transparent;
-    content: ' ';
-    display: none;
-    height: 0;
-    left: 50%;
-    position: absolute;
-    top: 100%;
-    transform: translateX(-50%);
-    width: 0;
-    z-index: 1101;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav.open::before {
-    display: block;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-btn {
-    margin-bottom: 1.26667em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-ct {
-    bottom: auto;
-    left: auto;
-    overflow: visible;
-    position: absolute;
-    right: 0;
-    top: 100%;
-    width: 940px;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body {
-    margin: 1em 0 0;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-header {
-    display: flex;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-header-item:last-child {
-    margin-left: auto;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-footer {
-    display: block;
-    padding-top: 1em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-h2 {
-    margin-bottom: 2.11111em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid {
-    position: relative;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid::before {
-    background-color: #d4dcdd;
-    content: ' ';
-    height: 1px;
-    left: -2em;
-    margin-top: -0.78571em;
-    position: absolute;
-    right: -2em;
-    top: 100%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(1) {
-    width: 50%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(2) {
-    width: 16.66667%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(3) {
-    width: 16.66667%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-grid-item:nth-child(4) {
-    width: 16.66667%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-close {
-    display: none;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-h3 {
-    padding-left: 1.05556em;
-    padding-top: 0.52778em;
-    position: relative;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-h3::before {
-    background-color: #d4dcdd;
-    content: ' ';
-    height: 1px;
-    left: 0;
-    position: absolute;
-    right: 0.67857em;
-    top: 0;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid {
-    margin-bottom: 2.42857em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item {
-    position: relative;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item::before {
-    background-color: #d4dcdd;
-    content: ' ';
-    height: 1px;
-    left: 0;
-    margin-top: 1.64286em;
-    position: absolute;
-    right: 0;
-    top: 100%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item.is-active::before {
-    background-color: #bfc6c7;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item
-    > ul {
-    left: 0;
-    margin-top: 0;
-    padding-top: 1em;
-    position: absolute;
-    right: 0;
-    top: 100%;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item
-    > ul
-    > li
-    + li {
-    margin-left: 1.14286em;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-vagrant:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-vagrant:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-vagrant.is-active::before {
-    background-color: #1563ff;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-packer:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-packer:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-packer.is-active::before {
-    background-color: #1daeff;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-terraform:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-terraform:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-terraform.is-active::before {
-    background-color: #5c4ee5;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-vault:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-vault:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-vault.is-active::before {
-    background-color: #000;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-nomad:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-nomad:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-nomad.is-active::before {
-    background-color: #25ba81;
-  }
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-consul:hover::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-consul:focus::before,
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-grid-item-consul.is-active::before {
-    background-color: #c62a71;
-  }
-}
-@media (min-width: 1200px) {
-  .mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox.mega-nav-sandbox
-    .mega-nav-body-ct {
-    width: 1140px;
-  }
-}
diff --git a/website/components/mega-nav/temporary_suite.jsx b/website/components/mega-nav/temporary_suite.jsx
deleted file mode 100644
index d3bece080..000000000
--- a/website/components/mega-nav/temporary_suite.jsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import React, { useState } from 'react'
-
-export default function TemporaryMegaNavSuite({ product }) {
-  const [open, setOpen] = useState(false)
-
-  function activeProduct(name) {
-    return name.toLowerCase() === (product || '').toLowerCase()
-      ? 'is-active'
-      : ''
-  }
-
-  return (
-    <div className="hidden-print mega-nav-sandbox">
-      <svg
-        className="hidden-print"
-        aria-hidden="true"
-        style={{ position: 'absolute', width: 0, height: 0 }}
-        width="0"
-        height="0"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <symbol id="mega-nav-icon-angle" viewBox="0 0 13 7">
-            <path d="M6.5 6.5L.7 1.6l.6-.8 5.2 4.4L11.7.8l.6.8z" />
-          </symbol>
-          <symbol id="mega-nav-icon-close" viewBox="0 0 13 15">
-            <path
-              vectorEffect="non-scaling-stroke"
-              d="M1.1 14L11.9 1m0 13L1.1 1"
-            />
-          </symbol>
-        </defs>
-      </svg>
-      <div className="mega-nav-banner">
-        <div className="container">
-          <div className="mega-nav-banner-item">
-            <p className="mega-nav-tagline">
-              <span className="hidden-xs text-muted">
-                {product
-                  ? `Learn how ${product} fits into the`
-                  : 'Learn more about the'}
-              </span>
-            </p>
-            <div id="#mega-nav" className={`mega-nav ${open ? 'open' : ''}`}>
-              <button
-                type="button"
-                id="mega-nav-ctrl"
-                className="mega-nav-ctrl"
-                onClick={() => {
-                  console.log('clicked')
-                  setOpen(!open)
-                }}
-              >
-                <div className="mega-nav-ctrl-items">
-                  <img
-                    src={require('./img/temporary_suite/logo-hashicorp.svg')}
-                    alt="HashiCorp Logo"
-                  />
-                  <strong>HashiCorp Stack</strong>
-                  <span className="mega-nav-icon-outline">
-                    <svg
-                      className="mega-nav-icon mega-nav-icon-angle-right"
-                      aria-hidden="true"
-                    >
-                      <use
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                        xlinkHref="#mega-nav-icon-angle"
-                      />
-                    </svg>
-                    <span className="visuallyhidden">Open</span>
-                  </span>
-                </div>
-              </button>
-              <div
-                id="mega-nav-body-ct"
-                className="mega-nav-body-ct"
-                aria-labelledby="mega-nav-ctrl"
-              >
-                <div className="mega-nav-body">
-                  <button
-                    type="button"
-                    id="mega-nav-close"
-                    className="mega-nav-close"
-                  >
-                    <svg
-                      className="mega-nav-icon mega-nav-icon-close"
-                      aria-hidden="true"
-                    >
-                      <use
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                        xlinkHref="#mega-nav-icon-close"
-                      />
-                    </svg>
-                    <span className="visuallyhidden">Close</span>
-                  </button>
-                  <div className="mega-nav-body-header">
-                    <div className="mega-nav-body-header-item">
-                      <h2 className="mega-nav-h1">
-                        Provision, Secure, Connect, and&nbsp;Run
-                      </h2>
-                      <p className="mega-nav-h2">
-                        Any infrastructure for any&nbsp;application
-                      </p>
-                    </div>
-                    <div className="mega-nav-body-header-item">
-                      <a
-                        href="https://www.hashicorp.com/"
-                        className="mega-nav-btn"
-                      >
-                        <img
-                          src={require('./img/temporary_suite/logo-hashicorp.svg')}
-                          alt="HashiCorp Logo"
-                        />{' '}
-                        Learn the HashiCorp Enterprise&nbsp;Stack{' '}
-                        <svg
-                          className="mega-nav-icon mega-nav-icon-angle-right"
-                          aria-hidden="true"
-                        >
-                          <use
-                            xmlnsXlink="http://www.w3.org/1999/xlink"
-                            xlinkHref="#mega-nav-icon-angle"
-                          />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                  <div className="mega-nav-body-grid">
-                    <div className="mega-nav-body-grid-item">
-                      <h3 className="mega-nav-h3">Provision</h3>
-                      <ul className="mega-nav-grid">
-                        <li>
-                          <a
-                            href="https://www.vagrantup.com"
-                            className={`mega-nav-grid-item mega-nav-grid-item-vagrant ${activeProduct(
-                              'vagrant'
-                            )}`}
-                          >
-                            <div className="mega-nav-grid-item-img">
-                              <img
-                                src={require('./img/temporary_suite/logo-vagrant.svg')}
-                                alt="Vagrant Logo"
-                              />
-                            </div>
-                            <b>Vagrant</b>
-                            <ul>
-                              <li>
-                                <span className="mega-nav-tag">Build</span>
-                              </li>
-                              <li>
-                                <span className="mega-nav-tag">Test</span>
-                              </li>
-                            </ul>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            href="https://www.packer.io"
-                            className={`mega-nav-grid-item mega-nav-grid-item-packer ${activeProduct(
-                              'packer'
-                            )}`}
-                          >
-                            <div className="mega-nav-grid-item-img">
-                              <img
-                                src={require('./img/temporary_suite/logo-packer.svg')}
-                                alt="Packer Logo"
-                              />
-                            </div>
-                            <b>Packer</b>
-                            <ul>
-                              <li>
-                                <span className="mega-nav-tag">Package</span>
-                              </li>
-                            </ul>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            href="https://www.terraform.io"
-                            className={`mega-nav-grid-item mega-nav-grid-item-terraform ${activeProduct(
-                              'terraform'
-                            )}`}
-                          >
-                            <div className="mega-nav-grid-item-img">
-                              <img
-                                src={require('./img/temporary_suite/logo-terraform.svg')}
-                                alt="Terraform Logo"
-                              />
-                            </div>
-                            <b>Terraform</b>
-                            <ul>
-                              <li>
-                                <span className="mega-nav-tag">Provision</span>
-                              </li>
-                            </ul>
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                    <div className="mega-nav-body-grid-item">
-                      <h3 className="mega-nav-h3">Secure</h3>
-                      <ul className="mega-nav-grid">
-                        <li>
-                          <a
-                            href="https://www.vaultproject.io"
-                            className={`mega-nav-grid-item mega-nav-grid-item-vault ${activeProduct(
-                              'vault'
-                            )}`}
-                          >
-                            <div className="mega-nav-grid-item-img">
-                              <img
-                                src={require('./img/temporary_suite/logo-vault.svg')}
-                                alt="Vault Logo"
-                              />
-                            </div>
-                            <b>Vault</b>
-                            <ul>
-                              <li>
-                                <span className="mega-nav-tag">Secure</span>
-                              </li>
-                            </ul>
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                    <div className="mega-nav-body-grid-item">
-                      <h3 className="mega-nav-h3">Connect</h3>
-                      <ul className="mega-nav-grid">
-                        <li>
-                          <a
-                            href="https://www.consul.io"
-                            className="mega-nav-grid-item mega-nav-grid-item-consul"
-                          >
-                            <div className="mega-nav-grid-item-img">
-                              <img
-                                src={require('./img/temporary_suite/logo-consul.svg')}
-                                alt="Consul Logo"
-                              />
-                            </div>
-                            <b>Consul</b>
-                            <ul>
-                              <li>
-                                <span className="mega-nav-tag">Connect</span>
-                              </li>
-                            </ul>
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                    <div className="mega-nav-body-grid-item">
-                      <h3 className="mega-nav-h3">Run</h3>
-                      <ul className="mega-nav-grid">
-                        <li>
-                          <a
-                            href="https://www.nomadproject.io"
-                            className={`mega-nav-grid-item mega-nav-grid-item-nomad ${activeProduct(
-                              'nomad'
-                            )}`}
-                          >
-                            <div className="mega-nav-grid-item-img">
-                              <img
-                                src={require('./img/temporary_suite/logo-nomad.svg')}
-                                alt="Nomad Logo"
-                              />
-                            </div>
-                            <b>Nomad</b>
-                            <ul>
-                              <li>
-                                <span className="mega-nav-tag">Run</span>
-                              </li>
-                            </ul>
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                  <div className="mega-nav-body-footer">
-                    <p>Seven elements of the modern Application Lifecycle</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/website/components/subnav/index.jsx b/website/components/subnav/index.jsx
index 5fc187b3c..569a8d234 100644
--- a/website/components/subnav/index.jsx
+++ b/website/components/subnav/index.jsx
@@ -8,15 +8,16 @@ export default function NomadSubnav() {
     <Subnav
       titleLink={{
         text: 'nomad',
-        url: '/'
+        url: '/',
       }}
       ctaLinks={[
         { text: 'GitHub', url: 'https://www.github.com/hashicorp/nomad' },
-        { text: 'Download', url: '/downloads' }
+        { text: 'Download', url: '/downloads' },
       ]}
       currentPath={router.pathname}
       menuItemsAlign="right"
       menuItems={subnavItems}
+      constrainWidth
     />
   )
 }
diff --git a/website/package-lock.json b/website/package-lock.json
index 3956ff43f..9f75ef622 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -3188,6 +3188,7 @@
         "postcss-flexbugs-fixes": "^4.1.0",
         "postcss-normalize": "^8.0.1",
         "postcss-preset-env": "^6.7.0",
+        "prettier": "^1.19.1",
         "pretty-quick": "^2.0.1",
         "react": "^16.11.0",
         "react-apollo": "^3.1.2",
@@ -3234,6 +3235,11 @@
               }
             }
           }
+        },
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+          "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
         }
       }
     },
@@ -3405,6 +3411,14 @@
         "@tippy.js/react": "^2.1.2"
       }
     },
+    "@hashicorp/react-mega-nav": {
+      "version": "4.0.1-2",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-mega-nav/-/react-mega-nav-4.0.1-2.tgz",
+      "integrity": "sha512-uDw+vk6YBDSR9sZoZa3oYd0N15UzYpuGLV1/2lofM6O4/IhEkWlGlsyWpzWABV+pcHBB4KOqnCUxpvmS9Ar61g==",
+      "requires": {
+        "@hashicorp/react-inline-svg": "^1.0.0"
+      }
+    },
     "@hashicorp/react-newsletter-signup-form": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-newsletter-signup-form/-/react-newsletter-signup-form-2.0.7.tgz",
@@ -18113,6 +18127,7 @@
         "latest-version": "^5.1.0",
         "lodash": "4.17.12",
         "node-machine-id": "^1.1.12",
+        "prettier": "^1.17.0",
         "react": "^16.9.0",
         "semver": "^6.3.0",
         "sort-keys": "^3.0.0",
@@ -18125,6 +18140,11 @@
           "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.12.tgz",
           "integrity": "sha512-+CiwtLnsJhX03p20mwXuvhoebatoh5B3tt+VvYlrPgZC1g36y+RRbkufX95Xa+X4I59aWEacDFYwnJZiyBh9gA=="
         },
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+          "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
+        },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -18788,8 +18808,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -18809,13 +18828,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -18829,18 +18846,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -18956,8 +18970,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -18968,7 +18981,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -18982,20 +18994,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -19013,7 +19022,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -19102,8 +19110,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -19114,7 +19121,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -19199,8 +19205,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -19235,7 +19240,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -19254,7 +19258,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -19297,13 +19300,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
diff --git a/website/package.json b/website/package.json
index ff29c7250..8fc07d7f5 100644
--- a/website/package.json
+++ b/website/package.json
@@ -23,6 +23,7 @@
     "@hashicorp/react-hero": "^3.0.4",
     "@hashicorp/react-image": "^2.0.1",
     "@hashicorp/react-inline-svg": "^1.0.0",
+    "@hashicorp/react-mega-nav": "^4.0.1-2",
     "@hashicorp/react-product-downloader": "^3.0.3",
     "@hashicorp/react-section-header": "^2.0.0",
     "@hashicorp/react-subnav": "^3.0.0",
diff --git a/website/pages/_app.js b/website/pages/_app.js
index e3629ad39..bc4e251b0 100644
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@@ -3,7 +3,7 @@ import App from 'next/app'
 import NProgress from 'nprogress'
 import Router from 'next/router'
 import ProductSubnav from '../components/subnav'
-import MegaNav from '../components/mega-nav'
+import MegaNav from '@hashicorp/react-mega-nav'
 import Footer from '@hashicorp/react-footer'
 import { ConsentManager, open } from '@hashicorp/react-consent-manager'
 import consentManagerConfig from '../lib/consent-manager-config'
@@ -14,7 +14,7 @@ import HashiHead from '@hashicorp/react-head'
 
 Router.events.on('routeChangeStart', NProgress.start)
 Router.events.on('routeChangeError', NProgress.done)
-Router.events.on('routeChangeComplete', url => {
+Router.events.on('routeChangeComplete', (url) => {
   setTimeout(() => window.analytics.page(url), 0)
   NProgress.done()
 })
@@ -54,8 +54,8 @@ class NextApp extends App {
             { href: '/css/nprogress.css' },
             {
               href:
-                'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap'
-            }
+                'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap',
+            },
           ]}
           icon={[{ href: '/favicon.ico' }]}
           preload={[
@@ -68,7 +68,7 @@ class NextApp extends App {
             { href: '/fonts/metro-sans/regular.woff2', as: 'font' },
             { href: '/fonts/metro-sans/semi-bold.woff2', as: 'font' },
             { href: '/fonts/metro-sans/bold.woff2', as: 'font' },
-            { href: '/fonts/dejavu/mono.woff2', as: 'font' }
+            { href: '/fonts/dejavu/mono.woff2', as: 'font' },
           ]}
         />
         <MegaNav product="Nomad" />
diff --git a/website/pages/style.css b/website/pages/style.css
index 501f597af..61abbfbc0 100644
--- a/website/pages/style.css
+++ b/website/pages/style.css
@@ -10,6 +10,8 @@
   --highlight-color: var(--nomad);
 }
 
+/* Global Transpiled Components */
+@import '~@hashicorp/react-mega-nav/style.css';
 @import '~@hashicorp/react-newsletter-signup-form/dist/style.css';
 @import '~@hashicorp/react-text-input/dist/style.css';
 @import '~@hashicorp/react-button/dist/style.css';
@@ -41,7 +43,6 @@
 @import '../components/enterprise-info/style.css';
 @import '../components/mini-cta/style.css';
 @import '../components/homepage-hero/style.css';
-@import '../components/mega-nav/style.css';
 @import '../components/featured-slider/style.css';
 @import '../components/featured-slider-section/style.css';
 @import '../components/learn-nomad/style.css';