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

Co-authored-by: Isaac Mann <[email protected]>
nrwl · Nov 11, 2024 · 0b6ca49 · 0b6ca49
1 parent 5be5579
commit 0b6ca49
Show file tree

Hide file tree

Showing 16 changed files with 666 additions and 1,714 deletions.
diff --git a/nx-dev/nx-dev/app/pricing/page.tsx b/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

diff --git a/nx-dev/ui-icons/src/index.ts b/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';

diff --git a/nx-dev/ui-icons/src/lib/others/linux.tsx b/nx-dev/ui-icons/src/lib/others/linux.tsx
@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#FCC624` for a colored version.
+ */
+export const LinuxIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>Linux</title>
+    <path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z" />
+  </svg>
+);
diff --git a/nx-dev/ui-icons/src/lib/others/windows.tsx b/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>
+);
diff --git a/nx-dev/ui-pricing/src/index.ts b/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';
diff --git a/nx-dev/ui-pricing/src/lib/comparable-plans.tsx b/nx-dev/ui-pricing/src/lib/comparable-plans.tsx
diff --git a/nx-dev/ui-pricing/src/lib/faq.tsx b/nx-dev/ui-pricing/src/lib/faq.tsx
@@ -4,16 +4,22 @@ 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?',
       answer:
         '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,24 +56,49 @@ 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 [email protected]. 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 payment methods do you accept?',
+      question: 'What if I need help picking the right plan?',
       answer:
-        'We accept Visa, Mastercard, American Express, and Discover from customers worldwide.',
+        'We have a helpful comparison above. If you have additional questions, or these plans don’t fit your needs please reach out to [email protected] and we will do our best to help.',
     },
     {
-      question: 'Do I need a credit card to create an account?',
+      question: 'What if I need more than 70 active contributors?',
+      answer: 'Please reach out to [email protected].',
+    },
+    {
+      question: 'What payment methods do you accept?',
       answer:
-        'No, you can set up a workspace with Nx Cloud completely for free, without entering any billing information.',
+        'We accept Visa, Mastercard, American Express, and Discover from customers worldwide.',
     },
   ];
 

diff --git a/nx-dev/ui-pricing/src/lib/oss.tsx b/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>
   );