docs(nx-dev): Add analytics events & improve CTAs across components (#29592)

Introduced custom event tracking for ebook downloads and sales contact buttons using `sendCustomEvent`. Enhanced call-to-action designs by replacing links with `ButtonLink` components and adjusted styling and text for clarity. Updated webinar links and refined headings for consistency.

nx-dev/nx-dev/pages/whitepaper-fast-ci.tsx

@@ -1,7 +1,12 @@
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
-import { Footer, Header } from '@nx/nx-dev/ui-common';
+import {
-import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
+  ButtonLink,
+  Footer,
+  Header,
+  HubspotForm,
+  SectionHeading,
+} from '@nx/nx-dev/ui-common';
 import {
   CapitalOneIcon,
   CaterpillarIcon,
@@ -10,7 +15,8 @@ import {
   SiriusxmAlternateIcon,
 } from '@nx/nx-dev/ui-icons';
 import { type ReactElement } from 'react';
-import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
 export function WhitePaperFastCI(): ReactElement {
   const router = useRouter();
@@ -70,22 +76,39 @@ export function WhitePaperFastCI(): ReactElement {
                     monorepos can result in slow builds, operational complexity,
                     increased costs and test bottlenecks.
                   </p>
-                  <div className="py-10 italic">
+
-                    <a
+                  <div className="mt-12 text-center">
-                      target="_blank"
+                    <SectionHeading
-                      className="group text-lg font-semibold leading-relaxed underline"
+                      as="p"
-                      href="/assets/enterprise/Fast-CI-Whitepaper.pdf"
+                      variant="subtitle"
+                      className="text-white"
                     >
-                      See how to get fast CI, built for monorepos{' '}
+                      See how to get fast CI, built for monorepos
-                      <ArrowLongRightIcon
+                    </SectionHeading>
-                        className="inline-block h-6 w-6 transition group-hover:translate-x-1"
+                    <ButtonLink
+                      href="/assets/enterprise/Fast-CI-Whitepaper.pdf"
+                      title="Download the ebook"
+                      target="_blank"
+                      variant="secondary"
+                      size="small"
+                      onClick={() =>
+                        sendCustomEvent(
+                          'download-ebook-click',
+                          'whitepaper-fast-ci-hero',
+                          'whitepaper-fast-ci'
+                        )
+                      }
+                      className="mt-2"
+                    >
+                      <ArrowDownTrayIcon
                         aria-hidden="true"
+                        className="size-5 shrink-0"
                       />
-                    </a>
+                      <span>Download the ebook</span>
-                    <p className="mt-2">(download pdf)</p>
+                    </ButtonLink>
                   </div>
 
-                  <figure className="mt-4 rounded-lg bg-slate-100 p-4 pl-8 dark:bg-slate-800">
+                  <figure className="mt-16 rounded-lg bg-slate-100 p-4 pl-8 dark:bg-slate-800">
                     <blockquote className="text-base/7">
                       <p>
                         “The decision to jump to Nx Cloud was really something
@@ -111,7 +134,7 @@ export function WhitePaperFastCI(): ReactElement {
                       </div>
                       <SiriusxmAlternateIcon
                         aria-hidden="true"
-                        className="ml-auto size-10 text-[#0000EB]"
+                        className="ml-auto size-10 rounded text-[#0000EB] dark:bg-slate-200"
                       />
                     </figcaption>
                   </figure>

nx-dev/ui-common/src/lib/webinar-notifier.tsx

@@ -72,7 +72,7 @@ export function WebinarNotifier(): ReactElement | null {
             <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-4">
               <a
                 title="Signup"
-                href="https://bit.ly/3B0Ebfe"
+                href="https://bit.ly/40t8IMN"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex items-center justify-center gap-2 rounded-lg bg-pink-600 px-2 py-2 text-sm font-semibold text-white transition hover:bg-pink-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"

nx-dev/ui-contact/src/lib/talk-to-our-team.tsx

@@ -66,7 +66,7 @@ export function TalkToOurTeam(): ReactElement {
                 </div>
                 <SiriusxmAlternateIcon
                   aria-hidden="true"
-                  className="ml-auto size-10 text-[#0000EB]"
+                  className="ml-auto size-10 rounded text-[#0000EB] dark:bg-slate-200"
                 />
               </figcaption>
             </figure>

nx-dev/ui-customers/src/lib/enterprise-customers.tsx

@@ -26,6 +26,7 @@ import {
   ParamountIcon,
   PaylocityIcon,
   PhilipsIcon,
+  PlexIcon,
   RedBullIcon,
   RoyalBankOfCanadaIcon,
   SainsburysIcon,
@@ -37,12 +38,11 @@ import {
   TMobileIcon,
   VarianIcon,
   VodafoneIcon,
-  PlexIcon,
   ZipariIcon,
 } from '@nx/nx-dev/ui-icons';
 import { DownloadCaseStudy } from '@nx/nx-dev/ui-enterprise';
 import { CustomerTestimonialCarousel } from './customer-testimonial-carousel';
-import { CustomerIconGrid, type CustomerIcon } from './customer-icon-grid';
+import { type CustomerIcon, CustomerIconGrid } from './customer-icon-grid';
 import { type ReactElement } from 'react';
 
 const firstCustomerIcons: CustomerIcon[] = [

nx-dev/ui-enterprise/src/lib/hero.tsx

@@ -1,6 +1,7 @@
 import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import { type ReactElement } from 'react';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 
 export function Hero(): ReactElement {
   return (
@@ -32,24 +33,24 @@ export function Hero(): ReactElement {
       </svg>
       <div className="mx-auto max-w-7xl px-6 pb-24 pt-32 lg:flex lg:px-8 lg:pt-56">
         <div className="mx-auto max-w-2xl lg:mx-0 lg:-mt-12 lg:shrink-0">
-          {/*<p>*/}
+          <p>
-          {/*  <a*/}
+            <a
-          {/*    href="https://bit.ly/3B0Ebfe"*/}
+              href="https://bit.ly/40t8IMN"
-          {/*    title="See live event in details"*/}
+              title="See live event in details"
-          {/*    className="group/event-link inline-flex space-x-6"*/}
+              className="group/event-link inline-flex space-x-6"
-          {/*  >*/}
+            >
-          {/*    <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
+              <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">
-          {/*      Live event*/}
+                Live event
-          {/*    </span>*/}
+              </span>
-          {/*    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
+              <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">
-          {/*      <span>Webinar + live Q&A on Dec 10th</span>*/}
+                <span>Webinar + live Q&A on January 22nd</span>
-          {/*      <ChevronRightIcon*/}
+                <ChevronRightIcon
-          {/*        aria-hidden="true"*/}
+                  aria-hidden="true"
-          {/*        className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
+                  className="size-5 transform transition-all group-hover/event-link:translate-x-1"
-          {/*      />*/}
+                />
-          {/*    </span>*/}
+              </span>
-          {/*  </a>*/}
+            </a>
-          {/*</p>*/}
+          </p>
           <SectionHeading
             id="get-speed-and-scale"
             as="h1"
@@ -91,6 +92,13 @@ export function Hero(): ReactElement {
               title="Talk to the team"
               variant="secondary"
               size="default"
+              onClick={() =>
+                sendCustomEvent(
+                  'contact-sales-click',
+                  'enterprise-hero',
+                  'enterprise'
+                )
+              }
             >
               Contact sales
             </ButtonLink>

nx-dev/ui-enterprise/src/lib/trial-nx-enterprise.tsx

@@ -1,4 +1,4 @@
-import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
+import { ButtonLink, HubspotForm, SectionHeading } from '@nx/nx-dev/ui-common';
 import { type ReactElement } from 'react';
 import {
   CapitalOneIcon,
@@ -7,7 +7,8 @@ import {
   RoyalBankOfCanadaIcon,
   ShopifyIcon,
 } from '@nx/nx-dev/ui-icons';
-import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
 export function TrialNxEnterprise(): ReactElement {
   return (
@@ -22,8 +23,7 @@ export function TrialNxEnterprise(): ReactElement {
         <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
           <section className="flex-1">
             <h3 className="text-3xl font-bold tracking-tight text-slate-950 dark:text-white">
-              {' '}
+              Much more than a simple trial
-              Much more than a simple trial{' '}
             </h3>
 
             <p className="mt-8 text-lg leading-relaxed">
@@ -31,20 +31,34 @@ export function TrialNxEnterprise(): ReactElement {
               is your hands-on opportunity to boost CI & DX, realize Nx’s full
               value, and quantify your ROI. Let us guide you.
             </p>
-            <div className="py-12">
+
-              <a
+            <div className="mt-12 text-center">
-                target="_blank"
+              <SectionHeading as="p" variant="subtitle" className="text-white">
-                className="group text-lg font-semibold italic leading-relaxed underline"
+                How a Proof of Value works?
+              </SectionHeading>
+              <ButtonLink
                 href="/assets/enterprise/Nx-Enterprise-POV.pdf"
+                title="Download the ebook"
+                target="_blank"
+                variant="secondary"
+                size="small"
+                onClick={() =>
+                  sendCustomEvent(
+                    'download-ebook-click',
+                    'enterprise-trial-hero',
+                    'enterprise-trial'
+                  )
+                }
+                className="mt-2"
               >
-                How a Proof of Value works{' '}
+                <ArrowDownTrayIcon
-                <ArrowLongRightIcon
-                  className="inline-block h-6 w-6 transition group-hover:translate-x-1"
                   aria-hidden="true"
+                  className="size-5 shrink-0"
                 />
-              </a>
+                <span>Download the ebook</span>
+              </ButtonLink>
             </div>
-            <figure className="rounded-lg bg-slate-100 p-4 pl-8 dark:bg-slate-800">
+            <figure className="mt-16 rounded-lg bg-slate-100 p-4 pl-8 dark:bg-slate-800">
               <blockquote className="text-base/7">
                 <p>
                   “They asked me a few years ago, ‘Do you want to trial Nx
@@ -56,7 +70,7 @@ export function TrialNxEnterprise(): ReactElement {
               </blockquote>
               <figcaption className="mt-6 flex items-center gap-x-4 text-sm/6">
                 <img
-                  alt="Amir Toole"
+                  alt="Amir Toole, VP of Engineering, Caseware"
                   src="/images/customers/enterprise/amir-toole-caseware-headshot.avif"
                   className="size-8 flex-none rounded-full"
                 />

nx-dev/ui-powerpack/src/lib/trial-nx-powerpack.tsx

@@ -1,4 +1,4 @@
-import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
+import { HubspotForm, SectionHeading } from '@nx/nx-dev/ui-common';
 import { type ReactElement } from 'react';
 import {
   CapitalOneIcon,
@@ -16,7 +16,7 @@ export function TrialNxPowerpack(): ReactElement {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-6xl text-center">
           <SectionHeading as="h1" variant="display" id="try-nx-powerpack">
-            Try Powerpack
+            Try Nx Powerpack
             <br />
             for free
           </SectionHeading>