From 28d72651d2a98fa184dcdc97f722da3bc2f9237a Mon Sep 17 00:00:00 2001
From: Luis Ibarra <luissebastianibarrav@gmail.com>
Date: Mon, 15 Jun 2026 17:24:05 -0500
Subject: [PATCH] feat(navbar): replace title text with "Try Kite" CTA button

Remove the redundant "Kite" word next to the logo (the logo already
reads "kite"), and turn the plain "Kite" navbar link into a styled
orange "Try Kite" call-to-action button.

The button uses the existing --ifm-color-primary vars so it works in
both light and dark themes. It carries a navbar-try-button class and
uses CSS order:1 to sit after the color-mode toggle (Docusaurus 3.9.2
renders the toggle inside .navbar__items--right), giving a right-side
order of: search, theme toggle, Try Kite. The auto-added external-link
icon is hidden on the button only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 website/docusaurus.config.js |  4 ++--
 website/src/css/custom.css   | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 6d8e7c3..70f7fec 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -66,7 +66,6 @@ const config = {
     ({
       image: 'img/social-card.png',
       navbar: {
-        title: 'Kite',
         logo: {
           alt: 'Kite Logo',
           src: 'img/logo.png',
@@ -78,8 +77,9 @@ const config = {
           },
           {
             href: 'https://kite.ai',
-            label: 'Kite',
+            label: 'Try Kite',
             position: 'right',
+            className: 'navbar-try-button',
           },
         ],
       },
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e7d6a1f..699dcd1 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -44,6 +44,31 @@
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+/* "Try Kite" CTA. order:1 places it after the color-mode toggle,
+   which Docusaurus renders inside .navbar__items--right. */
+.navbar-try-button {
+  background-color: var(--ifm-color-primary);
+  color: #fff !important;
+  border-radius: 0.25em;
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  margin-left: 0.5rem;
+  white-space: nowrap;
+  order: 1;
+}
+
+/* Drop the auto-added external-link icon on the CTA. */
+.navbar-try-button svg {
+  display: none;
+}
+
+.navbar-try-button:hover {
+  background-color: var(--ifm-color-primary-dark);
+  color: #fff !important;
+  text-decoration: none;
+}
+
 .footer--dark {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }