feat(shell-docs): align navbar CTAs with EIP, surface DLAI course banner

samjulien · samjulien · commit dba3e2bf150a · 2026-05-20T16:45:04.000-07:00
Brings the docs navbar, mobile nav, and top banner in line with the
current product surfaces:

- Navbar CTA relabeled "Free Developer Access" -&gt; "Get Intelligence
  free" and reicon'd from Cloud to Lightbulb, matching the in-content
  OpsPlatformCTA default. The destination (Enterprise Intelligence
  Platform sign-up) is unchanged; the prior label and cloud icon
  misrepresented it as Copilot Cloud.
- CTA breakpoint aligned with Docs/Reference: no longer hidden below
  1100px. All three left-cluster links now share the same icon-hide
  behavior at &lt;808px.
- Top banner content swapped from "MCP Apps support" to the
  DeepLearning.AI "Build Interactive Agents with Generative UI" short
  course, which is already referenced from 6 generative-UI pages.
  External banner links now open in a new tab.
- Mobile top nav gains the Talk-to-Engineer (gradient pill, calendar
  icon) and Get Intelligence free (lightbulb) CTAs from the desktop
  cluster, with the canonical mobile PostHog location string
  (docs_navbar_mobile) so analytics can split mobile from desktop.

INTELLIGENCE_CTA_HREF and TALK_TO_ENGINEER_HREF are exported from
brand-nav so MobileTopNav reuses the same URLs.
diff --git a/showcase/shell-docs/src/components/banners.tsx b/showcase/shell-docs/src/components/banners.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Rocket, X } from "lucide-react";
+import { GraduationCap, X } from "lucide-react";
 import { useState, useEffect, useCallback } from "react";
 
 // Time in milliseconds before a dismissed banner reappears
@@ -19,11 +19,12 @@ type BannerEntry = {
 
 const bannerContent: BannerEntry[] = [
   {
-    icon: <Rocket className="w-5 h-5 hidden md:block flex-shrink-0" />,
-    mobileText: "CopilotKit fully supports MCP Apps!",
-    desktopText: "Bring MCP Apps interaction to your users with CopilotKit!",
-    buttonText: "See What's New",
-    href: "/generative-ui/mcp-apps",
+    icon: <GraduationCap className="w-5 h-5 hidden md:block flex-shrink-0" />,
+    mobileText: "Free Generative UI course on DeepLearning.AI",
+    desktopText:
+      "Build Interactive Agents with Generative UI: our new free DeepLearning.AI course",
+    buttonText: "Start the course",
+    href: "https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/",
   },
 ];
 
@@ -146,6 +147,12 @@ export function Banners() {
           </div>
           <Link
             href={content.href}
+            target={content.href.startsWith("http") ? "_blank" : undefined}
+            rel={
+              content.href.startsWith("http")
+                ? "noopener noreferrer"
+                : undefined
+            }
             className="text-xs md:text-sm items-center flex px-2 py-0.5 md:px-4 md:py-1 no-underline whitespace-nowrap rounded-lg flex-shrink-0 transition-all duration-100"
             style={{
               background: "var(--accent-light, rgba(109, 69, 249, 0.12))",
diff --git a/showcase/shell-docs/src/components/brand-nav.tsx b/showcase/shell-docs/src/components/brand-nav.tsx
@@ -7,27 +7,28 @@ import { SearchTrigger } from "./search-trigger";
 import { CopilotKitMark } from "./copilotkit-mark";
 import RocketIcon from "./icons/rocket";
 import ConsoleIcon from "./icons/console";
-import CloudIcon from "./icons/cloud";
+import LightbulbIcon from "./icons/lightbulb";
 import ExternalLinkIcon from "./icons/external-link";
 
-// Cloud sign-up CTA destination. UTM params let marketing attribute
-// navbar-driven sign-ups distinctly from in-content SignupLink clicks.
-const CLOUD_CTA_HREF =
+// Enterprise Intelligence Platform sign-up CTA. UTM params let marketing
+// attribute navbar-driven sign-ups distinctly from in-content SignupLink
+// and OpsPlatformCTA clicks. Exported so MobileTopNav reuses the same URL.
+export const INTELLIGENCE_CTA_HREF =
   "https://dashboard.operations.copilotkit.ai/?utm_source=docs&utm_medium=cta&utm_campaign=intelligence&utm_content=navbar";
 
-// LEFT cluster — Docs / Reference / Free Developer Access. Visual pattern
-// (icon-next-to-label) mirrors canonical.
+export const TALK_TO_ENGINEER_HREF =
+  "https://copilotkit.ai/talk-to-an-engineer";
+
+// LEFT cluster — Docs / Reference / Intelligence sign-up. Visual pattern
+// (icon-next-to-label) mirrors canonical. The third slot label matches the
+// in-content OpsPlatformCTA default ("Get Intelligence free") so the
+// conversion path reads consistently from navbar to body to footer.
 type LeftLink = {
   href: string;
   label: string;
   icon: React.ReactNode;
   target?: "_blank" | "_self";
   showExternalLinkIcon?: boolean;
-  // Free Developer Access only renders at ≥1100px (same breakpoint as the
-  // Talk-to-Engineer pill). Below that, the navbar is too crowded; the
-  // in-content `<SignupLink>` components on quickstart and feature pages
-  // carry the conversion path.
-  hideAtNarrow?: boolean;
 };
 
 const LEFT_LINKS: LeftLink[] = [
@@ -42,12 +43,11 @@ const LEFT_LINKS: LeftLink[] = [
     href: "/reference",
   },
   {
-    icon: <CloudIcon className="text-[var(--text-secondary)]" />,
-    label: "Free Developer Access",
-    href: CLOUD_CTA_HREF,
+    icon: <LightbulbIcon className="text-[var(--text-secondary)]" />,
+    label: "Get Intelligence free",
+    href: INTELLIGENCE_CTA_HREF,
     target: "_blank",
     showExternalLinkIcon: true,
-    hideAtNarrow: true,
   },
 ];
 
@@ -69,7 +69,7 @@ export function BrandNav(_props: BrandNavProps = {}) {
 
   const handleTalkToEngineersClick = () => {
     posthog?.capture("talk_to_us_clicked", { location: "docs_nav" });
-    window.location.href = "https://copilotkit.ai/talk-to-an-engineer";
+    window.location.href = TALK_TO_ENGINEER_HREF;
   };
 
   const handleFreeDeveloperAccessClick = () => {
@@ -103,17 +103,10 @@ export function BrandNav(_props: BrandNavProps = {}) {
             </Link>
             <ul className="hidden gap-6 items-center h-full md:flex me-auto">
               {LEFT_LINKS.map((link) => {
-                const hideIconAtNarrow =
-                  link.label === "Docs" || link.label === "Reference";
                 const isActive = activeRoute === link.href;
-                const isFreeDevAccess = link.label === "Free Developer Access";
+                const isFreeDevAccess = link.label === "Get Intelligence free";
                 return (
-                  <li
-                    key={link.href}
-                    className={`relative h-full group ${
-                      link.hideAtNarrow ? "[@media(width<1100px)]:hidden" : ""
-                    }`}
-                  >
+                  <li key={link.href} className="relative h-full group">
                     <Link
                       href={link.href}
                       target={link.target}
@@ -127,13 +120,7 @@ export function BrandNav(_props: BrandNavProps = {}) {
                       } hover:opacity-100 transition-opacity duration-300`}
                     >
                       <span className="flex gap-2 items-center h-full text-[var(--text-secondary)]">
-                        <span
-                          className={
-                            hideIconAtNarrow
-                              ? "[@media(width<808px)]:hidden"
-                              : ""
-                          }
-                        >
+                        <span className="[@media(width<808px)]:hidden">
                           {link.icon}
                         </span>
                         <span className="text-sm font-medium whitespace-nowrap">
diff --git a/showcase/shell-docs/src/components/icons/lightbulb.tsx b/showcase/shell-docs/src/components/icons/lightbulb.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface LightbulbIconProps {
+  className?: string;
+}
+
+const DEFAULT_CLASSNAME = "text-icon";
+
+const LightbulbIcon = ({ className }: LightbulbIconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={[DEFAULT_CLASSNAME, className].filter(Boolean).join(" ")}
+    >
+      <path
+        d="M11.875 17.5C11.875 17.6658 11.8092 17.8247 11.6919 17.9419C11.5747 18.0592 11.4158 18.125 11.25 18.125H8.75C8.58424 18.125 8.42527 18.0592 8.30806 17.9419C8.19085 17.8247 8.125 17.6658 8.125 17.5C8.125 17.3342 8.19085 17.1753 8.30806 17.0581C8.42527 16.9408 8.58424 16.875 8.75 16.875H11.25C11.4158 16.875 11.5747 16.9408 11.6919 17.0581C11.8092 17.1753 11.875 17.3342 11.875 17.5ZM16.875 8.125C16.8767 9.16091 16.6432 10.1837 16.1922 11.1167C15.7411 12.0497 15.0844 12.8688 14.2719 13.5125C14.0857 13.6594 13.9354 13.8474 13.832 14.0617C13.7285 14.2761 13.6747 14.5113 13.6747 14.7492V15.625C13.6747 15.9565 13.543 16.2745 13.3086 16.5089C13.0742 16.7433 12.7562 16.875 12.4247 16.875H7.5C7.16848 16.875 6.85054 16.7433 6.61612 16.5089C6.3817 16.2745 6.25 15.9565 6.25 15.625V14.7492C6.25 14.5133 6.19686 14.2803 6.09452 14.0671C5.99218 13.8538 5.84324 13.6661 5.65859 13.5172C4.85194 12.8778 4.19914 12.0658 3.74865 11.1407C3.29816 10.2155 3.06158 9.20057 3.05625 8.17109C3.03281 4.4625 6.025 1.39219 9.72734 1.25469C10.6437 1.22043 11.5573 1.37206 12.4135 1.70043C13.2697 2.02881 14.0508 2.5273 14.7104 3.16559C15.3699 3.80388 15.8945 4.56861 16.2528 5.41386C16.6111 6.25911 16.7959 7.16778 16.7969 8.08594L16.875 8.125ZM15.625 8.125C15.624 7.33968 15.4661 6.56254 15.1604 5.83946C14.8547 5.11637 14.4072 4.46202 13.8442 3.91549C13.2812 3.36895 12.6141 2.94114 11.8826 2.65692C11.1511 2.3727 10.3699 2.23774 9.58516 2.26016C6.4625 2.37734 3.93828 4.96094 3.95781 8.16172C3.96221 9.00329 4.16544 9.83185 4.5494 10.5803C4.93336 11.3287 5.48732 11.9756 6.16797 12.4703C6.50923 12.7196 6.7869 13.0464 6.97818 13.4239C7.16947 13.8014 7.26896 14.219 7.26875 14.6422V15.625H12.4188V14.7492C12.418 14.3245 12.5163 13.9053 12.7057 13.5247C12.8952 13.144 13.1707 12.8128 13.5102 12.557C14.1722 12.0331 14.7071 11.3664 15.0742 10.6063C15.4413 9.84616 15.6313 9.01183 15.6297 8.16719L15.625 8.125ZM10 4.375C9.00544 4.375 8.05161 4.77009 7.34835 5.47335C6.64509 6.17661 6.25 7.13044 6.25 8.125C6.25 8.29076 6.31585 8.44973 6.43306 8.56694C6.55027 8.68415 6.70924 8.75 6.875 8.75C7.04076 8.75 7.19973 8.68415 7.31694 8.56694C7.43415 8.44973 7.5 8.29076 7.5 8.125C7.5 7.46196 7.76339 6.82607 8.23223 6.35723C8.70107 5.88839 9.33696 5.625 10 5.625C10.1658 5.625 10.3247 5.55915 10.4419 5.44194C10.5592 5.32473 10.625 5.16576 10.625 5C10.625 4.83424 10.5592 4.67527 10.4419 4.55806C10.3247 4.44085 10.1658 4.375 10 4.375Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default LightbulbIcon;
diff --git a/showcase/shell-docs/src/components/mobile-top-nav.tsx b/showcase/shell-docs/src/components/mobile-top-nav.tsx
@@ -3,21 +3,45 @@
 import Link from "next/link";
 import { SidebarTrigger } from "fumadocs-ui/components/layout/sidebar";
 import { Menu } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
 import { SearchTrigger } from "./search-trigger";
 import { CopilotKitMark } from "./copilotkit-mark";
+import LightbulbIcon from "./icons/lightbulb";
+import { INTELLIGENCE_CTA_HREF, TALK_TO_ENGINEER_HREF } from "./brand-nav";
 
 // Mobile-only top nav. Replaces shell-docs's BrandNav on small viewports
-// because BrandNav's full chrome (4 tabs + right cluster + slanted SVG
-// wings) doesn't fit. Rendered via DocsLayout's `nav.component` slot so
-// it sits INSIDE the SidebarProvider — `SidebarTrigger` toggles the
-// Fumadocs mobile sidebar (`#nd-sidebar-mobile`), which natively renders
-// the page tree we pass to DocsLayout.
+// because BrandNav's full chrome (3 tabs + Talk-to-Engineer pill +
+// slanted SVG wings) doesn't fit. Rendered via DocsLayout's
+// `nav.component` slot so it sits INSIDE the SidebarProvider —
+// `SidebarTrigger` toggles the Fumadocs mobile sidebar
+// (`#nd-sidebar-mobile`), which natively renders the page tree we pass
+// to DocsLayout.
 //
 // Positioned `fixed` (mirrors Fumadocs's default Navbar) because the
 // nav.component slot otherwise becomes a flex-row sibling of LayoutBody
 // inside shell-docs's outer `<main className="flex …">` — without
 // fixed positioning, the nav swallows the left half of the viewport.
+//
+// The Talk-to-Engineer and Get-Intelligence-free CTAs mirror the
+// desktop BrandNav cluster: same destinations, same PostHog events
+// (`talk_to_us_clicked` / `try_for_free_clicked`) with `location:
+// "docs_navbar_mobile"` so analytics can split mobile from desktop
+// (which uses `docs_nav` / `docs_navbar_left`). Matches the canonical
+// docs MobileSidebar pattern.
 export function MobileTopNav() {
+  const posthog = usePostHog();
+
+  const handleTalkToEngineersClick = () => {
+    posthog?.capture("talk_to_us_clicked", { location: "docs_navbar_mobile" });
+    window.location.href = TALK_TO_ENGINEER_HREF;
+  };
+
+  const handleIntelligenceClick = () => {
+    posthog?.capture("try_for_free_clicked", {
+      location: "docs_navbar_mobile",
+    });
+  };
+
   return (
     <header
       id="nd-subnav"
@@ -39,6 +63,44 @@ export function MobileTopNav() {
           Docs
         </span>
       </Link>
+      {/* Get Intelligence free — muted icon, matches the desktop
+       * BrandNav treatment for the same CTA. */}
+      <Link
+        href={INTELLIGENCE_CTA_HREF}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={handleIntelligenceClick}
+        aria-label="Get Intelligence free"
+        title="Get Intelligence free"
+        className="flex items-center justify-center w-10 h-10 rounded-md text-[var(--text-muted)] hover:text-[var(--text)] hover:bg-[var(--bg-elevated)]"
+      >
+        <LightbulbIcon />
+      </Link>
+      {/* Talk to an Engineer — compact gradient pill, mirrors the
+       * desktop md-to-1099px calendar button. */}
+      <button
+        type="button"
+        onClick={handleTalkToEngineersClick}
+        aria-label="Talk to an engineer"
+        title="Talk to an Engineer"
+        className="flex justify-center items-center w-9 h-9 rounded-full bg-gradient-to-r from-indigo-500/90 to-purple-500/90 text-white shadow-sm hover:from-indigo-500 hover:to-purple-500 hover:shadow-md transition-all duration-200 cursor-pointer relative overflow-hidden after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:-translate-x-full hover:after:translate-x-[100%] after:transition-transform after:duration-700 after:pointer-events-none"
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" />
+        </svg>
+      </button>
       <SearchTrigger />
       <SidebarTrigger
         className="flex items-center justify-center w-10 h-10 -mr-1 rounded-md text-[var(--text-muted)] hover:text-[var(--text)] hover:bg-[var(--bg-elevated)]"
