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

@@ -1,21 +1,20 @@
 import {
-  Hero,
-  TrustedBy,
-  FasterAndCheaper,
-  UnderstandWorkspace,
-  EnhancedWithAi,
-  AutomatedAgentsManagement,
   AgentNumberOverTime,
+  AutomatedAgentsManagement,
+  EnhancedWithAi,
+  FasterAndCheaper,
+  Hero,
   Statistics,
+  TrustedBy,
+  UnderstandWorkspace,
 } 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',

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"

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>

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',

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"