feat(nx-dev): add trial pages for Powerpack and Enterprise, update co…

…ntact sales team page

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

@@ -35,7 +35,7 @@ export const metadata: Metadata = {
 export default function NxPowerPackPage(): JSX.Element {
   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,19 +1,19 @@
 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';
 
 export function ContactSales(): JSX.Element {
   const router = useRouter();
 
   return (
     <>
       <NextSeo
-        title="Talk to our Sales team"
+        title="Talk to our 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."
         openGraph={{
           url: 'https://nx.dev' + router.asPath,
-          title: 'Talk to our Sales team',
+          title: 'Talk to our 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.',
           images: [
@@ -32,7 +32,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.tsx → 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,43 @@
+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';
+
+export function EnterpriseTrial(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo
+        title="Nx Enterprise Trial"
+        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."
+        openGraph={{
+          url: 'https://nx.dev' + router.asPath,
+          title: 'Nx Enterprise Trial',
+          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.',
+          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,43 @@
+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';
+
+export function PowerpackTrial(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo
+        title="Powerpack Trial"
+        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."
+        openGraph={{
+          url: 'https://nx.dev' + router.asPath,
+          title: 'Powerpack Trial',
+          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.',
+          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,234 @@
+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,
+  ManIcon,
+  RedwoodJsIcon,
+  RoyalBankOfCanadaIcon,
+  ShopifyIcon,
+  SiriusxmAlternateIcon,
+  StorybookIcon,
+  VmwareIcon,
+} from '@nx/nx-dev/ui-icons';
+
+export function WhitePaperFastCI(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo
+        title="White paper fast CI"
+        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."
+        openGraph={{
+          url: 'https://nx.dev' + router.asPath,
+          title: 'White paper fast CI',
+          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.',
+          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 grid max-w-5xl grid-cols-1 gap-12 md:grid-cols-2 lg:gap-8">
+                <section className="mt-4">
+                  <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 not tailored for monorepos
+                    can result in delays and added costs. Make sure you’re
+                    avoiding these common pitfalls.
+                  </p>
+                  <div className="mt-4">
+                    <ol className="ml-4 list-inside list-decimal space-y-2">
+                      <li>
+                        {' '}
+                        <span className="font-bold">Slow Build Times</span>
+                        <p className="ml-4 mt-2">
+                          As monorepos grow, builds and tests across multiple
+                          projects take longer, bottlenecking even the most
+                          high-performing teams.
+                        </p>{' '}
+                      </li>
+                      <li>
+                        <span className="font-bold">
+                          Operational Complexity
+                        </span>
+                        <p className="ml-4 mt-2">
+                          Managing CI pipelines for monorepos often requires
+                          custom, static configurations that demand constant
+                          tweaking – stealing focus from devs.
+                        </p>
+                      </li>
+                      <li>
+                        <span className="font-bold">Runaway Costs</span>
+                        <p className="ml-4 mt-2">
+                          Inefficient resource allocation means even small
+                          changes can trigger significant compute costs, making
+                          scaling expensive and unsustainable.
+                        </p>
+                      </li>
+                      <li>
+                        <span className="font-bold">Test Bottlenecks</span>
+                        <p className="ml-4 mt-2">
+                          End-to-end test flakiness and long runtimes delay
+                          feedback cycles, frustrating teams and introducing
+                          costly delays in deployment.
+                        </p>
+                      </li>
+                    </ol>
+                  </div>
+                  <p className="mt-8 text-lg font-bold leading-relaxed">
+                    Feeling the impact of these challenges?
+                  </p>
+                  <p className="text-lg leading-relaxed">
+                    Check out our <span className="font-bold">whitepaper</span>{' '}
+                    to see how Nx Cloud users get products to market faster. Or
+                    reach out and we can talk through your team’s unique needs.
+                  </p>
+
+                  <div className="py-10">
+                    <a
+                      target="_blank"
+                      className="mt-4 text-lg font-bold leading-relaxed hover:underline"
+                      href="/assets/enterprise/Fast-CI-Whitepaper.pdf"
+                    >
+                      View whitepaper
+                    </a>
+                  </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="mx-auto mt-12 grid w-full grid-cols-4 gap-2 md:grid-cols-2 lg:mt-12">
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <RoyalBankOfCanadaIcon
+                        aria-hidden="true"
+                        className="size-14 text-black dark:text-white"
+                      />
+                    </div>
+
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <ManIcon
+                        aria-hidden="true"
+                        className="size-14 text-[#E40045]"
+                      />
+                    </div>
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <ShopifyIcon
+                        aria-hidden="true"
+                        className="size-12 text-[#7AB55C]"
+                      />
+                    </div>
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <CapitalOneIcon
+                        aria-hidden="true"
+                        className="size-28 text-black dark:text-white"
+                      />
+                    </div>
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <VmwareIcon
+                        aria-hidden="true"
+                        className="size-28 text-black dark:text-white"
+                      />
+                    </div>
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <StorybookIcon
+                        aria-hidden="true"
+                        className="size-12 text-[#FF4785]"
+                      />
+                    </div>
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <RedwoodJsIcon
+                        aria-hidden="true"
+                        className="size-12 text-[#BF4722]"
+                      />
+                    </div>
+                    <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
+                      <CaterpillarIcon
+                        aria-hidden="true"
+                        className="size-14 text-[#FFCD11]"
+                      />
+                    </div>
+                  </div>
+                </section>
+                <section className="rounded-xl border border-slate-200 bg-white p-8 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-contact/src/lib/hubspot-form.tsx → nx-dev/ui-common/src/lib/hubspot-form.tsx

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