feat(docs): change banner and add cloud sign-in button (CopilotKit#1844)

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

docs/components/layout/banners.tsx

@@ -7,7 +7,7 @@ import { SiCrewai } from "@icons-pack/react-simple-icons";
 export function Banners() {
   return (
     <>
-      <ModelContextProtocolBanner />
+      <AGUIBanner />
     </>
   )
 }
@@ -40,4 +40,14 @@ export function ModelContextProtocolBanner() {
       </p>
     </Banner>
   )
+}
+
+export function AGUIBanner() {
+  return (
+    <Banner className="w-full text-white bg-indigo-500 dark:bg-indigo-900 h-24 sm:h-14 !important" variant="rainbow" id="agui-banner">
+      <p className="w-3/4">
+        We're officially launching AG-UI, the protocol for agent and user interactivity! <Link href="https://ag-ui.com" target="_blank" className="underline">Learn more</Link>.
+      </p>
+    </Banner>
+  )
 }

docs/components/layout/top-bar.tsx

@@ -1,12 +1,13 @@
 "use client";
 import { SearchIcon } from "lucide-react";
-import { Socials } from "@/components/react/socials";
+import { LinkToCopilotCloud } from "@/components/react/link-to-copilot-cloud";
 
 export function TopBar() {
   return (
     <>
       <div className="p-2 h-[70px] hidden lg:block absolute w-[calc(100vw-var(--fd-sidebar-width)-20px)] ml-[var(--fd-sidebar-width)]">
           <div className="flex justify-end items-center gap-2">
+            <LinkToCopilotCloud />
             <SearchToggle />
         </div>
       </div>

docs/components/react/link-to-copilot-cloud.tsx

@@ -43,8 +43,8 @@ export function LinkToCopilotCloud({
   let cn = `${className}`;
 
   if (asButton) {
-    cn = "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm items-center bg-gradient-to-r from-indigo-200/50 to-purple-200/80 dark:from-indigo-900/40 dark:to-purple-900/50 flex p-2 px-4";
-    cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200 shadow-2xl rounded-lg";
+    cn = "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm items-center bg-gradient-to-r from-indigo-200/50 to-purple-200/80 dark:from-indigo-900/40 dark:to-purple-900/50 flex p-3 px-4";
+    cn += "transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200 rounded-lg";
   } else {
     cn = "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]";
   }
@@ -57,7 +57,7 @@ export function LinkToCopilotCloud({
     >
       {asButton ? <CloudIcon className="w-5 h-5 mr-2" /> : null}
       {
-        children ? children : userId ? "Go to Copilot Cloud" : "Sign up for Copilot Cloud"
+        children ? children : userId ? "Go to Copilot Platform" : "Sign up for Copilot Platform"
       }
     </Link>
   );