diff --git a/docs-app/.template-lintrc.js b/docs-app/.template-lintrc.js
index a737c931..0b9aca50 100644
--- a/docs-app/.template-lintrc.js
+++ b/docs-app/.template-lintrc.js
@@ -6,5 +6,6 @@ module.exports = {
     'no-forbidden-elements': 'off',
     'no-shadowed-elements': 'off',
     'no-inline-styles': 'off',
+    'no-whitespace-for-layout': 'off',
   },
 };
diff --git a/docs-app/app/app.ts b/docs-app/app/app.ts
index 538d3e70..b044bf68 100644
--- a/docs-app/app/app.ts
+++ b/docs-app/app/app.ts
@@ -10,7 +10,10 @@ import loadInitializers from 'ember-load-initializers';
 import { sync } from 'ember-primitives/color-scheme';
 import Resolver from 'ember-resolver';
 
+import { install } from './icons';
+
 sync();
+install();
 
 // @babel/traverse (from babel-plugin-ember-template-imports)
 // accesses process.....
diff --git a/docs-app/app/components/header.gts b/docs-app/app/components/header.gts
index eb58f9ab..2a805a2b 100644
--- a/docs-app/app/components/header.gts
+++ b/docs-app/app/components/header.gts
@@ -45,23 +45,27 @@ export const Header: TOC<{ Blocks: { default: [] } }> = <template>
             input here
         </div>
       }}
-      <div class="relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow">
-        <ThemeToggle />
-        <TestsLink />
-        <GitHubLink />
-      </div>
+      <TopRight />
     </div>
   </header>
 </template>;
 
-const LogoLink = <template>
+export const TopRight = <template>
+  <div class="relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow">
+    <ThemeToggle />
+    <TestsLink />
+    <GitHubLink />
+  </div>
+</template>;
+
+export const LogoLink = <template>
   <a href="/" aria-label="Home page">
     <Logomark class="h-9 w-28 lg:hidden" />
     <Logo class="hidden w-auto h-9 fill-slate-700 lg:block dark:fill-sky-100" />
   </a>
 </template>;
 
-const TestsLink = <template>
+export const TestsLink = <template>
   <ExternalLink href="/tests" class="group" aria-label="Tests">
     <Flask
       class="w-6 h-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
@@ -69,7 +73,7 @@ const TestsLink = <template>
   </ExternalLink>
 </template>;
 
-const GitHubLink = <template>
+export const GitHubLink = <template>
   <ExternalLink
     class="group"
     href="https://github.com/universal-ember/ember-primitives"
diff --git a/docs-app/app/components/icons.gts b/docs-app/app/components/icons.gts
index fd9ddbbc..1aa39dba 100644
--- a/docs-app/app/components/icons.gts
+++ b/docs-app/app/components/icons.gts
@@ -2,8 +2,42 @@ import type { TOC } from '@ember/component/template-only';
 /**
  * Copied from font-awesome directly,
  * but with the addition of fill="currentColor"
+ *
+ * Font Awesome Free 6.6.0 by @fontawesome
+ * - https://fontawesome.com License
+ * - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
  */
 
+export const XTwitter: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-xtwitter" />
+  </svg>
+</template>;
+
+export const Discord: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-discord" />
+  </svg>
+</template>;
+
+export const Threads: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-threads" />
+  </svg>
+</template>;
+
+export const BlueSky: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-bluesky" />
+  </svg>
+</template>;
+
+export const Mastodon: TOC<{ Element: SVGElement }> = <template>
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-mastodon" />
+  </svg>
+</template>;
+
 export const Sun: TOC<{ Element: SVGElement }> = <template>
   <svg aria-hidden="true" viewBox="0 0 16 16" ...attributes>
     <path
@@ -25,10 +59,8 @@ export const Moon: TOC<{ Element: SVGElement }> = <template>
 </template>;
 
 export const GitHub: TOC<{ Element: SVGElement }> = <template>
-  <svg aria-hidden="true" viewBox="0 0 16 16" ...attributes>
-    <path
-      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
-    />
+  <svg aria-hidden="true" ...attributes>
+    <use xlink:href="#social-github" />
   </svg>
 </template>;
 
diff --git a/docs-app/app/icons.ts b/docs-app/app/icons.ts
new file mode 100644
index 00000000..a6742198
--- /dev/null
+++ b/docs-app/app/icons.ts
@@ -0,0 +1,56 @@
+export function install() {
+  installSocials();
+}
+
+export function installIcons(setName: string, set: string) {
+  let id = `icon-set__${setName}`;
+  let existing = document.getElementById(id);
+
+  if (!existing) {
+    let div = document.createElement('div');
+
+    div.innerHTML = set;
+
+    document.body.appendChild(div);
+  }
+
+  // do nothing! set already installed!
+}
+
+export function installSocials() {
+  installIcons('social', socialSet);
+}
+
+/**
+ * How to make a sprite Sheet?
+ * 1. Copy SVG into the <svg> tag
+ * 2. Rename <svg to <symbol
+ * 3. Add ID
+ * 4. Add fill=currentColor to the symbol tag
+ */
+const socialSet = `
+<svg width="0" height="0" style="visibility:hidden">
+  <symbol  id="social-bluesky" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/></symbol>
+
+  <symbol id="social-mastodon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></symbol>
+
+  <symbol id="social-threads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"/></symbol>
+
+  <symbol id="social-discord" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></symbol>
+
+  <symbol id="social-xtwitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
+  </symbol>
+
+
+  <symbol id="social-github" viewBox="0 0 16 16">
+    <path
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+    />
+  </symbol>
+</svg>
+`;
diff --git a/docs-app/app/routes/index.ts b/docs-app/app/routes/index.ts
deleted file mode 100644
index c3946775..00000000
--- a/docs-app/app/routes/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import Route from '@ember/routing/route';
-import { service } from '@ember/service';
-
-import type RouterService from '@ember/routing/router-service';
-
-export default class NotHere extends Route {
-  @service declare router: RouterService;
-
-  beforeModel() {
-    this.router.replaceWith('/1-get-started/index.md');
-  }
-}
diff --git a/docs-app/app/templates/application.gts b/docs-app/app/templates/application.gts
index f0976cb2..bf0f06de 100644
--- a/docs-app/app/templates/application.gts
+++ b/docs-app/app/templates/application.gts
@@ -1,11 +1,6 @@
 import 'ember-mobile-menu/themes/android';
 import './layout.css';
 
-import { Header } from 'docs-app/components/header';
-import { Menu } from 'docs-app/components/icons';
-import { Nav } from 'docs-app/components/nav';
-// @ts-expect-error - no types are provided for ember-mobile-menu
-import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
 import pageTitle from 'ember-page-title/helpers/page-title';
 import { colorScheme } from 'ember-primitives/color-scheme';
 import Route from 'ember-route-template';
@@ -15,27 +10,7 @@ const Application =
     {{pageTitle "ember-primitives"}}
     {{(syncBodyClass)}}
 
-    <MenuWrapper as |mmw|>
-      <mmw.MobileMenu @mode="push" @maxWidth={{300}} as |mm|>
-        <Nav @onClick={{mm.actions.close}} />
-      </mmw.MobileMenu>
-
-      <mmw.Content>
-        <Header>
-          <mmw.Toggle>
-            <Menu class="w-6 h-6 stroke-slate-500" />
-          </mmw.Toggle>
-        </Header>
-
-        <div class="outer-content">
-          <Nav />
-
-          <main class="relative grid justify-center flex-auto w-full mx-auto max-w-8xl">
-            {{outlet}}
-          </main>
-        </div>
-      </mmw.Content>
-    </MenuWrapper>
+    {{outlet}}
   </template>
 
 export default Route(Application);
diff --git a/docs-app/app/templates/index.gts b/docs-app/app/templates/index.gts
new file mode 100644
index 00000000..f8f8dff1
--- /dev/null
+++ b/docs-app/app/templates/index.gts
@@ -0,0 +1,178 @@
+import { TopRight } from 'docs-app/components/header';
+import { Logo } from 'docs-app/components/icons';
+import { BlueSky, Discord, GitHub, Mastodon, Threads, XTwitter } from 'docs-app/components/icons';
+import { ExternalLink } from 'ember-primitives/components/external-link';
+import { Hero } from 'ember-primitives/layout/hero';
+import Route from 'ember-route-template';
+
+import { Article, InternalLink, Link } from './page';
+
+import type { TOC } from '@ember/component/template-only';
+
+export default Route(
+  <template>
+    <Hero class="shadow-xl shadow-slate-900/5 gradient-background">
+      <header class="sticky top-0 z-50 p-4 flex items-center">
+        <TopRight />
+      </header>
+
+      <div class="h-full flex flex-col gap-8 justify-center items-center">
+        <h1 style="transform: translateY(-50%); width: 66%; margin: 0 auto; filter: drop-shadow(3px 5px 0px rgba(0, 0, 0, 0.4));">
+          <Logo />
+        </h1>
+        <InternalLink href="/1-get-started/index.md" class="text-2xl" style="color: white; text-shadow: 0px 3px 0px black;
+  font-size: 2.125rem;">
+          Get Started ➤
+        </InternalLink>
+      </div>
+    </Hero>
+
+  <style>
+    .gradient-background {
+      background-image: linear-gradient(-45deg in oklch, #1252e3, #485de5, #7812e5, #3512c5);
+      background-size: 400% 400%;
+      animation: gradient-animation 16s ease infinite;
+    }
+
+    body.dark .gradient-background {
+      background-image: linear-gradient(-45deg in oklch, #110043, #182d75, #280065, #350076);
+    }
+
+    @keyframes gradient-animation {
+      0% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+      100% {
+        background-position: 0% 50%;
+      }
+    }
+  </style>
+
+    <Content />
+
+    <br><br>
+    <br><br>
+
+    <div class="flex justify-center items-center">
+      <InternalLink href="/1-get-started/index.md" class="text-2xl" style="font-size: 2.125rem;">
+        Get Started ➤
+      </InternalLink>
+    </div>
+
+    <br><br>
+    <br><br>
+
+    <footer style="padding: 3rem; width: 66%;" class="mx-auto flex justify-between">
+      <div>
+        <span class="dark:text-white text:slate-900">Related Projects</span>
+        <nav>
+          <ul>
+            <li>
+              <Link href="https://github.com/universal-ember/test-support">
+                @universal-ember/test-support
+              </Link>
+            </li>
+            <li>
+              <Link href="https://github.com/universal-ember/reactiveweb">
+                reactiveweb
+              </Link>
+            </li>
+            <li>
+              <Link href="https://github.com/nullVoxPopuli/form-data-utils">
+                form-data-utils
+              </Link>
+            </li>
+         </ul>
+        </nav>
+      </div>
+
+      <div>
+        <Socials />
+      </div>
+    </footer>
+  </template>
+);
+
+const Socials = <template>
+  <div class="flex gap-3">
+    <ExternalLink href="https://x.com/nullvoxpopuli">
+      <XTwitter class="dark:fill-white fill-slate-900 h-6 w-6" />
+    </ExternalLink>
+    <ExternalLink href="https://github.com/NullVoxPopuli/">
+      <GitHub class="dark:fill-white fill-slate-900  h-6 w-6" />
+    </ExternalLink>
+    <ExternalLink href="https://mastodon.coffee/@nullvoxpopuli">
+      <Mastodon class="dark:fill-white fill-slate-900  h-6 w-6" />
+    </ExternalLink>
+    <ExternalLink href="https://bsky.app/profile/nullvoxpopuli.bsky.social">
+      <BlueSky class="dark:fill-white fill-slate-900  h-6 w-6" />
+    </ExternalLink>
+    <ExternalLink href="https://www.threads.net/@nullvoxpopuli">
+      <Threads class="dark:fill-white fill-slate-900  h-6 w-6" />
+    </ExternalLink>
+    <ExternalLink href="http://discord.gg/cTvtmJhFNY">
+      <Discord class="dark:fill-white fill-slate-900  h-6 w-6" />
+    </ExternalLink>
+  </div>
+</template>;
+
+const Content = <template>
+    <br><br>
+
+    <div class="mx-auto" style="width: 66%">
+      <Article class="flex gap-12 justify-between" >
+        <div>
+          <H2>Projects using...</H2>
+
+          <ul>
+            <li>
+              <Link href="https://limber.glimdown.com">REPL, Limber</Link>
+            </li>
+            <li>
+              <Link href="https://tutorial.glimdown.com">Tutorial</Link>
+            </li>
+            <li>
+                <Link href="https://game-of-life.nullvoxpopuli.com/">Conway's Game of Life</Link>
+            </li>
+            <li>
+              <Link href="https://majors.nullvoxpopuli.com/">Package Majors</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <H2>Goals</H2>
+
+          <ul>
+            <li>import only what you need</li>
+            <li>pure data derivation</li>
+            <li>no extra rendering</li>
+            <li>no unneeded DOM</li>
+            <li>be contextually aware</li>
+            <li>be flexible</li>
+            <li>use the latest technology</li>
+          </ul>
+        </div>
+
+        <div>
+          <H2>Features</H2>
+
+          <ul>
+            <li>Accessible, by default</li>
+            <li><Link href="https://tabster.io/">Tabster</Link> integration</li>
+            <li>Documented</li>
+            <li>Compatible with all CSS styles</li>
+            <li>Compatible with all design systems</li>
+          </ul>
+        </div>
+      </Article>
+    </div>
+</template>;
+
+
+const H2: TOC<{ Blocks: { default: []}}> = <template>
+  <h2 class="text-3xl">{{yield}}</h2>
+</template>
diff --git a/docs-app/app/templates/page.gjs b/docs-app/app/templates/page.gjs
deleted file mode 100644
index 2e80244b..00000000
--- a/docs-app/app/templates/page.gjs
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ExternalLink, service } from 'ember-primitives';
-import Route from 'ember-route-template';
-import { Page } from 'kolay/components';
-
-// Removes the App Shell / welcome UI
-// before initial rending and chunk loading finishes
-function removeLoader() {
-  document.querySelector('#initial-loader')?.remove();
-}
-
-function resetScroll() {
-  document.querySelector('html')?.scrollTo(0, 0);
-}
-
-export default Route(
-  <template>
-    <section
-      data-main-scroll-container
-      class="flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none"
-      ...attributes
-    >
-      <Article>
-        <Page>
-          {{! TODO: we need a pending state here
-                right now this is ignored, because the :pending
-                block doesn't exist.
-          }}
-          <:pending>
-            <div class="h-full w-full"></div>
-          </:pending>
-
-          <:error as |error|>
-            <section>
-              <Error @error={{error}} />
-            </section>
-          </:error>
-
-          <:success as |prose|>
-            <prose />
-            {{(removeLoader)}}
-            {{! this is probably really bad, and anti-patterny
-                but ember doesn't have a good way to have libraries
-                tie in to the URL without a bunch of setup -- which is maybe fine?
-                needs some experimenting -- there is a bit of a disconnect with
-                deriving data from the URL, and the timing of the model hooks.
-                It might be possible to have an afterModel hook wait until the page is
-                compiled.
-                (that's why we have async state, because we're compiling, not loading)
-            }}
-            {{resetScroll prose}}
-          </:success>
-        </Page>
-      </Article>
-      <EditLink />
-    </section>
-  </template>
-);
-
-const ReportingAnIssue = <template>
-  <ExternalLink href="https://github.com/universal-ember/ember-primitives/issues/new">
-    reporting an issue
-  </ExternalLink>
-</template>;
-
-const Error = <template>
-  <div
-    data-page-error
-    class="dark:text-white text:slate-900"
-    style="border: 1px solid red; padding: 1rem; word-break: break-all;"
-  >
-    <h1>Oops!</h1><br />
-    {{@error}}
-
-    <br />
-    <br />
-    If you have a GitHub account (and the time),
-    <ReportingAnIssue />
-    would be most helpful! 🎉
-  </div>
-</template>;
-
-const Article = <template>
-  <article
-    class="prose prose-slate max-w-none dark:prose-invert dark:text-slate-400 prose-headings:inline-block prose-th:table-cell prose-headings:scroll-mt-28 prose-h1:text-3xl prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem] prose-lead:text-slate-500 dark:prose-lead:text-slate-400 prose-a:font-semibold dark:prose-a:text-sky-400 prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px] prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 dark:prose-hr:border-slate-800 dark:prose-code:text-slate-50"
-    ...attributes
-  >
-    {{yield}}
-  </article>
-</template>;
-
-const EditLink = <template>
-  {{#let (service "kolay/docs") as |docs|}}
-    <div class="flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800">
-      <ExternalLink
-        class="edit-page flex text-sm font-semibold dark:text-sky-400 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:[--tw-prose-underline-size:6px]"
-        href="https://github.com/universal-ember/ember-primitives/edit/main/docs-app/public/docs{{docs.selected.path}}.md"
-      >
-        Edit this page
-      </ExternalLink>
-    </div>
-  {{/let}}
-</template>;
diff --git a/docs-app/app/templates/page.gts b/docs-app/app/templates/page.gts
new file mode 100644
index 00000000..391c7229
--- /dev/null
+++ b/docs-app/app/templates/page.gts
@@ -0,0 +1,155 @@
+import { Header } from 'docs-app/components/header';
+import { Menu } from 'docs-app/components/icons';
+import { Nav } from 'docs-app/components/nav';
+// @ts-expect-error - no types are provided for ember-mobile-menu
+import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
+import { ExternalLink, service } from 'ember-primitives';
+import Route from 'ember-route-template';
+import { Page } from 'kolay/components';
+
+import type { TOC } from '@ember/component/template-only';
+
+// Removes the App Shell / welcome UI
+// before initial rending and chunk loading finishes
+function removeLoader() {
+  document.querySelector('#initial-loader')?.remove();
+}
+
+function resetScroll(..._args: unknown[]) {
+  document.querySelector('html')?.scrollTo(0, 0);
+}
+
+const DocsPage = <template>
+    <Layout>
+      <section
+        data-main-scroll-container
+        class="flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none"
+      >
+        <Article>
+          <Page>
+            {{! TODO: we need a pending state here
+                  right now this is ignored, because the :pending
+                  block doesn't exist.
+            }}
+        {{! -- <:pending>
+              <div class="h-full w-full"></div>
+            </:pending>
+        --}}
+
+            <:error as |error|>
+              <section>
+                <Error @error={{error}} />
+              </section>
+            </:error>
+
+            <:success as |prose|>
+              <prose />
+              {{(removeLoader)}}
+              {{! this is probably really bad, and anti-patterny
+                  but ember doesn't have a good way to have libraries
+                  tie in to the URL without a bunch of setup -- which is maybe fine?
+                  needs some experimenting -- there is a bit of a disconnect with
+                  deriving data from the URL, and the timing of the model hooks.
+                  It might be possible to have an afterModel hook wait until the page is
+                  compiled.
+                  (that's why we have async state, because we're compiling, not loading)
+              }}
+              {{resetScroll prose}}
+            </:success>
+          </Page>
+        </Article>
+        <EditLink />
+      </section>
+    </Layout>
+</template>;
+
+export default Route(DocsPage);
+
+const Layout: TOC<{ Blocks: { default: [] }}> = <template>
+  <MenuWrapper as |mmw|>
+    <mmw.MobileMenu @mode="push" @maxWidth={{300}} as |mm|>
+      <Nav @onClick={{mm.actions.close}} />
+    </mmw.MobileMenu>
+
+    <mmw.Content>
+      <Header>
+        <mmw.Toggle>
+          <Menu class="w-6 h-6 stroke-slate-500" />
+        </mmw.Toggle>
+      </Header>
+
+      <div class="outer-content">
+        <Nav />
+
+        <main class="relative grid justify-center flex-auto w-full mx-auto max-w-8xl">
+          {{yield}}
+        </main>
+      </div>
+    </mmw.Content>
+  </MenuWrapper>
+</template>;
+
+const ReportingAnIssue = <template>
+  <ExternalLink href="https://github.com/universal-ember/ember-primitives/issues/new">
+    reporting an issue
+  </ExternalLink>
+</template>;
+
+export const Article: TOC<{ Element: HTMLElement; Blocks: { default: [] }}> = <template>
+  <article
+    class="prose prose-slate max-w-none dark:prose-invert dark:text-slate-400 prose-headings:inline-block prose-th:table-cell prose-headings:scroll-mt-28 prose-h1:text-3xl prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem] prose-lead:text-slate-500 dark:prose-lead:text-slate-400 prose-a:font-semibold dark:prose-a:text-sky-400 prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px] prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 dark:prose-hr:border-slate-800 dark:prose-code:text-slate-50"
+    ...attributes
+  >
+    {{yield}}
+  </article>
+</template>;
+
+export const InternalLink: TOC<{ Element: HTMLAnchorElement, Blocks: { default: [] }}> = <template>
+  <a
+    class="text-sm font-semibold dark:text-sky-400 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:[--tw-prose-underline-size:6px]"
+    href="#"
+    ...attributes
+  >
+    {{yield}}
+  </a>
+</template>;
+
+export const Link: TOC<{ Element: HTMLAnchorElement, Blocks: { default: [] }}> = <template>
+  <ExternalLink
+    class="text-sm font-semibold dark:text-sky-400 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:[--tw-prose-underline-size:6px]"
+    ...attributes
+  >
+    {{yield}}
+  </ExternalLink>
+</template>;
+
+const EditLink = <template>
+  {{#let (service "kolay/docs") as |docs|}}
+    <div class="flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800">
+      <Link
+        class="edit-page flex"
+        href="https://github.com/universal-ember/ember-primitives/edit/main/docs-app/public/docs{{docs.selected.path}}.md"
+      >
+        Edit this page
+      </Link>
+    </div>
+  {{/let}}
+</template>;
+
+const Error: TOC<{ Args: { error: string }}> = <template>
+  <div
+    data-page-error
+    class="dark:text-white text:slate-900"
+    style="border: 1px solid red; padding: 1rem; word-break: break-all;"
+  >
+    <h1>Oops!</h1><br />
+    {{@error}}
+
+    <br />
+    <br />
+    If you have a GitHub account (and the time),
+    <ReportingAnIssue />
+    would be most helpful! 🎉
+  </div>
+</template>;
+
diff --git a/docs-app/public/docs/8-layout/hero.md b/docs-app/public/docs/8-layout/hero.md
new file mode 100644
index 00000000..8aacd408
--- /dev/null
+++ b/docs-app/public/docs/8-layout/hero.md
@@ -0,0 +1,54 @@
+# Hero
+
+The hero pattern is for featuring large, eye-catching content, such as an image or video, along with a clear, easy to read headline or call to action.
+
+## Features 
+
+* Covers the full browser height and width, including proper dimensionality on dynamically sized viewports, such as on mobile.
+
+## Anatomy
+
+```js 
+import { Hero } from 'ember-primitives/layout/hero';
+```
+
+```gjs 
+import { Hero } from 'ember-primitives/layout/hero';
+
+<template>
+  <Hero>
+    content
+  </Hero>
+</template>
+```
+
+There is 1 BEM-style class on the element to enable further customization or styling.
+```css
+/* 
+  the containing element. 
+  this is not the same element that `...attributes` is on.
+*/ 
+.ember-primitives__hero__wrapper
+```
+
+## Accessibility
+
+This component provides no accessibility patterns and using `<main>` / `<footer>` or not is up to the use case of the `<Hero />` component.
+
+## API Reference
+
+```gjs live no-shadow
+import { ComponentSignature } from 'kolay';
+
+<template>
+  <ComponentSignature 
+    @package="ember-primitives" 
+    @module="declarations/components/layout/hero" 
+    @name="Hero" 
+  />
+</template>
+```
+
+### State Attributes
+
+This component has no state.
diff --git a/docs-app/tsconfig.json b/docs-app/tsconfig.json
index 162c51e5..75bfa95e 100644
--- a/docs-app/tsconfig.json
+++ b/docs-app/tsconfig.json
@@ -12,8 +12,8 @@
     // TODO: remove this
     "skipLibCheck": true,
     "noEmit": true,
-    "emitDeclarations": false,
     "declaration": false,
+    "declarationMap": false,
     // The combination of `baseUrl` with `paths` allows Ember's classic package
     // layout, which is not resolvable with the Node resolution algorithm, to
     // work with TypeScript.
diff --git a/ember-primitives/src/components/layout/hero.css b/ember-primitives/src/components/layout/hero.css
new file mode 100644
index 00000000..e76d18a5
--- /dev/null
+++ b/ember-primitives/src/components/layout/hero.css
@@ -0,0 +1,4 @@
+.ember-primitives__hero__wrapper {
+  width: 100dvw;
+  height: 100dvh;
+}
diff --git a/ember-primitives/src/components/layout/hero.gts b/ember-primitives/src/components/layout/hero.gts
new file mode 100644
index 00000000..00a5d164
--- /dev/null
+++ b/ember-primitives/src/components/layout/hero.gts
@@ -0,0 +1,17 @@
+import './hero.css';
+
+import type { TOC } from '@ember/component/template-only';
+
+export const Hero: TOC<{
+  /**
+   * The wrapper element of the whole layout.
+   */
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}> = <template>
+  <div class="ember-primitives__hero__wrapper" ...attributes>
+    {{yield}}
+  </div>
+</template>;
diff --git a/ember-primitives/src/components/layout/sticky-footer/index.css b/ember-primitives/src/components/layout/sticky-footer.css
similarity index 100%
rename from ember-primitives/src/components/layout/sticky-footer/index.css
rename to ember-primitives/src/components/layout/sticky-footer.css
diff --git a/ember-primitives/src/components/layout/sticky-footer.gts b/ember-primitives/src/components/layout/sticky-footer.gts
index 9ce93804..d3c39c33 100644
--- a/ember-primitives/src/components/layout/sticky-footer.gts
+++ b/ember-primitives/src/components/layout/sticky-footer.gts
@@ -1 +1,40 @@
-export { default, StickyFooter } from './sticky-footer/index.gts';
+import './sticky-footer.css';
+
+import type { TOC } from '@ember/component/template-only';
+
+export const StickyFooter: TOC<{
+  /**
+   * The wrapper element of the whole layout.
+   * Valid parents for this element must have either a set height,
+   * or a set max-height.
+   */
+  Element: HTMLDivElement;
+  Blocks: {
+    /**
+     * This is the scrollable content, contained within a `<div>` element for positioning.
+     * If this component is used as the main layout on a page,
+     * the `<main>` element would be appropriate within here.
+     */
+    content: [];
+    /**
+     * This is the footer content, contained within a `<div>` element for positioning.
+     * A `<footer>` element would be appropriate within here.
+     *
+     * This element will be at the bottom of the page if the content does not overflow the containing element and this element will be at the bottom of the content if there is overflow.
+     */
+    footer: [];
+  };
+}> = <template>
+  <div class="ember-primitives__sticky-footer__wrapper" ...attributes>
+    <div class="ember-primitives__sticky-footer__container">
+      <div class="ember-primitives__sticky-footer__content">
+        {{yield to="content"}}
+      </div>
+      <div class="ember-primitives__sticky-footer__footer">
+        {{yield to="footer"}}
+      </div>
+    </div>
+  </div>
+</template>;
+
+export default StickyFooter;
diff --git a/ember-primitives/src/components/layout/sticky-footer/index.gts b/ember-primitives/src/components/layout/sticky-footer/index.gts
deleted file mode 100644
index 05ff6f1f..00000000
--- a/ember-primitives/src/components/layout/sticky-footer/index.gts
+++ /dev/null
@@ -1,40 +0,0 @@
-import './index.css';
-
-import type { TOC } from '@ember/component/template-only';
-
-export const StickyFooter: TOC<{
-  /**
-   * The wrapper element of the whole layout.
-   * Valid parents for this element must have either a set height,
-   * or a set max-height.
-   */
-  Element: HTMLDivElement;
-  Blocks: {
-    /**
-     * This is the scrollable content, contained within a `<div>` element for positioning.
-     * If this component is used as the main layout on a page,
-     * the `<main>` element would be appropriate within here.
-     */
-    content: [];
-    /**
-     * This is the footer content, contained within a `<div>` element for positioning.
-     * A `<footer>` element would be appropriate within here.
-     *
-     * This element will be at the bottom of the page if the content does not overflow the containing element and this element will be at the bottom of the content if there is overflow.
-     */
-    footer: [];
-  };
-}> = <template>
-  <div class="ember-primitives__sticky-footer__wrapper" ...attributes>
-    <div class="ember-primitives__sticky-footer__container">
-      <div class="ember-primitives__sticky-footer__content">
-        {{yield to="content"}}
-      </div>
-      <div class="ember-primitives__sticky-footer__footer">
-        {{yield to="footer"}}
-      </div>
-    </div>
-  </div>
-</template>;
-
-export default StickyFooter;
diff --git a/ember-primitives/src/index.ts b/ember-primitives/src/index.ts
index 16bc6093..d2ccc102 100644
--- a/ember-primitives/src/index.ts
+++ b/ember-primitives/src/index.ts
@@ -22,7 +22,7 @@ export { Avatar } from './components/avatar.gts';
 export { Dialog, Dialog as Modal } from './components/dialog.gts';
 export { ExternalLink } from './components/external-link.gts';
 export { Form } from './components/form.gts';
-export { StickyFooter } from './components/layout/sticky-footer/index.gts';
+export { StickyFooter } from './components/layout/sticky-footer.gts';
 export { Link } from './components/link.gts';
 export { Menu } from './components/menu.gts';
 export { OTP, OTPInput } from './components/one-time-password/index.gts';