From 8f1dfd276e463e0b08e6fe11390265d2fa5cabe6 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Tue, 1 Oct 2024 19:55:04 -0400
Subject: [PATCH] feat(nx-dev): add nx powerpack to pricing page

Add Nx Powerpack as included with Nx Cloud Enterprise plan on Pricing page.
---
 .../src/lib/plans/enterprise-plan.tsx         | 18 +++++++++++++++
 .../ui-pricing/src/lib/plans/plan-table.tsx   | 23 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
index 01d2cf879343c..e31aeea193dc1 100644
--- a/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
@@ -83,6 +83,24 @@ export function EnterprisePlan({
             outputs.
           </p>
         </li>
+        <li className="flex gap-x-3">
+          <CheckIcon
+            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
+            aria-hidden="true"
+          />
+          <p>
+            <Link
+              href="/powerpack"
+              title="Learn more about Nx Powerpack"
+              prefetch={false}
+              className="font-medium text-slate-700 underline dark:text-slate-300"
+            >
+              Nx Powerpack
+            </Link>
+            : a suite of premium extensions for the Nx CLI specifically designed
+            for enterprises.
+          </p>
+        </li>
       </ul>
     </article>
   );
diff --git a/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
index 43d6f074d5173..b8268bbe7699b 100644
--- a/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
@@ -471,7 +471,7 @@ export function PlanTable(): JSX.Element {
               <span className="font-medium text-slate-700 dark:text-slate-300">
                 Nx Agents
               </span>
-              : native task distribution solution for CI{' '}
+              : native task distribution solution for CI
             </th>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
               <CheckIcon
@@ -557,6 +557,27 @@ export function PlanTable(): JSX.Element {
               <span className="sr-only">yes</span>
             </td>
           </tr>
+          <tr className="text-sm transition hover:bg-slate-50/60 dark:hover:bg-slate-800/60">
+            <th
+              className="min-w-[124px] border-l border-t border-slate-200 px-2 py-1.5 text-left font-normal leading-tight md:min-w-[180px] md:p-2 md:px-3 lg:w-[325px] lg:px-4 lg:py-2.5 lg:pl-8 dark:border-slate-800"
+              scope="row"
+            >
+              <span className="font-medium text-slate-700 dark:text-slate-300">
+                Nx Powerpack
+              </span>
+              : a suite of premium extensions for the Nx CLI specifically
+              designed for enterprises
+            </th>
+            <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
+              Sold separately
+            </td>
+            <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
+              Sold separately
+            </td>
+            <td className="border-l border-r border-t border-slate-200 bg-slate-50/60 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800 dark:bg-slate-800/60">
+              Included
+            </td>
+          </tr>
           <tr className="text-sm transition hover:bg-slate-50/60 dark:hover:bg-slate-800/60">
             <th
               className="min-w-[124px] border-l border-t border-slate-200 px-2 py-1.5 text-left font-normal leading-tight md:min-w-[180px] md:p-2 md:px-3 lg:w-[325px] lg:px-4 lg:py-2.5 lg:pl-8 dark:border-slate-800"