392 lines
17 KiB
TypeScript
392 lines
17 KiB
TypeScript
'use client';
|
|
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 Link from 'next/link';
|
|
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
|
|
|
|
export function PlansDisplay(): ReactElement {
|
|
return (
|
|
<section id="plans" className="scroll-mt-24">
|
|
<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>
|
|
<div className="mt-10 flex items-center justify-center gap-x-6">
|
|
<ButtonLink
|
|
href="/contact/engineering"
|
|
title="Talk to the engineering team"
|
|
variant="secondary"
|
|
size="default"
|
|
>
|
|
Got questions? Talk to our team
|
|
</ButtonLink>
|
|
</div>
|
|
</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-8">
|
|
{/*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/get-started/?utm_source=nx-dev&utm_medium=nx-cloud-plans&utm_campaign=hobby-plan"
|
|
aria-describedby="hobby-plan"
|
|
title="Start now"
|
|
size="default"
|
|
variant="primary"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'start-hobby-plan-click',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
className="w-full"
|
|
>
|
|
Start now
|
|
</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"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'learn-nx-replay-click',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
className="font-medium underline decoration-dotted"
|
|
>
|
|
Nx Replay
|
|
</Link>
|
|
</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>
|
|
Distributed task execution with{' '}
|
|
<Link
|
|
href="/ci/features/distribute-task-execution"
|
|
target="_blank"
|
|
title="Learn how Nx Agents easily scale your CI pipelines"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'learn-nx-agents-click',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
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">
|
|
Start free, pay as you grow. 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>{' '}
|
|
<span className="text-sm font-semibold italic">
|
|
(first 5 free)
|
|
</span>
|
|
<br />
|
|
<span className="text-sm">+ usage overages</span>
|
|
</p>
|
|
|
|
<div className="my-12">
|
|
<ButtonLink
|
|
href="https://cloud.nx.app/get-started/?utm_source=nx-dev&utm_medium=nx-cloud-plans&utm_campaign=team-plan"
|
|
aria-describedby="team-plan"
|
|
title="Get started"
|
|
size="default"
|
|
variant="secondary"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'start-team-plan-click',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
className="w-full"
|
|
>
|
|
Free to start
|
|
</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>5 active contributors¹</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>10 concurrent CI connections</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"
|
|
/>
|
|
<Link
|
|
href="/nx-cloud#ai-for-your-ci"
|
|
target="_blank"
|
|
title="Check our AI integrations and how to use them"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'learn-ai-integrations-click',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
className="font-medium underline decoration-dotted"
|
|
>
|
|
AI integrations
|
|
</Link>
|
|
</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>Email support</span>
|
|
</li>
|
|
<li className="py-2.5">
|
|
<span className="font-medium">Add-ons</span>
|
|
</li>
|
|
<li className="flex items-center 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-center 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-center 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 30 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 for 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/trial"
|
|
aria-describedby="enterprise-plan"
|
|
title="Enterprise"
|
|
size="default"
|
|
variant="secondary"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'request-enterprise-trial',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
className="w-full"
|
|
>
|
|
Request a trial
|
|
</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-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>Volume discounts on credits available</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>White glove onboarding</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>
|
|
<Link
|
|
href="/powerpack"
|
|
target="_blank"
|
|
title="Check our AI integrations and how to use them"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'learn-nx-powerpack-click',
|
|
'plans-table',
|
|
'pricing-plans'
|
|
)
|
|
}
|
|
className="font-medium underline decoration-dotted"
|
|
>
|
|
Nx Powerpack
|
|
</Link>
|
|
: a suite of premium extensions for the Nx CLI
|
|
</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>
|
|
Work hand-in-hand with the Nx team for continual improvement
|
|
</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>
|
|
Run on the Nx Cloud servers in any region or run fully
|
|
self-contained, on-prem
|
|
</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>SSO / SAML Login</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>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 className="mt-4 text-center">
|
|
<p className="text-sm font-medium opacity-80">
|
|
Looking for the Pro plan?{' '}
|
|
<Link href="#faq">Checkout our FAQ ↓</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|