feat(nx-dev): Migrate pricing page from nx.app (#27012)

Co-authored-by: Juri <[email protected]>
nrwl · Jul 26, 2024 · 2710bb1 · 2710bb1
1 parent 2087067
commit 2710bb1
Show file tree

Hide file tree

Showing 26 changed files with 2,054 additions and 27 deletions.
diff --git a/nx-dev/nx-dev/app/pricing/page.tsx 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 (
+    <DefaultLayout>
+      <StandardPlans />
+      <div className="mt-18 lg:mt-32">
+        <TrustedBy utmSource="pricingpage" utmCampaign="pricing" />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <ComparablePlans />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <Testimonials />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <Oss />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <Faq />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <CallToAction
+          mainActionLinkText="Sign up"
+          mainActionLink="https://cloud.nx.app?utm_source=nx.dev&utm_medium=cta&utm_campaign=pricing"
+          mainActionTitle="Sign up to Nx Cloud"
+        />
+      </div>
+    </DefaultLayout>
+  );
+}
diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
@@ -1,12 +1,11 @@
-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,
   Hero,
   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
@@ -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
@@ -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
@@ -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 (
     <section className="relative isolate px-6 py-32 sm:py-40 lg:px-8">
       <svg
@@ -59,12 +69,12 @@ export function CallToAction(): JSX.Element {
         </h2>
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <Link
-            href="/getting-started/intro"
-            title="Get started with Nx"
+            href={mainActionLink}
+            title={mainActionTitle}
             prefetch={false}
             className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
           >
-            Get started
+            {mainActionLinkText}
           </Link>
           <Link
             href="/contact"

diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { Fragment, type JSX } from 'react';
 import {
-  ArrowUpRightIcon,
   Bars3Icon,
   ChevronDownIcon,
   XMarkIcon,
@@ -334,15 +333,14 @@ export function DocumentationHeader({
             >
               Blog
             </Link>
-            <a
-              href="https://nx.app/pricing"
+            <Link
+              href="/pricing"
               title="Nx Cloud"
-              target="_blank"
               className="hidden gap-2 px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
             >
               CI Pricing
-              <ArrowUpRightIcon className="h-2 w-2 align-super" />
-            </a>
+            </Link>
             {/*RESOURCES*/}
             <Popover className="relative">
               {({ open }) => (

diff --git 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
             </Link>
-            <a
-              href="https://nx.app/pricing"
+            <Link
+              href="/pricing"
               title="Nx Cloud"
-              target="_blank"
               className="hidden gap-2 px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
             >
               CI Pricing
-              <ArrowUpRightIcon className="h-2 w-2 align-super" />
-            </a>
+            </Link>
             {/*RESOURCES*/}
             <Popover className="relative">
               {({ open }) => (
@@ -459,15 +457,14 @@ export function Header(): JSX.Element {
                           >
                             Blog
                           </Link>
-                          <a
-                            href="https://nx.app/pricing"
+                          <Link
+                            href="/pricing"
                             title="Nx Cloud"
-                            target="_blank"
                             className="flex w-full gap-2 py-4 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500"
+                            prefetch={false}
                           >
                             CI Pricing
-                            <ArrowUpRightIcon className="h-2 w-2 align-super" />
-                          </a>
+                          </Link>
                           {/*RESOURCES*/}
                           <Disclosure as="div">
                             {({ open }) => (

diff --git a/nx-dev/ui-common/src/lib/testimonials.tsx 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 (
+    <section id="people-are-talking" className="relative">
+      <header className="mx-auto max-w-2xl text-center">
+        <SectionHeading as="h2" variant="title">
+          People are talking
+        </SectionHeading>
+        <SectionHeading as="p" variant="subtitle" className="mt-6">
+          Whether your workspace{' '}
+          <span className="font-semibold">
+            has a single project or thousands
+          </span>
+          , Nx will keep your CI fast and your workspace maintainable.
+        </SectionHeading>
+      </header>
+      <div className="md:px-62 mx-auto grid max-w-7xl grid-cols-1 items-stretch gap-8 px-4 py-12 md:grid-cols-3 lg:px-8 lg:py-16">
+        <div className="rounded-xl bg-slate-50 p-10 dark:bg-slate-800/60">
+          <ChatBubbleLeftEllipsisIcon className="h-8 w-8 text-blue-500 dark:text-sky-500" />
+          <p className="mt-4">
+            "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."
+          </p>
+          <div className="mt-8 font-semibold">Nitin Vericherla</div>
+          <div className="mt-0.5 text-sm">UI Architect at Synapse Wireless</div>
+        </div>
+        <div className="rounded-xl bg-slate-50 p-10 dark:bg-slate-800/60">
+          <ChatBubbleLeftEllipsisIcon className="h-8 w-8 text-blue-500 dark:text-sky-500" />
+          <p className="mt-4">
+            "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."
+          </p>
+          <div className="mt-8 font-semibold">Francesco Novy</div>
+          <div className="mt-0.5 text-sm">
+            Senior Software Engineer at Sentry
+          </div>
+        </div>
+        <div className="rounded-xl bg-slate-50 p-10 dark:bg-slate-800/60">
+          <ChatBubbleLeftEllipsisIcon className="h-8 w-8 text-blue-500 dark:text-sky-500" />
+          <p className="mt-4">
+            "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."
+          </p>
+          <div className="mt-8 font-semibold">Laurent Delamare</div>
+          <div className="mt-0.5 text-sm">Senior Engineer at VMware</div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/nx-dev/ui-home/src/lib/trusted-by.tsx → nx-dev/ui-common/src/lib/trusted-by.tsx b/nx-dev/ui-home/src/lib/trusted-by.tsx → 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 (
     <article className="mx-auto max-w-7xl px-6 lg:px-8">
       <div className="text-center">
@@ -104,9 +112,10 @@ export function TrustedBy(): JSX.Element {
             className="h-10 w-10 text-slate-950 dark:text-white"
           />
         </div>
+
         <div className="mt-8 text-center">
           <Link
-            href="/customers?utm_source=homepage&utm_medium=website&utm_campaign=homepage_links&utm_content=our_customers"
+            href={`/customers?utm_source=${utmSource}&utm_medium=website&utm_campaign=${utmCampaign}&utm_content=our_customers`}
             title="Our customers"
             prefetch={false}
             className="group font-semibold leading-6 text-slate-950 transition-all duration-200 dark:text-white"

diff --git a/nx-dev/ui-home/src/index.ts b/nx-dev/ui-home/src/index.ts
@@ -3,5 +3,4 @@ export * from './lib/hero';
 export * from './lib/smarter-tools-for-monorepos';
 export * from './lib/statistics';
 export * from './lib/team-and-community';
-export * from './lib/trusted-by';
 export * from './lib/work-better-achieve-more-ship-quicker';
diff --git a/nx-dev/ui-pricing/.babelrc b/nx-dev/ui-pricing/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/nx-dev/ui-pricing/.eslintrc.json b/nx-dev/ui-pricing/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/nx-dev/ui-pricing/README.md b/nx-dev/ui-pricing/README.md
@@ -0,0 +1,7 @@
+# ui-pricing
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-pricing` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/nx-dev/ui-pricing/project.json b/nx-dev/ui-pricing/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "ui-pricing",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-pricing/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project ui-pricing --web",
+  "targets": {}
+}
diff --git a/nx-dev/ui-pricing/src/index.ts b/nx-dev/ui-pricing/src/index.ts
@@ -0,0 +1,4 @@
+export * from './lib/comparable-plans';
+export * from './lib/faq';
+export * from './lib/oss';
+export * from './lib/standard-plans';