import { SparklesIcon } from '@heroicons/react/24/outline'; import { SectionHeading } from '@nx/nx-dev/ui-common'; import { animate, motion, MotionValue, useAnimation, useMotionValue, useTransform, } from 'framer-motion'; import Link from 'next/link'; 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 (
From 90 to 10 minutes Effortless, Fast CI

Nx comes with the building blocks to not only scale your monorepo locally and provide great DX while developing, but also to address one of the major pain points:{' '} fast, maintainable CI.

CI without Nx
minutes
CI with Nx
minutes
Built-in local and remote caching to speed up your tasks and save you time and money.
A single line to enable distributed computation, across multiple machines. Fully managed agents, dynamically allocated based on PR size.
A powerful Artificial Intelligence equipped with context of your workspace, commit history, and historical build timing data.
); } export const NxAgentsIcon = (props: any) => ( ); export const NxCacheIcon = (props: any) => ( ); export const NxWorkflowsIcon = (props: any) => ( );