miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(nx-dev): add trial pages for Powerpack and Enterprise, update contact sales team page (#29554)

Browse Source
This commit is contained in:
Nicholas Cunningham 2025-01-10 10:15:36 -07:00 committed by GitHub
parent dbdb72aee2
commit d30a84f49c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 53013 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
nx-dev/nx-dev/app/powerpack/page.tsx
View File

@ -5,9 +5,9 @@ import {
Hero,
PowerpackFeatures,
} from '@nx/nx-dev/ui-powerpack';
import { contactButton } from '../../lib/components/headerCtaConfigs';
import type { Metadata } from 'next';
import { type ReactElement } from 'react';
export const metadata: Metadata = {
title: 'Nx Powerpack',
@ -32,10 +32,10 @@ export const metadata: Metadata = {
},
};
export default function NxPowerPackPage(): JSX.Element {
export default function NxPowerPackPage(): ReactElement {
const headerCTAConfig: ButtonLinkProps[] = [
{
href: 'https://cloud.nx.app/powerpack/purchase?licenseBusinessType=small&utm_source=nx.dev&utm_medium=referral&utm_campaign=nx-powerpackurl',
href: '/powerpack/trial',
variant: 'primary',
size: 'small',
title: 'Request a free trial',

2
nx-dev/nx-dev/lib/components/headerCtaConfigs.tsx
View File

@ -2,7 +2,7 @@ import { ButtonLinkProps } from '@nx/nx-dev/ui-common';
import { NxCloudAnimatedIcon } from '@nx/nx-dev/ui-icons';
export const requestFreeTrial: ButtonLinkProps = {
href: '/contact/sales',
href: '/enterprise/trial',
variant: 'primary',
size: 'small',
title: 'Request a free trial',

15
nx-dev/nx-dev/pages/contact/sales.tsx
View File

@ -1,21 +1,22 @@
import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';
import { Footer, Header } from '@nx/nx-dev/ui-common';
import { TalkToOurSalesTeam } from '@nx/nx-dev/ui-contact';
import { TalkToOurTeam } from '@nx/nx-dev/ui-contact';
import { type ReactElement } from 'react';
export function ContactSales(): JSX.Element {
export function ContactSales(): ReactElement {
const router = useRouter();
return (
<>
<NextSeo
title="Talk to our Sales team"
description="We’re here to help you find the right plan and pricing for your needs and discuss how Nx Cloud Enterprise can drive better business outcomes for your organization."
title="Contact Nx Sales – Discover the Best Solution for Your Team"
description="Get in touch with Nx experts to learn how we can optimize your development workflow. Whether you're scaling up or seeking enhanced CI performance, our team is here to help."
openGraph={{
url: 'https://nx.dev' + router.asPath,
title: 'Talk to our Sales team',
title: 'Contact Nx Sales – Discover the Best Solution for Your Team',
description:
'We’re here to help you find the right plan and pricing for your needs and discuss how Nx Cloud Enterprise can drive better business outcomes for your organization.',
"Get in touch with Nx experts to learn how we can optimize your development workflow. Whether you're scaling up or seeking enhanced CI performance, our team is here to help.",
images: [
{
url: 'https://nx.dev/socials/nx-media.png',
@ -32,7 +33,7 @@ export function ContactSales(): JSX.Element {
<Header />
<main id="main" role="main" className="py-24 lg:py-32">
<div>
<TalkToOurSalesTeam />
<TalkToOurTeam />
</div>
</main>
<Footer />

2
nx-dev/nx-dev/pages/enterprise.tsx → nx-dev/nx-dev/pages/enterprise/index.tsx
View File

@ -14,7 +14,7 @@ import {
TestimonialCarousel,
VmwareTestimonial,
} from '@nx/nx-dev/ui-enterprise';
import { requestFreeTrial } from '../lib/components/headerCtaConfigs';
import { requestFreeTrial } from '../../lib/components/headerCtaConfigs';
import { ReactElement } from 'react';
export function Enterprise(): ReactElement {

44
nx-dev/nx-dev/pages/enterprise/trial.tsx Normal file
View File

@ -0,0 +1,44 @@
import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';
import { Footer, Header } from '@nx/nx-dev/ui-common';
import { TrialNxEnterprise } from '@nx/nx-dev/ui-enterprise';
import { type ReactElement } from 'react';
export function EnterpriseTrial(): ReactElement {
const router = useRouter();
return (
<>
<NextSeo
title="Try Nx Enterprise - Scalable CI Solutions for Your Team"
description="Request a free Nx Enterprise trial to experience advanced CI features and premium support, designed to help your team ship faster and more reliably."
openGraph={{
url: 'https://nx.dev' + router.asPath,
title: 'Try Nx Enterprise - Scalable CI Solutions for Your Team',
description:
'Request a free Nx Enterprise trial to experience advanced CI features and premium support, designed to help your team ship faster and more reliably.',
images: [
{
url: 'https://nx.dev/socials/nx-media.png',
width: 800,
height: 421,
alt: 'Nx: Smart Monorepos · Fast CI',
type: 'image/jpeg',
},
],
siteName: 'Nx',
type: 'website',
}}
/>
<Header />
<main id="main" role="main" className="py-24 lg:py-32">
<div>
<TrialNxEnterprise />
</div>
</main>
<Footer />
</>
);
}
export default EnterpriseTrial;

45
nx-dev/nx-dev/pages/powerpack/trial.tsx Normal file
View File

@ -0,0 +1,45 @@
import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';
import { Footer, Header } from '@nx/nx-dev/ui-common';
import { TrialNxPowerpack } from '@nx/nx-dev/ui-powerpack';
import { type ReactElement } from 'react';
export function PowerpackTrial(): ReactElement {
const router = useRouter();
return (
<>
<NextSeo
title="Start Your Nx Powerpack Trial - Speed and Scale for Monorepos"
description="Unlock self-hosted cache storage, enforce workspace conformance, and manage codeowners for your monorepos. Start your free Nx Powerpack trial today!"
openGraph={{
url: 'https://nx.dev' + router.asPath,
title:
'Start Your Nx Powerpack Trial - Speed and Scale for Monorepos',
description:
'Unlock self-hosted cache storage, enforce workspace conformance, and manage codeowners for your monorepos. Start your free Nx Powerpack trial today!',
images: [
{
url: 'https://nx.dev/socials/nx-media.png',
width: 800,
height: 421,
alt: 'Nx: Smart Monorepos · Fast CI',
type: 'image/jpeg',
},
],
siteName: 'Nx',
type: 'website',
}}
/>
<Header />
<main id="main" role="main" className="py-24 lg:py-32">
<div>
<TrialNxPowerpack />
</div>
</main>
<Footer />
</>
);
}
export default PowerpackTrial;

159
nx-dev/nx-dev/pages/whitepaper-fast-ci.tsx Normal file
View File

@ -0,0 +1,159 @@
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 {
CapitalOneIcon,
CaterpillarIcon,
RoyalBankOfCanadaIcon,
ShopifyIcon,
SiriusxmAlternateIcon,
} from '@nx/nx-dev/ui-icons';
import { type ReactElement } from 'react';
import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
export function WhitePaperFastCI(): ReactElement {
const router = useRouter();
return (
<>
<NextSeo
title="Fast CI for Monorepos - Speed Up Development and Cut Costs"
description="Download our in-depth whitepaper to discover strategies for reducing build times and boosting CI performance. Nx's enterprise-grade tools are built for large, fast-moving teams."
openGraph={{
url: 'https://nx.dev' + router.asPath,
title: 'Fast CI for Monorepos - Speed Up Development and Cut Costs',
description:
"Download our in-depth whitepaper to discover strategies for reducing build times and boosting CI performance. Nx's enterprise-grade tools are built for large, fast-moving teams.",
images: [
{
url: 'https://nx.dev/socials/nx-media.png',
width: 800,
height: 421,
alt: 'Nx: Smart Monorepos · Fast CI',
type: 'image/jpeg',
},
],
siteName: 'Nx',
type: 'website',
}}
/>
<Header />
<main id="main" role="main" className="py-24 lg:py-32">
<div>
<section id="whitepaper-fast-ci">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-3xl text-center">
<SectionHeading
as="h1"
variant="display"
id="enterprise-ci-reimagined"
>
Enterprise CI, Reimagined
</SectionHeading>
<SectionHeading
as="p"
className="mt-6"
variant="subtitle"
id="enterprise-ci-reimagined"
>
Up to 70% Faster Builds for Monorepos
</SectionHeading>
</div>
<div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
<section className="flex-1">
<p className="text-lg leading-relaxed">
The world’s moving fast, and getting products to market
feels like a race that keeps speeding up. Monorepos are
transforming development by enhancing collaboration, code
reuse, and team velocity. But, CI that is not tailored for
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"
>
See how to get fast CI, built for monorepos{' '}
<ArrowLongRightIcon
className="inline-block h-6 w-6 transition group-hover:translate-x-1"
aria-hidden="true"
/>
</a>
<p className="mt-2">(download pdf)</p>
</div>
<figure className="mt-4 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
we wanted from the beginning. There's nothing but
benefits from it. Nx means tooling and efficiency around
our software development lifecycle that empowers us to
move a lot faster, ship code faster and more reliably.”
</p>
</blockquote>
<figcaption className="mt-6 flex items-center gap-x-4 text-sm/6">
<img
alt="Justin Schwartzenberger"
src="https://avatars.githubusercontent.com/u/1243236?v=4"
className="size-8 flex-none rounded-full"
/>
<div>
<div className="font-semibold">
Justin Schwartzenberger
</div>
<div className="text-slate-500">
Principal Software Engineer, SiriusXM
</div>
</div>
<SiriusxmAlternateIcon
aria-hidden="true"
className="ml-auto size-10 text-[#0000EB]"
/>
</figcaption>
</figure>
<div className="mt-12 grid w-full grid-cols-4 place-items-center gap-2">
<CapitalOneIcon
aria-hidden="true"
className="col-span-1 size-28 text-black dark:text-white"
/>
<CaterpillarIcon
aria-hidden="true"
className="col-span-1 size-14 text-[#FFCD11]"
/>
<RoyalBankOfCanadaIcon
aria-hidden="true"
className="col-span-1 size-14 text-black dark:text-white"
/>
<ShopifyIcon
aria-hidden="true"
className="col-span-1 size-14 text-[#7AB55C]"
/>
</div>
</section>
<section className="flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
<HubspotForm
region="na1"
portalId="2757427"
formId="11eff6d1-791d-454d-a7f8-117ee747bf2a"
noScript={true}
loading={<div>Loading...</div>}
/>
</section>
</div>
</div>
</section>
</div>
</main>
<Footer />
</>
);
}
export default WhitePaperFastCI;

52482
nx-dev/nx-dev/public/assets/enterprise/Fast-CI-Whitepaper.pdf Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
nx-dev/nx-dev/public/assets/enterprise/Nx-Enterprise-POV.pdf Normal file
View File

Binary file not shown.

BIN
nx-dev/nx-dev/public/images/customers/enterprise/amir-toole-caseware-headshot.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

1
nx-dev/ui-common/src/index.ts
View File

@ -24,6 +24,7 @@ export * from './lib/testimonials';
export * from './lib/square-dotted-pattern';
export * from './lib/live-stream-notifier';
export * from './lib/webinar-notifier';
export * from './lib/hubspot-form';
export { resourceMenuItems } from './lib/headers/menu-items';
export { eventItems } from './lib/headers/menu-items';

1
nx-dev/ui-contact/src/lib/hubspot-form.tsx → nx-dev/ui-common/src/lib/hubspot-form.tsx
View File

@ -1,3 +1,4 @@
'use client';
import { Component } from 'react';
/**

2
nx-dev/ui-contact/src/index.ts
View File

@ -1,4 +1,4 @@
export * from './lib/contact-links';
export * from './lib/how-can-we-help';
export * from './lib/talk-to-our-sales-team';
export * from './lib/talk-to-our-team';
export * from './lib/talk-to-our-engineering-team';

11
nx-dev/ui-contact/src/lib/talk-to-our-engineering-team.tsx
View File

@ -1,6 +1,5 @@
import { SectionHeading } from '@nx/nx-dev/ui-common';
import { HubspotForm } from './hubspot-form';
import { ReactElement } from 'react';
import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
import { type ReactElement } from 'react';
import {
CapitalOneIcon,
CaterpillarIcon,
@ -22,8 +21,8 @@ export function TalkToOurEngineeringTeam(): ReactElement {
Talk to our engineering team
</SectionHeading>
</div>
<div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-12 md:grid-cols-2 lg:gap-8">
<section className="mt-4">
<div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
<section className="mt-4 flex-1">
<p className="text-lg leading-relaxed">
Contact our Developer Productivity Engineers for demos,
onboarding, and product questions. Share your requirements and
@ -119,7 +118,7 @@ export function TalkToOurEngineeringTeam(): ReactElement {
</div>
</div>
</section>
<section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
<section className="flex-1 self-start rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
<HubspotForm
region="na1"
portalId="2757427"

44
nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx → nx-dev/ui-contact/src/lib/talk-to-our-team.tsx
View File

@ -1,6 +1,5 @@
import { SectionHeading } from '@nx/nx-dev/ui-common';
import { HubspotForm } from './hubspot-form';
import { ReactElement } from 'react';
import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
import { type ReactElement } from 'react';
import {
CapitalOneIcon,
CaterpillarIcon,
@ -13,32 +12,37 @@ import {
VmwareIcon,
} from '@nx/nx-dev/ui-icons';
export function TalkToOurSalesTeam(): ReactElement {
export function TalkToOurTeam(): ReactElement {
return (
<section id="contact-sales">
<section id="contact-team">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-3xl text-center">
<SectionHeading as="h1" variant="display" id="how-can-we-help">
Talk to our sales team
Talk to our team
</SectionHeading>
</div>
<div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-12 md:grid-cols-2 lg:gap-8">
<section className="mt-4">
<div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
<section className="flex-1">
<p className="text-lg leading-relaxed">
We’re here to help you find the right plan and pricing for your
needs and discuss{' '}
<span className="font-medium">
how Nx Cloud Enterprise can drive better business outcomes for
your organization
</span>
.
Whether you’re scaling your team, optimizing CI pipelines, or
exploring the full potential of Nx, we’re here to help. Reach out
to:
</p>
<p className="mt-4 text-lg leading-relaxed">
Fill out the form, and we’ll get back to you to schedule a call or
start the discussion on a shared Slack.
<div className="mt-4">
<ul className="ml-4 list-inside list-disc space-y-2">
<li> Learn about our products and solutions. </li>
<li> Demo our products firsthand and see the difference. </li>
<li> Find the right plan for your unique needs. </li>
</ul>
</div>
<p className="mt-5 text-lg font-bold leading-relaxed">
Let’s Talk!
</p>
<p className="text-lg leading-relaxed">
Fill out the form, an Nx expert with reach out shortly.
</p>
<figure className="mt-12 border-l border-slate-200 pl-8 dark:border-slate-800">
<figure className="mt-12 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 we
@ -118,7 +122,7 @@ export function TalkToOurSalesTeam(): ReactElement {
</div>
</div>
</section>
<section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
<section className="w-full flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
<HubspotForm
region="na1"
portalId="2757427"

1
nx-dev/ui-enterprise/src/index.ts
View File

@ -9,3 +9,4 @@ export * from './lib/vmware-testimonial';
export * from './lib/scale-your-organization';
export * from './lib/testimonial-carousel';
export * from './lib/download-case-study';
export * from './lib/trial-nx-enterprise';

2
nx-dev/ui-enterprise/src/lib/call-to-action.tsx
View File

@ -64,7 +64,7 @@ export function CallToAction(): ReactElement {
<div className="mt-10">
<Link
aria-label="Request a free trial"
href="/contact/sales"
href="/enterprise/trial"
prefetch={false}
title="Request a free trial"
onClick={() =>

16
nx-dev/ui-enterprise/src/lib/hero.tsx
View File

@ -1,6 +1,5 @@
import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
import { ReactElement } from 'react';
import { ChevronRightIcon } from '@heroicons/react/20/solid';
import { type ReactElement } from 'react';
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
export function Hero(): ReactElement {
@ -70,9 +69,9 @@ export function Hero(): ReactElement {
Accelerate your organization's journey to tighter collaboration,
better developer experience, and speed…lots of speed.
</SectionHeading>
<div className="mt-8 flex items-center gap-x-6">
<div className="mt-8 flex items-center gap-x-3">
<ButtonLink
href="/contact/sales"
href="/enterprise/trial"
title="Request a free trial"
variant="primary"
size="default"
@ -86,6 +85,15 @@ export function Hero(): ReactElement {
>
Request a free trial
</ButtonLink>
<ButtonLink
href="/contact/sales"
title="Talk to the team"
variant="secondary"
size="default"
>
Contact sales
</ButtonLink>
</div>
</div>
<div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-8 lg:max-w-none lg:flex-none xl:ml-32">

110
nx-dev/ui-enterprise/src/lib/trial-nx-enterprise.tsx Normal file
View File

@ -0,0 +1,110 @@
import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
import { type ReactElement } from 'react';
import {
CapitalOneIcon,
CasewareIcon,
CaterpillarIcon,
RoyalBankOfCanadaIcon,
ShopifyIcon,
} from '@nx/nx-dev/ui-icons';
import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
export function TrialNxEnterprise(): ReactElement {
return (
<section id="enterprise-trial">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-3xl text-center">
<SectionHeading as="h1" variant="display" id="trial-nx-enterprise">
Discover Your <br />
Nx Enterprise ROI
</SectionHeading>
</div>
<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{' '}
</h3>
<p className="mt-8 text-lg leading-relaxed">
An Nx Enterprise <span className="font-bold">Proof of Value</span>{' '}
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"
href="/assets/enterprise/Nx-Enterprise-POV.pdf"
>
How a Proof of Value works{' '}
<ArrowLongRightIcon
className="inline-block h-6 w-6 transition group-hover:translate-x-1"
aria-hidden="true"
/>
</a>
</div>
<figure className="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
Enterprise?’ and I said, ‘Sure, why not?’ It was actually
pretty easy, and immediately the feedback was, ‘Wow, this is a
huge time saver!’ Once it expired, it was an immediate, ‘Oh
no, what are we going to do?’”
</p>
</blockquote>
<figcaption className="mt-6 flex items-center gap-x-4 text-sm/6">
<img
alt="Amir Toole"
src="/images/customers/enterprise/amir-toole-caseware-headshot.avif"
className="size-8 flex-none rounded-full"
/>
<div>
<div className="font-semibold">Amir Toole</div>
<div className="text-slate-500">
VP of Engineering, Caseware
</div>
</div>
<CasewareIcon
aria-hidden="true"
className="ml-auto size-10 text-[#F56354]"
/>
</figcaption>
</figure>
<div className="mt-12 grid w-full grid-cols-4 place-items-center gap-2">
<CapitalOneIcon
aria-hidden="true"
className="col-span-1 size-28 text-black dark:text-white"
/>
<CaterpillarIcon
aria-hidden="true"
className="col-span-1 size-14 text-[#FFCD11]"
/>
<RoyalBankOfCanadaIcon
aria-hidden="true"
className="col-span-1 size-14 text-black dark:text-white"
/>
<ShopifyIcon
aria-hidden="true"
className="col-span-1 size-14 text-[#7AB55C]"
/>
</div>
</section>
<section className="flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
<HubspotForm
region="na1"
portalId="2757427"
formId="e7f05c82-b56c-4a31-8cf8-a53ca8d69c5b"
noScript={true}
loading={<div>Loading...</div>}
/>
</section>
</div>
</div>
</section>
);
}

1
nx-dev/ui-powerpack/src/index.ts
View File

@ -5,3 +5,4 @@ export * from './lib/powerpack-features';
export * from './lib/get-started';
export * from './lib/powerpack-pricing';
export * from './lib/call-to-action';
export * from './lib/trial-nx-powerpack';

2
nx-dev/ui-powerpack/src/lib/hero.tsx
View File

@ -46,7 +46,7 @@ export function Hero(): ReactElement {
variant="primary"
size="default"
>
Get Powerpack
Buy Powerpack
</ButtonLink>
<a
href={YOUTUBE_URL}

112
nx-dev/ui-powerpack/src/lib/trial-nx-powerpack.tsx Normal file
View File

@ -0,0 +1,112 @@
import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
import { type ReactElement } from 'react';
import {
CapitalOneIcon,
CasewareIcon,
CaterpillarIcon,
RoyalBankOfCanadaIcon,
ShopifyIcon,
} from '@nx/nx-dev/ui-icons';
import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
export function TrialNxPowerpack(): ReactElement {
return (
<section id="trial-nx-powerpack">
<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
<br />
for free
</SectionHeading>
</div>
<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-semibold text-slate-950 dark:text-white">
{' '}
Did you know Powerpack is included in Nx Enterprise?{' '}
</h3>
<p className="mt-8 text-lg leading-relaxed">
Nx Enterprise is how the best companies in the world solve the
performance paradox, obtaining speed and scale.
</p>
<div className="py-12">
<Link
prefetch={false}
className="group text-lg font-semibold italic leading-relaxed underline"
href="/enterprise/trial"
>
Request a trial of Nx Enterprise{' '}
<ArrowLongRightIcon
className="inline-block h-6 w-6 transition group-hover:translate-x-1"
aria-hidden="true"
/>
</Link>
</div>
<figure className="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
Enterprise?’ and I said, ‘Sure, why not?’ it was actually
pretty easy, and immediately the feedback was, ‘Wow, this is a
huge time saver!’ Once it expired, it was an immediate, “Oh
no, what are we going to do?”
</p>
</blockquote>
<figcaption className="mt-6 flex items-center gap-x-4 text-sm/6">
<img
alt="Amir Toole"
src="/images/customers/enterprise/amir-toole-caseware-headshot.avif"
className="size-8 flex-none rounded-full"
/>
<div>
<div className="font-semibold">Amir Toole</div>
<div className="text-slate-500">
VP of Engineering, Caseware
</div>
</div>
<CasewareIcon
aria-hidden="true"
className="ml-auto size-10 text-[#F56354]"
/>
</figcaption>
</figure>
<div className="mt-12 grid w-full grid-cols-4 place-items-center gap-2">
<CapitalOneIcon
aria-hidden="true"
className="col-span-1 size-28 text-black dark:text-white"
/>
<CaterpillarIcon
aria-hidden="true"
className="col-span-1 size-14 text-[#FFCD11]"
/>
<RoyalBankOfCanadaIcon
aria-hidden="true"
className="col-span-1 size-14 text-black dark:text-white"
/>
<ShopifyIcon
aria-hidden="true"
className="col-span-1 size-14 text-[#7AB55C]"
/>
</div>
</section>
<section className="flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
<HubspotForm
region="na1"
portalId="2757427"
formId="51f57ff4-d42d-4d10-b3b6-901f8ec2c530"
noScript={true}
loading={<div>Loading...</div>}
/>
</section>
</div>
</div>
</section>
);
}