From f1aacaba22af56394f9bb8334e12e9653096236d Mon Sep 17 00:00:00 2001
From: Dax Raad <d@ironbay.co>
Date: Fri, 18 Sep 2026 21:35:13 -0400
Subject: [PATCH] feat(web): add v2 announcement banner to legacy docs

---
 packages/web/astro.config.mjs            |  1 +
 packages/web/src/components/Banner.astro | 61 ++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 packages/web/src/components/Banner.astro

diff --git a/packages/web/astro.config.mjs b/packages/web/astro.config.mjs
index 2b39c60d6b..a6144fd173 100644
--- a/packages/web/astro.config.mjs
+++ b/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",
diff --git a/packages/web/src/components/Banner.astro b/packages/web/src/components/Banner.astro
new file mode 100644
index 0000000000..05857bd850
--- /dev/null
+++ b/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>