279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
import {
|
||
BuildingOffice2Icon,
|
||
Cog6ToothIcon,
|
||
CubeTransparentIcon,
|
||
IdentificationIcon,
|
||
PhotoIcon,
|
||
SquaresPlusIcon,
|
||
UserGroupIcon,
|
||
} from '@heroicons/react/24/outline';
|
||
import { SectionHeading } from './temp/typography';
|
||
|
||
export function ScaleYourPeople(): JSX.Element {
|
||
return (
|
||
<section id="scale-your-people">
|
||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||
<div className="mx-auto max-w-3xl text-center">
|
||
<SectionHeading as="h2" variant="title">
|
||
Scale your people
|
||
</SectionHeading>
|
||
</div>
|
||
<SectionHeading as="p" variant="subtitle" className="mt-6">
|
||
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.
|
||
</SectionHeading>
|
||
<div className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-2 md:gap-y-16 lg:max-w-none lg:grid-cols-4">
|
||
<div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
|
||
<div className="flex items-center gap-3 text-lg font-medium leading-6">
|
||
<CubeTransparentIcon
|
||
aria-hidden="true"
|
||
className="h-5 w-5 flex-none"
|
||
/>
|
||
Visibility
|
||
</div>
|
||
<svg
|
||
aria-hidden="true"
|
||
viewBox="0 0 4 12"
|
||
fill="currentColor"
|
||
className="absolute right-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 translate-x-full transform text-slate-100 lg:block dark:text-slate-800"
|
||
>
|
||
<path
|
||
d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
|
||
fillRule="evenodd"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
|
||
<svg
|
||
aria-hidden="true"
|
||
viewBox="0 0 4 12"
|
||
fill="currentColor"
|
||
className="absolute left-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 transform text-white lg:block dark:text-slate-950"
|
||
>
|
||
<path
|
||
d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
|
||
fillRule="evenodd"
|
||
/>
|
||
</svg>
|
||
<div className="flex items-center gap-3 text-lg font-medium leading-6">
|
||
<IdentificationIcon
|
||
aria-hidden="true"
|
||
className="h-5 w-5 flex-none"
|
||
/>
|
||
Ownership
|
||
</div>
|
||
<svg
|
||
aria-hidden="true"
|
||
viewBox="0 0 4 12"
|
||
fill="currentColor"
|
||
className="absolute right-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 translate-x-full transform text-slate-100 lg:block dark:text-slate-800"
|
||
>
|
||
<path
|
||
d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
|
||
fillRule="evenodd"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
|
||
<svg
|
||
aria-hidden="true"
|
||
viewBox="0 0 4 12"
|
||
fill="currentColor"
|
||
className="absolute left-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 transform text-white lg:block dark:text-slate-950"
|
||
>
|
||
<path
|
||
d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
|
||
fillRule="evenodd"
|
||
/>
|
||
</svg>
|
||
<div className="flex items-center gap-3 text-lg font-medium leading-6">
|
||
<UserGroupIcon aria-hidden="true" className="h-5 w-5 flex-none" />
|
||
Control
|
||
</div>
|
||
<svg
|
||
aria-hidden="true"
|
||
viewBox="0 0 4 12"
|
||
fill="currentColor"
|
||
className="absolute right-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 translate-x-full transform text-slate-100 lg:block dark:text-slate-800"
|
||
>
|
||
<path
|
||
d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
|
||
fillRule="evenodd"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
|
||
<svg
|
||
aria-hidden="true"
|
||
viewBox="0 0 4 12"
|
||
fill="currentColor"
|
||
className="absolute left-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 transform text-white lg:block dark:text-slate-950"
|
||
>
|
||
<path
|
||
d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
|
||
fillRule="evenodd"
|
||
/>
|
||
</svg>
|
||
<div className="flex items-center gap-3 text-lg font-medium leading-6">
|
||
<Cog6ToothIcon aria-hidden="true" className="h-5 w-5 flex-none" />
|
||
Automation
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<picture className="block py-12">
|
||
<img
|
||
src="/images/enterprise/graphs.jpg"
|
||
alt="Product screenshot"
|
||
className="mx-auto max-w-full rounded-xl shadow-xl ring-1 ring-slate-400/10"
|
||
width={2500}
|
||
height={1616}
|
||
/>
|
||
</picture>
|
||
<div className="relative mx-auto mt-16 max-w-2xl space-y-12 sm:mt-20">
|
||
<svg
|
||
className="absolute left-0 top-0 -z-10 -ml-20 hidden -translate-x-full -translate-y-1/2 transform lg:block"
|
||
width={200}
|
||
height={400}
|
||
fill="none"
|
||
viewBox="0 0 200 400"
|
||
aria-hidden="true"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
id="de316486-4a29-4312-bdfc-fbce2132a2c1"
|
||
x={0}
|
||
y={0}
|
||
width={20}
|
||
height={20}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<rect
|
||
x={0}
|
||
y={0}
|
||
width={4}
|
||
height={4}
|
||
className="text-slate-100 dark:text-slate-800/60"
|
||
fill="currentColor"
|
||
/>
|
||
</pattern>
|
||
</defs>
|
||
<rect
|
||
width={200}
|
||
height={400}
|
||
fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)"
|
||
/>
|
||
</svg>
|
||
<svg
|
||
className="absolute bottom-0 right-0 -z-10 -mr-20 hidden translate-x-full translate-y-1/2 transform lg:block"
|
||
width={200}
|
||
height={400}
|
||
fill="none"
|
||
viewBox="0 0 200 400"
|
||
aria-hidden="true"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
id="de316486-4a29-4312-bdfc-fbce2132a2c1"
|
||
x={0}
|
||
y={0}
|
||
width={20}
|
||
height={20}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<rect
|
||
x={0}
|
||
y={0}
|
||
width={4}
|
||
height={4}
|
||
className="text-slate-100 dark:text-slate-800/60"
|
||
fill="currentColor"
|
||
/>
|
||
</pattern>
|
||
</defs>
|
||
<rect
|
||
width={200}
|
||
height={400}
|
||
fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)"
|
||
/>
|
||
</svg>
|
||
<div className="space-y-6 lg:space-y-12">
|
||
<div className="flex justify-center">
|
||
<span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
|
||
coming soon
|
||
</span>
|
||
</div>
|
||
<div className="flex items-start gap-6">
|
||
<div className="rounded-full p-3 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
|
||
<SquaresPlusIcon className="h-5 w-5 text-slate-900 dark:text-slate-100" />
|
||
</div>
|
||
<div>
|
||
<h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
|
||
Monorepo, polyrepo, multi-monorepo?
|
||
</h4>
|
||
<p className="mt-2">
|
||
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.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-6">
|
||
<div className="rounded-full p-3 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
|
||
<Cog6ToothIcon className="h-5 w-5 text-slate-900 dark:text-slate-100" />
|
||
</div>
|
||
<div>
|
||
<h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
|
||
Monorepo experience in a polyrepo environment
|
||
</h4>
|
||
<p className="mt-2">
|
||
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.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-6">
|
||
<div className="rounded-full p-3 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
|
||
<BuildingOffice2Icon className="h-5 w-5 text-slate-900 dark:text-slate-100" />
|
||
</div>
|
||
<div>
|
||
<h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
|
||
Automation over coordination
|
||
</h4>
|
||
<p className="mt-2">
|
||
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.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*<div className="mt-16">*/}
|
||
{/* <picture className="block py-12">*/}
|
||
{/* <img*/}
|
||
{/* src="/images/enterprise/graphs.jpg"*/}
|
||
{/* alt="Product screenshot"*/}
|
||
{/* className="mx-auto max-w-full rounded-xl shadow-xl ring-1 ring-slate-400/10"*/}
|
||
{/* width={2500}*/}
|
||
{/* height={1616}*/}
|
||
{/* />*/}
|
||
{/* </picture>*/}
|
||
{/* <div className="mx-auto mt-4 max-w-2xl">*/}
|
||
{/* <h4 className="relative text-base font-medium capitalize leading-6 text-slate-900 dark:text-slate-100">*/}
|
||
{/* Crystal clear organizations*/}
|
||
{/* </h4>*/}
|
||
{/* <p>*/}
|
||
{/* 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.*/}
|
||
{/* </p>*/}
|
||
{/* </div>*/}
|
||
{/*</div>*/}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|