diff --git a/docs/app/(home)/sections/CloudBanner/CloudBanner.module.css b/docs/app/(home)/sections/CloudBanner/CloudBanner.module.css
index 7f667a798..3b78ebb74 100644
--- a/docs/app/(home)/sections/CloudBanner/CloudBanner.module.css
+++ b/docs/app/(home)/sections/CloudBanner/CloudBanner.module.css
@@ -1,6 +1,5 @@
-/* Floating announcement pill (a button that scrolls to the OpenUI Cloud
-   section). Enter and exit are pure transitions, so the exit is the reverse
-   of the entrance. */
+/* Floating announcement pill linking to the benchmarks page. Enter and exit are
+   pure transitions, so the exit is the reverse of the entrance. */
 
 .banner {
   position: fixed;
@@ -19,6 +18,7 @@
   font-weight: 400;
   line-height: 1.35;
   text-align: center;
+  text-decoration: none;
   cursor: pointer;
   box-shadow:
     inset 0 1px 1px rgba(255, 255, 255, 0.22),
@@ -80,16 +80,16 @@
 .chevron {
   flex-shrink: 0;
   color: rgba(255, 255, 255, 0.7);
-  animation: chevronBounce 1.4s ease-in-out infinite;
+  animation: chevronNudge 1.4s ease-in-out infinite;
 }
 
-@keyframes chevronBounce {
+@keyframes chevronNudge {
   0%,
   100% {
-    transform: translateY(0);
+    transform: translateX(0);
   }
   50% {
-    transform: translateY(3px);
+    transform: translateX(3px);
   }
 }
 
diff --git a/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx b/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx
index c3d384e64..66f042e8f 100644
--- a/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx
+++ b/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { ChevronDown } from "lucide-react";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
 import { useEffect, useState } from "react";
-import { CLOUD_SECTION_ID } from "../CloudSection/CloudSection";
-import { USE_CASES_SECTION_ID } from "../UseCasesSection/UseCasesSection";
 import styles from "./CloudBanner.module.css";
 
 export function CloudBanner() {
@@ -11,18 +10,10 @@ export function CloudBanner() {
   const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
 
-  // Appear once the use cases section comes into view, then hide again once the
-  // OpenUI Cloud section is reached (and stay hidden through and past it).
+  // Appear as soon as the hero is scrolled past, and stay for the rest of the page.
   useEffect(() => {
     const update = () => {
-      const vh = window.innerHeight;
-      const useCasesRect = document
-        .getElementById(USE_CASES_SECTION_ID)
-        ?.getBoundingClientRect();
-      const reachedUseCases = useCasesRect ? useCasesRect.top <= vh * 0.75 : false;
-      const cloudRect = document.getElementById(CLOUD_SECTION_ID)?.getBoundingClientRect();
-      const reachedCloud = cloudRect ? cloudRect.top <= vh * 0.75 : false;
-      setShouldShow(reachedUseCases && !reachedCloud);
+      setShouldShow(window.scrollY > window.innerHeight * 0.6);
     };
     update();
     window.addEventListener("scroll", update, { passive: true });
@@ -47,27 +38,22 @@ export function CloudBanner() {
 
   if (!mounted) return null;
 
-  const scrollToCloud = () => {
-    document.getElementById(CLOUD_SECTION_ID)?.scrollIntoView({ behavior: "smooth", block: "start" });
-  };
-
   return (
-    <button
-      type="button"
-      onClick={scrollToCloud}
+    <Link
+      href="/benchmarks"
       className={`${styles.banner} ${open ? styles.open : ""}`.trim()}
-      aria-label="Introducing OpenUI Cloud. Generative UI, ready for production. Jump to section."
+      aria-label="OpenUI Benchmark: Generative UI Benchmark. View the results."
     >
       <span className={styles.content}>
         <span className={styles.text}>
           <span className={styles.lead}>
-            Introducing OpenUI <span className={styles.tag}>Cloud</span>
+            <span className={styles.tag}>OpenUI Benchmark</span>
             <span className={styles.colon}> :</span>
           </span>{" "}
-          <span className={styles.rest}>Production-ready Generative UI</span>
+          <span className={styles.rest}>Generative UI Benchmark</span>
         </span>
-        <ChevronDown className={styles.chevron} size={18} strokeWidth={2.25} aria-hidden="true" />
+        <ArrowRight className={styles.chevron} size={18} strokeWidth={2.25} aria-hidden="true" />
       </span>
-    </button>
+    </Link>
   );
 }
diff --git a/docs/components/site-primary-nav.tsx b/docs/components/site-primary-nav.tsx
index e80c7c520..327bc8254 100644
--- a/docs/components/site-primary-nav.tsx
+++ b/docs/components/site-primary-nav.tsx
@@ -120,6 +120,7 @@ export const PRIMARY_SITE_NAV_ITEMS: NavItem[] = [
   },
   // Temporarily hidden — Agent Interface isn't ready to share yet. Restore when ready:
   // { title: "Agent Interface", href: "/agent-interface", newTab: false, badge: "New" },
+  { title: "Benchmarks", href: "/benchmarks", newTab: false },
   { title: "Blogs", href: "/blog", newTab: false },
 ];