docs(nx-dev): update plans (#28877)

Co-authored-by: Isaac Mann <isaacplmann@users.noreply.github.com>

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

@@ -1,15 +1,10 @@
 import type { Metadata } from 'next';
+import { Faq, Oss, ResourceClasses, PlansDisplay } from '@nx/nx-dev/ui-pricing';
 import {
-  StandardPlans,
-  ComparablePlans,
-  Oss,
-  Faq,
-} from '@nx/nx-dev/ui-pricing';
-import {
+  CallToAction,
+  DefaultLayout,
   Testimonials,
   TrustedBy,
-  DefaultLayout,
-  CallToAction,
 } from '@nx/nx-dev/ui-common';
 
 export const metadata: Metadata = {
@@ -35,24 +30,24 @@ export const metadata: Metadata = {
   },
 };
 
-export default function PricingPage() {
+export default function PricingPageV2() {
   return (
     <DefaultLayout>
-      <StandardPlans />
+      <PlansDisplay />
       <div className="mt-18 lg:mt-32">
         <TrustedBy utmSource="pricingpage" utmCampaign="pricing" />
       </div>
       <div className="mt-32 lg:mt-56">
-        <ComparablePlans />
+        <ResourceClasses />
       </div>
       <div className="mt-32 lg:mt-56">
-        <Testimonials />
+        <Faq />
       </div>
       <div className="mt-32 lg:mt-56">
         <Oss />
       </div>
       <div className="mt-32 lg:mt-56">
-        <Faq />
+        <Testimonials />
       </div>
       <div className="mt-32 lg:mt-56">
         <CallToAction

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

@@ -78,6 +78,8 @@ export * from './lib/editors/visual-studio-code';
 // OTHERS
 export * from './lib/monorepo-world';
 export * from './lib/others/amazon-s3';
+export * from './lib/others/linux';
+export * from './lib/others/windows';
 
 // PODCASTS
 export * from './lib/podcasts/amazon-music';

nx-dev/ui-icons/src/lib/others/windows.tsx

@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#0078D4` for a colored version.
+ */
+export const WindowsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>Windows</title>
+    <path d="M0,0H11.377V11.372H0ZM12.623,0H24V11.372H12.623ZM0,12.623H11.377V24H0Zm12.623,0H24V24H12.623" />
+  </svg>
+);

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

@@ -1,4 +1,5 @@
-export * from './lib/comparable-plans';
 export * from './lib/faq';
 export * from './lib/oss';
-export * from './lib/standard-plans';
+export * from './lib/plans-display';
+export * from './lib/resource-classes';
+export * from './lib/trial-callout';

nx-dev/ui-pricing/src/lib/comparable-plans.tsx

@@ -1,40 +0,0 @@
-import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
-import { PlanTable } from './plans/plan-table';
-
-export function ComparablePlans() {
-  return (
-    <section
-      id="plan-details"
-      className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
-    >
-      <header>
-        <div className="mx-auto max-w-4xl text-center">
-          <SectionHeading as="h2" variant="title">
-            Plans in detail
-          </SectionHeading>
-          <SectionHeading as="p" variant="subtitle" className="mt-6">
-            Compare plan options and benefits.
-          </SectionHeading>
-        </div>
-      </header>
-      <div className="isolate mx-auto mt-10 max-w-full sm:mt-20">
-        <PlanTable />
-        <p className="mt-2 text-sm opacity-80">
-          Credits are the Nx Cloud currency allowing for usage-based pricing.
-          Prices do not include applicable taxes.
-        </p>
-        <div className="mt-4 flex justify-center">
-          <ButtonLink
-            href="https://cloud.nx.app"
-            aria-describedby="hobby-plan"
-            title="Hobby"
-            size="default"
-            className="my-2"
-          >
-            Get started now for free
-          </ButtonLink>
-        </div>
-      </div>
-    </section>
-  );
-}

nx-dev/ui-pricing/src/lib/faq.tsx

@@ -4,8 +4,9 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import { SectionHeading } from '@nx/nx-dev/ui-common';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { FAQPageJsonLd } from 'next-seo';
+import { ReactElement } from 'react';
 
-export function Faq(): JSX.Element {
+export function Faq(): ReactElement {
   const faqs = [
     {
       question: 'What are credits?',
@@ -13,7 +14,12 @@ export function Faq(): JSX.Element {
         'Credits are the currency of Nx Cloud. A determined number of credits are included in each plan. These credits are used to pay for Nx Cloud platform usage in real time.',
     },
     {
-      question: 'Do credits expire?',
+      question: 'How much does it cost per individual credit?',
+      answer:
+        "On the Team Plan, each credit costs $0.00055, which is $5.50 for 10,000 credits to help you visualize the pricing. However, you don't need to purchase credits in fixed amounts—we only charge you for the exact number of additional credits you use beyond your included credits. Overages are prorated, so you'll only pay for what you actually consume.",
+    },
+    {
+      question: 'Do included credits expire?',
       answer:
         'Credits expire at the end of the billing cycle and do not roll over.',
     },
@@ -23,24 +29,25 @@ export function Faq(): JSX.Element {
         'A new billing cycle starts on the first day of every month. If you go over the Hobby plan limit during a cycle your organization will be disabled. You will have to upgrade to our Pro plan or wait for the next billing cycle.',
     },
     {
-      question: 'What is a CI Pipeline Execution (CIPE)?',
+      question: 'What is an active contributor?',
       answer:
-        'By default, a CI pipeline execution is a 1:1 match to your CI provider of choice\'s concept of a "workflow".',
+        'Active contributors are calculated based on any person or actor that has triggered a CI Pipeline Execution within the current billing cycle.',
     },
     {
-      question: 'What is the concurrency connections limit?',
+      question: 'What is a concurrent connection?',
       answer:
-        'As you scale your usage of Nx Cloud, you may run into concurrency limits. Nx Cloud puts a limit on the number of CI machines in your workspace that are simultaneously connecting to Nx Cloud. This includes any machine running in CI - both the main CI pipeline machine and any agent machines.',
+        'Concurrent connections are unique machines that connect to Nx Cloud from a CI environment. If you are using Distributed Task Execution, you should expect to have one concurrent connection from your orchestrator job, and one additional concurrent connection for each live agent that is helping perform work.',
     },
     {
-      question: 'What is a contributor?',
+      question:
+        'Is there a limit to the number of active contributors I can have on the Hobby plan?',
       answer:
-        "A contributor is a person who has committed to your repository. Your organization's contributor count is calculated from anonymized, monthly git histories across all the workspaces in your Nx Cloud organization.",
+        'Our free Hobby Plan is only limited by the number of credits you can use per month. This means you can use it free, forever, no matter your team size, as long as your use falls below 50,000 credits/month. This makes it ideal for small-scale projects or for larger teams looking to test out a proof of concept. For those larger teams, we offer the Team Plan which includes 5 active contributors at no cost and offers the flexibility to add even more contributors, concurrencies, and credits to fit the unique needs of each team. ',
     },
     {
-      question: "What if I exceed my plan's contributor limit?",
+      question: 'Do I need a credit card to create an account?',
       answer:
-        'If you exceed the contributor limit, your organization will be disabled until you upgrade to a plan that supports the number of contributors you have.',
+        'No, you can set up a workspace with Nx Cloud completely for free, without entering any billing information.',
     },
     {
       question:
@@ -49,25 +56,50 @@ export function Faq(): JSX.Element {
         'The Hobby plan allows you to configure and run a small project at no cost. If you consume all the credits, your organization will be disabled until you upgrade to Pro or wait for the next billing cycle.',
     },
     {
-      question: 'Can I upgrade my Hobby plan to the Pro plan?',
+      question: 'What is a CI Pipeline Execution?',
       answer:
-        'Yes, you can upgrade your Hobby plan to the Pro plan at any time.',
+        'By default, a CI pipeline execution is a 1:1 match to your CI provider of choice\'s concept of a "workflow".',
+    },
+    {
+      question: 'What is the Team Plan?',
+      answer:
+        'The Team Plan is our new offering that provides flexible pricing, designed to better meet the needs of teams of all sizes. The Team Plan replaced the Pro Plan in 2024. ',
+    },
+    {
+      question: 'How does the Team Plan differ from the previous Pro Plan?',
+      answer:
+        'The Team Plan offers a lower base price with the ability to add contributors and credits as needed, whereas the Pro Plan had a higher base price with fixed allowances.',
+    },
+    {
+      question:
+        'I think I am on the Pro Plan but don’t see it offered, does it still exist?',
+      answer:
+        'Existing Pro Plan users have been grandfathered into their existing plan and can expect no changes. This plan is no longer available to new users. ',
+    },
+    {
+      question: 'Can existing Pro organizations switch to the new Team Plan?',
+      answer:
+        'Yes! If the new Team Plan better fits your needs, you can reach out to cloud-support@nrwl.io. If you upgrade to a new plan, please note that you will not be able to switch back to a legacy plan. ',
     },
     {
       question: 'Is there a plan for open source projects?',
       answer:
         'Yes, we are happy to collaborate with open source projects. Please complete this form, and we will review your request and get back to you: https://nx.dev/pricing/special-offer',
     },
+    {
+      question: 'What if I need help picking the right plan?',
+      answer:
+        'We have a helpful comparison above. If you have additional questions, or these plans don’t fit your needs please reach out to cloud-support@nrwl.io and we will do our best to help.',
+    },
+    {
+      question: 'What if I need more than 70 active contributors?',
+      answer: 'Please reach out to cloud-support@nrwl.io.',
+    },
     {
       question: 'What payment methods do you accept?',
       answer:
         'We accept Visa, Mastercard, American Express, and Discover from customers worldwide.',
     },
-    {
-      question: 'Do I need a credit card to create an account?',
-      answer:
-        'No, you can set up a workspace with Nx Cloud completely for free, without entering any billing information.',
-    },
   ];
 
   return (

nx-dev/ui-pricing/src/lib/oss.tsx

@@ -1,21 +1,18 @@
-import { CheckIcon } from '@heroicons/react/24/outline';
-import { ButtonLink } from '@nx/nx-dev/ui-common';
+import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
+import { ReactElement } from 'react';
 
-export function Oss(): JSX.Element {
+export function Oss(): ReactElement {
   return (
-    <section
-      id="oss"
-      className="bg-blue-500 bg-gradient-to-r from-blue-500 to-cyan-500 shadow-inner"
-    >
-      <div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
+    <section id="oss" className="isolate">
+      <div className="mx-auto max-w-4xl bg-slate-50/80 px-6 py-16 ring-1 ring-slate-200 sm:rounded-3xl sm:p-8 lg:py-16 xl:px-16 dark:bg-slate-800/60 dark:ring-white/10">
         <div className="mx-auto max-w-2xl text-center">
-          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-            Open Source maintainers and authors?
-          </h2>
-          <p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-slate-100">
-            We provide a <span className="font-black">$0 /month</span> plan for
+          <SectionHeading as="h2" variant="title">
+            Open Source maintainers <br /> and authors?
+          </SectionHeading>
+          <SectionHeading as="p" variant="subtitle" className="mt-6">
+            We provide a <span className="font-black">free</span> plan for
             open-source projects.
-          </p>
+          </SectionHeading>
           <div className="mt-8 flex items-center justify-center">
             <ButtonLink
               href="/pricing/special-offer"
@@ -28,24 +25,6 @@ export function Oss(): JSX.Element {
             </ButtonLink>
           </div>
         </div>
-        <div className="mx-auto mt-8 flex max-w-4xl flex-col gap-8 text-sm text-white md:flex-row md:justify-between">
-          <div className="flex items-center gap-1">
-            <CheckIcon className="h-6 w-5 flex-none" aria-hidden="true" /> Free
-            credits every month
-          </div>
-          <div className="flex items-center gap-1">
-            <CheckIcon className="h-6 w-5 flex-none" aria-hidden="true" />
-            Max 3 admin users
-          </div>
-          <div className="flex items-center gap-1">
-            <CheckIcon className="h-6 w-5 flex-none" aria-hidden="true" />{' '}
-            Powerful analytics
-          </div>
-          <div className="flex items-center gap-1">
-            <CheckIcon className="h-6 w-5 flex-none" aria-hidden="true" /> Basic
-            support
-          </div>
-        </div>
       </div>
     </section>
   );

nx-dev/ui-pricing/src/lib/plans-display.tsx

@@ -0,0 +1,327 @@
+import { ReactElement } from 'react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
+import { TrialCallout } from './trial-callout';
+import Link from 'next/link';
+
+export function PlansDisplay(): ReactElement {
+  return (
+    <section>
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <header className="mx-auto max-w-4xl text-center">
+          <SectionHeading as="h2" variant="display">
+            Start with everything,
+            <br /> scale when you need
+          </SectionHeading>
+          <SectionHeading as="p" variant="subtitle" className="mt-6">
+            Level up your CI with Nx Cloud
+          </SectionHeading>
+        </header>
+        <div className="mt-20 flow-root">
+          <div className="isolate -mt-16 grid max-w-full grid-cols-1 gap-6 sm:mx-auto lg:mt-0 lg:grid-cols-3 xl:-mx-4 xl:gap-12">
+            {/*HOBBY*/}
+            <div>
+              <div className="rounded-lg border-2 border-blue-500 bg-white p-6 dark:border-sky-500 dark:bg-slate-950">
+                <div className="flex items-center gap-x-2">
+                  <h4 className="text-xl font-semibold leading-8 text-slate-950 dark:text-white">
+                    Hobby
+                  </h4>
+                  <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
+                    Free forever
+                  </span>
+                </div>
+                <p className="mt-2 text-sm">
+                  Perfect for small teams or proofs of concept to evaluate the
+                  product. No credit card required.
+                </p>
+                <p className="mt-4 pb-5 leading-5">
+                  <span className="text-3xl font-semibold text-slate-950 dark:text-white">
+                    $0
+                  </span>
+                </p>
+                <div className="my-12">
+                  <ButtonLink
+                    href="https://cloud.nx.app"
+                    aria-describedby="hobby-plan"
+                    title="Start now"
+                    size="default"
+                    variant="primary"
+                    className="w-full"
+                  >
+                    Get started
+                  </ButtonLink>
+                </div>
+                <ul className="mt-4 divide-y divide-slate-200 text-sm dark:divide-slate-800">
+                  <li className="py-2.5">
+                    <span className="font-medium">Included for free</span>
+                  </li>
+                  <li className="flex items-center justify-start gap-x-2 py-2.5">
+                    <CheckCircleIcon
+                      aria-hidden="true"
+                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                    />
+                    <span>50,000 monthly credits</span>
+                  </li>
+                  <li className="flex items-center justify-start gap-x-2 py-2.5">
+                    <CheckCircleIcon
+                      aria-hidden="true"
+                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                    />
+                    <span>
+                      Remote caching with{' '}
+                      <Link
+                        href="/ci/features/remote-cache"
+                        target="_blank"
+                        title="Learn how Nx Replay easily reduces CI execution time"
+                        className="font-medium underline decoration-dotted"
+                      >
+                        Nx Replay
+                      </Link>
+                    </span>
+                  </li>
+                  <li className="flex items-start justify-start gap-x-2 py-2.5">
+                    <CheckCircleIcon
+                      aria-hidden="true"
+                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                    />
+                    <span>
+                      Distributed task execution with{' '}
+                      <Link
+                        href="/ci/features/distribute-task-execution"
+                        target="_blank"
+                        title="Learn how Nx Agents easily scale your CI pipelines"
+                        className="font-medium underline decoration-dotted"
+                      >
+                        Nx Agents
+                      </Link>
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            {/*TEAM*/}
+            <div className="rounded-lg border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-950">
+              <div className="flex items-center gap-x-2">
+                <h4 className="text-xl font-semibold leading-8 text-slate-950 dark:text-white">
+                  Team
+                </h4>
+              </div>
+              <p className="mt-2 text-sm">
+                Scales with your team's needs. Billed on the first of each
+                month.
+              </p>
+              <p className="mt-4 leading-5">
+                <span className="text-3xl font-semibold text-slate-950 dark:text-white">
+                  $19
+                </span>
+                <span className="text-lg"> per Active Contributor¹</span>
+                <br />
+                <span className="text-sm">+ usage overages</span>
+              </p>
+
+              <div className="my-12">
+                <ButtonLink
+                  href="https://cloud.nx.app"
+                  aria-describedby="team-plan"
+                  title="Get started"
+                  size="default"
+                  variant="secondary"
+                  className="w-full"
+                >
+                  Get started
+                </ButtonLink>
+              </div>
+              <ul className="mt-4 divide-y divide-slate-200 text-sm dark:divide-slate-800">
+                <li className="py-2.5">
+                  <span className="font-medium">Included for free</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>5 active contributors¹</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>50,000 monthly credits</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>10 concurrent CI connections</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <Link
+                    href="/nx-cloud#ai-for-your-ci"
+                    target="_blank"
+                    title="Check our AI integrations and how to use them"
+                    className="font-medium underline decoration-dotted"
+                  >
+                    AI integrations
+                  </Link>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>Email support</span>
+                </li>
+                <li className="py-2.5">
+                  <span className="font-medium">Add-ons</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <PlusIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>$19 per active contributor¹ / month</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <PlusIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>$5.50 per 10,000 credits</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <PlusIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>$2.25 per concurrent CI connection</span>
+                </li>
+              </ul>
+              <p className="mt-4 text-xs text-slate-500">
+                ¹Any person or actor that has triggered a CI Pipeline Execution
+                within the current billing cycle. Up to 70 active contributors.
+              </p>
+            </div>
+
+            {/* ENTERPRISE */}
+            <div className="rounded-lg border border-slate-200 bg-slate-50/60 p-6 dark:border-slate-800 dark:bg-slate-900">
+              <div className="flex items-center gap-x-2">
+                <h4 className="text-xl font-semibold leading-8 text-slate-950 dark:text-white">
+                  Enterprise
+                </h4>
+              </div>
+              <p className="mt-2 text-sm">
+                The ultimate Nx toolchain, tailored to your needs of speed.
+                Flexible billing & payment options available.
+              </p>
+              <p className="mt-4 pb-5 leading-5">
+                <span className="text-3xl font-semibold text-slate-950 dark:text-white">
+                  Custom
+                </span>
+              </p>
+              <div className="my-12">
+                <ButtonLink
+                  href="/enterprise"
+                  aria-describedby="enterprise-plan"
+                  title="Enterprise"
+                  size="default"
+                  variant="secondary"
+                  className="w-full"
+                >
+                  Learn more
+                </ButtonLink>
+              </div>
+              <ul className="mt-4 divide-y divide-slate-200 text-sm dark:divide-slate-800">
+                <li className="py-2.5">
+                  <span className="font-medium">Includes</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>Volume discounts on credits available</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>White glove onboarding</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>
+                    <Link
+                      href="/powerpack"
+                      target="_blank"
+                      title="Check our AI integrations and how to use them"
+                      className="font-medium underline decoration-dotted"
+                    >
+                      Nx Powerpack
+                    </Link>
+                    : a suite of premium extensions for the Nx CLI
+                  </span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>
+                    Work hand-in-hand with the Nx team for continual improvement
+                  </span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>
+                    Run on the Nx Cloud servers in any region or run fully
+                    self-contained, on-prem
+                  </span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>SSO / SAML Login</span>
+                </li>
+                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <CheckCircleIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                  />
+                  <span>Premium Support and SLAs available</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="mt-4 text-center">
+            <p className="text-sm opacity-80">
+              Credits are the Nx Cloud currency allowing for usage based
+              pricing. Prices do not include applicable taxes.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-20">
+          <TrialCallout />
+        </div>
+      </div>
+    </section>
+  );
+}

nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx

@@ -1,107 +0,0 @@
-import { CheckIcon } from '@heroicons/react/24/outline';
-import { ButtonLink } from '@nx/nx-dev/ui-common';
-import Link from 'next/link';
-
-const features = [
-  'White glove onboarding',
-  'Work hand-in-hand with the Nx team for continual improvement',
-  'Run on the Nx Cloud servers in any region or run fully self-contained, on-prem',
-  'Premium Support and SLAs available',
-  'SSO / SAML Login',
-];
-
-export function EnterprisePlan({
-  cta = 'Learn more',
-  url,
-}: {
-  cta?: string;
-  url: string;
-}) {
-  return (
-    <article className="relative rounded-b-xl bg-slate-50/60 py-4 ring-1 ring-slate-200 xl:py-6 dark:bg-slate-800/60 dark:ring-slate-800">
-      <h4
-        id="on-prem"
-        className="absolute -top-9 left-0 w-full rounded-t-xl bg-gradient-to-r from-fuchsia-500 to-violet-500 p-2 text-center text-sm font-medium text-white shadow-inner ring-1 ring-slate-200 dark:ring-slate-800"
-      >
-        Available as an on-prem solution
-      </h4>
-      <header className="flex items-center justify-between gap-x-4 px-4 xl:px-6">
-        <h3
-          id="enterprise-plan"
-          className="text-xl font-semibold leading-8 text-slate-900 dark:text-slate-100"
-        >
-          Enterprise
-        </h3>
-      </header>
-      <p className="mt-4 h-12 px-4 text-sm leading-6 xl:px-6">
-        The ultimate Nx toolchain, tailored to your needs of speed.
-      </p>
-      <p className="mt-12 flex items-baseline gap-x-1">&nbsp;</p>
-      <div className="p-4 xl:p-6">
-        <ButtonLink
-          href={url}
-          aria-describedby="enterprise-plan"
-          title="Enterprise"
-          size="default"
-          variant="secondary"
-          className="w-full"
-        >
-          {cta}
-        </ButtonLink>
-      </div>
-      <p className="border-b border-t border-slate-100 bg-green-50 px-4 py-2 text-sm font-medium text-green-700 xl:px-6 dark:border-slate-800 dark:bg-green-500/10 dark:text-green-400">
-        Volume discounts on credits available.
-      </p>
-      <ul className="space-y-3 px-4 py-6 text-sm leading-6 text-slate-500 xl:px-6 dark:text-slate-400">
-        <li className="text-base font-medium text-slate-700 dark:text-slate-300">
-          The complete Nx toolchain tailored to your needs:
-        </li>
-        {features.map((feature) => (
-          <li key={feature} className="flex gap-x-3">
-            <CheckIcon
-              className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-              aria-hidden="true"
-            />
-            {feature}
-          </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="/ci/features/explain-with-ai"
-              title="Learn more about Explain with AI"
-              prefetch={false}
-              className="font-medium text-slate-700 underline dark:text-slate-300"
-            >
-              Explain with AI
-            </Link>
-            : provide detailed explanations and insights for failed task
-            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>
-  );
-}

nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx

@@ -1,109 +0,0 @@
-import { CheckIcon } from '@heroicons/react/24/outline';
-import { ButtonLink } from '@nx/nx-dev/ui-common';
-import Link from 'next/link';
-
-const features = [
-  '50k credits included',
-  'Max 5 contributors',
-  'Distributed Task Execution (DTE)',
-  'Nx run detailed reports',
-  'Structured log visualization',
-  'GitHub PR with Nx Cloud live status',
-  'Unlimited users per workspace',
-  'Basic support',
-];
-
-export function HobbyPlan({
-  cta = 'Get started now',
-  url,
-}: {
-  cta?: string;
-  url: string;
-}) {
-  return (
-    <article className="relative rounded-b-xl bg-white py-4 ring-1 ring-blue-500 xl:py-6 dark:bg-slate-950 dark:ring-sky-500">
-      <h4
-        id="no-credit-card-required"
-        className="absolute -top-9 left-0 w-full rounded-t-2xl bg-blue-500 p-2 text-center text-sm font-medium text-white shadow-inner ring-1 ring-blue-500 dark:bg-sky-500 dark:ring-sky-500"
-      >
-        Start here
-      </h4>
-      <header className="flex items-center justify-between gap-x-4 px-4 xl:px-6">
-        <h3
-          id="hobby-plan"
-          className="text-xl font-semibold leading-8 text-slate-900 dark:text-slate-100"
-        >
-          Hobby
-        </h3>
-      </header>
-      <p className="mt-4 h-12 px-4 text-sm leading-6 xl:px-6">
-        Get started quickly, upgrade when ready.
-      </p>
-      <p className="mt-8 flex items-baseline gap-x-1 px-4 xl:px-6">
-        <span className="text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
-          $0
-        </span>
-        <span className="text-base font-normal leading-6">/month</span>
-      </p>
-      <div className="p-4 xl:p-6">
-        <ButtonLink
-          href={url}
-          aria-describedby="hobby-plan"
-          title="Hobby"
-          size="default"
-          className="w-full"
-        >
-          {cta}
-        </ButtonLink>
-      </div>
-      <p className="border-b border-t border-slate-100 bg-green-50 px-4 py-2 text-sm font-medium text-green-700 xl:px-6 dark:border-slate-800 dark:bg-green-500/10 dark:text-green-400">
-        No credit card required.
-      </p>
-      <ul className="space-y-3 px-4 py-8 text-sm leading-6 text-slate-500 xl:px-6 dark:text-slate-400">
-        <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="/ci/features/remote-cache"
-              title="Learn more about Nx Replay"
-              prefetch={false}
-              className="font-medium text-slate-700 underline dark:text-slate-300"
-            >
-              Nx Replay
-            </Link>
-            : remote caching{' '}
-          </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="/ci/features/distribute-task-execution"
-              title="Learn more about Nx Agents"
-              prefetch={false}
-              className="font-medium text-slate-700 underline dark:text-slate-300"
-            >
-              Nx Agents
-            </Link>
-            : native task distribution solution for CI{' '}
-          </p>
-        </li>
-        {features.map((feature) => (
-          <li key={feature} className="flex gap-x-3">
-            <CheckIcon
-              className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-              aria-hidden="true"
-            />
-            {feature}
-          </li>
-        ))}
-      </ul>
-    </article>
-  );
-}

nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx

@@ -1,118 +0,0 @@
-'use client';
-import { Popover, Transition } from '@headlessui/react';
-import { CheckIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
-import { ButtonLink } from '@nx/nx-dev/ui-common';
-import { Fragment } from 'react';
-import Link from 'next/link';
-
-const features = [
-  '300k credits included',
-  'Max 1m runs per month',
-  'Max 70 concurrent CI connections',
-  'Max 30 contributors',
-  'Unlimited private workspaces per organization',
-  'High-priority support',
-];
-
-export function ProPlan({
-  cta = 'Get started now',
-  url,
-}: {
-  cta?: string;
-  url: string;
-}) {
-  return (
-    <article className="rounded-xl bg-white py-4 ring-1 ring-slate-200 xl:py-6 dark:bg-slate-950 dark:ring-slate-800">
-      <header className="flex items-center justify-between gap-x-4">
-        <h3
-          id="pro-plan"
-          className="px-4 text-xl font-semibold leading-8 text-slate-900 xl:px-6 dark:text-slate-100"
-        >
-          Pro
-        </h3>
-      </header>
-      <p className="mt-4 h-12 px-4 text-sm leading-6 xl:px-6">
-        Scales with your needs.
-      </p>
-      <p className="mt-8 flex items-baseline gap-x-1 px-4 xl:px-6">
-        <span className="text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
-          $249
-        </span>
-        <span className="text-base font-normal leading-6">/month</span>
-      </p>
-      <div className="p-4 xl:p-6">
-        <ButtonLink
-          href={url}
-          aria-describedby="pro-plan"
-          title="Pro plan"
-          size="default"
-          variant="secondary"
-          className="w-full"
-        >
-          {cta}
-        </ButtonLink>
-      </div>
-      <Popover className="relative">
-        <Popover.Button
-          as="ul"
-          className="cursor-pointer list-inside list-disc border-b border-t border-slate-100 bg-green-50 px-4 py-2 text-sm font-medium text-green-700 dark:border-slate-800 dark:bg-green-500/10 dark:text-green-400"
-        >
-          <li>14-day free trial</li>
-          <li>
-            No credit card required{' '}
-            <InformationCircleIcon className="inline h-4 w-4 align-top" />
-          </li>
-        </Popover.Button>
-
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-300"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
-        >
-          <Popover.Panel className="absolute z-10 mt-2 w-96 overflow-hidden rounded-md border border-slate-200 bg-white p-4 text-sm shadow dark:border-slate-800 dark:bg-slate-800">
-            <p>
-              Your organization will be deactivated upon reaching any Pro plan
-              limit unless a credit card is set up in your account.
-            </p>
-          </Popover.Panel>
-        </Transition>
-      </Popover>
-      <ul className="space-y-3 px-4 py-6 text-sm leading-6 text-slate-500 xl:px-6 dark:text-slate-400">
-        <li className="text-base font-medium text-slate-700 dark:text-slate-300">
-          Everything from the Hobby plan plus:
-        </li>
-        {features.map((feature) => (
-          <li key={feature} className="flex gap-x-3">
-            <CheckIcon
-              className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-              aria-hidden="true"
-            />
-            {feature}
-          </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="/ci/features/explain-with-ai"
-              title="Learn more about Explain with AI"
-              prefetch={false}
-              className="font-medium text-slate-700 underline dark:text-slate-300"
-            >
-              Explain with AI
-            </Link>
-            : provide detailed explanations and insights for failed task
-            outputs.
-          </p>
-        </li>
-      </ul>
-    </article>
-  );
-}

nx-dev/ui-pricing/src/lib/resource-classes.tsx

@@ -0,0 +1,196 @@
+import { ReactElement } from 'react';
+import { LinuxIcon, WindowsIcon } from '@nx/nx-dev/ui-icons';
+import { SectionDescription, SectionHeading } from '@nx/nx-dev/ui-common';
+
+const linuxAmd64 = [
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Small',
+    description: '1 vCPU, 2GB RAM',
+    creditCost: 5,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Medium',
+    description: '2 vCPU, 4GB RAM',
+    creditCost: 10,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Medium plus',
+    description: '3 vCPU, 6GB RAM',
+    creditCost: 15,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Large',
+    description: '4 vCPU, 8GB RAM',
+    creditCost: 20,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Large +',
+    description: '4 vCPU, 10GB RAM',
+    creditCost: 30,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Extra large',
+    description: '8 vCPU, 16GB RAM',
+    creditCost: 40,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Extra large +',
+    description: '10 vCPU, 20GB RAM',
+    creditCost: 60,
+  },
+];
+
+const linuxArm64 = [
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Medium',
+    description: '2 vCPU, 4GB RAM',
+    creditCost: 13,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Large',
+    description: '4 vCPU, 8GB RAM',
+    creditCost: 26,
+  },
+  {
+    icon: <LinuxIcon aria-hidden="true" className="size-6" />,
+    name: 'Extra large',
+    description: '8 vCPU, 16GB RAM',
+    creditCost: 52,
+  },
+];
+
+const windows = [
+  {
+    icon: <WindowsIcon aria-hidden="true" className="size-6" />,
+    name: 'Medium',
+    description: '3 vCPU, 6GB RAM',
+    creditCost: 40,
+  },
+];
+
+export function ResourceClasses(): ReactElement {
+  return (
+    <section
+      id="resource-classes"
+      className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
+    >
+      <header>
+        <div className="mx-auto max-w-4xl text-center">
+          <SectionHeading as="h2" variant="title">
+            Agents resource classes
+          </SectionHeading>
+          <SectionHeading as="p" variant="subtitle" className="mt-6">
+            Credits are the Nx Cloud currency allowing for usage-based pricing.
+          </SectionHeading>
+        </div>
+      </header>
+
+      <div className="mx-auto mt-10 max-w-full space-y-12 sm:mt-20">
+        <div>
+          <SectionDescription as="h3">Docker / Linux AMD64</SectionDescription>
+          <ul
+            role="list"
+            className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
+          >
+            {linuxAmd64.map((project) => (
+              <li
+                key={project.name}
+                className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
+              >
+                <div className="flex w-16 shrink-0 items-center justify-center border-r border-slate-200 bg-slate-50 text-sm font-medium dark:border-slate-800 dark:bg-slate-800">
+                  {project.icon}
+                </div>
+                <div className="flex flex-1 items-center justify-between truncate bg-white dark:bg-slate-900">
+                  <div className="flex-1 truncate px-4 py-2 text-sm">
+                    <span className="font-medium text-slate-900 dark:text-slate-100">
+                      {project.name}
+                    </span>
+                    <p className="text-xs text-slate-500">
+                      {project.description}
+                    </p>
+                  </div>
+                  <div className="shrink-0 pr-4 text-sm font-semibold">
+                    <span>{project.creditCost} credits/min</span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <SectionDescription as="h3">Docker / Linux ARM64</SectionDescription>
+          <ul
+            role="list"
+            className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
+          >
+            {linuxArm64.map((project) => (
+              <li
+                key={project.name}
+                className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
+              >
+                <div className="flex w-16 shrink-0 items-center justify-center border-r border-slate-200 bg-slate-50 text-sm font-medium dark:border-slate-800 dark:bg-slate-800">
+                  {project.icon}
+                </div>
+                <div className="flex flex-1 items-center justify-between truncate bg-white dark:bg-slate-900">
+                  <div className="flex-1 truncate px-4 py-2 text-sm">
+                    <span className="font-medium text-slate-900 dark:text-slate-100">
+                      {project.name}
+                    </span>
+                    <p className="text-xs text-slate-500">
+                      {project.description}
+                    </p>
+                  </div>
+                  <div className="shrink-0 pr-4 text-sm font-semibold">
+                    <span>{project.creditCost} credits/min</span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <SectionDescription as="h3">Docker / Windows</SectionDescription>
+          <ul
+            role="list"
+            className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
+          >
+            {windows.map((project) => (
+              <li
+                key={project.name}
+                className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
+              >
+                <div className="flex w-16 shrink-0 items-center justify-center border-r border-slate-200 bg-slate-50 text-sm font-medium dark:border-slate-800 dark:bg-slate-800">
+                  {project.icon}
+                </div>
+                <div className="flex flex-1 items-center justify-between truncate bg-white dark:bg-slate-900">
+                  <div className="flex-1 truncate px-4 py-2 text-sm">
+                    <span className="font-medium text-slate-900 dark:text-slate-100">
+                      {project.name}
+                    </span>
+                    <p className="text-xs text-slate-500">
+                      {project.description}
+                    </p>
+                  </div>
+                  <div className="shrink-0 pr-4 text-sm font-semibold">
+                    <span>{project.creditCost} credits/min</span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

nx-dev/ui-pricing/src/lib/standard-plans.tsx

@@ -1,56 +0,0 @@
-import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
-
-import { EnterprisePlan } from './plans/enterprise-plan';
-import { HobbyPlan } from './plans/hobby-plan';
-import { ProPlan } from './plans/pro-plan';
-
-export function StandardPlans() {
-  return (
-    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <header className="mx-auto max-w-4xl text-center">
-        <SectionHeading as="h2" variant="display">
-          Start with everything,
-          <br /> scale when you need
-        </SectionHeading>
-        <SectionHeading as="p" variant="subtitle" className="mt-6">
-          Level up your CI with Nx Cloud
-        </SectionHeading>
-      </header>
-
-      <div className="relative mt-32 w-full" />
-      {/* Plans */}
-      <section id="plans">
-        {/* <header>
-          <div className="mx-auto max-w-4xl text-center">
-            <SectionHeading as="h2" variant="title">
-              Start Free, Scale Smart
-            </SectionHeading>
-            <SectionHeading as="p" variant="subtitle" className="mt-6">
-              Kick off with complimentary credits and explore everything Nx
-              Cloud offers. Add your card details when you're ready for more.
-            </SectionHeading>
-          </div>
-        </header> */}
-        <div className="isolate mx-auto mt-10 grid max-w-lg grid-cols-1 items-stretch gap-x-4 gap-y-16 sm:mt-20 md:max-w-3xl md:grid-cols-3 xl:max-w-full xl:grid-cols-3">
-          <HobbyPlan url="https://cloud.nx.app" />
-          <ProPlan url="https://cloud.nx.app" />
-          <EnterprisePlan url="/enterprise" />
-        </div>
-        <p className="mt-2 text-center text-sm opacity-80 xl:text-left">
-          Credits are the Nx Cloud currency allowing for usage based pricing.
-          Prices do not include applicable taxes.
-        </p>
-      </section>
-      <div className="mx-auto my-8 text-center">
-        <ButtonLink
-          href="#plan-details"
-          title="Compare all plans options and benefits"
-          variant="secondary"
-          size="default"
-        >
-          Compare all plans options and benefits
-        </ButtonLink>
-      </div>
-    </section>
-  );
-}

nx-dev/ui-pricing/src/lib/trial-callout.tsx

@@ -0,0 +1,37 @@
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+import { ReactElement } from 'react';
+
+export function TrialCallout(): ReactElement {
+  return (
+    <section id="trial" className="isolate mx-auto max-w-xl">
+      <div className="border border-slate-100 bg-white shadow-lg sm:rounded-lg dark:border-slate-800/60 dark:bg-slate-950">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-base font-semibold leading-6 text-slate-900 dark:text-slate-100">
+            Looking for a trial?
+          </h3>
+          <div className="mt-2 sm:flex sm:items-start sm:justify-between">
+            <div className="max-w-xl text-sm">
+              <p>
+                Start with our Hobby Plan - free forever for teams of any size.
+                Perfect for proof of concept testing with up to 50,000 credits
+                per month.
+              </p>
+            </div>
+            <div className="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
+              <ButtonLink
+                href="https://cloud.nx.app"
+                title="Start with Hobby"
+                variant="primary"
+                target="_blank"
+                size="default"
+              >
+                Start for free
+              </ButtonLink>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/*</motion.div>*/}
+    </section>
+  );
+}