From 112a28c410a556c20e84483f7ce0ea5ae67a0917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 22 Feb 2026 22:24:16 +0000
Subject: [PATCH] feat: style Demo nav link as a ghost pill button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/modules/marketing/layout/header/header.tsx     | 1 +
 .../layout/header/navigation/mobile-navigation.tsx          | 2 ++
 .../marketing/layout/header/navigation/navigation.tsx       | 6 +++++-
 .../src/modules/marketing/layout/header/navigation/types.ts | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/modules/marketing/layout/header/header.tsx b/apps/web/src/modules/marketing/layout/header/header.tsx
index bcd85a3..52925e9 100644
--- a/apps/web/src/modules/marketing/layout/header/header.tsx
+++ b/apps/web/src/modules/marketing/layout/header/header.tsx
@@ -16,6 +16,7 @@ const links = [
   {
     label: "marketing:demoLabel",
     href: pathsConfig.demo.report,
+    variant: "button" as const,
   },
   {
     label: "billing:pricing.label",
diff --git a/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx b/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx
index 0aad154..b8e6bd5 100644
--- a/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx
+++ b/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx
@@ -97,6 +97,8 @@ export const MobileNavigation = ({ links }: NavigationProps) => {
                       className={cn(
                         navigationMenuTriggerStyle(),
                         "w-full justify-start text-base font-medium",
+                        "href" in link && link.variant === "button" &&
+                          "border bg-primary/5 font-semibold rounded-full",
                       )}
                       onClick={() => setOpen(false)}
                     >
diff --git a/apps/web/src/modules/marketing/layout/header/navigation/navigation.tsx b/apps/web/src/modules/marketing/layout/header/navigation/navigation.tsx
index 4914168..a115bc4 100644
--- a/apps/web/src/modules/marketing/layout/header/navigation/navigation.tsx
+++ b/apps/web/src/modules/marketing/layout/header/navigation/navigation.tsx
@@ -27,7 +27,11 @@ export const Navigation = ({ links }: NavigationProps) => {
               <NavigationMenuLink asChild>
                 <TurboLink
                   href={link.href}
-                  className={navigationMenuTriggerStyle()}
+                  className={cn(
+                    navigationMenuTriggerStyle(),
+                    "href" in link && link.variant === "button" &&
+                      "border bg-primary/5 font-semibold hover:bg-primary/10 rounded-full px-4",
+                  )}
                 >
                   {t(link.label)}
                 </TurboLink>
diff --git a/apps/web/src/modules/marketing/layout/header/navigation/types.ts b/apps/web/src/modules/marketing/layout/header/navigation/types.ts
index a2babe2..e5a9016 100644
--- a/apps/web/src/modules/marketing/layout/header/navigation/types.ts
+++ b/apps/web/src/modules/marketing/layout/header/navigation/types.ts
@@ -5,6 +5,7 @@ export type NavigationLink =
   | {
       readonly label: TranslationKey;
       readonly href: string;
+      readonly variant?: "default" | "button";
     }
   | {
       readonly label: TranslationKey;