feat(site): add legacy docs banner and v8 links (#786)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/components/LegacyBanner.astro

@@ -0,0 +1,59 @@
+---
+import { BANNER_DISMISS_KEY } from '@/consts';
+---
+
+<div
+  data-legacy-banner
+  class:list={[
+    "banner-dismissed:hidden",
+    "flex items-center justify-center gap-2 px-5 py-2 text-p2",
+    "border-b border-manila-75 bg-manila-50 text-faded-black",
+    "dark:border-soot dark:bg-warm-gray dark:text-manila-light",
+  ]}
+>
+  <p>
+    Using Video.js v8 or earlier?{" "}
+    <a
+      href="https://legacy.videojs.org"
+      class="font-bold underline intent:no-underline"
+    >
+      Visit the legacy docs
+    </a>
+  </p>
+  <button
+    type="button"
+    data-legacy-banner-dismiss
+    aria-label="Dismiss banner"
+    class:list={[
+      "shrink-0 cursor-pointer rounded p-2 intent:bg-manila-light dark:intent:bg-faded-black",
+    ]}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </button>
+</div>
+
+<script is:inline define:vars={{ bannerKey: BANNER_DISMISS_KEY }}>
+  var dismissBtn = document.querySelector("[data-legacy-banner-dismiss]");
+  if (dismissBtn) {
+    dismissBtn.addEventListener("click", function () {
+      try {
+        localStorage.setItem(bannerKey, "true");
+      } catch (e) {}
+      document.documentElement.classList.add("banner-dismissed");
+    });
+  }
+</script>