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.
This commit is contained in:
Benjamin Cabanes
GitHub
parent
bbbfd9f43b
commit
f57d88a624
@ -1,7 +1,12 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { NextSeo } from 'next-seo';
|
||||
import { Footer, Header } from '@nx/nx-dev/ui-common';
|
||||
import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
|
||||
import {
|
||||
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
|
||||
target="_blank"
|
||||
className="group text-lg font-semibold leading-relaxed underline"
|
||||
href="/assets/enterprise/Fast-CI-Whitepaper.pdf"
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<SectionHeading
|
||||
as="p"
|
||||
variant="subtitle"
|
||||
className="text-white"
|
||||
>
|
||||
See how to get fast CI, built for monorepos{' '}
|
||||
<ArrowLongRightIcon
|
||||
className="inline-block h-6 w-6 transition group-hover:translate-x-1"
|
||||
See how to get fast CI, built for monorepos
|
||||
</SectionHeading>
|
||||
<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>
|
||||
<p className="mt-2">(download pdf)</p>
|
||||
<span>Download the ebook</span>
|
||||
</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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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[] = [
|
||||
|
||||
@ -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>*/}
|
||||
{/* <a*/}
|
||||
{/* href="https://bit.ly/3B0Ebfe"*/}
|
||||
{/* title="See live event in details"*/}
|
||||
{/* 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">*/}
|
||||
{/* Live event*/}
|
||||
{/* </span>*/}
|
||||
{/* <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
|
||||
{/* <span>Webinar + live Q&A on Dec 10th</span>*/}
|
||||
{/* <ChevronRightIcon*/}
|
||||
{/* aria-hidden="true"*/}
|
||||
{/* className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
|
||||
{/* />*/}
|
||||
{/* </span>*/}
|
||||
{/* </a>*/}
|
||||
{/*</p>*/}
|
||||
<p>
|
||||
<a
|
||||
href="https://bit.ly/40t8IMN"
|
||||
title="See live event in details"
|
||||
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">
|
||||
Live event
|
||||
</span>
|
||||
<span className="inline-flex items-center space-x-2 text-sm/6 font-medium">
|
||||
<span>Webinar + live Q&A on January 22nd</span>
|
||||
<ChevronRightIcon
|
||||
aria-hidden="true"
|
||||
className="size-5 transform transition-all group-hover/event-link:translate-x-1"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</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>
|
||||
|
||||
@ -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
|
||||
target="_blank"
|
||||
className="group text-lg font-semibold italic leading-relaxed underline"
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<SectionHeading as="p" variant="subtitle" className="text-white">
|
||||
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{' '}
|
||||
<ArrowLongRightIcon
|
||||
className="inline-block h-6 w-6 transition group-hover:translate-x-1"
|
||||
<ArrowDownTrayIcon
|
||||
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"
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user