cad4d26dcd
In the nx-dev pages, adjust the interface to utilize 'EnterpriseLayout' instead of 'DefaultLayout'. The duration of the transition in 'customer-logos.tsx' has been reduced from 500 to 200 to boost responsiveness. The 'enterprise-layout.tsx' file was added and contains new animation elements to enhance end-user experience. Updates were made to 'hero.tsx', simplifying and enhancing SVG animation.
292 lines
13 KiB
TypeScript
292 lines
13 KiB
TypeScript
import { ReactElement } from 'react';
|
||
import { SectionHeading, Strong } from '@nx/nx-dev/ui-common';
|
||
import Link from 'next/link';
|
||
import { VisibilityAnimation } from './animations/visibility';
|
||
import { ConformanceAnimation } from './animations/conformance';
|
||
import { OwnershipAnimation } from './animations/ownership';
|
||
|
||
export function ScaleYourOrganization(): ReactElement {
|
||
return (
|
||
<section className="overflow-hidden">
|
||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start">
|
||
<div className="flex items-start justify-end lg:order-first">
|
||
<img
|
||
alt="Nx Polygraph"
|
||
src="/images/enterprise/neurons-light.avif"
|
||
width={2111}
|
||
height={921}
|
||
className="w-[48rem] max-w-none sm:w-[57rem] md:-mr-4 lg:mr-0 dark:hidden"
|
||
/>
|
||
<img
|
||
alt="Nx Polygraph"
|
||
src="/images/enterprise/neurons-dark.avif"
|
||
width={2111}
|
||
height={921}
|
||
className="hidden w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-slate-400/10 sm:w-[57rem] md:-mr-4 lg:mr-0 dark:block"
|
||
/>
|
||
</div>
|
||
<div className="lg:ml-auto lg:pl-4 lg:pt-4">
|
||
<div className="lg:max-w-lg">
|
||
<SectionHeading as="p" variant="subtitle" className="mt-6">
|
||
Get to market faster by avoiding the most common pitfall of
|
||
growing teams: silos. Silos create waste, have poorly defined
|
||
ownership, lack visibility - and slow everything down.
|
||
</SectionHeading>
|
||
<SectionHeading as="p" variant="subtitle" className="mt-4">
|
||
Polygraph is a set of Nx Enterprise features built to help large
|
||
organizations{' '}
|
||
<Strong>
|
||
see across workspaces and take action to accelerate
|
||
time-to-market
|
||
</Strong>
|
||
.
|
||
</SectionHeading>
|
||
<figure className="mt-12 border-l border-slate-200 pl-8 dark:border-slate-800">
|
||
<blockquote className="text-base/7">
|
||
<p>
|
||
“Nx means tooling and efficiency around our software
|
||
development lifecycle that empowers us to move a lot faster,
|
||
ship code faster and more reliably.”
|
||
</p>
|
||
</blockquote>
|
||
<figcaption className="mt-6 flex items-center gap-x-4 text-sm/6">
|
||
<img
|
||
alt="Justin Schwartzenberger"
|
||
src="https://avatars.githubusercontent.com/u/1243236?v=4"
|
||
className="size-8 flex-none rounded-full"
|
||
/>
|
||
<div>
|
||
<div className="font-semibold">Justin Schwartzenberger</div>
|
||
<div className="text-slate-500">
|
||
Principal Software Engineer, SiriusXM
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mx-auto mt-16 max-w-4xl sm:mt-20 lg:mt-24">
|
||
<dl className="mx-auto mt-10 flex flex-col">
|
||
<div className="group/section flex items-center items-stretch gap-16">
|
||
<div className="hidden max-w-[35%] shrink-0 lg:block">
|
||
<VisibilityAnimation
|
||
autoPlay={true}
|
||
speed={1}
|
||
className="max-w-full scale-75"
|
||
/>
|
||
</div>
|
||
<div className="relative flex gap-x-4">
|
||
<div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
|
||
<div className="w-px bg-slate-200 dark:bg-slate-800" />
|
||
</div>
|
||
<div className="relative mt-1 flex size-6 flex-none items-center justify-center bg-white dark:bg-slate-950">
|
||
<div className="size-1.5 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:bg-slate-800 dark:ring-slate-600" />
|
||
</div>
|
||
<div className="flex flex-col pb-10">
|
||
<dt className="text-base font-semibold leading-7 text-black dark:text-white">
|
||
<div className="mb-6 flex">
|
||
<div className="rounded-lg bg-blue-500 px-2 py-0.5 font-semibold text-white dark:bg-white dark:text-black">
|
||
Visibility
|
||
</div>
|
||
</div>
|
||
See dependencies across teams and repos
|
||
</dt>
|
||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7">
|
||
<p className="flex-auto">
|
||
In an organization with hundreds of repos it can be hard
|
||
to understand the relationships between different parts of
|
||
your ever-growing codebases. With the Workspace Graph, see
|
||
dependencies across all your repos to understand which
|
||
projects and teams are affected by changes in a single
|
||
repo.
|
||
</p>
|
||
</dd>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="group/section flex items-center gap-16">
|
||
<div className="hidden max-w-[35%] shrink-0 lg:block">
|
||
<ConformanceAnimation
|
||
autoPlay={true}
|
||
speed={1}
|
||
className="max-w-full scale-75"
|
||
/>
|
||
</div>
|
||
<div className="group/section relative flex gap-x-4">
|
||
<div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
|
||
<div className="w-px bg-slate-200 dark:bg-slate-800" />
|
||
</div>
|
||
<div className="relative mt-1 flex size-6 flex-none items-center justify-center bg-white dark:bg-slate-950">
|
||
<div className="size-1.5 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:bg-slate-800 dark:ring-slate-600" />
|
||
</div>
|
||
<div className="flex flex-col pb-10">
|
||
<dt className="text-base font-semibold leading-7 text-black dark:text-white">
|
||
<div className="mb-6 flex">
|
||
<div className="rounded-lg bg-blue-500 px-2 py-0.5 font-semibold text-white dark:bg-white dark:text-black">
|
||
Conformance
|
||
</div>
|
||
</div>
|
||
Streamline onboarding and governance
|
||
</dt>
|
||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7">
|
||
<p className="flex-auto">
|
||
Platform teams can easily publish and enforce coding
|
||
standards across an entire organization. Write and publish
|
||
rules, refactorings, and generators, then quickly deploy
|
||
them across all repos without involving individual teams.
|
||
Ensure security vulnerabilities are always addressed and
|
||
third-party dependencies stay up to date.{' '}
|
||
<i>
|
||
Included in{' '}
|
||
<Link
|
||
href="/powerpack"
|
||
title="Nx Powerpack"
|
||
prefetch={false}
|
||
className="underline"
|
||
>
|
||
Nx Powerpack
|
||
</Link>
|
||
, and available complimentary to all Enterprise
|
||
customers.
|
||
</i>
|
||
</p>
|
||
<ul className="mt-6 space-y-2 pl-4">
|
||
<li>
|
||
<Link
|
||
href="/ci/recipes/enterprise/conformance/configure-conformance-rules-in-nx-cloud"
|
||
prefetch={false}
|
||
title="Configure Conformance Rules"
|
||
className="text-sm/6 font-semibold"
|
||
>
|
||
Configure Conformance Rules{' '}
|
||
<span aria-hidden="true">→</span>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="/ci/recipes/enterprise/conformance/publish-conformance-rules-to-nx-cloud"
|
||
prefetch={false}
|
||
title="Publish Conformance Rules"
|
||
className="text-sm/6 font-semibold"
|
||
>
|
||
Publish Conformance Rules{' '}
|
||
<span aria-hidden="true">→</span>
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</dd>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="group/section flex items-center gap-16">
|
||
<div className="hidden max-w-[35%] shrink-0 lg:block">
|
||
<OwnershipAnimation
|
||
autoPlay={true}
|
||
speed={1}
|
||
className="max-w-full"
|
||
/>
|
||
</div>
|
||
<div className="relative flex gap-x-4">
|
||
<div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
|
||
<div className="w-px bg-slate-200 dark:bg-slate-800" />
|
||
</div>
|
||
<div className="relative mt-1 flex size-6 flex-none items-center justify-center bg-white dark:bg-slate-950">
|
||
<div className="size-1.5 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:bg-slate-800 dark:ring-slate-600" />
|
||
</div>
|
||
<div className="flex flex-col pb-10">
|
||
<dt className="text-base font-semibold leading-7 text-black dark:text-white">
|
||
<div className="mb-6 flex">
|
||
<div className="rounded-lg bg-blue-500 px-2 py-0.5 font-semibold text-white dark:bg-white dark:text-black">
|
||
Ownership
|
||
</div>
|
||
</div>
|
||
Clear, expressive ownership
|
||
</dt>
|
||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7">
|
||
<p className="flex-auto">
|
||
Unlike the code ownership tools from VCS providers, Nx
|
||
Owners is built for monorepos. Define ownership at the
|
||
project level. Nx will compile it back to the file-based
|
||
rules your VCS providers understand.
|
||
</p>
|
||
<p>
|
||
Polygraph lets you see owners across all your repositories
|
||
and plan out multi repo refactorings and migrations.{' '}
|
||
<i>
|
||
Included in{' '}
|
||
<Link
|
||
href="/powerpack"
|
||
title="Nx Powerpack"
|
||
className="underline"
|
||
>
|
||
Nx Powerpack
|
||
</Link>
|
||
, and available complimentary to all Enterprise
|
||
customers.
|
||
</i>
|
||
</p>
|
||
</dd>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export function ScaleOrganizationIntro(): ReactElement {
|
||
return (
|
||
<section className="relative isolate px-6 py-24 sm:py-32 lg:px-8">
|
||
<svg
|
||
focusable={false}
|
||
aria-hidden="true"
|
||
className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/20"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
id="1d4240dd-898f-445f-932d-e2872fd12de3"
|
||
width={200}
|
||
height={200}
|
||
x="50%"
|
||
y={0}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<path d="M.5 200V.5H200" fill="none" />
|
||
</pattern>
|
||
</defs>
|
||
<svg
|
||
x="50%"
|
||
y={0}
|
||
className="overflow-visible fill-slate-200/20 dark:fill-slate-800/60"
|
||
>
|
||
<path
|
||
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
||
strokeWidth={0}
|
||
/>
|
||
</svg>
|
||
<rect
|
||
width="100%"
|
||
height="100%"
|
||
strokeWidth={0}
|
||
fill="url(#1d4240dd-898f-445f-932d-e2872fd12de3)"
|
||
/>
|
||
</svg>
|
||
<div className="mx-auto max-w-5xl text-center">
|
||
<SectionHeading as="h2" variant="title" id="scale-your-organization">
|
||
Don’t lose velocity as your organization grows{' '}
|
||
<br className="xl:block" />
|
||
<span className="line-through">10x developer</span>{' '}
|
||
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
|
||
Nx developers are even more efficient at scale
|
||
</span>
|
||
</SectionHeading>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|