diff --git a/nx-dev/nx-dev/app/pricing/page.tsx b/nx-dev/nx-dev/app/pricing/page.tsx index acdaf72f05..22806df81a 100644 --- a/nx-dev/nx-dev/app/pricing/page.tsx +++ b/nx-dev/nx-dev/app/pricing/page.tsx @@ -1,5 +1,11 @@ import type { Metadata } from 'next'; -import { Faq, Oss, ResourceClasses, PlansDisplay } from '@nx/nx-dev/ui-pricing'; +import { + Faq, + Oss, + ResourceClasses, + PlansDisplay, + TrialCallout, +} from '@nx/nx-dev/ui-pricing'; import { CallToAction, DefaultLayout, @@ -30,13 +36,16 @@ export const metadata: Metadata = { }, }; -export default function PricingPageV2() { +export default function PricingPage() { return (
+
+ +
diff --git a/nx-dev/nx-dev/pages/enterprise.tsx b/nx-dev/nx-dev/pages/enterprise.tsx index cfc6dcd354..3d663433c2 100644 --- a/nx-dev/nx-dev/pages/enterprise.tsx +++ b/nx-dev/nx-dev/pages/enterprise.tsx @@ -12,6 +12,7 @@ import { TrustedBy, SolveYourCi, } from '@nx/nx-dev/ui-enterprise'; +import { TrialCallout } from '@nx/nx-dev/ui-pricing'; export function Enterprise(): JSX.Element { const router = useRouter(); @@ -46,6 +47,9 @@ export function Enterprise(): JSX.Element {
+
+ +
diff --git a/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx b/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx index 9d940208a0..6993e906d7 100644 --- a/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx +++ b/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx @@ -86,7 +86,10 @@ export function AgentNumberOverTime(): JSX.Element { }; return ( -
+
+
diff --git a/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx b/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx index 793d57bd58..e3f1ee1d6e 100644 --- a/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx +++ b/nx-dev/ui-cloud/src/lib/enhance-with-ai.tsx @@ -6,6 +6,7 @@ import { } from '@heroicons/react/24/outline'; import { SectionHeading } from '@nx/nx-dev/ui-common'; import Link from 'next/link'; +import { ReactElement } from 'react'; const features = [ { @@ -41,9 +42,9 @@ const features = [ }, ]; -export function EnhancedWithAi(): JSX.Element { +export function EnhancedWithAi(): ReactElement { return ( -
+
diff --git a/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx b/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx index c2b514f652..c1889a8cd0 100644 --- a/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx +++ b/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx @@ -1,9 +1,10 @@ 'use client'; -import { Variants, motion } from 'framer-motion'; +import { motion, Variants } from 'framer-motion'; import { Spotlight } from './elements/spotlight'; import { AnimateValue } from '@nx/nx-dev/ui-animations'; +import { ReactElement } from 'react'; -export function FasterAndCheaper(): JSX.Element { +export function FasterAndCheaper(): ReactElement { const spotlight: Variants = { offscreen: { display: 'none', @@ -14,7 +15,7 @@ export function FasterAndCheaper(): JSX.Element { }; return ( -
+
+

Startups and Fortune 500 companies trust Nx Cloud diff --git a/nx-dev/ui-cloud/src/lib/understand-workspace.tsx b/nx-dev/ui-cloud/src/lib/understand-workspace.tsx index ac672b62bd..8f1a8dc312 100644 --- a/nx-dev/ui-cloud/src/lib/understand-workspace.tsx +++ b/nx-dev/ui-cloud/src/lib/understand-workspace.tsx @@ -13,15 +13,15 @@ import { SectionHeading } from '@nx/nx-dev/ui-common'; import { BentoGrid, BentoGridItem } from './elements/bento-grid'; import { cx } from '@nx/nx-dev/ui-primitives'; import { animate, motion, useMotionValue, useTransform } from 'framer-motion'; -import { useEffect } from 'react'; +import { ReactElement, useEffect } from 'react'; import { usePrefersReducedMotion } from '@nx/nx-dev/ui-animations'; -export function UnderstandWorkspace(): JSX.Element { +export function UnderstandWorkspace(): ReactElement { return ( -
+
- + Deep understanding of your workspace diff --git a/nx-dev/ui-pricing/src/lib/faq.tsx b/nx-dev/ui-pricing/src/lib/faq.tsx index 96bb7b78a5..e630fc6b64 100644 --- a/nx-dev/ui-pricing/src/lib/faq.tsx +++ b/nx-dev/ui-pricing/src/lib/faq.tsx @@ -4,6 +4,7 @@ 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 Link from 'next/link'; import { ReactElement } from 'react'; export function Faq(): ReactElement { @@ -89,11 +90,11 @@ export function Faq(): ReactElement { { 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.', + 'We have a helpful comparison above. If you have additional questions, or these plans don’t fit your needs please reach out to https://nx.dev/contact/sales 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.', + answer: 'Please reach out to https://nx.dev/contact/sales', }, { question: 'What payment methods do you accept?', @@ -108,22 +109,20 @@ export function Faq(): ReactElement {
- Not sure yet?
Have questions? + Have questions?
- Here are the most asked question we condensed for your to get you - setup quickly. + Check out our most commonly asked questions.

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

+
@@ -19,7 +20,7 @@ export function PlansDisplay(): ReactElement {
-
+
{/*HOBBY*/}
@@ -47,6 +48,13 @@ export function PlansDisplay(): ReactElement { title="Start now" size="default" variant="primary" + onClick={() => + sendCustomEvent( + 'start-hobby-plan-click', + 'plans-table', + 'pricing-plans' + ) + } className="w-full" > Get started @@ -74,6 +82,13 @@ export function PlansDisplay(): ReactElement { 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 @@ -91,6 +106,13 @@ export function PlansDisplay(): ReactElement { 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 @@ -109,14 +131,16 @@ export function PlansDisplay(): ReactElement {

- Scales with your team's needs. Billed on the first of each - month. + Start free, pay as you grow. Billed on the first of each month.

$19 - per Active Contributor¹ + per Active Contributor¹{' '} + + (first 5 free) +
+ usage overages

@@ -128,6 +152,13 @@ export function PlansDisplay(): ReactElement { title="Get started" size="default" variant="secondary" + onClick={() => + sendCustomEvent( + 'start-team-plan-click', + 'plans-table', + 'pricing-plans' + ) + } className="w-full" > Get started @@ -167,6 +198,13 @@ export function PlansDisplay(): ReactElement { 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 @@ -218,8 +256,8 @@ export function PlansDisplay(): ReactElement {

- The ultimate Nx toolchain, tailored to your needs of speed. - Flexible billing & payment options available. + The ultimate Nx toolchain, tailored for speed. Flexible billing + & payment options available.

@@ -233,6 +271,13 @@ export function PlansDisplay(): ReactElement { title="Enterprise" size="default" variant="secondary" + onClick={() => + sendCustomEvent( + 'learn-enterprise-click', + 'plans-table', + 'pricing-plans' + ) + } className="w-full" > Learn more @@ -266,6 +311,13 @@ export function PlansDisplay(): ReactElement { 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 @@ -317,10 +369,6 @@ export function PlansDisplay(): ReactElement {

- -
- -
); diff --git a/nx-dev/ui-pricing/src/lib/resource-classes.tsx b/nx-dev/ui-pricing/src/lib/resource-classes.tsx index 63f13d6e53..c8a5ed49f5 100644 --- a/nx-dev/ui-pricing/src/lib/resource-classes.tsx +++ b/nx-dev/ui-pricing/src/lib/resource-classes.tsx @@ -17,7 +17,7 @@ const linuxAmd64 = [ }, { icon: