diff --git a/src/generators/jsx-ast/index.mjs b/src/generators/jsx-ast/index.mjs
index e1ee73a1..df011762 100644
--- a/src/generators/jsx-ast/index.mjs
+++ b/src/generators/jsx-ast/index.mjs
@@ -23,6 +23,8 @@ export default {
 
   defaultConfiguration: {
     ref: 'main',
+    remoteConfig:
+      'https://raw.githubusercontent.com/nodejs/nodejs.org/main/apps/site/site.json',
   },
 
   /**
diff --git a/src/generators/jsx-ast/utils/buildContent.mjs b/src/generators/jsx-ast/utils/buildContent.mjs
index a938cb4f..15ddf8d8 100644
--- a/src/generators/jsx-ast/utils/buildContent.mjs
+++ b/src/generators/jsx-ast/utils/buildContent.mjs
@@ -285,8 +285,14 @@ export const createDocumentLayout = (
   sideBarProps,
   metaBarProps,
   remark
-) =>
-  createTree('root', [
+) => {
+  const config = getConfig('jsx-ast');
+
+  return createTree('root', [
+    createJSXElement(JSX_IMPORTS.AnnouncementBanner.name, {
+      remoteConfig: config.remoteConfig,
+      versionMajor: config.version?.major ?? null,
+    }),
     createJSXElement(JSX_IMPORTS.NavBar.name),
     createJSXElement(JSX_IMPORTS.Article.name, {
       children: [
@@ -308,6 +314,7 @@ export const createDocumentLayout = (
       ],
     }),
   ]);
+};
 
 /**
  * @typedef {import('estree').Node & { data: ApiDocMetadataEntry }} JSXContent
diff --git a/src/generators/web/constants.mjs b/src/generators/web/constants.mjs
index 8a18f8d9..e36ab548 100644
--- a/src/generators/web/constants.mjs
+++ b/src/generators/web/constants.mjs
@@ -14,6 +14,10 @@ export const ROOT = dirname(fileURLToPath(import.meta.url));
  * An object containing mappings for various JSX components to their import paths.
  */
 export const JSX_IMPORTS = {
+  AnnouncementBanner: {
+    name: 'AnnouncementBanner',
+    source: resolve(ROOT, './ui/components/AnnouncementBanner'),
+  },
   NavBar: {
     name: 'NavBar',
     source: resolve(ROOT, './ui/components/NavBar'),
diff --git a/src/generators/web/types.d.ts b/src/generators/web/types.d.ts
index 5feed60e..be3f458c 100644
--- a/src/generators/web/types.d.ts
+++ b/src/generators/web/types.d.ts
@@ -5,6 +5,7 @@ export type Generator = GeneratorMetadata<
     templatePath: string;
     title: string;
     imports: Record<string, string>;
+    remoteConfig: string;
   },
   Generate<Array<JSXContent>, AsyncGenerator<{ html: string; css: string }>>
 >;
diff --git a/src/generators/web/ui/components/AnnouncementBanner/index.jsx b/src/generators/web/ui/components/AnnouncementBanner/index.jsx
new file mode 100644
index 00000000..b8bde491
--- /dev/null
+++ b/src/generators/web/ui/components/AnnouncementBanner/index.jsx
@@ -0,0 +1,76 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import Banner from '@node-core/ui-components/Common/Banner';
+import { useEffect, useState } from 'preact/hooks';
+
+import { isBannerActive } from '../../utils/banner.mjs';
+
+/** @import { BannerEntry, RemoteConfig } from './types.d.ts' */
+
+/**
+ * Asynchronously fetches and displays announcement banners from the remote config.
+ * Global banners are rendered above version-specific ones.
+ * Non-blocking: silently ignores fetch/parse failures.
+ *
+ * @param {{ remoteConfig: string, versionMajor: number | null }} props
+ */
+export default ({ remoteConfig, versionMajor }) => {
+  const [banners, setBanners] = useState(/** @type {BannerEntry[]} */ ([]));
+
+  useEffect(() => {
+    if (!remoteConfig) {
+      return;
+    }
+
+    fetch(remoteConfig, {
+      signal: AbortSignal.timeout(2500),
+    })
+      .then(async res => {
+        if (!res.ok) {
+          return;
+        }
+
+        /** @type {RemoteConfig}  */
+        const config = await res.json();
+
+        const active = [];
+
+        const globalBanner = config.websiteBanners?.index;
+        if (globalBanner && isBannerActive(globalBanner)) {
+          active.push(globalBanner);
+        }
+
+        if (versionMajor != null) {
+          const versionBanner = config.websiteBanners[`v${versionMajor}`];
+          if (versionBanner && isBannerActive(versionBanner)) {
+            active.push(versionBanner);
+          }
+        }
+
+        setBanners(active);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  }, []);
+
+  if (!banners.length) {
+    return null;
+  }
+
+  return (
+    <div role="region" aria-label="Announcements">
+      {banners.map(banner => (
+        <Banner key={banner.text ?? banner.text} type={banner.type}>
+          {banner.link ? (
+            <a href={banner.link} target="_blank" rel="noopener noreferrer">
+              {banner.text}
+            </a>
+          ) : (
+            banner.text
+          )}
+          {banner.link && <ArrowUpRightIcon />}
+        </Banner>
+      ))}
+    </div>
+  );
+};
diff --git a/src/generators/web/ui/components/AnnouncementBanner/types.d.ts b/src/generators/web/ui/components/AnnouncementBanner/types.d.ts
new file mode 100644
index 00000000..1c0a152d
--- /dev/null
+++ b/src/generators/web/ui/components/AnnouncementBanner/types.d.ts
@@ -0,0 +1,11 @@
+import type { BannerProps } from '@node-core/ui-components/Common/Banner';
+
+export type BannerEntry = {
+  startDate?: string;
+  endDate?: string;
+  text: string;
+  link?: string;
+  type?: BannerProps['type'];
+};
+
+export type RemoteConfig = Record<string, { banner?: BannerEntry } | undefined>;
diff --git a/src/generators/web/ui/utils/__tests__/banner.test.mjs b/src/generators/web/ui/utils/__tests__/banner.test.mjs
new file mode 100644
index 00000000..262d2c9d
--- /dev/null
+++ b/src/generators/web/ui/utils/__tests__/banner.test.mjs
@@ -0,0 +1,63 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { isBannerActive } from '../banner.mjs';
+
+const PAST = new Date(Date.now() - 86_400_000).toISOString(); // yesterday
+const FUTURE = new Date(Date.now() + 86_400_000).toISOString(); // tomorrow
+
+const banner = (overrides = {}) => ({
+  text: 'Test banner',
+  ...overrides,
+});
+
+describe('isBannerActive', () => {
+  describe('no startDate, no endDate', () => {
+    it('is always active', () => {
+      assert.equal(isBannerActive(banner()), true);
+    });
+  });
+
+  describe('startDate only', () => {
+    it('is active when startDate is in the past', () => {
+      assert.equal(isBannerActive(banner({ startDate: PAST })), true);
+    });
+
+    it('is not active when startDate is in the future', () => {
+      assert.equal(isBannerActive(banner({ startDate: FUTURE })), false);
+    });
+  });
+
+  describe('endDate only', () => {
+    it('is active when endDate is in the future', () => {
+      assert.equal(isBannerActive(banner({ endDate: FUTURE })), true);
+    });
+
+    it('is not active when endDate is in the past', () => {
+      assert.equal(isBannerActive(banner({ endDate: PAST })), false);
+    });
+  });
+
+  describe('startDate and endDate', () => {
+    it('is active when now is within the range', () => {
+      assert.equal(
+        isBannerActive(banner({ startDate: PAST, endDate: FUTURE })),
+        true
+      );
+    });
+
+    it('is not active when now is before the range', () => {
+      assert.equal(
+        isBannerActive(banner({ startDate: FUTURE, endDate: FUTURE })),
+        false
+      );
+    });
+
+    it('is not active when now is after the range', () => {
+      assert.equal(
+        isBannerActive(banner({ startDate: PAST, endDate: PAST })),
+        false
+      );
+    });
+  });
+});
diff --git a/src/generators/web/ui/utils/banner.mjs b/src/generators/web/ui/utils/banner.mjs
new file mode 100644
index 00000000..a3af015c
--- /dev/null
+++ b/src/generators/web/ui/utils/banner.mjs
@@ -0,0 +1,20 @@
+/** @import { BannerEntry } from '../components/AnnouncementBanner/types' */
+
+/**
+ * Checks whether a banner should be displayed based on its date range.
+ * Both `startDate` and `endDate` are optional; if omitted the banner is
+ * considered open-ended in that direction.
+ *
+ * @param {BannerEntry} banner
+ * @returns {boolean}
+ */
+export const isBannerActive = banner => {
+  const now = Date.now();
+  if (banner.startDate && now < new Date(banner.startDate).getTime()) {
+    return false;
+  }
+  if (banner.endDate && now > new Date(banner.endDate).getTime()) {
+    return false;
+  }
+  return true;
+};