feat(web): add v2 announcement banner to legacy docs

Author: thdxr

packages/web/astro.config.mjs

@@ -296,6 +296,7 @@ export default defineConfig({
       ],
       components: {
         Hero: "./src/components/Hero.astro",
+        Banner: "./src/components/Banner.astro",
         Head: "./src/components/Head.astro",
         Header: "./src/components/Header.astro",
         Footer: "./src/components/Footer.astro",

packages/web/src/components/Banner.astro

@@ -0,0 +1,61 @@
+<a class="v2-banner" href="https://opencode.ai/v2">
+  <span class="badge">New</span>
+  <span class="text">OpenCode v2 is now available</span>
+  <span class="arrow" aria-hidden="true">&rarr;</span>
+</a>
+
+<style>
+  .v2-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 12px 24px;
+    background: var(--color-background-interactive);
+    color: var(--color-text-strong) !important;
+    border-bottom: 1px solid var(--color-border-weak);
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 1;
+    transition: background 0.15s ease;
+  }
+
+  .v2-banner:hover {
+    background: var(--color-background-interactive-weaker);
+  }
+
+  .badge {
+    padding: 4px 8px;
+    background: var(--color-background-strong);
+    color: var(--color-text-inverted);
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    border-radius: 2px;
+  }
+
+  .text {
+    font-weight: 500;
+  }
+
+  .arrow {
+    color: var(--color-text);
+    transition: transform 0.15s ease;
+  }
+
+  .v2-banner:hover .arrow {
+    transform: translateX(4px);
+  }
+
+  @media (max-width: 30rem) {
+    .v2-banner {
+      padding: 10px 16px;
+      gap: 8px;
+    }
+
+    .badge {
+      display: none;
+    }
+  }
+</style>