diff --git a/docs/nx-cloud/concepts/cache-security.md b/docs/nx-cloud/concepts/cache-security.md index 0469f9c9bdb2e..2a2367132bbe8 100644 --- a/docs/nx-cloud/concepts/cache-security.md +++ b/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). diff --git a/docs/nx-cloud/concepts/parallelization-distribution.md b/docs/nx-cloud/concepts/parallelization-distribution.md index 71add1b446cfe..dd421d523c974 100644 --- a/docs/nx-cloud/concepts/parallelization-distribution.md +++ b/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. diff --git a/docs/nx-cloud/enterprise/dte/azure-dte.md b/docs/nx-cloud/enterprise/dte/azure-dte.md index f4d7955fd0391..14be65d2f8237 100644 --- a/docs/nx-cloud/enterprise/dte/azure-dte.md +++ b/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 diff --git a/docs/nx-cloud/enterprise/dte/bitbucket-dte.md b/docs/nx-cloud/enterprise/dte/bitbucket-dte.md index a3ace765b4a7c..1c558b2451b13 100644 --- a/docs/nx-cloud/enterprise/dte/bitbucket-dte.md +++ b/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 diff --git a/docs/nx-cloud/enterprise/dte/circle-ci-dte.md b/docs/nx-cloud/enterprise/dte/circle-ci-dte.md index c843835117b82..46e229bf47aaf 100644 --- a/docs/nx-cloud/enterprise/dte/circle-ci-dte.md +++ b/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 diff --git a/docs/nx-cloud/enterprise/dte/github-dte.md b/docs/nx-cloud/enterprise/dte/github-dte.md index 00f4c7d678e6b..79810a78563fd 100644 --- a/docs/nx-cloud/enterprise/dte/github-dte.md +++ b/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 diff --git a/docs/nx-cloud/enterprise/dte/gitlab-dte.md b/docs/nx-cloud/enterprise/dte/gitlab-dte.md index 7589cb23d0f44..4fa83d1a297f6 100644 --- a/docs/nx-cloud/enterprise/dte/gitlab-dte.md +++ b/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 diff --git a/docs/nx-cloud/enterprise/dte/jenkins-dte.md b/docs/nx-cloud/enterprise/dte/jenkins-dte.md index ffe587aa92907..3ce43132eb86c 100644 --- a/docs/nx-cloud/enterprise/dte/jenkins-dte.md +++ b/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 diff --git a/docs/nx-cloud/features/nx-enterprise-on-prem.md b/docs/nx-cloud/features/nx-enterprise-on-prem.md index 32cc76983b5f8..c6798bfda4d7d 100644 --- a/docs/nx-cloud/features/nx-enterprise-on-prem.md +++ b/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 diff --git a/docs/nx-cloud/intro/ci-with-nx.md b/docs/nx-cloud/intro/ci-with-nx.md index d2a750f6fd34f..80c5f3e92970b 100644 --- a/docs/nx-cloud/intro/ci-with-nx.md +++ b/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) diff --git a/nx-dev/nx-dev/pages/enterprise.tsx b/nx-dev/nx-dev/pages/enterprise.tsx new file mode 100644 index 0000000000000..f4fe423d69225 --- /dev/null +++ b/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 ( + <> + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + ); +} + +export default Enterprise; diff --git a/nx-dev/nx-dev/public/images/enterprise/graphs.jpg b/nx-dev/nx-dev/public/images/enterprise/graphs.jpg new file mode 100644 index 0000000000000..302291d130792 Binary files /dev/null and b/nx-dev/nx-dev/public/images/enterprise/graphs.jpg differ diff --git a/nx-dev/nx-dev/public/images/white-paper-ebook.avif b/nx-dev/nx-dev/public/images/white-paper-ebook.avif new file mode 100644 index 0000000000000..02869c201844d Binary files /dev/null and b/nx-dev/nx-dev/public/images/white-paper-ebook.avif differ diff --git a/nx-dev/nx-dev/tailwind.config.js b/nx-dev/nx-dev/tailwind.config.js index d64ea4667cc38..2599ad4a2b059 100644 --- a/nx-dev/nx-dev/tailwind.config.js +++ b/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, ], }; diff --git a/nx-dev/ui-common/src/index.ts b/nx-dev/ui-common/src/index.ts index 1b28c1eca7d6f..3fbb8dc66b748 100644 --- a/nx-dev/ui-common/src/index.ts +++ b/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'; diff --git a/nx-dev/ui-common/src/lib/default-layout.tsx b/nx-dev/ui-common/src/lib/default-layout.tsx new file mode 100644 index 0000000000000..0c8d1f0088302 --- /dev/null +++ b/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 ( +
+
+
+ +
+
+ ); +} diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx index 3111fb78de852..e1df2e01f7f01 100644 --- a/nx-dev/ui-common/src/lib/footer.tsx +++ b/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' }, ], diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx index 18d5ee1e3dc51..5066f95a33160 100644 --- a/nx-dev/ui-common/src/lib/headers/header.tsx +++ b/nx-dev/ui-common/src/lib/headers/header.tsx @@ -46,7 +46,7 @@ export function Header(): JSX.Element { }, []); return ( -
+
{/*DESKTOP*/}
{/*PRIMARY NAVIGATION*/} diff --git a/nx-dev/ui-common/src/lib/headers/menu-items.ts b/nx-dev/ui-common/src/lib/headers/menu-items.ts index 9cb6b7279961a..709b7ee4bc134 100644 --- a/nx-dev/ui-common/src/lib/headers/menu-items.ts +++ b/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, diff --git a/nx-dev/ui-common/src/lib/sidebar.tsx b/nx-dev/ui-common/src/lib/sidebar.tsx index c82ebf2152d72..abf31b7754d64 100644 --- a/nx-dev/ui-common/src/lib/sidebar.tsx +++ b/nx-dev/ui-common/src/lib/sidebar.tsx @@ -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, }, ], diff --git a/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx b/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx index abe9e589e712a..566e0a5373494 100644 --- a/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx +++ b/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx @@ -23,6 +23,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
diff --git a/nx-dev/ui-enterprise/.babelrc b/nx-dev/ui-enterprise/.babelrc new file mode 100644 index 0000000000000..1ea870ead410c --- /dev/null +++ b/nx-dev/ui-enterprise/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/nx-dev/ui-enterprise/.eslintrc.json b/nx-dev/ui-enterprise/.eslintrc.json new file mode 100644 index 0000000000000..a39ac5d057803 --- /dev/null +++ b/nx-dev/ui-enterprise/.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-enterprise/README.md b/nx-dev/ui-enterprise/README.md new file mode 100644 index 0000000000000..7e8b2c6d8f1f7 --- /dev/null +++ b/nx-dev/ui-enterprise/README.md @@ -0,0 +1,7 @@ +# nx-dev-ui-enterprise + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test nx-dev-ui-enterprise` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/nx-dev/ui-enterprise/jest.config.ts b/nx-dev/ui-enterprise/jest.config.ts new file mode 100644 index 0000000000000..3781add29bc56 --- /dev/null +++ b/nx-dev/ui-enterprise/jest.config.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +export default { + displayName: 'nx-dev-ui-enterprise', + transform: { + '^.+\\.[tj]sx?$': 'babel-jest', + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../coverage/nx-dev/ui-enterprise', + preset: '../../jest.preset.js', +}; diff --git a/nx-dev/ui-enterprise/project.json b/nx-dev/ui-enterprise/project.json new file mode 100644 index 0000000000000..46638cd026bb4 --- /dev/null +++ b/nx-dev/ui-enterprise/project.json @@ -0,0 +1,11 @@ +{ + "name": "nx-dev-ui-enterprise", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "nx-dev/ui-enterprise/src", + "projectType": "library", + "tags": ["scope:nx-dev", "type:ui"], + "targets": { + "lint": {}, + "test": {} + } +} diff --git a/nx-dev/ui-enterprise/src/index.ts b/nx-dev/ui-enterprise/src/index.ts new file mode 100644 index 0000000000000..b9a6c7abff577 --- /dev/null +++ b/nx-dev/ui-enterprise/src/index.ts @@ -0,0 +1,10 @@ +export * from './lib/call-to-action'; +export * from './lib/download-case-study'; +export * from './lib/download-ebook'; +export * from './lib/enterprise-addons'; +export * from './lib/hero'; +export * from './lib/metrics-and-customers'; +export * from './lib/scale-your-people'; +export * from './lib/security'; +export * from './lib/trusted-by'; +export * from './lib/solve-your-ci'; diff --git a/nx-dev/ui-enterprise/src/lib/bento-grid.tsx b/nx-dev/ui-enterprise/src/lib/bento-grid.tsx new file mode 100644 index 0000000000000..f1a529fdd9096 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/bento-grid.tsx @@ -0,0 +1,77 @@ +import Link from 'next/link'; +import { ReactNode } from 'react'; +import { cx } from '@nx/nx-dev/ui-primitives'; + +export const BentoGrid = ({ + className, + children, +}: { + className?: string; + children?: ReactNode; +}) => { + return ( +
+ {children} +
+ ); +}; + +export const BentoGridItem = ({ + className, + title = null, + description = null, + header, + url = null, + icon, +}: { + className?: string; + title?: string | ReactNode | null; + description?: string | ReactNode | null; + header: ReactNode; + icon?: ReactNode; + url?: string | null; +}) => { + return ( +
+ {header} +
+
+
+ {icon} {title} +
+ {description && ( +
+ {description} +
+ )} +
+ {url ? ( + + + + + + ) : null} +
+
+ ); +}; diff --git a/nx-dev/ui-enterprise/src/lib/call-to-action.tsx b/nx-dev/ui-enterprise/src/lib/call-to-action.tsx new file mode 100644 index 0000000000000..f60699fba317b --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/call-to-action.tsx @@ -0,0 +1,84 @@ +import Link from 'next/link'; + +export function CallToAction(): JSX.Element { + return ( +
+ +
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/download-case-study.tsx b/nx-dev/ui-enterprise/src/lib/download-case-study.tsx new file mode 100644 index 0000000000000..1decb9eba02ff --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/download-case-study.tsx @@ -0,0 +1,31 @@ +import { ButtonLink } from '@nx/nx-dev/ui-common'; + +export function DownloadCaseStudy(): JSX.Element { + return ( +
+
+

+ Our case study +

+
+
+

+ See how a $7B bank saved money, reduced CI times by 62% and + improved developer productivity. +

+
+
+ + Download (pdf) + +
+
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/download-ebook.tsx b/nx-dev/ui-enterprise/src/lib/download-ebook.tsx new file mode 100644 index 0000000000000..7db2dc1961642 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/download-ebook.tsx @@ -0,0 +1,63 @@ +import { ButtonLink } from '@nx/nx-dev/ui-common'; + +export function DownloadEbook(): JSX.Element { + return ( +
+
+ +
+

+ Download +
+ Fast CI for monorepos +

+

+ Discover how to scale your organization without feeling the pain of + CI, while having a better developer experience and fitting your + requirements. +

+
+ + Download{' '} + (pdf) + +
+
+
+ App screenshot + + ebook + +
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx b/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx new file mode 100644 index 0000000000000..22f9bd1e79ed7 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx @@ -0,0 +1,79 @@ +import { SectionHeading } from './temp/typography'; +import { + BoltIcon, + ChevronDoubleRightIcon, + UsersIcon, + WrenchIcon, +} from '@heroicons/react/24/outline'; + +export function EnterpriseAddons(): JSX.Element { + return ( +
+
+
+ + Partner with the Nx team + +
+
+
+
+
+
+
+ Move fast, move together +
+
+

+ We know Nx, you know your code. Together, we can build your + ultimate developer platform, tailored to your team. +

+
+
+
+
+
+
+ No trial and error necessary +
+
+

+ With the help of the developers of Nx, you'll use Nx and Nx + Cloud to its full potential, the first time. No matter how + long you've been using Nx, we'll find ways to make it more + powerful. +

+
+
+
+
+
+
+ Migrate to Nx & Nx Cloud +
+
+

+ Wherever your team is at in their Nx journey, our experts will + make it easy to move ahead and capture the full value of Nx + and Nx Cloud. +

+
+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/hero.tsx b/nx-dev/ui-enterprise/src/lib/hero.tsx new file mode 100644 index 0000000000000..433b0e4ab15be --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/hero.tsx @@ -0,0 +1,49 @@ +import { SectionHeading } from './temp/typography'; +import { ButtonLink } from '@nx/nx-dev/ui-common'; +import Link from 'next/link'; + +export function Hero(): JSX.Element { + return ( +
+
+
+ + Nx Enterprise + + + Accelerate your organization's journey to tighter collaboration, + better developer experience, and speed…lots of speed. + +
+ + Contact sales + + + {/**/} + {/* Book a demo{' '}*/} + {/*
+
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/logos/7eleven.tsx b/nx-dev/ui-enterprise/src/lib/logos/7eleven.tsx new file mode 100644 index 0000000000000..6c75f8a8a508c --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/7eleven.tsx @@ -0,0 +1,38 @@ +import { FC, SVGProps } from 'react'; + +export const SevenElevenIcon: FC> = (props) => ( + + 7eleven + + +); + +export const SevenElevenColoredIcon: FC> = (props) => ( + + 7eleven + + + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/american-airlines.tsx b/nx-dev/ui-enterprise/src/lib/logos/american-airlines.tsx new file mode 100644 index 0000000000000..0b3accf87239e --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/american-airlines.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#0071CE` for a colored version. + */ +export const AmericanAirlinesIcon: FC> = (props) => ( + + American Airlines + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/aws-amplify.tsx b/nx-dev/ui-enterprise/src/lib/logos/aws-amplify.tsx new file mode 100644 index 0000000000000..a8d540cbd78da --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/aws-amplify.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#FF9900` for a colored version. + */ +export const AwsAmplifyIcon: FC> = (props) => ( + + AWS Amplify + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/bill.tsx b/nx-dev/ui-enterprise/src/lib/logos/bill.tsx new file mode 100644 index 0000000000000..5972a7eb2e19a --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/bill.tsx @@ -0,0 +1,34 @@ +import { FC, SVGProps } from 'react'; + +export const BillIcon: FC> = (props) => ( + + bill + + +); + +export const BillColoredIcon: FC> = (props) => ( + + bill + + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/capital-one.tsx b/nx-dev/ui-enterprise/src/lib/logos/capital-one.tsx new file mode 100644 index 0000000000000..a8dea3a475079 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/capital-one.tsx @@ -0,0 +1,38 @@ +import { FC, SVGProps } from 'react'; + +export const CapitalOneIcon: FC> = (props) => ( + + Capital One + + +); + +export const CapitalOneColoredIcon: FC> = (props) => ( + + 7eleven + + + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/caterpillar.tsx b/nx-dev/ui-enterprise/src/lib/logos/caterpillar.tsx new file mode 100644 index 0000000000000..3272eb89e280f --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/caterpillar.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#FFCD11` for a colored version. + */ +export const CaterpillarIcon: FC> = (props) => ( + + Caterpillar + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/cisco.tsx b/nx-dev/ui-enterprise/src/lib/logos/cisco.tsx new file mode 100644 index 0000000000000..00c076bfa94da --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/cisco.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#1BA0D7` for a colored version. + */ +export const CiscoIcon: FC> = (props) => ( + + Cisco + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/fico.tsx b/nx-dev/ui-enterprise/src/lib/logos/fico.tsx new file mode 100644 index 0000000000000..38919e8bc51ad --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/fico.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#0A6DE6` for a colored version. + */ +export const FicoIcon: FC> = (props) => ( + + Fico + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/hilton.tsx b/nx-dev/ui-enterprise/src/lib/logos/hilton.tsx new file mode 100644 index 0000000000000..92e979babe53a --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/hilton.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const HiltonIcon: FC> = (props) => ( + + Hilton + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/man.tsx b/nx-dev/ui-enterprise/src/lib/logos/man.tsx new file mode 100644 index 0000000000000..722c594f24313 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/man.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#E40045` for a colored version. + */ +export const ManIcon: FC> = (props) => ( + + MAN + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/react-query.tsx b/nx-dev/ui-enterprise/src/lib/logos/react-query.tsx new file mode 100644 index 0000000000000..a551e8c557aa8 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/react-query.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#FF4154` for a colored version. + */ +export const ReactQueryIcon: FC> = (props) => ( + + React Query + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/redwood-js.tsx b/nx-dev/ui-enterprise/src/lib/logos/redwood-js.tsx new file mode 100644 index 0000000000000..10bd42d978b99 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/redwood-js.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#BF4722` for a colored version. + */ +export const RedwoodJsIcon: FC> = (props) => ( + + RedwoodJS + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/royal-bank-of-canada.tsx b/nx-dev/ui-enterprise/src/lib/logos/royal-bank-of-canada.tsx new file mode 100644 index 0000000000000..9042b49e62118 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/royal-bank-of-canada.tsx @@ -0,0 +1,52 @@ +import { FC, SVGProps } from 'react'; + +export const RoyalBankOfCanadaIcon: FC> = (props) => ( + + Royal Bank of Canada + + +); + +export const RoyalBankOfCanadaColoredIcon: FC> = ( + props +) => ( + + Royal Bank of Canada + + + {/**/} + + + + + + + + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/shopify.tsx b/nx-dev/ui-enterprise/src/lib/logos/shopify.tsx new file mode 100644 index 0000000000000..50e7ff84f1b16 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/shopify.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#7AB55C` for a colored version. + */ +export const ShopifyIcon: FC> = (props) => ( + + Shopify + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/storybook.tsx b/nx-dev/ui-enterprise/src/lib/logos/storybook.tsx new file mode 100644 index 0000000000000..7537caa47ee2f --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/storybook.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#FF4785` for a colored version. + */ +export const StorybookIcon: FC> = (props) => ( + + Storybook + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/vmware.tsx b/nx-dev/ui-enterprise/src/lib/logos/vmware.tsx new file mode 100644 index 0000000000000..51dc77679c9e5 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/vmware.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#607078` for a colored version. + */ +export const VmwareIcon: FC> = (props) => ( + + VMware + + +); diff --git a/nx-dev/ui-enterprise/src/lib/logos/wallmart.tsx b/nx-dev/ui-enterprise/src/lib/logos/wallmart.tsx new file mode 100644 index 0000000000000..bd51fb6f3af04 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/logos/wallmart.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#0078D2` for a colored version. + */ +export const WalmartIcon: FC> = (props) => ( + + Walmart + + +); diff --git a/nx-dev/ui-enterprise/src/lib/metrics-and-customers.tsx b/nx-dev/ui-enterprise/src/lib/metrics-and-customers.tsx new file mode 100644 index 0000000000000..70ccb23c7d417 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/metrics-and-customers.tsx @@ -0,0 +1,180 @@ +import { motion, Variants } from 'framer-motion'; +import { DownloadCaseStudy } from './download-case-study'; +import { RoyalBankOfCanadaColoredIcon } from './logos/royal-bank-of-canada'; +import { ManIcon } from './logos/man'; +import { ShopifyIcon } from './logos/shopify'; +import { CapitalOneIcon } from './logos/capital-one'; +import { VmwareIcon } from './logos/vmware'; +import { StorybookIcon } from './logos/storybook'; +import { RedwoodJsIcon } from './logos/redwood-js'; +import { CaterpillarIcon } from './logos/caterpillar'; +import { SevenElevenColoredIcon } from './logos/7eleven'; +import { BillColoredIcon } from './logos/bill'; +import { FicoIcon } from './logos/fico'; +import { HiltonIcon } from './logos/hilton'; +import { CiscoIcon } from './logos/cisco'; + +export function MetricsAndCustomers(): JSX.Element { + const downloadElement: Variants = { + hidden: { + opacity: 0, + translateY: 90, + }, + visible: { + opacity: 1, + translateY: 0, + transition: { + duration: 1, + ease: 'easeInOut', + type: 'tween', + }, + }, + }; + return ( +
+ +
+
+
+
Speed
+
+ + 30-70% Faster + +
+
+
+
Infra Cost
+
+ + 40-75% Cheaper + +
+
+
+
Compute
+
+ + 30-60% Less + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx b/nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx new file mode 100644 index 0000000000000..41bb8fc30ebdc --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx @@ -0,0 +1,62 @@ +import { BoltIcon, UserGroupIcon } from '@heroicons/react/24/outline'; +import { + NxAgentsIcon, + NxReplayIcon, + SectionHeading, +} from '@nx/nx-dev/ui-common'; + +const features = [ + { + name: 'Cache with Nx Replay', + description: + 'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.', + icon: NxReplayIcon, + }, + { + name: 'Distribution with Nx Agents', + description: + 'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.', + icon: NxAgentsIcon, + }, + { + name: 'Split tasks with Atomizer', + description: + 'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.', + icon: BoltIcon, + }, +]; + +export function ScaleCiAndTeams(): JSX.Element { + return ( +
+
+ + Scale CI & teams + +

+ Quis tellus eget adipiscing convallis sit sit eget aliquet quis. + Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. + In mi viverra elit nunc. +

+
+
+
+ {features.map((feature) => ( +
+
+
+
+

{feature.description}

+
+
+ ))} +
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx b/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx new file mode 100644 index 0000000000000..235e6fb3ffdd7 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx @@ -0,0 +1,278 @@ +import { + BuildingOffice2Icon, + Cog6ToothIcon, + CubeTransparentIcon, + IdentificationIcon, + PhotoIcon, + SquaresPlusIcon, + UserGroupIcon, +} from '@heroicons/react/24/outline'; +import { SectionHeading } from './temp/typography'; + +export function ScaleYourPeople(): JSX.Element { + return ( +
+
+
+ + Scale your people + +
+ + Build big things with the efficiency of a small team by increasing + collaboration and developer mobility, reducing wait time and + duplication, and establishing clear ownership. + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + Product screenshot + +
+ + +
+
+ + coming soon + +
+
+
+ +
+
+

+ Monorepo, polyrepo, multi-monorepo? +

+

+ Whatever you’re working with, Nx Enterprise will give you the + visibility you need to understand what they have in common, + how they relate, and how they differ. +

+
+
+
+
+ +
+
+

+ Monorepo experience in a polyrepo environment +

+

+ Nx Enterprise will support optional monorepo-like constraints + to be applied across Nx Workspace boundaries in a seamless and + flexible way. Move fast with confidence. +

+
+
+
+
+ +
+
+

+ Automation over coordination +

+

+ Testing and cross-repo coordination can be left to Nx + Enterprise tooling instead of manual human intervention to + test and enforce cross-repo dependencies & constraints. +

+
+
+
+
+ {/*
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*

*/} + {/* Crystal clear organizations*/} + {/*

*/} + {/*

*/} + {/* Regardless of how many Nx Workspaces your company has, Nx Enterprise*/} + {/* can give you the visibility you need to understand what they have in*/} + {/* common, how they relate, and how they differ. Developers are no*/} + {/* longer relegated to contributing to one Nx Workspace.*/} + {/*

*/} + {/*
*/} + {/*
*/} +
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/security.tsx b/nx-dev/ui-enterprise/src/lib/security.tsx new file mode 100644 index 0000000000000..407d692d01061 --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/security.tsx @@ -0,0 +1,112 @@ +import { SectionHeading } from './temp/typography'; + +export function Security(): JSX.Element { + return ( +
+
+
+
+ + Security + + + Nx Cloud is certified to the industry standards, is constantly + monitored and{' '} + + issue security Trust Reports powered by Vanta + + . + + +
+
+ + + + + SSAE18/SOC 2 type 1 and type 2 reports +
+
+ + European Union + + + GDPR compliance +
+
+
+
+
+

+ Dedicated infrastructure +

+

+ We can support you to self-host Nx Cloud within your own + infrastructure or, depending on your needs, run Nx Cloud on + managed hosts within our cloud. +

+
+
+

+ Application security +

+

+ We consistently review our security policies and collaborate + with third parties for penetration testing to promptly identify + and mitigate potential risks. +

+
+
+

+ US & EU instances available +

+

+ We support region specific hosting of Nx Cloud in the event IT + security or data protection policies restrict international + transfers. +

+
+
+
+
+
+ ); +} diff --git a/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx b/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx new file mode 100644 index 0000000000000..1240510cc953e --- /dev/null +++ b/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx @@ -0,0 +1,825 @@ +import { + ArrowsRightLeftIcon, + BanknotesIcon, + ChartBarSquareIcon, + ChevronRightIcon, + ClipboardDocumentIcon, + CloudArrowDownIcon, + CursorArrowRaysIcon, + LightBulbIcon, + SparklesIcon, + Square3Stack3DIcon, +} from '@heroicons/react/24/outline'; +import { animate, motion, useMotionValue, useTransform } from 'framer-motion'; +import { useEffect } from 'react'; +import { SectionHeading } from './temp/typography'; +import { BentoGrid, BentoGridItem } from './bento-grid'; +import { cx } from '@nx/nx-dev/ui-primitives'; + +export function SolveYourCi(): JSX.Element { + return ( +
+
+
+ + Solve your CI + +
+ + Monorepos help you scale your people but they can also make CI a + challenge. Nx Enterprise solves it by providing efficient, fast and + reliable CI that can handle workflows of any size. + + {/*FEATURES CONTAINER*/} + + {items.map((item, i) => ( + p:text-lg]', item.className)} + icon={item.icon} + url={item.url} + /> + ))} + + + {/*TEXT*/} +
+ + + +
+
+
+ +
+
+

+ Both faster and cheaper +

+

+ Current CI providers aren’t made for monorepos. They’re + low-level and static in their configuration. The combination + of Nx Agents and Nx Replay lets you reuse computation from + other runs and utilizes the allocated VMs in the most optimal + way. +

+
+
+
+
+ +
+
+

+ Solving E2E tests +

+

+ Atomizer splits large e2e projects into fine-grained test + runs, enabling more efficient distribution and dramatically + reducing CI times. It also identifies flaky e2e tests at the + file level and re-runs those specific tests. +

+
+
+
+
+ +
+
+

+ What, not how +

+

+ Nx Enterprise simplifies CI configuration, emphasizing which + tasks to execute over how with no need to tweak your CI + scripts as your monorepo evolves. This simplified + configuration cuts down on CI maintenance and increases + stability. +

+
+
+
+
+
+
+ ); +} + +const Caching = () => { + const variants = { + hidden: { + opacity: 0, + transition: { + when: 'afterChildren', + }, + }, + visible: { + opacity: 1, + }, + }; + const items = [ + { + cache: 'remote', + target: 'build', + project: 'website', + }, + { + cache: 'remote', + target: 'test', + project: 'express', + }, + { + cache: 'remote', + target: 'build', + project: 'eslint', + }, + { + cache: 'remote', + target: 'lint', + project: 'autoloan', + }, + { + cache: 'remote', + target: 'test', + project: 'website', + }, + { + cache: 'remote', + target: 'lint', + project: 'website', + }, + { + cache: 'remote', + target: 'build-base', + project: 'express', + }, + { + cache: 'remote', + target: 'build', + project: 'express', + }, + { + cache: 'remote', + target: 'lint', + project: 'express', + }, + { + cache: 'remote', + target: 'test', + project: 'autoloan', + }, + ]; + return ( + + + +
+ {items.map((i, idx) => ( +
+
+
+ + {i.cache} + +
+
+ {i.project}:{i.target} +
+
< 1s
+
+ ))} +
+ + ); +}; + +const Atomizer = () => { + const variants = { + hidden: { + opacity: 0, + transition: { + when: 'afterChildren', + }, + }, + visible: { + opacity: 1, + }, + }; + const itemVariants = { + visible: (i: number) => ({ + opacity: 1, + x: 0, + transition: { + delay: i * 0.2, + duration: 0.275, + ease: 'easeOut', + when: 'beforeChildren', + staggerChildren: 0.3, + }, + }), + hidden: { + opacity: 0, + x: -100, + transition: { + when: 'afterChildren', + }, + }, + }; + const uiDialogsTests = ['e2e-ui-cdk:e2e', 'e2e-ui-layout:e2e']; + const loansTests = [ + 'loans-front-store:e2e', + 'loans-loans:e2e', + 'loans-credit-card:e2e', + 'loans-workflows:e2e', + 'loans-mortgage:e2e', + 'loans-submission:e2e', + ]; + const DefaultConnector = () => ( + <> +