From ed42bb144bf69c0be1d8485659fe8dc003539c24 Mon Sep 17 00:00:00 2001 From: rahul Date: Thu, 20 Aug 2026 02:40:15 +0530 Subject: [PATCH 1/2] feat(marketing): point the floating banner and nav at /benchmarks - the pill now links to the benchmarks page instead of scrolling to the Cloud section, and its arrow nudges sideways rather than down - it appears once the hero is scrolled past, rather than waiting for the use cases section, and stays for the rest of the page - adds a Benchmarks tab to the primary nav Blocked until /benchmarks ships: both destinations 404 without it. Co-Authored-By: Claude Opus 5 --- .../CloudBanner/CloudBanner.module.css | 14 ++++---- .../sections/CloudBanner/CloudBanner.tsx | 36 ++++++------------- docs/components/site-primary-nav.tsx | 1 + 3 files changed, 19 insertions(+), 32 deletions(-) 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..f5f468e96 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 ( - + ); } 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 }, ]; From 342a102214f698955e492f09c64995cfd1892964 Mon Sep 17 00:00:00 2001 From: rahul Date: Thu, 20 Aug 2026 19:58:50 +0530 Subject: [PATCH 2/2] fix(marketing): refine benchmark banner copy --- docs/app/(home)/sections/CloudBanner/CloudBanner.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx b/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx index f5f468e96..66f042e8f 100644 --- a/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx +++ b/docs/app/(home)/sections/CloudBanner/CloudBanner.tsx @@ -42,15 +42,15 @@ export function CloudBanner() { - Benchmarks + OpenUI Benchmark : {" "} - OpenUI vs A2UI vs json-render + Generative UI Benchmark