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

@@ -16,6 +16,7 @@ const links = [
   {
     label: "marketing:demoLabel",
     href: pathsConfig.demo.report,
+    variant: "button" as const,
   },
   {
     label: "billing:pricing.label",

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)}
                     >

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>

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;