{/*HERO COMPONENT*/} - {/*LOGO CLOUD*/} - + {/*NX CI*/} + {/*NX STATISTICS*/} - {/*NX IS FAST*/} - - {/*MIGRATE*/} - {/*MONOREPO STYLES*/} + {/*WORST CASE CI TIMES*/} + {/*EXTENSIBLE & INTEGRATED*/} + {/*MIGRATE*/} + {/*AFFECTED & CODE GENERATION*/} {/*GETTING STARTED*/} diff --git a/nx-dev/nx-dev/public/images/background/waves-background.svg b/nx-dev/nx-dev/public/images/background/waves-background.svg deleted file mode 100644 index 1edfd2f1ab0ef9..00000000000000 --- a/nx-dev/nx-dev/public/images/background/waves-background.svg +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.svg b/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.svg new file mode 100644 index 00000000000000..688f48bc69b2a9 --- /dev/null +++ b/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.svg @@ -0,0 +1,928 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.webp b/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.webp new file mode 100644 index 00000000000000..a37ca2638b354a Binary files /dev/null and b/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.webp differ diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-light.svg b/nx-dev/nx-dev/public/images/illustrations/nxdev-light.svg new file mode 100644 index 00000000000000..c6acf96f5cb230 --- /dev/null +++ b/nx-dev/nx-dev/public/images/illustrations/nxdev-light.svg @@ -0,0 +1,929 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-light.webp b/nx-dev/nx-dev/public/images/illustrations/nxdev-light.webp new file mode 100644 index 00000000000000..1f94a5c0d8d6b6 Binary files /dev/null and b/nx-dev/nx-dev/public/images/illustrations/nxdev-light.webp differ diff --git a/nx-dev/ui-home/src/index.ts b/nx-dev/ui-home/src/index.ts index 63d7ed8d49efcc..cdb80732f87349 100644 --- a/nx-dev/ui-home/src/index.ts +++ b/nx-dev/ui-home/src/index.ts @@ -1,6 +1,7 @@ export * from './lib/extensible-and-integrated'; export * from './lib/getting-started'; export * from './lib/hero'; +export * from './lib/improve-worst-ci-case'; export * from './lib/logo-cloud'; export * from './lib/migrate'; export * from './lib/migrations-and-code-generation'; @@ -8,5 +9,6 @@ export * from './lib/monorepo-styles'; export * from './lib/newsletter'; export * from './lib/nx-is-fast'; export * from './lib/nx-statistics'; +export * from './lib/nx-with-ci'; export * from './lib/testimonials'; export * from './lib/why-is-nx-fast'; diff --git a/nx-dev/ui-home/src/lib/getting-started.tsx b/nx-dev/ui-home/src/lib/getting-started.tsx index 8e6fbacd61c6a1..614c359c81c1b3 100644 --- a/nx-dev/ui-home/src/lib/getting-started.tsx +++ b/nx-dev/ui-home/src/lib/getting-started.tsx @@ -1,5 +1,4 @@ import { ButtonLink } from '@nx/nx-dev/ui-common'; -import React from 'react'; export function GettingStarted(): JSX.Element { return ( diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx index 1c979497f1a585..0fb4a0a9a9cdd6 100644 --- a/nx-dev/ui-home/src/lib/hero.tsx +++ b/nx-dev/ui-home/src/lib/hero.tsx @@ -5,12 +5,17 @@ import { } from '@heroicons/react/24/outline'; import { ButtonLink } from '@nx/nx-dev/ui-common'; import Link from 'next/link'; -import React, { useEffect, useState } from 'react'; +import React, { Fragment, useEffect, useState } from 'react'; // @ts-ignore import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { Transition } from '@headlessui/react'; +import { cx } from '@nx/nx-dev/ui-primitives'; export function Hero(): JSX.Element { const [copied, setCopied] = useState(false); + const [displayBuildSystem, setDisplayBuildSystem] = useState(false); + const [displayTools, setDisplayTools] = useState(false); + const [displayCi, setDisplayCi] = useState(false); useEffect(() => { let t: NodeJS.Timeout; if (copied) { @@ -24,69 +29,209 @@ export function Hero(): JSX.Element { }, [copied]); return ( -
-
-
-
-

+
+
+
+ Introducing{' '} + Nx Agents, + the next leap in CI.{' '} + - - - Smart - - , Fast + Read + more + +
+
+
+

+ + Smart + {' '} + Monorepos + + + + + Fast + {' '} + CI +

+

+ Nx is a{' '} + setDisplayBuildSystem(!displayBuildSystem)} + className={cx( + 'cursor-pointer hover:underline inline-flex items-center rounded-md bg-slate-50 my-0.5 px-1.5 py-0.5 transition text-md font-medium ring-1 ring-inset ring-slate-500/10 dark:bg-slate-400/10 dark:ring-slate-400/20', + displayBuildSystem && 'bg-yellow-500/10 dark:bg-yellow-500/20' + )} + > + build system + {' '} + + + optimized for monorepo - Extensible - - Build System + {' '} + with{' '} + setDisplayTools(!displayTools)} + className={cx( + 'cursor-pointer hover:underline inline-flex items-center rounded-md bg-slate-50 my-0.5 px-1.5 py-0.5 transition text-md font-medium ring-1 ring-inset ring-slate-500/10 dark:bg-slate-400/10 dark:ring-slate-400/20', + displayTools && 'bg-cyan-500/10 dark:bg-cyan-500/20' + )} + > + built-in tooling + {' '} + + + for code scaffolding, module boundary enforcement, automated + updates -

-

- Next generation build system with first class monorepo support and - powerful integrations. -

-
- - Get started - + {' '} + and{' '} + setDisplayCi(!displayCi)} + className={cx( + 'cursor-pointer hover:underline inline-flex items-center rounded-md bg-slate-50 my-0.5 px-1.5 py-0.5 transition text-md font-medium ring-1 ring-inset ring-slate-500/10 dark:bg-slate-400/10 dark:ring-slate-400/20', + displayCi && 'bg-fuchsia-500/10 dark:bg-fuchsia-500/20' + )} + > + advanced CI capabilities + {' '} + + + with caching and distribution + + {' '} + . It helps your maintain and scale monorepos, both locally and on + CI. +

+
+ + Get started + - { - setCopied(true); - }} + { + setCopied(true); + }} + > + - -
+ + {copied ? ( + + ) : ( + + )} + +
+
+ Built with + + Rust for speed & + + Rust for extensibility +
+
+
+
+
+ + + {/**/} + {/* PLACEHOLDER ILLUSTRATION*/} + {/**/} +
diff --git a/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx b/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx new file mode 100644 index 00000000000000..0e5cc31201170b --- /dev/null +++ b/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx @@ -0,0 +1,33 @@ +import { ButtonLink } from '@nx/nx-dev/ui-common'; + +export function ImproveWorstCiCase(): JSX.Element { + return ( +
+
+
+

+ Taste the performance, + + improve your worst case CI times in 5 minutes + +

+
+
+
+ + Try it now! + +
+
+
+
+ ); +} diff --git a/nx-dev/ui-home/src/lib/logo-cloud.tsx b/nx-dev/ui-home/src/lib/logo-cloud.tsx index 57e6e97906459a..f0f748405e9dce 100644 --- a/nx-dev/ui-home/src/lib/logo-cloud.tsx +++ b/nx-dev/ui-home/src/lib/logo-cloud.tsx @@ -1,126 +1,150 @@ export function LogoCloud(): JSX.Element { return ( -
-
-
-
- - Walmart - - -
-
- - FedEx - - -
-
- - VMware - - -
-
- - Shopify - - - {/**/} - {/* Audi*/} - {/* */} - {/**/} -
-
- - Storybook - - -
-
- - AWS Amplify - - -
-
- - Microsoft - - -
-
- - RedwoodJS - - - {/**/} - {/* American Airlines*/} - {/* */} - {/**/} -
+ //
+
+
+
+ + Walmart + + +
+
+ + FedEx + + +
+
+ + VMware + + +
+
+ + Shopify + + + {/**/} + {/* Audi*/} + {/* */} + {/**/} +
+
+ + Storybook + + +
+
+ + AWS Amplify + + +
+
+ + React Query + + +
+
+ + Cisco + + +
+
+ + Microsoft + + +
+
+ + RedwoodJS + + + {/**/} + {/* American Airlines*/} + {/* */} + {/**/}
+ //
); } diff --git a/nx-dev/ui-home/src/lib/nx-is-fast.tsx b/nx-dev/ui-home/src/lib/nx-is-fast.tsx index ced27a4cb71903..777b33eca0cd60 100644 --- a/nx-dev/ui-home/src/lib/nx-is-fast.tsx +++ b/nx-dev/ui-home/src/lib/nx-is-fast.tsx @@ -7,7 +7,7 @@ import { ServerStackIcon, } from '@heroicons/react/24/outline'; import { CogIcon } from '@heroicons/react/24/solid'; -import { SectionHeading } from '@nx/nx-dev/ui-common'; +import { Button, ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common'; import { animate, motion, @@ -67,20 +67,17 @@ export function NxIsFast(): JSX.Element { }, [controls, inView, progress]); return ( -
+
- + {/* Nx is fast - + */}
-
-
+
+ {/*
{' '} from its cache. -
-
-
-
-
-

- - Distributed task execution (DTE) -

-
-
- Smart, automated, dynamic distribution of tasks across multiple - machines to get{' '} - - maximum parallelization and CPU efficient - {' '} - CI runs. -
-
-
-
-
-
-

- - Remote caching -

-
-
- - Share your local computation cache - {' '} - with team mates and your CI system for maximum efficiency. -
-
-
+
+ + Learn more about caching + +
+
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* */} + {/* Distributed task execution (DTE)*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/* Smart, automated, dynamic distribution of tasks across multiple*/} + {/* machines to get{' '}*/} + {/* */} + {/* maximum parallelization and CPU efficient*/} + {/* {' '}*/} + {/* CI runs.*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* */} + {/* Remote caching*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/* */} + {/* Share your local computation cache*/} + {/* {' '}*/} + {/* with team mates and your CI system for maximum efficiency.*/} + {/*
*/} + {/*
*/} + {/*
{' '} and what tasks need to be re-run. -
+
+ + Learn more about the "affect" command + +
+
*/}
diff --git a/nx-dev/ui-home/src/lib/nx-statistics.tsx b/nx-dev/ui-home/src/lib/nx-statistics.tsx index ccc4624ae86184..c4e3f4d2f0d98f 100644 --- a/nx-dev/ui-home/src/lib/nx-statistics.tsx +++ b/nx-dev/ui-home/src/lib/nx-statistics.tsx @@ -1,14 +1,15 @@ import { SectionHeading } from '@nx/nx-dev/ui-common'; +import { LogoCloud } from './logo-cloud'; export function NxStatistics(): JSX.Element { return ( -
-
+
+
Trusted by developers, enterprises and open-source projects. -

+

Whether your workspace{' '} has a single project or a thousand @@ -17,6 +18,9 @@ export function NxStatistics(): JSX.Element {

+ {/*LOGO CLOUD*/} + + {/*STATISTICS*/}
@@ -28,7 +32,7 @@ export function NxStatistics(): JSX.Element { developers use it every day
- 1.5M+ + 2M+
@@ -44,7 +48,7 @@ export function NxStatistics(): JSX.Element { monthly npm downloads
- 11M+ + 16M+
diff --git a/nx-dev/ui-home/src/lib/nx-with-ci.tsx b/nx-dev/ui-home/src/lib/nx-with-ci.tsx new file mode 100644 index 00000000000000..065ea445180d30 --- /dev/null +++ b/nx-dev/ui-home/src/lib/nx-with-ci.tsx @@ -0,0 +1,214 @@ +import { + CloudArrowDownIcon, + CogIcon, + ServerStackIcon, +} from '@heroicons/react/24/outline'; +import { SectionHeading } from '@nx/nx-dev/ui-common'; +import { + animate, + motion, + MotionValue, + useAnimation, + useMotionValue, + useTransform, +} from 'framer-motion'; +import { useEffect, useRef } from 'react'; +import { useInView } from 'react-intersection-observer'; + +function Counter({ + from = 0, + to = 10, + round = 0, + progress, +}: { + from: number; + to: number; + round: number; + progress: MotionValue; +}): JSX.Element { + const ref = useRef(); + const value = useTransform(progress, [0, 1000], [from, to], { + clamp: false, + }); + + const { format: formatNumber } = new Intl.NumberFormat('en-US', { + minimumFractionDigits: round, + maximumFractionDigits: round, + }); + + useEffect(() => { + return value.onChange((v) => { + if (ref !== undefined && ref.current !== undefined) + ref.current.firstChild.data = formatNumber( + round === 0 ? Math.round(v) : Number(v.toFixed(round)) + ); + }); + }, [formatNumber, round, value]); + + return {formatNumber(value.get())}; +} + +export function NxWithCi(): JSX.Element { + const progress: MotionValue = useMotionValue(0); + const controls = useAnimation(); + const [ref, inView] = useInView({ triggerOnce: true }); + + useEffect(() => { + if (!inView) return; + controls.start('visible'); + animate(progress, 1000, { + type: 'spring', + damping: 100, + }); + }, [controls, inView, progress]); + + return ( +
+ +
+
+ + Smart project ecosystem + + + Peak CI performance, no matter the project size + +
+
+

+ Nx understands and help you modularize your code, it can ensure + top-tier performance and scalability{' '} + + from your local environment to CI executions + {' '} + with native task and compute distribution. +

+
+
+
+
+
Most workspaces see
+ +
+ 3 times reduction in CI time +
+
+
+
Average
+ +
+ 2.5 times reduction in + computation time +
+
+
+ +
+
+
+
+
+
+

DESCRIPTION HERE - CHANGE TEXT

+
+
+
+
+
+
+
+
+
+

DESCRIPTION HERE - CHANGE TEXT

+
+
+
+
+
+
+
+
+
+

DESCRIPTION HERE - CHANGE TEXT

+
+
+
+
+
+
+
+
+ ); +}