From 8a841cd754040ce198b1be2eb24d103f72219c0e Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Mon, 30 Dec 2024 10:51:08 -0500
Subject: [PATCH] docs(nx-dev): update Nx Cloud CTA links to include UTM
 parameters (#29489)

Replaced internal Nx Cloud links with full URLs containing UTM parameters for better tracking of user interactions across various components. Additionally, minor improvements were made to React type definitions for clarity and consistency.
---
 nx-dev/nx-dev/app/nx-cloud/page.tsx           | 17 ++++++-------
 nx-dev/ui-cloud/src/lib/hero.tsx              |  2 +-
 .../src/lib/headers/documentation-header.tsx  | 25 ++++++-------------
 nx-dev/ui-common/src/lib/headers/header.tsx   |  2 +-
 nx-dev/ui-pricing/src/lib/plans-display.tsx   |  4 +--
 5 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/nx-dev/nx-dev/app/nx-cloud/page.tsx b/nx-dev/nx-dev/app/nx-cloud/page.tsx
index 0ea2572e48cf5..09ae3684c7e70 100644
--- a/nx-dev/nx-dev/app/nx-cloud/page.tsx
+++ b/nx-dev/nx-dev/app/nx-cloud/page.tsx
@@ -1,21 +1,20 @@
 import {
+  AgentNumberOverTime,
+  AutomatedAgentsManagement,
+  EnhancedWithAi,
+  FasterAndCheaper,
   Hero,
+  Statistics,
   TrustedBy,
-  FasterAndCheaper,
   UnderstandWorkspace,
-  EnhancedWithAi,
-  AutomatedAgentsManagement,
-  AgentNumberOverTime,
-  Statistics,
 } from '@nx/nx-dev/ui-cloud';
-
 import {
   ButtonLinkProps,
   CallToAction,
   DefaultLayout,
 } from '@nx/nx-dev/ui-common';
-
 import type { Metadata } from 'next';
+import { ReactElement } from 'react';
 
 export const metadata: Metadata = {
   title: 'Nx Cloud',
@@ -40,10 +39,10 @@ export const metadata: Metadata = {
   },
 };
 
-export default function NxCloudPage(): JSX.Element {
+export default function NxCloudPage(): ReactElement {
   const headerCTAConfig: ButtonLinkProps[] = [
     {
-      href: '/pricing',
+      href: 'https://cloud.nx.app/get-started?utm_source=nx-dev&utm_medium=nx-cloud-header&utm_campaign=get-started',
       variant: 'primary',
       size: 'small',
       title: 'Get started for free',
diff --git a/nx-dev/ui-cloud/src/lib/hero.tsx b/nx-dev/ui-cloud/src/lib/hero.tsx
index 431a92cf3c244..8d94a5bbcce03 100644
--- a/nx-dev/ui-cloud/src/lib/hero.tsx
+++ b/nx-dev/ui-cloud/src/lib/hero.tsx
@@ -27,7 +27,7 @@ export function Hero(): JSX.Element {
         </SectionHeading>
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <ButtonLink
-            href="https://cloud.nx.app"
+            href="https://cloud.nx.app/get-started?utm_source=nx-dev&utm_medium=nx-cloud-hero&utm_campaign=go-to-app"
             title="Get started"
             variant="primary"
             size="default"
diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
index 11e96102260bf..5ec8e63a06db1 100644
--- a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
@@ -1,7 +1,6 @@
 'use client';
-import { Fragment, type JSX } from 'react';
-
-import { GitHubIcon } from '@nx/nx-dev/ui-icons';
+import { Fragment, ReactElement } from 'react';
+import { NxCloudAnimatedIcon, NxIcon } from '@nx/nx-dev/ui-icons';
 import {
   Bars3Icon,
   ChevronDownIcon,
@@ -13,21 +12,11 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { ButtonLink } from '../button';
 import { Popover, Transition } from '@headlessui/react';
-import { TwoColumnsMenu } from './two-columns-menu';
-import {
-  companyItems,
-  eventItems,
-  featuresItems,
-  learnItems,
-  ossProducts,
-  resourceMenuItems,
-  productsMenuItems,
-} from './menu-items';
+import { resourceMenuItems } from './menu-items';
 import { SectionsMenu } from './sections-menu';
 import { DiscordIcon } from '../discord-icon';
-import { NxCloudAnimatedIcon, NxIcon } from '@nx/nx-dev/ui-icons';
 
-function Menu({ tabs }: { tabs: any[] }): JSX.Element {
+function Menu({ tabs }: { tabs: any[] }): ReactElement {
   return (
     <div className="hidden sm:block">
       <nav
@@ -62,7 +51,7 @@ export function DocumentationHeader({
 }: {
   isNavOpen: boolean;
   toggleNav: (value: boolean) => void;
-}): JSX.Element {
+}): ReactElement {
   const router = useRouter();
   let routerPath = router.asPath;
   const isCI: boolean = routerPath.startsWith('/ci');
@@ -338,12 +327,12 @@ export function DocumentationHeader({
             className="items-justified hidden justify-center space-x-4 lg:flex"
           >
             <ButtonLink
-              href="/nx-cloud"
+              href="https://cloud.nx.app/get-started?utm_source=nx-dev&utm_medium=documentation-header&utm_campaign=try-nx-cloud"
               title="Try Nx Cloud for free"
               variant="primary"
               size="small"
             >
-              <NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" />
+              <NxCloudAnimatedIcon className="size-4" aria-hidden="true" />
               <span>Try Nx Cloud for free</span>
             </ButtonLink>
           </nav>
diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 4331a260e94e5..8e662cae10338 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -39,7 +39,7 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement {
 
   const defaultCtaButtons: ButtonLinkProps[] = [
     {
-      href: '/nx-cloud',
+      href: 'https://cloud.nx.app/get-started?utm_source=nx-dev&utm_medium=header&utm_campaign=try-nx-cloud',
       variant: 'primary',
       size: 'small',
       target: '_blank',
diff --git a/nx-dev/ui-pricing/src/lib/plans-display.tsx b/nx-dev/ui-pricing/src/lib/plans-display.tsx
index 7876b1465621f..58feb6667555b 100644
--- a/nx-dev/ui-pricing/src/lib/plans-display.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans-display.tsx
@@ -53,7 +53,7 @@ export function PlansDisplay(): ReactElement {
                 </p>
                 <div className="my-12">
                   <ButtonLink
-                    href="https://cloud.nx.app"
+                    href="https://cloud.nx.app/get-started/?utm_source=nx-dev&utm_medium=nx-cloud-plans&utm_campaign=hobby-plan"
                     aria-describedby="hobby-plan"
                     title="Start now"
                     size="default"
@@ -157,7 +157,7 @@ export function PlansDisplay(): ReactElement {
 
               <div className="my-12">
                 <ButtonLink
-                  href="https://cloud.nx.app"
+                  href="https://cloud.nx.app/get-started/?utm_source=nx-dev&utm_medium=nx-cloud-plans&utm_campaign=team-plan"
                   aria-describedby="team-plan"
                   title="Get started"
                   size="default"