Prepare pages for Teams launch

src/components/DefaultMenu.astro

@@ -0,0 +1,93 @@
+---
+import { isPathActive } from "../lib/utils.js";
+---
+
+<div class="flex-grow flex items-center justify-center">
+  <nav
+    data-el-menu
+    class="flex gap-6 xl:gap-12 text-gray-600 dark:text-gray-200"
+  >
+    <aside class="relative group">
+      <a href="/" class="z-10 py-2">
+        {" "}
+        Home
+      </a>
+      <div
+        class="origin-top-center absolute left-1/2 -translate-x-1/2 mt-1 w-32 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 hidden group-hover:block transform"
+      >
+        <div3
+          class="py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <a
+            href="/#install"
+            class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-center"
+            role="menuitem"
+          >
+            Install
+          </a>
+          <a
+            href="/#features"
+            class="block px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-center"
+            role="menuitem"
+          >
+            Features
+          </a>
+        </div3>
+      </div>
+    </aside>
+
+    <a
+      href="/integrations"
+      class:list={[
+        {
+          "border-b-2 border-gray-600": isPathActive(
+            "/integrations",
+            Astro.url
+          ),
+        },
+      ]}
+    >
+      Integrations
+    </a>
+    <a
+      href="/badge"
+      class:list={[
+        { "border-b-2 border-gray-600": isPathActive("/badge", Astro.url) },
+      ]}
+    >
+      Badges
+    </a>
+    <a href="https://hexdocs.pm/livebook">Docs</a>
+    <a
+      class="announcekit-widget whitespace-nowrap"
+      href="https://news.livebook.dev/"
+    >
+      What’s new?
+    </a>
+
+    <a href="/teams" class="flex items-center gap-2">
+      <span
+        class="px-2 py-1 rounded-lg text-xs font-medium bg-blue-600 text-gray-50"
+      >
+        New
+      </span>{" "}
+      Try Teams
+    </a>
+  </nav>
+</div>
+<div class="xl:w-52 flex justify-end">
+  <nav class="flex space-x-3 items-center">
+    <a
+      class:list={[
+        "px-5 py-2 rounded-lg font-medium text-sm border border-gray-200 text-gray-600 whitespace-nowrap hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
+        "plausible-event-name=nav+login+click",
+      ]}
+      href="https://teams.livebook.dev/"
+    >
+      Log in to Teams
+    </a>
+  </nav>
+</div>

src/components/DefaultMobileMenu.astro

@@ -0,0 +1,58 @@
+---
+import { isPathActive } from "../lib/utils.js";
+---
+
+<nav
+  data-el-menu
+  class="flex flex-col items-center space-y-10 text-xl text-gray-700 dark:text-gray-200"
+>
+  <a href="/">Home</a>
+  <a href="/#install">Install</a>
+  <a href="/#features">Features</a>
+  <a
+    href="/integrations"
+    class:list={[
+      {
+        "border-b-2 border-gray-600": isPathActive("/integrations", Astro.url),
+      },
+    ]}
+  >
+    Integrations
+  </a>
+  <a
+    href="/badge"
+    class:list={[
+      { "border-b-2 border-gray-600": isPathActive("/badge", Astro.url) },
+    ]}
+  >
+    Badges
+  </a>
+  <a href="https://hexdocs.pm/livebook">Docs</a>
+  <a
+    class="announcekit-widget-mobile whitespace-nowrap"
+    href="https://news.livebook.dev/"
+  >
+    What’s new?
+  </a>
+
+  <a href="/teams" class="flex items-center gap-2">
+    <span
+      class="px-2 py-1 rounded-lg text-xs font-medium bg-blue-600 text-gray-50"
+    >
+      New
+    </span>{" "}
+    Try Teams
+  </a>
+</nav>
+<div class="w-full border-t border-gray-200"></div>
+<nav class="flex flex-col space-y-5">
+  <a
+    class:list={[
+      "px-5 py-2 rounded-lg font-medium text-sm border border-gray-200 text-gray-600 whitespace-nowrap hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
+      "plausible-event-name=nav+login+click",
+    ]}
+    href="https://teams.livebook.dev/"
+  >
+    Log in to Teams
+  </a>
+</nav>

src/components/TeamsMenu.astro

@@ -0,0 +1,49 @@
+---
+import { isPathActive } from "../lib/utils.js";
+---
+
+<div class="flex-grow flex items-center justify-center">
+  <nav
+    data-el-menu
+    class="flex gap-6 xl:gap-12 text-gray-600 dark:text-gray-200"
+  >
+    <a href="/teams">Teams</a>
+
+    <a href="/teams#build-with-teams">Use cases</a>
+    <a href="/teams#teams-features">Features</a>
+    <a
+      href="/teams/pricing"
+      class:list={[
+        {
+          "border-b-2 border-gray-400": isPathActive(
+            "/teams/pricing",
+            Astro.url
+          ),
+        },
+      ]}>Pricing</a
+    >
+    <a href="https://hexdocs.pm/livebook/intro_to_teams.html">Docs</a>
+  </nav>
+</div>
+<div class="xl:w-52 flex justify-end">
+  <nav class="flex items-center">
+    <a
+      class:list={[
+        "px-5 py-2 font-medium text-sm text-gray-600 whitespace-nowrap dark:text-gray-200",
+        "plausible-event-name=nav+login+click",
+      ]}
+      href="https://teams.livebook.dev/"
+    >
+      Sign in
+    </a>
+    <a
+      class:list={[
+        "px-5 py-2 rounded-lg font-medium text-sm border border-gray-200 text-gray-600 whitespace-nowrap hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
+        "plausible-event-name=nav+signup+click",
+      ]}
+      href="https://teams.livebook.dev/"
+    >
+      Sign up free
+    </a>
+  </nav>
+</div>

src/components/TeamsMobileMenu.astro

@@ -0,0 +1,43 @@
+---
+import { isPathActive } from "../lib/utils.js";
+---
+
+<nav
+  data-el-menu
+  class="flex flex-col items-center space-y-10 text-xl text-gray-700 dark:text-gray-200"
+>
+  <a href="/teams">Teams</a>
+
+  <a href="/teams#build-with-teams">Use cases</a>
+  <a href="/teams#teams-features">Features</a>
+  <a
+    href="/teams/pricing"
+    class:list={[
+      {
+        "border-b-2 border-gray-400": isPathActive("/teams/pricing", Astro.url),
+      },
+    ]}>Pricing</a
+  >
+  <a href="https://hexdocs.pm/livebook/intro_to_teams.html">Docs</a>
+</nav>
+<div class="w-full border-t border-gray-200"></div>
+<nav class="text-xl flex flex-col items-center space-y-5">
+  <a
+    class:list={[
+      "px-5 py-2 text-gray-600 whitespace-nowrap dark:text-gray-200",
+      "plausible-event-name=nav+login+click",
+    ]}
+    href="https://teams.livebook.dev/"
+  >
+    Sign in
+  </a>
+  <a
+    class:list={[
+      "px-5 py-2 rounded-lg border border-gray-200 text-gray-600 whitespace-nowrap hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
+      "plausible-event-name=nav+signup+click",
+    ]}
+    href="https://teams.livebook.dev/"
+  >
+    Sign up free
+  </a>
+</nav>