docs(nx-dev): update powerpack features description (#28566)

nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx

@@ -1,6 +1,7 @@
 import {
   ArrowsRightLeftIcon,
   BanknotesIcon,
+  BoltIcon,
   ChartBarSquareIcon,
   ChevronRightIcon,
   ClipboardDocumentIcon,
@@ -15,6 +16,7 @@ import { useEffect } from 'react';
 import { BentoGrid, BentoGridItem } from './bento-grid';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { SectionHeading } from '@nx/nx-dev/ui-common';
+import Link from 'next/link';
 
 export function SolveYourCi(): JSX.Element {
   return (
@@ -182,6 +184,28 @@ export function SolveYourCi(): JSX.Element {
                 </p>
               </div>
             </div>
+            <div className="flex items-start gap-6">
+              <div className="rounded-full p-3 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
+                <BoltIcon className="h-5 w-5 text-slate-900 dark:text-slate-100" />
+              </div>
+              <div>
+                <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
+                  Nx Powerpack included
+                </h4>
+                <p className="mt-2">
+                  A suite of paid extensions for the Nx CLI specifically
+                  designed for enterprises, built and supported by the Nx core
+                  team.{' '}
+                  <Link
+                    href="/powerpack"
+                    title="Learn more about Nx Powerpack"
+                    className="font-semibold underline"
+                  >
+                    Learn more about Nx Powerpack →
+                  </Link>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>

nx-dev/ui-powerpack/src/lib/get-started.tsx

@@ -9,11 +9,7 @@ export function GetStarted(): ReactElement {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-3xl text-center">
           <SectionHeading as="h2" variant="title">
-            Premium features, <br /> carefully crafted DX
-          </SectionHeading>
-          <SectionHeading as="p" variant="subtitle" className="text mt-6">
-            Expand your capabilities with Nx Powerpack, <br /> a suite of
-            advanced tools designed for enterprises.
+            Get started in minutes
           </SectionHeading>
         </div>
 

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

@@ -35,8 +35,9 @@ export function Hero(): ReactElement {
           Nx Powerpack
         </SectionHeading>
         <SectionHeading as="p" variant="subtitle" className="mt-6 text-center">
-          A suite of paid extensions for the Nx CLI specifically designed for
-          enterprises, <Strong>built and supported by the Nx core team</Strong>.
+          A suite of paid extensions for the Nx CLI{' '}
+          <Strong>specifically designed for enterprises</Strong>, built and
+          supported by the Nx core team.
         </SectionHeading>
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <ButtonLink

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

@@ -25,7 +25,7 @@ export function PowerpackFeatures(): ReactElement {
   return (
     <section className="relative isolate">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        <div className="mt-32 grid grid-cols-1 gap-8 lg:grid-cols-2">
           <div className="col-span-full flex max-w-full flex-col gap-16 bg-white/50 px-6 py-16 ring-1 ring-slate-200 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-full lg:flex-row lg:items-center lg:py-16 xl:px-16 dark:bg-white/5 dark:ring-white/10">
             <div className="xl:max-w-xl">
               <SectionHeading
@@ -37,7 +37,7 @@ export function PowerpackFeatures(): ReactElement {
                 Self-hosted cache storage
               </SectionHeading>
               <p className="mt-6 text-pretty text-lg">
-                Nx Powerpack enables you to use <Strong>Amazon S3</Strong> or a{' '}
+                Use <Strong>Amazon S3</Strong> or a{' '}
                 <Strong>shared network drive</Strong> as your remote cache
                 storage, offering a flexible, self-managed solution for faster
                 builds. Nx Powerpack self-hosted cache storage is{' '}
@@ -78,10 +78,10 @@ export function PowerpackFeatures(): ReactElement {
               <p className="mt-6 text-pretty text-lg">
                 Common VCS providers require folder-based ownership definitions.
                 Now, define and manage ownership where it matters—
-                <Strong>at the project level</Strong>
+                <Strong>at the project level</Strong>.
               </p>
               <p className="mt-6 text-pretty text-lg">
-                Nx Powerpack codeowners bridges this gap by{' '}
+                Bridge the gap by{' '}
                 <Strong>
                   automatically tracking changes and syncing ownership data
                 </Strong>{' '}
@@ -112,10 +112,8 @@ export function PowerpackFeatures(): ReactElement {
                 Workspace conformance
               </SectionHeading>
               <p className="mt-6 text-pretty text-lg">
-                Ensuring consistent code quality and long-term maintainability
-                across large teams is critical. Nx Powerpack allows you to{' '}
                 <Strong>
-                  define and run conformance rules throughout your workspace
+                  Define and run conformance rules throughout your workspace
                 </Strong>
                 , leverage built-in rules or{' '}
                 <Strong>
@@ -124,7 +122,7 @@ export function PowerpackFeatures(): ReactElement {
                 </Strong>
               </p>
               <p className="mt-6 text-pretty text-lg">
-                With Nx Cloud Enterprise Edition, you can{' '}
+                With Nx Enterprise, you can{' '}
                 <Strong>
                   upload your custom rules to your Nx Cloud organization
                 </Strong>{' '}
@@ -143,6 +141,89 @@ export function PowerpackFeatures(): ReactElement {
               </ButtonLink>
             </div>
           </div>
+          <div className="col-span-2 flex max-w-full flex-col gap-16 bg-slate-50/80 px-6 py-16 ring-1 ring-slate-200 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-full lg:flex-row lg:items-center lg:py-16 xl:px-16 dark:bg-white/15 dark:ring-white/10">
+            <div className="relative hidden h-full w-64 shrink-0 overflow-hidden lg:block">
+              <img
+                src="/images/powerpack/trust-secure-light.avif"
+                alt="trust & secure illustration"
+                className="absolute inset-0 block -translate-y-[85px] scale-150 transform dark:hidden"
+              />
+              <img
+                src="/images/powerpack/trust-secure-dark.avif"
+                alt="trust & secure illustration"
+                className="absolute inset-0 hidden -translate-y-[85px] scale-150 transform dark:block"
+              />
+            </div>
+            <div>
+              <SectionHeading
+                as="h2"
+                variant="title"
+                id="trustworthy-and-secure"
+                className="scroll-mt-48"
+              >
+                Trustworthy and secure
+              </SectionHeading>
+              <p className="mt-6 text-pretty text-lg">
+                Nx Powerpack is reliably maintained by the Nx team. Nx (the
+                company) adheres to strict security and data-handling standards,
+                including compliance with <Strong>SOC 2</Strong> (Type 1 and
+                Type 2) and <Strong>GDPR</Strong>.
+              </p>
+
+              <div className="mt-6">
+                <ButtonLink
+                  href="https://security.nx.app"
+                  target="_blank"
+                  title="Learn how to set up conformance rules"
+                  variant="secondary"
+                  size="default"
+                >
+                  See our Trust Report
+                </ButtonLink>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-16 bg-slate-50/80 px-6 py-16 ring-1 ring-slate-200 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:justify-between lg:py-16 xl:px-16 dark:bg-white/15 dark:ring-white/10">
+            <div className="max-w-2xl">
+              <SectionHeading
+                as="h2"
+                variant="title"
+                id="faster-procurement"
+                className="scroll-mt-48"
+              >
+                Faster procurement, simpler licensing
+              </SectionHeading>
+              <p className="mt-6 text-pretty text-lg">
+                A simple{' '}
+                <Strong>
+                  licensing model that reduces red tape and speeds up
+                  procurement processes
+                </Strong>
+                .Your teams can get started quickly without lengthy
+                negotiations, ensuring a faster go-to-market.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-16 bg-slate-50/80 px-6 py-16 ring-1 ring-slate-200 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:justify-between lg:py-16 xl:px-16 dark:bg-white/15 dark:ring-white/10">
+            <div className="max-w-2xl">
+              <SectionHeading
+                as="h2"
+                variant="title"
+                id="included-by-default"
+                className="scroll-mt-48"
+              >
+                Ready to go for Nx Enterprise
+              </SectionHeading>
+              <p className="mt-6 text-pretty text-lg">
+                <Strong>
+                  Nx Powerpack is included at no extra cost for Nx Enterprise
+                  customer
+                </Strong>
+                , unlocking additional capabilities without needing to manage
+                more tools or onboard a new vendor.
+              </p>
+            </div>
+          </div>
         </div>
       </div>