From 2710bb1efb72496c4e7836adc567c22467926269 Mon Sep 17 00:00:00 2001 From: Nicholas Cunningham Date: Thu, 25 Jul 2024 08:14:51 -0600 Subject: [PATCH] feat(nx-dev): Migrate pricing page from nx.app (#27012) Co-authored-by: Juri --- nx-dev/nx-dev/app/pricing/page.tsx | 66 + nx-dev/nx-dev/pages/index.tsx | 3 +- nx-dev/nx-dev/redirect-rules.js | 1 + nx-dev/ui-common/src/index.ts | 2 + nx-dev/ui-common/src/lib/call-to-action.tsx | 18 +- .../src/lib/headers/documentation-header.tsx | 10 +- nx-dev/ui-common/src/lib/headers/header.tsx | 19 +- nx-dev/ui-common/src/lib/testimonials.tsx | 58 + .../src/lib/trusted-by.tsx | 15 +- nx-dev/ui-home/src/index.ts | 1 - nx-dev/ui-pricing/.babelrc | 12 + nx-dev/ui-pricing/.eslintrc.json | 18 + nx-dev/ui-pricing/README.md | 7 + nx-dev/ui-pricing/project.json | 9 + nx-dev/ui-pricing/src/index.ts | 4 + .../ui-pricing/src/lib/comparable-plans.tsx | 40 + nx-dev/ui-pricing/src/lib/faq.tsx | 150 ++ nx-dev/ui-pricing/src/lib/oss.tsx | 52 + .../src/lib/plans/enterprise-plan.tsx | 70 + .../ui-pricing/src/lib/plans/hobby-plan.tsx | 127 ++ .../ui-pricing/src/lib/plans/plan-table.tsx | 1203 +++++++++++++++++ nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx | 99 ++ nx-dev/ui-pricing/src/lib/standard-plans.tsx | 56 + nx-dev/ui-pricing/tsconfig.json | 17 + nx-dev/ui-pricing/tsconfig.lib.json | 23 + tsconfig.base.json | 1 + 26 files changed, 2054 insertions(+), 27 deletions(-) create mode 100644 nx-dev/nx-dev/app/pricing/page.tsx create mode 100644 nx-dev/ui-common/src/lib/testimonials.tsx rename nx-dev/{ui-home => ui-common}/src/lib/trusted-by.tsx (90%) create mode 100644 nx-dev/ui-pricing/.babelrc create mode 100644 nx-dev/ui-pricing/.eslintrc.json create mode 100644 nx-dev/ui-pricing/README.md create mode 100644 nx-dev/ui-pricing/project.json create mode 100644 nx-dev/ui-pricing/src/index.ts create mode 100644 nx-dev/ui-pricing/src/lib/comparable-plans.tsx create mode 100644 nx-dev/ui-pricing/src/lib/faq.tsx create mode 100644 nx-dev/ui-pricing/src/lib/oss.tsx create mode 100644 nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx create mode 100644 nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx create mode 100644 nx-dev/ui-pricing/src/lib/plans/plan-table.tsx create mode 100644 nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx create mode 100644 nx-dev/ui-pricing/src/lib/standard-plans.tsx create mode 100644 nx-dev/ui-pricing/tsconfig.json create mode 100644 nx-dev/ui-pricing/tsconfig.lib.json diff --git a/nx-dev/nx-dev/app/pricing/page.tsx b/nx-dev/nx-dev/app/pricing/page.tsx new file mode 100644 index 0000000000000..9d03d2249ec83 --- /dev/null +++ b/nx-dev/nx-dev/app/pricing/page.tsx @@ -0,0 +1,66 @@ +import type { Metadata } from 'next'; +import { + StandardPlans, + ComparablePlans, + Oss, + Faq, +} from '@nx/nx-dev/ui-pricing'; +import { + Testimonials, + TrustedBy, + DefaultLayout, + CallToAction, +} from '@nx/nx-dev/ui-common'; + +export const metadata: Metadata = { + title: 'Nx Cloud - Available Plans', + description: + "Distribute everything, don't waste time waiting on CI. Use Nx Cloud's distributed task execution and caching features to release faster. Save time and money.", + openGraph: { + url: 'https://nx.dev/pricing', + title: 'Nx Cloud - Available Plans', + description: + "Distribute everything, don't waste time waiting on CI. Use Nx Cloud's distributed task execution and caching features to release faster. Save time and money.", + images: [ + { + url: 'https://nx.dev/socials/nx-media.png', + width: 800, + height: 421, + alt: 'Nx: Smart Monorepos · Fast CI', + type: 'image/jpeg', + }, + ], + siteName: 'NxDev', + type: 'website', + }, +}; + +export default function PricingPage() { + return ( + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + ); +} diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx index f662fd81d898f..fb90671b05b84 100644 --- a/nx-dev/nx-dev/pages/index.tsx +++ b/nx-dev/nx-dev/pages/index.tsx @@ -1,4 +1,4 @@ -import { CallToAction, DefaultLayout } from '@nx/nx-dev/ui-common'; +import { CallToAction, DefaultLayout, TrustedBy } from '@nx/nx-dev/ui-common'; import { NextSeo } from 'next-seo'; import { CiForMonorepos, @@ -6,7 +6,6 @@ import { SmarterToolsForMonorepos, Statistics, TeamAndCommunity, - TrustedBy, WorkBetterAchieveMoreShipQuicker, } from '@nx/nx-dev/ui-home'; diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index 497afa571b2ee..625dfba85f377 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -485,6 +485,7 @@ const nxCloudUrls = { '/core-features/:path*': '/features/:path*', '/ci/recipes/set-up/connect-to-cloud': '/ci/intro/connect-to-nx-cloud', '/ci/intro/connect-to-cloud': '/ci/intro/connect-to-nx-cloud', + '/pricing/special-offer': 'https://forms.gle/FBzvsspz1o63fDAz6', }; /** diff --git a/nx-dev/ui-common/src/index.ts b/nx-dev/ui-common/src/index.ts index b7bc14f0eb5ce..855d5dd4cd7f3 100644 --- a/nx-dev/ui-common/src/index.ts +++ b/nx-dev/ui-common/src/index.ts @@ -19,6 +19,8 @@ export * from './lib/github-star-widget'; export * from './lib/youtube.component'; export * from './lib/x-icon'; export * from './lib/discord-icon'; +export * from './lib/trusted-by'; +export * from './lib/testimonials'; export { resourceMenuItems } from './lib/headers/menu-items'; export { solutionsMenuItems } from './lib/headers/menu-items'; diff --git a/nx-dev/ui-common/src/lib/call-to-action.tsx b/nx-dev/ui-common/src/lib/call-to-action.tsx index 8b39e9daf5291..06bc9f1d6348c 100644 --- a/nx-dev/ui-common/src/lib/call-to-action.tsx +++ b/nx-dev/ui-common/src/lib/call-to-action.tsx @@ -1,6 +1,16 @@ import Link from 'next/link'; -export function CallToAction(): JSX.Element { +export interface CTAProps { + mainActionLinkText?: string; + mainActionTitle?: string; + mainActionLink?: string; +} + +export function CallToAction({ + mainActionTitle = 'Get started with Nx', + mainActionLinkText = 'Get started', + mainActionLink = '/docs', +}: CTAProps): JSX.Element { return (
- Get started + {mainActionLinkText} Blog - CI Pricing - - + {/*RESOURCES*/} {({ open }) => ( diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx index 090975b24fdd0..094f0974eaaae 100644 --- a/nx-dev/ui-common/src/lib/headers/header.tsx +++ b/nx-dev/ui-common/src/lib/headers/header.tsx @@ -1,7 +1,6 @@ 'use client'; import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'; import { - ArrowUpRightIcon, Bars4Icon, ChevronDownIcon, XMarkIcon, @@ -175,15 +174,14 @@ export function Header(): JSX.Element { > Blog - CI Pricing - - + {/*RESOURCES*/} {({ open }) => ( @@ -459,15 +457,14 @@ export function Header(): JSX.Element { > Blog - CI Pricing - - + {/*RESOURCES*/} {({ open }) => ( diff --git a/nx-dev/ui-common/src/lib/testimonials.tsx b/nx-dev/ui-common/src/lib/testimonials.tsx new file mode 100644 index 0000000000000..a5b7499fcfba0 --- /dev/null +++ b/nx-dev/ui-common/src/lib/testimonials.tsx @@ -0,0 +1,58 @@ +import { ChatBubbleLeftEllipsisIcon } from '@heroicons/react/24/outline'; +import { SectionHeading } from './typography'; + +export function Testimonials(): JSX.Element { + return ( +
+
+ + People are talking + + + Whether your workspace{' '} + + has a single project or thousands + + , Nx will keep your CI fast and your workspace maintainable. + +
+
+
+ +

+ "It made it possible to remove our hand-rolled code and to use a + well-maintained and streamlined solution, increasing performance + while saving us a lot of time and money. The developer experience is + so good." +

+
Nitin Vericherla
+
UI Architect at Synapse Wireless
+
+
+ +

+ "By updating to the latest Lerna version and enabling Nx caching, we + were able to reduce CI build times by ~35% - a great time saving for + a fast-moving company like Sentry with an extremely active + repository." +

+
Francesco Novy
+
+ Senior Software Engineer at Sentry +
+
+
+ +

+ "Since we are using NxCloud, we saw our CI times reduced by 83%! + That means our teams are not waiting hours for their PR to be merged + anymore, we reclaimed our productivity and are pretty happy about + it." +

+
Laurent Delamare
+
Senior Engineer at VMware
+
+
+
+ ); +} diff --git a/nx-dev/ui-home/src/lib/trusted-by.tsx b/nx-dev/ui-common/src/lib/trusted-by.tsx similarity index 90% rename from nx-dev/ui-home/src/lib/trusted-by.tsx rename to nx-dev/ui-common/src/lib/trusted-by.tsx index e9b30eef11cb2..6426d9073fc74 100644 --- a/nx-dev/ui-home/src/lib/trusted-by.tsx +++ b/nx-dev/ui-common/src/lib/trusted-by.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { SectionDescription, SectionHeading } from '@nx/nx-dev/ui-common'; +import { SectionDescription, SectionHeading } from './typography'; import { AdobeIcon, AwsIcon, @@ -19,7 +19,15 @@ import { VmwareIcon, } from '@nx/nx-dev/ui-icons'; -export function TrustedBy(): JSX.Element { +export interface TrustedByProps { + utmSource?: string; + utmCampaign?: string; +} + +export function TrustedBy({ + utmSource = 'homepage', + utmCampaign = 'homepage_links', +}: TrustedByProps): JSX.Element { return (
@@ -104,9 +112,10 @@ export function TrustedBy(): JSX.Element { className="h-10 w-10 text-slate-950 dark:text-white" />
+
+
+
+ + Plans in detail + + + Compare plan options and benefits. + +
+
+
+ +

+ Credits are the Nx Cloud currency allowing for usage-based pricing. + Prices do not include applicable taxes. +

+
+ + Get started now for free + +
+
+
+ ); +} diff --git a/nx-dev/ui-pricing/src/lib/faq.tsx b/nx-dev/ui-pricing/src/lib/faq.tsx new file mode 100644 index 0000000000000..eb4f422f44372 --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/faq.tsx @@ -0,0 +1,150 @@ +'use client'; +import { Disclosure, Transition } from '@headlessui/react'; +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'; + +export function Faq(): JSX.Element { + 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?', + answer: + 'Credits expire at the end of the billing cycle and do not roll over.', + }, + { + question: 'When does the billing cycle start and end?', + answer: + '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)?', + answer: + '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 concurrency connections limit?', + 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.', + }, + { + question: 'What is a contributor?', + 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.", + }, + { + question: "What if I exceed my plan's contributor limit?", + 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.', + }, + { + question: + 'What happens if I consume all my credits while on the Hobby plan?', + answer: + '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?', + answer: + 'Yes, you can upgrade your Hobby plan to the Pro plan at any time.', + }, + { + 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.app/pricing/special-offer', + }, + { + 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 ( +
+
+
+
+ + Not sure yet?
Have questions? + + + Here are the most asked question we condensed for your to get you + setup quickly. + + +

+ Can’t find the answer you’re looking for? Reach out to our{' '} + + customer support + {' '} + team. +

+
+ ({ + questionName: faq.question, + acceptedAnswerText: faq.answer, + }))} + /> +
+
+ {faqs.map((faq) => ( + + {({ open }) => ( + <> +
+ + + {faq.question} + + + + +
+ + +

+ {faq.answer} +

+ + + + )} + + ))} +
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-pricing/src/lib/oss.tsx b/nx-dev/ui-pricing/src/lib/oss.tsx new file mode 100644 index 0000000000000..d727938177246 --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/oss.tsx @@ -0,0 +1,52 @@ +import { CheckIcon } from '@heroicons/react/24/outline'; +import { ButtonLink } from '@nx/nx-dev/ui-common'; + +export function Oss(): JSX.Element { + return ( +
+
+
+

+ Open Source maintainers and authors? +

+

+ We provide a $0 /month plan for + open-source projects. +

+
+ + Apply for free access + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx new file mode 100644 index 0000000000000..9a8d93c569327 --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx @@ -0,0 +1,70 @@ +import { CheckIcon } from '@heroicons/react/24/outline'; +import { ButtonLink } from '@nx/nx-dev/ui-common'; + +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 ( +
+

+ Available as an on-prem solution +

+
+

+ Enterprise +

+
+

+ The ultimate Nx toolchain, tailored to your needs of speed. +

+

 

+
+ + {cta} + +
+

+ Volume discounts on credits available. +

+
    +
  • + The complete Nx toolchain tailored to your needs: +
    • + {features.map((feature) => ( +
  • +
    • + ))} +
+
+ ); +} diff --git a/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx new file mode 100644 index 0000000000000..660f14dea5e56 --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx @@ -0,0 +1,127 @@ +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 ( +
+

+ Start here +

+
+

+ Hobby +

+
+

+ Get started quickly, upgrade when ready. +

+

+ + $0 + + /month +

+
+ + {cta} + +
+

+ No credit card required. +

+
    +
  • +
    • +
  • +
    • +
  • +
    • + {features.map((feature) => ( +
  • +
    • + ))} +
+
+ ); +} diff --git a/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx new file mode 100644 index 0000000000000..5e7501d36207e --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx @@ -0,0 +1,1203 @@ +'use client'; +import { Popover, Transition } from '@headlessui/react'; + +import { + CheckIcon, + InformationCircleIcon, + QuestionMarkCircleIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; +import { ButtonLink } from '@nx/nx-dev/ui-common'; +import { Fragment } from 'react'; + +export function PlanTable(): JSX.Element { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Available plans + +
+ + Hobby + + + Get started quickly, upgrade when ready. + +
+
+ $0 + +
+ 		+
+ + Pro + + + Scales with your needs.
  + +
+
+ $249 + +
+ 		+
+ + Enterprise + + + The ultimate Nx toolchain, tailored to your needs of speed. + +
+
+ + Get started now + + + + Get started + + + + Learn more + +
+ Usages +
+ Credits included + + 50k credits per month + + 300k credits per month + + Custom +
+ Exclusive benefits + + + + + + 14-day free trial, no credit card required + + + + +

+ Your organization will be deactivated upon reaching any + Pro plan limit unless a credit card is set up in your + account. +

+ + + + 		+

+ Volume discounts on credits available. +

+
+ Can buy extra credits + + + $5.50 per 10,000 credits + + $5.00 per 10,000 credits +
+ + + CI Pipeline Executions (CIPE) + + + + + +

+ By default, a CI pipeline execution is a 1:1 match to your + CI provider of choice's concept of a "workflow". +

+ + + + 		+ 500 credits per CIPE + + 500 credits per CIPE + + 500 credits per CIPE +
+ + + Concurrent CI connections{' '} + + + + + +

+ The number of agents capable of doing work at the same + time. +

+ + + + 		+ Max 10 + + Max 70 + + Custom +
+ + + Contributors{' '} + + + + + +

+ A contributor is a person having access to the repository + and able to trigger a CI Pipeline Execution. Usually, + contributors are developers on the project. +

+ + + + 		+ Max 5 contributors + + Max 70 contributors + + Custom +
+ + + Nx Runs + + + + + +

+ Each time Nx is executes a batch of tasks it is considered + an Nx Run. +

+ + + + 		+ Max 50k + + Max 1m + + Unlimited +
+ Workspace per organization + + Unlimited + + Unlimited + + Custom +
+ Workspace visibility + + Private/Public + + Private/Public + + Private/Public +
+ Connect to GitHub repository + + Private/Public + + Private/Public + + Private/Public +
+ App users + + Unlimited + + Unlimited + + Unlimited +
+ Admin accounts + + Unlimited + + Unlimited + + Unlimited +
+ Features +
+ + Nx Agents + + : native task distribution solution for CI{' '} + + + +
+ + Nx Workflows + + : full CI replacement{' '} + (Coming Soon) + + + +
+ + Nx Replay + + : Remote Caching + + + +
+ Distributed Task Execution + + + +
+ + + Nx Run detailed reports + + + + + +

+ Get a detailed report of each Nx Run with machine specs, + tasks statuses, logs statistics and share the result to + your team. +

+ + + + 		+ + +
+ Structured log visualization + + + +
+ + + GitHub PR with Nx Cloud live status + + + + + +

+ We provide a GitHub application allowing you to see what + tasks are being executed on the related CI pipeline from + your PR. See easily what failed and succeeded, with direct + link to full status report. +

+ + + + 		+ + +
+ Analytics + + Basic (7 days) + + Advanced (30 days) + + Advanced (30 days) +
+ + + Allowed Email Domains{' '} + + + + + +

+ Give member access to anyone with an email belonging to a + specific domain. +

+ + + + 		+ + +
+ Server location + + US + + US + + Custom +
+ SSO/SAML Login + + + +
+ Payment options + + + Credit card + + Credit card, Invoicing, Prepaid +
+ Resource classes for Nx Agents +
+ Extra credits + + + $5.50 per 10,000 credits + + $5.00 per 10,000 credits +
+ Docker / Linux AMD64 + + + +
+

Small

+

1 vCPU, 2GB RAM

+ 		+ 5 credits/min + + 5 credits/min + + 5 credits/min +
+

Medium

+

2 vCPU, 4GB RAM

+ 		+ 10 credits/min + + 10 credits/min + + 10 credits/min +
+

Medium Plus

+

3 vCPU, 6GB RAM

+ 		+ 15 credits/min + + 15 credits/min + + 15 credits/min +
+

Large

+

4 vCPU, 8GB RAM

+ 		+ 20 credits/min + + 20 credits/min + + 20 credits/min +
+

Large Plus

+

4 vCPU, 10GB RAM

+ 		+ 30 credits/min + + 30 credits/min + + 30 credits/min +
+

Extra Large

+

8 vCPU, 16GB RAM

+ 		+ 40 credits/min + + 40 credits/min + + 40 credits/min +
+

Extra Large Plus

+

10 vCPU, 20GB RAM

+ 		+ 60 credits/min + + 60 credits/min + + 60 credits/min +
+ Docker / Linux ARM64 + + + +
+

Medium

+

2 vCPU, 8GB RAM

+ 		+ 13 credits/min + + 13 credits/min + + 13 credits/min +
+

Large

+

4 vCPU, 16GB RAM

+ 		+ 26 credits/min + + 26 credits/min + + 26 credits/min +
+

Extra Large

+

8 vCPU, 32GB RAM

+ 		+ 52 credits/min + + 52 credits/min + + 52 credits/min +
+ Docker / Windows + + + +
+

Medium

+

3 vCPU, 6GB RAM

+ 		+ 40 credits/min + + 40 credits/min + + 40 credits/min +
+ Support +
+ Support type + + Basic support + + High-priority support + + Enterprise-grade support, SLA available +
+
+ ); +} diff --git a/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx new file mode 100644 index 0000000000000..c1017db07859e --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx @@ -0,0 +1,99 @@ +'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'; + +const features = [ + '300k credits included', + 'Max 1m runs per month', + 'Max 70 concurrent CI connections', + 'Max 70 contributors', + 'Unlimited private workspaces per organization', + 'High-priority support', +]; + +export function ProPlan({ + cta = 'Get started now', + url, +}: { + cta?: string; + url: string; +}) { + return ( +
+
+

+ Pro +

+
+

+ Scales with your needs. +

+

+ + $249 + + /month +

+
+ + {cta} + +
+ + +
  • 14-day free trial
    • +
  • + No credit card required{' '} + +
    • +     + + + +

    + Your organization will be deactivated upon reaching any Pro plan + limit unless a credit card is set up in your account. +

    +     +     +     +
      +
    • + Everything from the Hobby plan plus: +
      • + {features.map((feature) => ( +
    • +
      • + ))} +
    +
    + ); +} diff --git a/nx-dev/ui-pricing/src/lib/standard-plans.tsx b/nx-dev/ui-pricing/src/lib/standard-plans.tsx new file mode 100644 index 0000000000000..8184981909c61 --- /dev/null +++ b/nx-dev/ui-pricing/src/lib/standard-plans.tsx @@ -0,0 +1,56 @@ +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 ( +
    +
    + + Start with everything, +
    scale when you need +     + + Level up your CI with Nx Cloud + +
    + +
    + {/* Plans */} +
    + {/*
    +
    + + Start Free, Scale Smart + + + Kick off with complimentary credits and explore everything Nx + Cloud offers. Add your card details when you're ready for more. + +
    +
    */} +
    + + + +
    +

    + Credits are the Nx Cloud currency allowing for usage based pricing. + Prices do not include applicable taxes. +

    +
    +
    + + Compare all plans options and benefits + +
    +
    + ); +} diff --git a/nx-dev/ui-pricing/tsconfig.json b/nx-dev/ui-pricing/tsconfig.json new file mode 100644 index 0000000000000..95cfeb243dd57 --- /dev/null +++ b/nx-dev/ui-pricing/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ], + "extends": "../../tsconfig.base.json" +} diff --git a/nx-dev/ui-pricing/tsconfig.lib.json b/nx-dev/ui-pricing/tsconfig.lib.json new file mode 100644 index 0000000000000..578a3fb7dd757 --- /dev/null +++ b/nx-dev/ui-pricing/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [ + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" + ] + }, + "exclude": [ + "jest.config.ts", + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.jsx", + "src/**/*.test.jsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index de81812c7430d..0c95341a1f90e 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -107,6 +107,7 @@ "@nx/nx-dev/ui-icons": ["nx-dev/ui-icons/src/index.ts"], "@nx/nx-dev/ui-markdoc": ["nx-dev/ui-markdoc/src/index.ts"], "@nx/nx-dev/ui-member-card": ["nx-dev/ui-member-card/src/index.ts"], + "@nx/nx-dev/ui-pricing": ["nx-dev/ui-pricing/src/index.ts"], "@nx/nx-dev/ui-primitives": ["nx-dev/ui-primitives/src/index.ts"], "@nx/nx-dev/ui-references": ["nx-dev/ui-references/src/index.ts"], "@nx/nx-dev/ui-sponsor-card": ["nx-dev/ui-sponsor-card/src/index.ts"],