Add BYOC and Cloud platform badges for ADP documentation

gulp.d/tasks/build.js

@@ -47,7 +47,7 @@ module.exports = (src, dest, preview) => () => {
         },
       },
     ]),
-    postcssVar({ preserve: preview }),
+    postcssVar({ preserve: true }),
     // NOTE to make vars.css available to all top-level stylesheets, use the next line in place of the previous one
     //postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
     preview ? postcssCalc : () => {}, // cssnano already applies postcssCalc
@@ -82,7 +82,7 @@ module.exports = (src, dest, preview) => () => {
     vfs
       .src(['css/site.css', 'css/vendor/*.css'], { ...opts, sourcemaps })
       .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } }))),
-    vfs.src('font/*.{ttf,woff*(2)}', opts),
+    vfs.src('font/**/*.{ttf,woff*(2)}', opts),
     vfs.src('img/**/*.{gif,ico,jpg,png,svg}', opts).pipe(
       preview
         ? through()

preview-src/ui-model.yml

@@ -4,34 +4,55 @@ site:
   title: UI Preview
   homeUrl: &home_url /xyz/24.3/index.html
   components:
-  - name: abc
-    title: Project ABC
+  # Agentic Data Plane component
+  - name: redpanda-adp
+    title: Agentic Data Plane
     url: '#'
     versions:
-    - &latest_version_abc
+    - &latest_version_adp
       url: '#'
-      version: '1.1'
-      displayVersion: '1.1'
-    - url: '#'
       version: '1.0'
       displayVersion: '1.0'
-    latestVersion: *latest_version_abc
+      asciidoc:
+        attributes:
+          page-header-data:
+            title: Agentic Data Plane
+            section: Agentic Data Plane
+            description: Build, connect, and govern AI agents.
+            color: '#7C3AED'
+            order: 1
+    latestVersion: *latest_version_adp
+  # Self-Managed (ROOT) component - under Data Platform
   - &component
     name: ROOT
-    title: &component_title Redpanda
+    title: &component_title Self-Managed
     url: /xyz/6.0/index.html
     versions:
     - &latest_version_xyz
       url: /xyz/6.0/index.html
       version: '6.0'
       displayVersion: '6.0'
+      asciidoc:
+        attributes:
+          page-header-data:
+            title: Self-Managed
+            section: Data Platform
+            description: Run Redpanda on your own infrastructure.
+            color: '#014F86'
+            order: 1
     - &component_version
       title: *component_title
       url: '#'
       version: '24.3'
       displayVersion: '24.3'
       asciidoc:
         attributes:
+          page-header-data:
+            title: Self-Managed
+            section: Data Platform
+            description: Run Redpanda on your own infrastructure.
+            color: '#014F86'
+            order: 1
           toc-tools-title: Connect Tools
           toc-tools-links: '[{"text": "Bloblang Playground", "url": "/playground", "icon": "terminal"}, {"text": "Claude AI Skills", "url": "https://github.com/redpanda-data/connect/blob/main/.claude-plugin/README.md", "icon": "layers", "external": true}]'
     - url: '#'
@@ -41,21 +62,42 @@ site:
       version: '5.0'
       displayVersion: '5.0'
     latestVersion: *latest_version_xyz
-  - name: '123'
-    title: Project 123
+  # Cloud component - under Data Platform
+  - name: redpanda-cloud
+    title: Cloud
     url: '#'
     versions:
-    - &latest_version_123
+    - &latest_version_cloud
       url: '#'
-      version: '2.2'
-      displayVersion: '2.2'
-    - url: '#'
-      version: '2.1'
-      displayVersion: '2.1'
-    - url: '#'
-      version: '2.0'
-      displayVersion: '2.0'
-    latestVersion: *latest_version_123
+      version: '1.0'
+      displayVersion: '1.0'
+      asciidoc:
+        attributes:
+          page-header-data:
+            title: Cloud
+            section: Data Platform
+            description: Fully managed Redpanda clusters.
+            color: '#0891B2'
+            order: 2
+    latestVersion: *latest_version_cloud
+  # Connect component - under Data Platform
+  - name: redpanda-connect
+    title: Redpanda Connect
+    url: '#'
+    versions:
+    - &latest_version_connect
+      url: '#'
+      version: '4.0'
+      displayVersion: '4.0'
+      asciidoc:
+        attributes:
+          page-header-data:
+            title: Redpanda Connect
+            section: Data Platform
+            description: Stream processing and integration connectors.
+            color: '#059669'
+            order: 3
+    latestVersion: *latest_version_connect
 page:
   url: *home_url
   home: true
@@ -81,6 +123,12 @@ page:
     url: '#'
     urlType: 'internal'
   breadcrumbs:
+  - content: Data Platform
+    url: '#'
+    urlType: internal
+  - content: Self-Managed
+    url: '#'
+    urlType: internal
   - content: Quickstart
     url: '#'
     urlType: internal

src/css/announcement-banner.css

@@ -1,48 +1,74 @@
+/* Announcement bar - smooth animated reveal without CLS */
 .announcement-bar {
+  display: flex;
   flex-basis: 100%;
-  display: none;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  background: #101828;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   color: white;
   z-index: var(--z-index-navbar);
   font-size: var(--secondary-font-size);
   position: fixed;
   top: 0;
+  left: 0;
   width: 100%;
   text-align: center;
-  height: var(--announcement-bar-height);
+  /* Start collapsed - JS will reveal */
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    max-height 0.3s ease-out,
+    opacity 0.2s ease-out;
+}
+
+/* Show when active (set by JavaScript) */
+.announcement-bar.is-active {
+  max-height: 60px; /* Mobile height */
+  opacity: 1;
+}
+
+.announcement-bar .announcement-content {
+  padding: 10px 40px 10px 16px;
+  line-height: 1.4;
 }
 
 .announcement-bar .announcement-content a {
   padding-left: 5px;
-  color: white;
+  color: #93c5fd;
   text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.announcement-bar .announcement-content a:hover {
+  color: #bfdbfe;
 }
 
 .announcement-bar button.close {
   border: none;
-  color: white;
+  color: rgba(255, 255, 255, 0.7);
   background: none;
   margin-top: 0;
-  padding: 0;
+  padding: 8px;
   position: absolute;
-  right: 20px;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: color 0.15s;
 }
 
-@media screen and (max-width: 550px) {
-  .announcement-bar button.close {
-    margin-top: 1.2rem;
-  }
+.announcement-bar button.close:hover {
+  color: white;
 }
 
 @media screen and (min-width: 1024px) {
-  .announcement-bar {
-    height: var(--announcement-bar-height--desktop);
+  .announcement-bar.is-active {
+    max-height: 36px; /* Desktop height */
   }
 
   .announcement-bar button.close {
-    right: 40px;
+    right: 16px;
   }
 }