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

nx-dev/nx-dev/app/powerpack/page.tsx

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

nx-dev/nx-dev/lib/components/headerCtaConfigs.tsx

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

nx-dev/nx-dev/pages/contact/sales.tsx

@@ -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"
+        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."
+        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 />

nx-dev/nx-dev/pages/enterprise/index.tsx

@@ -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 {

nx-dev/nx-dev/pages/enterprise/trial.tsx

@@ -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;

nx-dev/nx-dev/pages/powerpack/trial.tsx

@@ -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;

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

@@ -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;

nx-dev/ui-common/src/index.ts

@@ -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';

nx-dev/ui-common/src/lib/hubspot-form.tsx

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

nx-dev/ui-contact/src/index.ts

@@ -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';

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

@@ -1,6 +1,5 @@
-import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
-import { HubspotForm } from './hubspot-form';
+import { type ReactElement } from 'react';
-import { 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">
+        <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
-          <section className="mt-4">
+          <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"

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

@@ -1,6 +1,5 @@
-import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
-import { HubspotForm } from './hubspot-form';
+import { type ReactElement } from 'react';
-import { 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">
+        <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
-          <section className="mt-4">
+          <section className="flex-1">
             <p className="text-lg leading-relaxed">
-              We’re here to help you find the right plan and pricing for your
+              Whether you’re scaling your team, optimizing CI pipelines, or
-              needs and discuss{' '}
+              exploring the full potential of Nx, we’re here to help. Reach out
-              <span className="font-medium">
+              to:
-                how Nx Cloud Enterprise can drive better business outcomes for
-                your organization
-              </span>
-              .
             </p>
-            <p className="mt-4 text-lg leading-relaxed">
+            <div className="mt-4">
-              Fill out the form, and we’ll get back to you to schedule a call or
+              <ul className="ml-4 list-inside list-disc space-y-2">
-              start the discussion on a shared Slack.
+                <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"

nx-dev/ui-enterprise/src/index.ts

@@ -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';

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

@@ -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={() =>

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

@@ -1,6 +1,5 @@
 import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
-import { ReactElement } from 'react';
+import { type ReactElement } from 'react';
-import { ChevronRightIcon } from '@heroicons/react/20/solid';
 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">

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

@@ -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>
+  );
+}

nx-dev/ui-powerpack/src/index.ts

@@ -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';

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

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

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

@@ -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>
+  );
+}