docs(nx-dev): update Nx Cloud CTA links to include UTM parameters (#2…

…9489) 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.
nrwl · Dec 30, 2024 · 8a841cd · 8a841cd
1 parent fbd3db8
commit 8a841cd
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"