docs(core): add current nx info on home screen (#5816)
This commit is contained in:
Benjamin Cabanes
GitHub
parent
69221f3f83
commit
b28c38c95d
@ -8,7 +8,7 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Nx documentation</title>
|
||||
<title>Nx: Smart, Extensible Build Framework</title>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
|
||||
@ -1,89 +1,27 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { InlineCommand } from '@nrwl/nx-dev/ui/common';
|
||||
import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
|
||||
import Image from 'next/image';
|
||||
|
||||
export function Index() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/*ANNOUNCEMENT BANNER*/}
|
||||
<div className="bg-blue-600">
|
||||
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between flex-wrap">
|
||||
<div className="w-0 flex-1 flex items-center">
|
||||
<span className="flex p-2 rounded-lg bg-blue-nx">
|
||||
<svg
|
||||
className="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<p className="ml-3 font-medium text-white truncate">
|
||||
<span className="md:hidden">We announced a new nx.dev!</span>
|
||||
<span className="hidden md:inline">
|
||||
Big news! We're excited to announce a brand new nx.dev.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
<div className="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
|
||||
<button
|
||||
type="button"
|
||||
className="-mr-1 flex p-2 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
|
||||
>
|
||||
<span className="sr-only">Dismiss</span>
|
||||
<svg
|
||||
className="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*INTRO COMPONENT*/}
|
||||
<div className="bg-gray-50">
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
|
||||
<div className="bg-blue-nx-dark text-white">
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
<div className="mt-8 mb-20 flex lg:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full lg:w-1/2 flex flex-col">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl leading none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl leading none font-extrabold tracking-tight mt-10 mb-8 sm:mt-14 sm:mb-10">
|
||||
Smart, Extensible Build Framework
|
||||
</h1>
|
||||
<p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
|
||||
Build full-stack applications with modern tools and reinforce
|
||||
best practices for your entire development team. Use Nx to build
|
||||
software at scale, the better way.
|
||||
best practices for your entire development team.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
|
||||
<Link href="/latest/react/getting-started/getting-started">
|
||||
<a className="w-full sm:w-auto flex-none bg-blue-600 hover:bg-blue-700 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparen rounded focus:ring-2 focus: ring-offset-2 focus:ring-offset-white focus:ring-blue-700 focus:outline-none transition-colors duration-180">
|
||||
<a className="w-full sm:w-auto flex-none bg-purple-nx-dark text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-purple-nx-dark focus:outline-none transition-colors duration-180">
|
||||
Get Started
|
||||
</a>
|
||||
</Link>
|
||||
@ -95,189 +33,325 @@ export function Index() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 flex flex-col justify-between items-center lg:pl-16 lg:pb-0 pb-10 mt-8 lg:mt-0">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/TXySu4dZLp0"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full"
|
||||
<svg
|
||||
width="300"
|
||||
height="300"
|
||||
viewBox="0 0 262 163"
|
||||
className="mr-2"
|
||||
>
|
||||
<polygon
|
||||
id="Path"
|
||||
fill="#ffffff"
|
||||
points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"
|
||||
/>
|
||||
<polygon
|
||||
id="Path"
|
||||
fill="#ffffff"
|
||||
points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"
|
||||
/>
|
||||
<path
|
||||
d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z"
|
||||
id="Path"
|
||||
fill="#96D8E9"
|
||||
/>
|
||||
<path
|
||||
d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z"
|
||||
id="Path"
|
||||
fill="#48C4E5"
|
||||
/>
|
||||
<path
|
||||
d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z"
|
||||
id="Path"
|
||||
fill="#ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z"
|
||||
id="Path"
|
||||
fill="#022f56"
|
||||
/>
|
||||
</svg>
|
||||
{/*<iframe*/}
|
||||
{/* width="560"*/}
|
||||
{/* height="315"*/}
|
||||
{/* src="https://www.youtube.com/embed/TXySu4dZLp0"*/}
|
||||
{/* frameBorder="0"*/}
|
||||
{/* allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"*/}
|
||||
{/* allowFullScreen*/}
|
||||
{/* className="w-full"*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*SELECTION COMPONENT*/}
|
||||
<div className="mt-32 mb-20 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full sm:w-1/2 grid grid-cols-3 gap-10 items-center">
|
||||
<Link href="/react">
|
||||
<a
|
||||
href="#"
|
||||
className="w-full bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#52C1DE">
|
||||
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">
|
||||
React
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
href="#"
|
||||
className="w-full bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#E23236">
|
||||
<path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">
|
||||
Angular
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<Link href="/node">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#77AE64">
|
||||
<path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L3.075,6.68C2.99,6.729,2.936,6.825,2.936,6.921v10.15c0,0.097,0.054,0.189,0.139,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">Node</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Frameworks Agnostic
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx is a smart and extensible build framework to help you
|
||||
architect, test, and build at any scale — integrating seamlessly
|
||||
with modern technologies and libraries while providing a robust
|
||||
CLI, caching, dependency management, and more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-nx-dark text-white">
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*GRAPH AND COMPUTATION CACHING*/}
|
||||
<div className="mt-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<Image
|
||||
src="/images/computation.svg"
|
||||
alt="Use Intelligent Build System with Distributed Caching illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Distributed Graph-Based Task Execution and Computation Caching
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes your
|
||||
workspace and figures out what can be affected by every code
|
||||
change. That's why Nx doesn't rebuild and retest everything on
|
||||
every commit -{' '}
|
||||
<span className="font-bold">
|
||||
it only rebuilds what is necessary
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> partitions commands into a
|
||||
graph of smaller tasks. Nx then runs those tasks in parallel,
|
||||
and it can{' '}
|
||||
<span className="font-bold">
|
||||
even distribute them across many machines without any
|
||||
configuration
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">
|
||||
Nx also uses a distributed computation cache
|
||||
</span>
|
||||
. If someone has already built or tested similar code, Nx will
|
||||
use their results to speed up the command for everyone else.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/*DEV EXPERIENCE*/}
|
||||
<div className="my-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Holistic Dev Experience Powered by an Advanced CLI and Editor
|
||||
Plugins
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> helps scale your
|
||||
development from one team building one application to many teams
|
||||
building multiple frontend and backend applications all in the
|
||||
same workspace.{' '}
|
||||
<span className="font-bold">
|
||||
When using Nx, developers have a holistic dev experience
|
||||
powered by an advanced CLI
|
||||
</span>{' '}
|
||||
(with editor plugins), capabilities for controlled code sharing
|
||||
and consistent code generation.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<Image
|
||||
src="/images/dev-experience.svg"
|
||||
alt="Holistic Dev Experience Powered by an Advanced CLI and Editor Plugins illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/*SELECTION COMPONENT*/}
|
||||
<div className="mt-32 mb-20 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full sm:w-1/2 grid grid-cols-3 gap-10 items-center">
|
||||
<Link href="/react">
|
||||
<a
|
||||
href="#"
|
||||
className="w-full bg-white shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-2 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#52C1DE">
|
||||
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">
|
||||
React
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
href="#"
|
||||
className="w-full bg-white shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-2 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#E23236">
|
||||
<path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">
|
||||
Angular
|
||||
{/* NXCLOUD AD */}
|
||||
<div
|
||||
style={{ background: '#122B4D', border: '1px solid #0f2440' }}
|
||||
className="text-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:py-10 lg:px-8 lg:flex lg:items-center lg:justify-between relative">
|
||||
<span className="absolute text-xs top-3">Sponsor</span>
|
||||
<h2 className="text-2xl tracking-tight sm:text-4xl">
|
||||
<span className="block">See how much more time</span>
|
||||
<span className="block">you can save with Nx Cloud.</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<a
|
||||
href="https://nx.app/?utm_source=nx.dev"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-nx-dark"
|
||||
>
|
||||
Learn About Nx Cloud
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<Link href="/node">
|
||||
<a className="w-full bg-white shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-2 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#77AE64">
|
||||
<path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L3.075,6.68C2.99,6.729,2.936,6.825,2.936,6.921v10.15c0,0.097,0.054,0.189,0.139,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">
|
||||
Node
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Frameworks Agnostic
|
||||
</div>
|
||||
{/*MODERN TOOLS*/}
|
||||
<div className="my-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pb-0 sm:pr-16 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Support for Modern Tools
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx is a smart and extensible build framework to help you
|
||||
architect, test, and build at any scale — integrating seamlessly
|
||||
with modern technologies and libraries while providing a robust
|
||||
CLI, caching, dependency management, and more.
|
||||
<span className="font-bold">Nx</span> is an open platform with
|
||||
plugins for many modern tools and frameworks. It has support for
|
||||
TypeScript, React, Angular, Cypress, Jest, Prettier, Nest.js,
|
||||
Next.js, Storybook, Ionic among others. With Nx, you get a
|
||||
consistent dev experience regardless of the tools used.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<Image
|
||||
src="/images/modern-tools.svg"
|
||||
alt="Support for Modern Tools illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*LEARNING MATERIALS*/}
|
||||
<div className="my-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pb-0 sm:pr-16 pb-10 mt-8 sm:mt-0">
|
||||
<Image
|
||||
src="/images/youtube-videos.svg"
|
||||
alt="Get access to key learning materials illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pb-0 pb-10 sm:pl-16 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Get access to key learning materials
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
With accessible and free online content about Nx, you can quickly
|
||||
get up and running with all of Nx's features. Nx tutorials and
|
||||
resources are continuously updated with the latest version. Plus,
|
||||
when you're looking for advanced courses visit{' '}
|
||||
<a
|
||||
className="cursor-pointer underline"
|
||||
href="https://nxplaybook.com/?utm_source=nx.dev"
|
||||
target="_blank"
|
||||
>
|
||||
NxPlaybook.com
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.youtube.com/watch?v=2mYLe9Kp9VM&list=PLakNactNC1dH38AfqmwabvOszDmKriGco?utm_source=nx.dev"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-nx-dark"
|
||||
>
|
||||
Watch Nx Workspaces Course
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-nx-dark text-white">
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*MORE*/}
|
||||
<div className="my-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">
|
||||
Nx and Nx Console
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
For developers, Nx extends Nx Console to give you more
|
||||
visibility into your workspace. With Nx Console and Nx in your
|
||||
workflow you can reduce the time it takes to build high-quality
|
||||
software at scale, and improve best-practices across your
|
||||
organization.{' '}
|
||||
<a
|
||||
href="https://nx.dev/node/cli/console"
|
||||
target="_blank"
|
||||
className="cursor-pointer underline"
|
||||
>
|
||||
Try out Nx Console
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">
|
||||
Brought to you by the community
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx is built and maintained as an open-source toolkit for
|
||||
developers by community contributors alongside the experts at
|
||||
Nrwl, a software consulting firm with renowned JavaScript
|
||||
experts and core contributors. To learn more, visit{' '}
|
||||
<a
|
||||
href="https://nrwl.io/?utm_source=nx.dev"
|
||||
target="_blank"
|
||||
className="cursor-pointer underline"
|
||||
>
|
||||
nrwl.io
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
|
||||
{/*WHY NX*/}
|
||||
<div className="my-12 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full py-6 mt-8">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4 text-center">
|
||||
Why Nx?
|
||||
</h2>
|
||||
<p className="sm:w-1/2 sm:mx-auto text-center sm:text-lg">
|
||||
The world’s leading companies use and love Nx.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Complete Monorepo Support
|
||||
</h3>
|
||||
<p>
|
||||
Code is shared, Atomic changes and develop mobility, single set of
|
||||
dependencies.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Plugins
|
||||
</h3>
|
||||
<p>
|
||||
It has support for TypeScript, React, Angular, Cypress, Jest,
|
||||
Prettier, Nest.js, Next.js, Storybook, Ionic among others.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Computation Caching
|
||||
</h3>
|
||||
<p>A computation cache to never rebuild the same code twice.</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
VsCode Plugins
|
||||
</h3>
|
||||
<p>
|
||||
Spend less time looking up command line arguments and more time
|
||||
shipping incredible products with NxConsole.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Fast & Powerful CLI
|
||||
</h3>
|
||||
<p>
|
||||
Nx CLI is a command-line interface tool that helps you setup,
|
||||
develop, build, and maintain applications.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Dependency Graph
|
||||
</h3>
|
||||
<p>Rebuilding and retesting only what is affected.</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Update & Migration support
|
||||
</h3>
|
||||
<p>
|
||||
Nx provides the migrate command which help you stay up to date
|
||||
with the latest version of Nx.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Nx Devkit
|
||||
</h3>
|
||||
<p>
|
||||
Create plugins, generators and executors to extend Nx capabilities
|
||||
to fit your own needs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded">
|
||||
<h3 className="text-lg font-semibold leading-tight mb-4">
|
||||
Videos Courses & Tutorials
|
||||
</h3>
|
||||
<p>
|
||||
With accessible and free online content about Nx, you can quickly
|
||||
get up and running with all of Nx's features.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NXCLOUD AD */}
|
||||
<div className="bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
<span className="block">Ready to dive in?</span>
|
||||
<span className="block text-blue-600">Start using Nx today.</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-3 inline-flex rounded-md shadow">
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Who is using Nx*/}
|
||||
<NxUsersShowcase />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
58
nx-dev/nx-dev/public/images/computation.svg
Normal file
58
nx-dev/nx-dev/public/images/computation.svg
Normal file
@ -0,0 +1,58 @@
|
||||
<svg width="424" height="328" viewBox="0 0 424 328" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M382.434 23.8464C428.668 41.5985 430.177 89.8437 414.694 152.735C384.975 273.459 336.916 281.542 257.723 297.598C155.077 318.408 92.592 317.879 44.1866 292.814C-4.21875 267.75 -11.5861 216.3 15.8852 169.431C43.4533 122.527 105.88 80.257 179.042 51.1579C252.301 22.0229 336.316 6.11242 382.434 23.8464Z" fill="#0E2039" fill-opacity="0.5"/>
|
||||
<path d="M149.856 197.687C149.856 195.728 151.445 194.141 153.405 194.141H281.359C283.318 194.141 284.907 195.728 284.907 197.687V287.997H149.856V197.687Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M281.359 197.687H153.405V284.451H281.359V197.687ZM153.405 194.141C151.445 194.141 149.856 195.728 149.856 197.687V287.997H284.907V197.687C284.907 195.728 283.318 194.141 281.359 194.141H153.405Z" fill="#DDDDDD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M245.323 207.011V205.665H246.571V206.552H246.21V207.011H245.323ZM253.223 205.665H250.729V206.552H253.223V205.665ZM257.381 205.665V206.552H259.876V205.665H257.381ZM264.034 205.665V206.552H266.529V205.665H264.034ZM270.687 205.665V206.552H271.047V207.011H271.934V205.665H270.687ZM271.934 211.499H271.047V214.192H271.934V211.499ZM271.934 218.68H271.047V221.372H271.934V218.68ZM271.934 225.86H271.047V228.553H271.934V225.86ZM271.934 233.041H271.047V235.734H271.934V233.041ZM271.934 240.221H271.047V242.914H271.934V240.221ZM271.934 247.402H271.047V250.095H271.934V247.402ZM271.934 254.582H271.047V257.275H271.934V254.582ZM271.934 261.763H271.047V264.456H271.934V261.763ZM271.934 268.944H271.047V271.636H271.934V268.944ZM271.934 276.124H271.047V276.584H270.687V277.47H271.934V276.124ZM266.529 277.47V276.584H264.034V277.47H266.529ZM259.876 277.47V276.584H257.381V277.47H259.876ZM253.223 277.47V276.584H250.729V277.47H253.223ZM246.571 277.47V276.584H246.21V276.124H245.323V277.47H246.571ZM245.323 271.636H246.21V268.944H245.323V271.636ZM245.323 264.456H246.21V261.763H245.323V264.456ZM245.323 257.275H246.21V254.582H245.323V257.275ZM245.323 250.095H246.21V247.402H245.323V250.095ZM245.323 242.914H246.21V240.221H245.323V242.914ZM245.323 235.734H246.21V233.041H245.323V235.734ZM245.323 228.553H246.21V225.86H245.323V228.553ZM245.323 221.372H246.21V218.68H245.323V221.372ZM245.323 214.192H246.21V211.499H245.323V214.192Z" fill="#2A4980"/>
|
||||
<path d="M203.633 245.557H234.679V277.47H203.633V245.557Z" fill="#2A4980"/>
|
||||
<path d="M203.633 225.168H234.679V237.579H203.633V225.168Z" fill="#2A4980"/>
|
||||
<path d="M203.633 205.665H234.679V218.076H203.633V205.665Z" fill="#2A4980"/>
|
||||
<path d="M161.942 265.06H192.988V277.47H161.942V265.06Z" fill="#2A4980"/>
|
||||
<path d="M161.942 245.557H192.988V257.967H161.942V245.557Z" fill="#2A4980"/>
|
||||
<path d="M161.942 205.665H192.988V237.579H161.942V205.665Z" fill="#2A4980"/>
|
||||
<path d="M149.957 285.67H284.806L297.307 322.882C298.079 325.179 296.368 327.556 293.943 327.556H140.819C138.394 327.556 136.684 325.179 137.456 322.882L149.957 285.67Z" fill="#F5F5F5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.508 289.216L140.819 324.01L293.943 324.01L282.254 289.216H152.508ZM284.806 285.67H149.957L137.456 322.882C136.684 325.179 138.394 327.556 140.819 327.556H293.943C296.368 327.556 298.079 325.179 297.307 322.882L284.806 285.67Z" fill="#DDDDDD"/>
|
||||
<path d="M154.661 291.654H278.326L279.029 295.2H153.958L154.661 291.654Z" fill="#DDDDDD"/>
|
||||
<path d="M152.907 297.859H280.081L280.804 301.405H152.185L152.907 297.859Z" fill="#DDDDDD"/>
|
||||
<path d="M151.153 304.065H281.835L282.578 307.611H150.41L151.153 304.065Z" fill="#DDDDDD"/>
|
||||
<path d="M196.535 309.384H236.452L240 324.454H192.987L196.535 309.384Z" fill="#DDDDDD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M414.022 147.156H23.729C20.2998 147.156 17.5198 149.935 17.5198 153.362C17.5198 156.789 20.2998 159.567 23.729 159.567H414.022C417.451 159.567 420.231 156.789 420.231 153.362C420.231 149.935 417.451 147.156 414.022 147.156ZM23.729 143.61C18.3402 143.61 13.9717 147.976 13.9717 153.362C13.9717 158.747 18.3402 163.113 23.729 163.113H414.022C419.411 163.113 423.779 158.747 423.779 153.362C423.779 147.976 419.411 143.61 414.022 143.61H23.729Z" fill="#EEEEEE"/>
|
||||
<path d="M31.7121 153.362C31.7121 155.81 29.7264 157.795 27.2769 157.795C24.8275 157.795 22.8418 155.81 22.8418 153.362C22.8418 150.914 24.8275 148.93 27.2769 148.93C29.7264 148.93 31.7121 150.914 31.7121 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M159.445 153.362C159.445 155.81 157.459 157.795 155.009 157.795C152.56 157.795 150.574 155.81 150.574 153.362C150.574 150.914 152.56 148.93 155.009 148.93C157.459 148.93 159.445 150.914 159.445 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M287.177 153.362C287.177 155.81 285.191 157.795 282.742 157.795C280.292 157.795 278.307 155.81 278.307 153.362C278.307 150.914 280.292 148.93 282.742 148.93C285.191 148.93 287.177 150.914 287.177 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M95.5783 153.362C95.5783 155.81 93.5926 157.795 91.1432 157.795C88.6937 157.795 86.708 155.81 86.708 153.362C86.708 150.914 88.6937 148.93 91.1432 148.93C93.5926 148.93 95.5783 150.914 95.5783 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M223.311 153.362C223.311 155.81 221.325 157.795 218.876 157.795C216.426 157.795 214.44 155.81 214.44 153.362C214.44 150.914 216.426 148.93 218.876 148.93C221.325 148.93 223.311 150.914 223.311 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M351.042 153.362C351.042 155.81 349.056 157.795 346.607 157.795C344.158 157.795 342.172 155.81 342.172 153.362C342.172 150.914 344.158 148.93 346.607 148.93C349.056 148.93 351.042 150.914 351.042 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M63.6447 153.362C63.6447 155.81 61.659 157.795 59.2096 157.795C56.7601 157.795 54.7744 155.81 54.7744 153.362C54.7744 150.914 56.7601 148.93 59.2096 148.93C61.659 148.93 63.6447 150.914 63.6447 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M191.377 153.362C191.377 155.81 189.391 157.795 186.942 157.795C184.493 157.795 182.507 155.81 182.507 153.362C182.507 150.914 184.493 148.93 186.942 148.93C189.391 148.93 191.377 150.914 191.377 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M319.11 153.362C319.11 155.81 317.124 157.795 314.674 157.795C312.225 157.795 310.239 155.81 310.239 153.362C310.239 150.914 312.225 148.93 314.674 148.93C317.124 148.93 319.11 150.914 319.11 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M127.511 153.362C127.511 155.81 125.525 157.795 123.076 157.795C120.626 157.795 118.641 155.81 118.641 153.362C118.641 150.914 120.626 148.93 123.076 148.93C125.525 148.93 127.511 150.914 127.511 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M255.243 153.362C255.243 155.81 253.258 157.795 250.808 157.795C248.359 157.795 246.373 155.81 246.373 153.362C246.373 150.914 248.359 148.93 250.808 148.93C253.258 148.93 255.243 150.914 255.243 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M382.976 153.362C382.976 155.81 380.99 157.795 378.541 157.795C376.091 157.795 374.105 155.81 374.105 153.362C374.105 150.914 376.091 148.93 378.541 148.93C380.99 148.93 382.976 150.914 382.976 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M47.6789 153.362C47.6789 155.81 45.6932 157.795 43.2437 157.795C40.7943 157.795 38.8086 155.81 38.8086 153.362C38.8086 150.914 40.7943 148.93 43.2437 148.93C45.6932 148.93 47.6789 150.914 47.6789 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M175.411 153.362C175.411 155.81 173.426 157.795 170.976 157.795C168.527 157.795 166.541 155.81 166.541 153.362C166.541 150.914 168.527 148.93 170.976 148.93C173.426 148.93 175.411 150.914 175.411 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M303.143 153.362C303.143 155.81 301.157 157.795 298.708 157.795C296.258 157.795 294.272 155.81 294.272 153.362C294.272 150.914 296.258 148.93 298.708 148.93C301.157 148.93 303.143 150.914 303.143 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M111.545 153.362C111.545 155.81 109.559 157.795 107.11 157.795C104.66 157.795 102.675 155.81 102.675 153.362C102.675 150.914 104.66 148.93 107.11 148.93C109.559 148.93 111.545 150.914 111.545 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M239.277 153.362C239.277 155.81 237.291 157.795 234.841 157.795C232.392 157.795 230.406 155.81 230.406 153.362C230.406 150.914 232.392 148.93 234.841 148.93C237.291 148.93 239.277 150.914 239.277 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M367.009 153.362C367.009 155.81 365.023 157.795 362.574 157.795C360.124 157.795 358.139 155.81 358.139 153.362C358.139 150.914 360.124 148.93 362.574 148.93C365.023 148.93 367.009 150.914 367.009 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M79.6115 153.362C79.6115 155.81 77.6258 157.795 75.1764 157.795C72.7269 157.795 70.7412 155.81 70.7412 153.362C70.7412 150.914 72.7269 148.93 75.1764 148.93C77.6258 148.93 79.6115 150.914 79.6115 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M207.344 153.362C207.344 155.81 205.358 157.795 202.909 157.795C200.459 157.795 198.474 155.81 198.474 153.362C198.474 150.914 200.459 148.93 202.909 148.93C205.358 148.93 207.344 150.914 207.344 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M335.076 153.362C335.076 155.81 333.091 157.795 330.641 157.795C328.192 157.795 326.206 155.81 326.206 153.362C326.206 150.914 328.192 148.93 330.641 148.93C333.091 148.93 335.076 150.914 335.076 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M143.478 153.362C143.478 155.81 141.492 157.795 139.043 157.795C136.593 157.795 134.607 155.81 134.607 153.362C134.607 150.914 136.593 148.93 139.043 148.93C141.492 148.93 143.478 150.914 143.478 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M271.21 153.362C271.21 155.81 269.224 157.795 266.775 157.795C264.326 157.795 262.34 155.81 262.34 153.362C262.34 150.914 264.326 148.93 266.775 148.93C269.224 148.93 271.21 150.914 271.21 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M398.943 153.362C398.943 155.81 396.957 157.795 394.507 157.795C392.058 157.795 390.072 155.81 390.072 153.362C390.072 150.914 392.058 148.93 394.507 148.93C396.957 148.93 398.943 150.914 398.943 153.362Z" fill="#CCCCCC"/>
|
||||
<path d="M414.908 153.362C414.908 155.81 412.923 157.795 410.473 157.795C408.024 157.795 406.038 155.81 406.038 153.362C406.038 150.914 408.024 148.93 410.473 148.93C412.923 148.93 414.908 150.914 414.908 153.362Z" fill="#CCCCCC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M175.411 14.1836C176.391 14.1836 177.185 14.9774 177.185 15.9566V32.3566C177.185 33.3358 176.391 34.1295 175.411 34.1295C174.431 34.1295 173.637 33.3358 173.637 32.3566V15.9566C173.637 14.9774 174.431 14.1836 175.411 14.1836Z" fill="white"/>
|
||||
<path d="M175.411 27.4811C180.31 27.4811 184.282 23.5121 184.282 18.6162H166.541C166.541 23.5121 170.512 27.4811 175.411 27.4811Z" fill="#CCCCCC"/>
|
||||
<path d="M146.139 15.9571C146.139 12.0404 149.316 8.86523 153.235 8.86523H197.586C201.506 8.86523 204.683 12.0404 204.683 15.9571V15.9571C204.683 19.8739 201.506 23.049 197.586 23.049H153.235C149.316 23.049 146.139 19.8739 146.139 15.9571V15.9571Z" fill="white"/>
|
||||
<path d="M208.674 2.65918C210.879 2.65918 212.666 4.4452 212.666 6.64837L212.666 25.2646C212.666 27.4678 210.879 29.2538 208.674 29.2538V29.2538C206.47 29.2538 204.683 27.4678 204.683 25.2646L204.683 6.64837C204.683 4.4452 206.47 2.65918 208.674 2.65918V2.65918Z" fill="white"/>
|
||||
<path d="M142.147 2.65918C144.352 2.65918 146.139 4.4452 146.139 6.64837L146.139 25.2646C146.139 27.4678 144.352 29.2538 142.147 29.2538V29.2538C139.943 29.2538 138.155 27.4678 138.155 25.2646L138.155 6.64837C138.155 4.4452 139.943 2.65918 142.147 2.65918V2.65918Z" fill="white"/>
|
||||
<path d="M133.721 1.32973C133.721 0.59534 134.316 0 135.051 0H149.244C149.979 0 150.574 0.59534 150.574 1.32973V1.32973C150.574 2.06412 149.979 2.65946 149.244 2.65946H135.051C134.316 2.65946 133.721 2.06412 133.721 1.32973V1.32973Z" fill="#C4C4C4"/>
|
||||
<path d="M200.248 1.32973C200.248 0.59534 200.844 0 201.579 0H215.771C216.506 0 217.102 0.59534 217.102 1.32973V1.32973C217.102 2.06412 216.506 2.65946 215.771 2.65946H201.579C200.844 2.65946 200.248 2.06412 200.248 1.32973V1.32973Z" fill="#C4C4C4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.09 33.4144C169.731 34.1557 169.648 35.2752 168.907 35.915L150.013 52.2115L155.882 67.6289C156.23 68.544 155.77 69.5682 154.855 69.9164C153.939 70.2646 152.914 69.8049 152.566 68.8897L146.255 52.3114C145.989 51.6144 146.189 50.826 146.754 50.3387L166.588 33.2306C167.33 32.5908 168.45 32.6731 169.09 33.4144Z" fill="#CCCCCC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M181.731 33.4144C181.091 34.1557 181.173 35.2752 181.915 35.915L200.808 52.2115L194.939 67.6289C194.591 68.544 195.051 69.5682 195.967 69.9164C196.882 70.2646 197.907 69.8049 198.256 68.8897L204.567 52.3114C204.832 51.6144 204.632 50.826 204.068 50.3387L184.233 33.2306C183.491 32.5908 182.371 32.6731 181.731 33.4144Z" fill="#CCCCCC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M184.848 34.5728C184.848 35.552 184.053 36.3457 183.074 36.3457L167.747 36.3457C166.767 36.3457 165.973 35.552 165.973 34.5728C165.973 33.5936 166.767 32.7998 167.747 32.7998L183.074 32.7998C184.053 32.7998 184.848 33.5936 184.848 34.5728Z" fill="#CCCCCC"/>
|
||||
<path d="M314.675 115.243H370.558V143.611H314.675V115.243Z" fill="#96D7E8"/>
|
||||
<path d="M225.972 86.876H280.967V143.611H225.972V86.876Z" fill="#2A4980"/>
|
||||
<path d="M159.444 55.8486H192.264V143.611H159.444V55.8486Z" fill="#45BC98"/>
|
||||
<path d="M75.1768 126.768H125.737V143.611H75.1768V126.768Z" fill="#2A4980"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
1
nx-dev/nx-dev/public/images/dev-experience.svg
Normal file
1
nx-dev/nx-dev/public/images/dev-experience.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
1
nx-dev/nx-dev/public/images/modern-tools.svg
Normal file
1
nx-dev/nx-dev/public/images/modern-tools.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 36 KiB |
1
nx-dev/nx-dev/public/images/youtube-videos.svg
Normal file
1
nx-dev/nx-dev/public/images/youtube-videos.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
@ -1,17 +1,8 @@
|
||||
export function NxUsersShowcase() {
|
||||
return (
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-32">
|
||||
<div className="flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full py-6 mt-8">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4 text-center">
|
||||
Who's using Nx?
|
||||
</h2>
|
||||
<p className="sm:w-2/3 sm:mx-auto text-center sm:text-lg">
|
||||
The world’s leading companies use and love Nx.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid items-center justify-items-center grid-cols-3 md:grid-cols-6 gap-8">
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-32">
|
||||
<p className="sm:mx-auto sm:text-lg">Join the ecosystem of Nx users</p>
|
||||
<div className="mt-12 grid items-center justify-items-center grid-cols-3 md:grid-cols-6 gap-12">
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Accenture.png"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user