feat(nx-dev): add ui-enterprise library

docs/nx-cloud/concepts/cache-security.md

@@ -48,8 +48,8 @@ Nx Cloud guarantees your cache entries will remain immutable - once they've been
 
 ### Use An On-Premise Version of Nx Cloud If Needed
 
-If you need to have all cache artifacts on servers that you control, there is an on-premise version of Nx Cloud that you can use as part of the [Enterprise plan](https://nx.app/enterprise).
+If you need to have all cache artifacts on servers that you control, there is an on-premise version of Nx Cloud that you can use as part of the [Enterprise plan](/enterprise).
 
 ## Security Decisions
 
-In any security discussion, there is a trade off between convenience and security. It could be that some of these threats do not apply to your organization. If that is the case you could relax some of the security precautions and gain the performance benefits of more task results being stored in the remote cache. Every organization is different and Nx can be adapted to best meet your needs without opening up vulnerabilities. If you would Nx team members to help your organization fine tune your set up, [talk to us about Nx Enterprise](https://nx.app/enterprise).
+In any security discussion, there is a trade off between convenience and security. It could be that some of these threats do not apply to your organization. If that is the case you could relax some of the security precautions and gain the performance benefits of more task results being stored in the remote cache. Every organization is different and Nx can be adapted to best meet your needs without opening up vulnerabilities. If you would Nx team members to help your organization fine tune your set up, [talk to us about Nx Enterprise](/enterprise).

docs/nx-cloud/concepts/parallelization-distribution.md

@@ -100,4 +100,4 @@ In the same way that Nx efficiently assigns tasks to parallel processes on a sin
 
 If your repo is starting to grow large enough that CI times are suffering, or if your parallelization strategy is growing too complex to manage effectively, try [setting up Nx Agents](/ci/features/distribute-task-execution). You can [generate a simple workflow](/nx-api/workspace/generators/ci-workflow) for common CI providers with a `nx g ci-workflow` or follow one of the [CI setup recipes](/ci/recipes/set-up).
 
-Organizations that want extra help setting up Nx Cloud or getting the most out of Nx can [sign up for Nx Enterprise](https://nx.app/enterprise/). This package comes with extra support from the Nx team and the option to host Nx Cloud on your own servers.
+Organizations that want extra help setting up Nx Cloud or getting the most out of Nx can [sign up for Nx Enterprise](/enterprise/). This package comes with extra support from the Nx team and the option to host Nx Cloud on your own servers.

docs/nx-cloud/enterprise/dte/azure-dte.md

@@ -1,6 +1,6 @@
 # Custom Distributed Task Execution on Azure Pipelines
 
-Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](https://nx.app/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
+Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
 
 ## Run Custom Agents on Azure Pipelines
 

docs/nx-cloud/enterprise/dte/bitbucket-dte.md

@@ -1,6 +1,6 @@
 # Custom Distributed Task Execution on Bitbucket Pipelines
 
-Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](https://nx.app/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
+Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
 
 ## Run Custom Agents on Bitbucket Pipelines
 

docs/nx-cloud/enterprise/dte/circle-ci-dte.md

@@ -1,6 +1,6 @@
 # Custom Distributed Task Execution on Circle CI
 
-Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](https://nx.app/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
+Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
 
 ## Run Custom Agents on Circle CI
 

docs/nx-cloud/enterprise/dte/github-dte.md

@@ -1,6 +1,6 @@
 # Custom Distributed Task Execution on Github Actions
 
-Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](https://nx.app/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
+Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
 
 ## Run Custom Agents on GitHub
 

docs/nx-cloud/enterprise/dte/gitlab-dte.md

@@ -1,6 +1,6 @@
 # Custom Distributed Task Execution on GitLab
 
-Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](https://nx.app/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
+Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
 
 ## Run Custom Agents on GitLab
 

docs/nx-cloud/enterprise/dte/jenkins-dte.md

@@ -1,6 +1,6 @@
 # Custom Distributed Task Execution on Jenkins
 
-Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](https://nx.app/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
+Using [Nx Agents](/ci/features/distribute-task-execution) is the easiest way to distribute task execution, but it your organization may not be able to use hosted Nx Agents. With an [enterprise license](/enterprise), you can set up distributed task execution on your own CI provider using the recipe below.
 
 ## Distribute Tasks Across Custom Agents on Jenkins
 

docs/nx-cloud/features/nx-enterprise-on-prem.md

@@ -2,7 +2,7 @@
 
 We offer multiple ways of running Nx Cloud for our Enterprise customers. The below options are listed in recommended order, from easiest to most complex in terms of set-up and maintenance for your team. Please carefully consider your organization's requirements and level of infrastructure expertise before deciding on a deployment option.
 
-{% call-to-action title="Get in Touch" icon="nxcloud" description="Get the package that best fits your needs" url="https://nx.app/enterprise?utm_source=nx.dev" /%}
+{% call-to-action title="Get in Touch" icon="nxcloud" description="Get the package that best fits your needs" url="/enterprise" /%}
 
 ## Managed Setup
 

docs/nx-cloud/intro/ci-with-nx.md

@@ -55,7 +55,7 @@ npx nx g ci-workflow
 
 Connect on our channels and with the Nx Community to ask questions, get help and keep up to date with the latest news.
 
-- Reach out for [Enterprise Support](https://nx.app/enterprise)
+- Reach out for [Enterprise Support](/enterprise)
 - Join our [Discord Community](https://go.nx.dev/community)
 - Subscribe to our [Youtube Channel](https://www.youtube.com/@nxdevtools)
 - Follow us on [Twitter](https://twitter.com/nxdevtools)

nx-dev/nx-dev/pages/enterprise.tsx

@@ -0,0 +1,75 @@
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
+import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import {
+  CallToAction,
+  DownloadEbook,
+  EnterpriseAddons,
+  Hero,
+  MetricsAndCustomers,
+  ScaleYourPeople,
+  Security,
+  TrustedBy,
+  SolveYourCi,
+} from '@nx/nx-dev/ui-enterprise';
+
+export function Enterprise(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo
+        title="Nx Enterprise"
+        description="Accelerate your organization's journey to tighter collaboration, better developer experience, and speed…lots of speed."
+        openGraph={{
+          url: 'https://nx.dev' + router.asPath,
+          title: 'Nx Enterprise',
+          description:
+            "Accelerate your organization's journey to tighter collaboration, better developer experience, and speed…lots of speed.",
+          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',
+        }}
+      />
+      <DefaultLayout>
+        <div>
+          <Hero />
+        </div>
+        <div className="mt-32 lg:mt-40">
+          <MetricsAndCustomers />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <ScaleYourPeople />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <Security />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <SolveYourCi />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <DownloadEbook />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <EnterpriseAddons />
+        </div>
+        <div className="mt-32">
+          <TrustedBy />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <CallToAction />
+        </div>
+      </DefaultLayout>
+    </>
+  );
+}
+
+export default Enterprise;

nx-dev/nx-dev/tailwind.config.js

@@ -60,7 +60,6 @@ module.exports = {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/forms'),
-    require('@tailwindcss/line-clamp'),
     FlipAnimation,
   ],
 };

nx-dev/ui-common/src/index.ts

@@ -4,9 +4,12 @@ export * from './lib/breadcrumbs';
 export * from './lib/button';
 export * from './lib/champion-card';
 export * from './lib/champion-perks';
+export * from './lib/default-layout';
 export * from './lib/headers/header';
 export * from './lib/flip-card';
+export * from './lib/nx-agents-icon';
 export * from './lib/nx-cloud-icon';
+export * from './lib/nx-replay-icon';
 export * from './lib/footer';
 export * from './lib/sidebar-container';
 export * from './lib/sidebar';
@@ -19,7 +22,6 @@ export { resourceMenuItems } from './lib/headers/menu-items';
 export { solutionsMenuItems } from './lib/headers/menu-items';
 export { eventItems } from './lib/headers/menu-items';
 export { learnItems } from './lib/headers/menu-items';
-export { useCaseItems } from './lib/headers/menu-items';
 export { plans } from './lib/headers/menu-items';
 export { featuresItems } from './lib/headers/menu-items';
 export { DefaultMenuItem } from './lib/headers/default-menu-item';

nx-dev/ui-common/src/lib/default-layout.tsx

@@ -0,0 +1,27 @@
+import { Footer } from './footer';
+import { Header } from './headers/header';
+import { PropsWithChildren } from 'react';
+
+export function DefaultLayout({ children }: PropsWithChildren): JSX.Element {
+  return (
+    <div className="dark:bg-slate-950">
+      <Header />
+      <div className="relative isolate pt-14">
+        <div
+          className="absolute inset-x-0 -top-40 -z-10 h-full transform-gpu overflow-hidden blur-3xl sm:-top-80"
+          aria-hidden="true"
+        >
+          <div
+            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[46.125rem] -translate-x-1/2 rotate-[35deg] bg-gradient-to-tr from-[#9333ea] to-[#3b82f6] opacity-25 sm:left-[calc(70%-30rem)] sm:w-[92.1875rem] dark:from-[#3b82f6] dark:to-[#9333ea] dark:opacity-15"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 95.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 67.5% 76.7%, 0.1% 64.9%, 77.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 84.1% 44.1%)',
+            }}
+          />
+        </div>
+        <main className="py-24 sm:py-32">{children}</main>
+      </div>
+      <Footer />
+    </div>
+  );
+}

nx-dev/ui-common/src/lib/footer.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 export function Footer(): JSX.Element {
   const navigation = {
     solutions: [
+      { name: 'Nx Enterprise', href: '/enterprise' },
       { name: 'Nx', href: 'https://nx.dev' },
       { name: 'Nx Cloud', href: 'https://nx.app/?utm_source=nx.dev' },
     ],
@@ -155,7 +156,7 @@ export function Footer(): JSX.Element {
       </h2>
       <div className="mx-auto max-w-7xl px-4 pt-12 opacity-50 transition-opacity hover:opacity-100 sm:px-6 lg:px-8 lg:pt-16">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="space-y-4 text-slate-700 dark:text-slate-300 xl:col-span-1">
+          <div className="space-y-4 text-slate-700 xl:col-span-1 dark:text-slate-300">
             <svg
               className="h-14 subpixel-antialiased"
               role="img"

nx-dev/ui-common/src/lib/headers/header.tsx

@@ -46,7 +46,7 @@ export function Header(): JSX.Element {
   }, []);
 
   return (
-    <div className="relative flex print:hidden">
+    <div className="relative inset-x-0 top-0 z-50 flex print:hidden">
       {/*DESKTOP*/}
       <div className="mx-auto hidden w-full max-w-7xl items-center justify-between space-x-10 p-4 px-8 lg:flex">
         {/*PRIMARY NAVIGATION*/}
@@ -156,22 +156,22 @@ export function Header(): JSX.Element {
             <Link
               href="/getting-started/intro"
               title="Documentation"
-              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
             >
               Documentation
             </Link>
             <Link
               href="/blog"
               title="Blog"
-              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
             >
               Blog
             </Link>
             <a
               href="https://nx.app/pricing"
               title="Nx Cloud"
               target="_blank"
-              className="hidden gap-2 px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+              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"
             >
               CI Pricing
               <ArrowUpRightIcon className="h-2 w-2 align-super" />
@@ -225,7 +225,7 @@ export function Header(): JSX.Element {
         <div className="flex-shrink-0 text-sm">
           <nav className="flex items-center justify-center space-x-1">
             <Link
-              className="hidden cursor-pointer px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+              className="hidden cursor-pointer px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
               title="Contact Us"
               href="/contact"
             >

nx-dev/ui-common/src/lib/headers/menu-items.ts

@@ -110,7 +110,7 @@ export const plans: MenuItem[] = [
     name: 'Nx Enterprise',
     description:
       'The ultimate Nx & Nx Cloud toolchain, tailored to your needs.',
-    href: 'https://nx.app/enterprise',
+    href: '/enterprise',
     icon: null,
     isNew: false,
     isHighlight: false,

nx-dev/ui-common/src/lib/sidebar.tsx

@@ -92,7 +92,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
         data-testid={`section-h5:${item.id}`}
         className={cx(
           'flex py-2',
-          'text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs',
+          'text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200',
           item.disableCollapsible ? 'cursor-text' : 'cursor-pointer'
         )}
         onClick={handleCollapseToggle}
@@ -193,12 +193,12 @@ export function SidebarMobile({
       { name: 'Launch Nx', href: '/launch-nx', current: false },
       {
         name: 'Contact',
-        href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu',
+        href: '/contact',
         current: false,
       },
       {
         name: 'Go to app',
-        href: 'https://nx.app/?utm_source=nx.dev&utm_medium=header-menu',
+        href: 'https://cloud.nx.app',
         current: false,
       },
     ],