From 39a79b11b567dd4ed3fae64827578480823584a5 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:32:57 +0000
Subject: [PATCH] feat: move Demo button next to CTA in header right section

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../marketing/layout/header/header.tsx        | 22 ++++++++++++++-----
 .../header/navigation/mobile-navigation.tsx   |  2 --
 .../layout/header/navigation/navigation.tsx   |  6 +----
 .../layout/header/navigation/types.ts         |  1 -
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/modules/marketing/layout/header/header.tsx b/apps/web/src/modules/marketing/layout/header/header.tsx
index 52925e9..ec37619 100644
--- a/apps/web/src/modules/marketing/layout/header/header.tsx
+++ b/apps/web/src/modules/marketing/layout/header/header.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import { useTranslation } from "@turbostarter/i18n";
+import { cn } from "@turbostarter/ui";
+import { buttonVariants } from "@turbostarter/ui-web/button";
+
 import { pathsConfig } from "~/config/paths";
 import { WhyRatingLogo } from "~/modules/common/whyrating-logo";
 import { TurboLink } from "~/modules/common/turbo-link";
@@ -13,11 +17,6 @@ const links = [
     label: "marketing:howItWorks.label",
     href: "/#how-it-works",
   },
-  {
-    label: "marketing:demoLabel",
-    href: pathsConfig.demo.report,
-    variant: "button" as const,
-  },
   {
     label: "billing:pricing.label",
     href: pathsConfig.marketing.pricing,
@@ -33,6 +32,8 @@ const links = [
 ] as const;
 
 export const Header = () => {
+  const { t } = useTranslation("marketing");
+
   return (
     <header className="bg-background/80 sticky inset-0 top-[var(--banner-height)] z-40 w-full py-3 backdrop-blur-sm">
       <div className="flex items-center justify-between px-6 pr-4 sm:container">
@@ -46,7 +47,16 @@ export const Header = () => {
 
         <Navigation links={links} />
 
-        <div className="flex items-center justify-center lg:gap-2">
+        <div className="flex items-center justify-center gap-2">
+          <TurboLink
+            href={pathsConfig.demo.report}
+            className={cn(
+              buttonVariants({ variant: "outline", size: "sm" }),
+              "hidden lg:inline-flex",
+            )}
+          >
+            {t("demoLabel")}
+          </TurboLink>
           <CtaButton className="hidden lg:inline-flex" />
           <MobileNavigation links={links} />
         </div>
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 b8e6bd5..0aad154 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,8 +97,6 @@ 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 a115bc4..4914168 100644
--- a/apps/web/src/modules/marketing/layout/header/navigation/navigation.tsx
+++ b/apps/web/src/modules/marketing/layout/header/navigation/navigation.tsx
@@ -27,11 +27,7 @@ export const Navigation = ({ links }: NavigationProps) => {
               <NavigationMenuLink asChild>
                 <TurboLink
                   href={link.href}
-                  className={cn(
-                    navigationMenuTriggerStyle(),
-                    "href" in link && link.variant === "button" &&
-                      "border bg-primary/5 font-semibold hover:bg-primary/10 rounded-full px-4",
-                  )}
+                  className={navigationMenuTriggerStyle()}
                 >
                   {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 e5a9016..a2babe2 100644
--- a/apps/web/src/modules/marketing/layout/header/navigation/types.ts
+++ b/apps/web/src/modules/marketing/layout/header/navigation/types.ts
@@ -5,7 +5,6 @@ export type NavigationLink =
   | {
       readonly label: TranslationKey;
       readonly href: string;
-      readonly variant?: "default" | "button";
     }
   | {
       readonly label: TranslationKey;