diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx index 7d5e379f0c25f..e64a77e7ba072 100644 --- a/nx-dev/nx-dev/pages/index.tsx +++ b/nx-dev/nx-dev/pages/index.tsx @@ -4,6 +4,7 @@ import { CiForMonorepos, Hero, HetznerCloudTestimonial, + MonorepoAiSupport, SmarterToolsForMonorepos, Statistics, TeamAndCommunity, @@ -46,6 +47,9 @@ export default function Index(): JSX.Element {
+
+ +
diff --git a/nx-dev/nx-dev/public/images/home/nx-ai-dark-lighting.avif b/nx-dev/nx-dev/public/images/home/nx-ai-dark-lighting.avif new file mode 100644 index 0000000000000..61123abf19b17 Binary files /dev/null and b/nx-dev/nx-dev/public/images/home/nx-ai-dark-lighting.avif differ diff --git a/nx-dev/nx-dev/public/images/home/nx-ai-light-lighting.avif b/nx-dev/nx-dev/public/images/home/nx-ai-light-lighting.avif new file mode 100644 index 0000000000000..0a1bcad69fd06 Binary files /dev/null and b/nx-dev/nx-dev/public/images/home/nx-ai-light-lighting.avif differ diff --git a/nx-dev/nx-dev/public/images/home/nx-ai.avif b/nx-dev/nx-dev/public/images/home/nx-ai.avif new file mode 100644 index 0000000000000..c6491856745e5 Binary files /dev/null and b/nx-dev/nx-dev/public/images/home/nx-ai.avif differ diff --git a/nx-dev/ui-home/src/index.ts b/nx-dev/ui-home/src/index.ts index 8513843105df1..76a71e8dd892e 100644 --- a/nx-dev/ui-home/src/index.ts +++ b/nx-dev/ui-home/src/index.ts @@ -1,4 +1,5 @@ export * from './lib/ci-for-monorepos'; +export * from './lib/monorepo-ai-support'; export * from './lib/hero'; export * from './lib/hetzner-cloud-testimonial'; export * from './lib/smarter-tools-for-monorepos'; diff --git a/nx-dev/ui-home/src/lib/illustrations/nx-ai-light.tsx b/nx-dev/ui-home/src/lib/illustrations/nx-ai-light.tsx new file mode 100644 index 0000000000000..a226ea339c6eb --- /dev/null +++ b/nx-dev/ui-home/src/lib/illustrations/nx-ai-light.tsx @@ -0,0 +1,6585 @@ +import { ReactElement } from 'react'; + +export function NxAiLightLighting(): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export function NxAiLight(): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/nx-dev/ui-home/src/lib/monorepo-ai-support.tsx b/nx-dev/ui-home/src/lib/monorepo-ai-support.tsx new file mode 100644 index 0000000000000..205091dd9e731 --- /dev/null +++ b/nx-dev/ui-home/src/lib/monorepo-ai-support.tsx @@ -0,0 +1,251 @@ +import { SectionHeading, Strong } from '@nx/nx-dev/ui-common'; +import { ReactElement } from 'react'; +import { + AngularIcon, + CursorIcon, + GithubCopilot, + GoIcon, + IntellijAiIcon, + JavaIcon, + NodeIcon, + ReactIcon, + StorybookIcon, + TypeScriptIcon, +} from '@nx/nx-dev/ui-icons'; +import Image from 'next/image'; + +export function MonorepoAiSupport(): ReactElement { + return ( +
+ + Promote your LLM from Junior Dev to Chief Architect + +
+ + AI-powered coding assistants can edit files, but they’re blind to the + bigger picture –{' '} + + they don’t understand how your entire codebase fits together + + . Nx changes that. + + + With full visibility into your{' '} + + monorepo’s project relationships, dependencies, and ownership + + , Nx enables your LLM to move beyond local file changes to make{' '} + informed architectural decisions. Future-proof your + development with system-wide intelligence, not just AI-friendly tools. + +
+ +
+ +
+ ); +} + +function ProjectGraph(): ReactElement { + return ( +
+
+ Project Graph +
+ + + + + + + + + + +
+ ); +} diff --git a/nx-dev/ui-icons/src/index.ts b/nx-dev/ui-icons/src/index.ts index 1f08593030244..189a022ad0be8 100644 --- a/nx-dev/ui-icons/src/index.ts +++ b/nx-dev/ui-icons/src/index.ts @@ -1,3 +1,8 @@ +// AI +export * from './lib/ai/cursor'; +export * from './lib/ai/github-copilot'; +export * from './lib/ai/intellij-ai'; + // CI PROVIDERS export * from './lib/ci-providers/azure-devops'; export * from './lib/ci-providers/bitbucket'; diff --git a/nx-dev/ui-icons/src/lib/ai/cursor.tsx b/nx-dev/ui-icons/src/lib/ai/cursor.tsx new file mode 100644 index 0000000000000..61fe898199ad7 --- /dev/null +++ b/nx-dev/ui-icons/src/lib/ai/cursor.tsx @@ -0,0 +1,21 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#000000` for a colored version. + */ +export const CursorIcon: FC> = (props) => ( + + Cursor + + + + + + +); diff --git a/nx-dev/ui-icons/src/lib/ai/github-copilot.tsx b/nx-dev/ui-icons/src/lib/ai/github-copilot.tsx new file mode 100644 index 0000000000000..88d4c069a5f51 --- /dev/null +++ b/nx-dev/ui-icons/src/lib/ai/github-copilot.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#000000` for a colored version. + */ +export const GithubCopilot: FC> = (props) => ( + + GitHub Copilot + + +); diff --git a/nx-dev/ui-icons/src/lib/ai/intellij-ai.tsx b/nx-dev/ui-icons/src/lib/ai/intellij-ai.tsx new file mode 100644 index 0000000000000..296a793acd716 --- /dev/null +++ b/nx-dev/ui-icons/src/lib/ai/intellij-ai.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +/** + * Use `#955AE0` for a colored version. + */ +export const IntellijAiIcon: FC> = (props) => ( + + Intellij AI + + +);