docs(core): flavour & home screen updates (#5879)

* docs(core): flavour screens update

* feat(core): new layout split

* docs(core): links by current flavour and version

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Content from './content';
+import cx from 'classnames';
 import Head from 'next/head';
-import { Menu } from '@nrwl/nx-dev/data-access-documents';
 import {
   DocumentData,
+  Menu,
   VersionMetadata,
 } from '@nrwl/nx-dev/data-access-documents';
-
+import Content from './content';
 import Sidebar from './sidebar';
 
 export interface DocumentationFeatureDocViewerProps {
@@ -17,6 +17,7 @@ export interface DocumentationFeatureDocViewerProps {
   menu: Menu;
   document: DocumentData;
   toc: any;
+  navIsOpen: boolean;
 }
 
 export function DocViewer({
@@ -26,6 +27,7 @@ export function DocViewer({
   menu,
   flavor,
   flavorList,
+  navIsOpen,
 }: DocumentationFeatureDocViewerProps) {
   return (
     <>
@@ -42,10 +44,14 @@ export function DocViewer({
             flavor={flavor}
             flavorList={flavorList}
             versionList={versionList}
+            navIsOpen={navIsOpen}
           />
           <div
             id="content-wrapper"
-            className="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"
+            className={cx(
+              'min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible pt-16 md:pl-4',
+              navIsOpen && 'overflow-hidden max-h-screen fixed'
+            )}
           >
             <Content
               document={document}

nx-dev/feature-doc-viewer/src/lib/sidebar.tsx

@@ -16,6 +16,7 @@ export interface SidebarProps {
   versionList: VersionMetadata[];
   flavorList: any[];
   flavor: any;
+  navIsOpen: boolean;
 }
 
 export function Sidebar({
@@ -24,6 +25,7 @@ export function Sidebar({
   version,
   versionList,
   menu,
+  navIsOpen,
 }: SidebarProps) {
   const router = useRouter();
   const getStartedPath = (version: string, flavor: string): string =>
@@ -34,11 +36,15 @@ export function Sidebar({
   return (
     <div
       data-testid="sidebar"
-      className="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-o lg:w-64 lg:block hidden border-r border-gray-200"
+      className={cx(
+        'fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-o lg:w-64 lg:block border-r border-gray-50',
+        !navIsOpen && 'hidden',
+        navIsOpen && 'block'
+      )}
     >
       <div
         data-testid="navigation-wrapper"
-        className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0 pr-2 sm:pr-4 xl:pr-6"
+        className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-auto lg:top-18 bg-white mr-24 lg:mr-0 px-2 sm:pr-4 xl:pr-6"
       >
         <div className="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white" />
         <div className="px-1 pt-6 sm:px-3 xl:px-5 lg:pt-10">
@@ -62,10 +68,10 @@ export function Sidebar({
             }
           />
         </div>
-        <div className="px-1 py-6 sm:px-3 xl:px-5 h-1 w-full border-b b-gray-200" />
+        <div className="px-1 py-6 sm:px-3 xl:px-5 h-1 w-full border-b border-gray-50" />
         <nav
           data-testid="navigation"
-          className="px-1 pt-1 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-18)"
+          className="px-1 pt-1 font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-18)"
         >
           {menu.sections.map((section) => (
             <SidebarSection key={section.id} section={section} />
@@ -82,7 +88,7 @@ function SidebarSection({ section }: { section: MenuSection }) {
       {section.hideSectionHeader ? null : (
         <h4
           data-testid={`section-h4:${section.id}`}
-          className="mt-6 mb-4 pb-2 text-m border-b border-gray-50 border-solid"
+          className="mt-6 mb-4 text-m border-b border-gray-50 border-solid"
         >
           {section.name}
         </h4>
@@ -132,13 +138,19 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
               <Link href={item.path}>
                 <a
                   className={cx(
-                    'p-2 transition-colors duration-200 relative block hover:text-gray-900'
+                    'py-1 transition-colors duration-200 relative block text-gray-500 hover:text-gray-900'
                   )}
                 >
                   {isActiveLink ? (
-                    <span className="rounded-md absolute h-full w-2 right-2 top-0 bg-blue-nx-base" />
+                    <span className="rounded-md absolute h-full w-1 -right-4 top-0 bg-green-nx-base" />
                   ) : null}
-                  <span className="relative">{item.name}</span>
+                  <span
+                    className={cx('relative', {
+                      'text-gray-900': isActiveLink,
+                    })}
+                  >
+                    {item.name}
+                  </span>
                 </a>
               </Link>
             </li>

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -16,9 +16,13 @@ function Hit({ hit, children }) {
   );
 }
 
-export function AlgoliaSearch() {
+export interface AlgoliaSearchProps {
-  const frameworkFilter = `framework:react`; // TODO: @ben Tap into current framework selection
+  flavorId: string;
-  const versionFilter = `version:latest`; // TODO: @ben Tap into current version selection
+  versionId: string;
+}
+export function AlgoliaSearch({ flavorId, versionId }: AlgoliaSearchProps) {
+  const frameworkFilter = `framework:${flavorId}`;
+  const versionFilter = `version:${versionId}`;
 
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);

nx-dev/nx-dev/pages/[...segments].tsx

@@ -1,3 +1,8 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import cx from 'classnames';
+import Link from 'next/link';
+import Head from 'next/head';
 import { Dialog } from '@headlessui/react';
 import type {
   DocumentData,
@@ -6,13 +11,9 @@ import type {
 } from '@nrwl/nx-dev/data-access-documents';
 import { flavorList } from '@nrwl/nx-dev/data-access-documents';
 import { DocViewer } from '@nrwl/nx-dev/feature-doc-viewer';
-import { useRouter } from 'next/router';
+import { Footer, Header } from '@nrwl/nx-dev/ui/common';
-
 import { documentsApi, menuApi } from '../lib/api';
 import { useStorage } from '../lib/use-storage';
-import React, { useEffect, useState } from 'react';
-import Link from 'next/link';
-import Head from 'next/head';
 
 const versionList = documentsApi.getVersions();
 const defaultVersion = versionList.find((v) => v.default);
@@ -44,13 +45,20 @@ export function DocumentationPage({
   const { value: storedFlavor, setValue: setStoredFlavor } = useStorage(
     'flavor'
   );
+  const { setValue: setStoredVersion } = useStorage('version');
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [navIsOpen, setNavIsOpen] = useState(false);
 
   useEffect(() => {
     if (!isFallback) {
       setStoredFlavor(flavor.value);
     }
   }, [flavor, isFallback, setStoredFlavor]);
+  useEffect(() => {
+    if (!isFallback) {
+      setStoredVersion(version.id);
+    }
+  }, [version, isFallback, setStoredVersion]);
 
   useEffect(() => {
     if (!isFallback || !storedFlavor) return;
@@ -80,15 +88,80 @@ export function DocumentationPage({
           />
         </Head>
       )}
-      <DocViewer
+      <Header
-        version={version}
+        showSearch={true}
-        versionList={versions}
+        version={{ name: version.name, value: version.id }}
-        flavor={flavor}
+        flavor={{ name: flavor.label, value: flavor.value }}
-        flavorList={flavors}
-        document={document}
-        menu={menu}
-        toc={null}
       />
+      <main>
+        <DocViewer
+          version={version}
+          versionList={versions}
+          flavor={flavor}
+          flavorList={flavors}
+          document={document}
+          menu={menu}
+          toc={null}
+          navIsOpen={navIsOpen}
+        />
+        <button
+          type="button"
+          className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-blue-nx-base text-white block lg:hidden"
+          onClick={() => setNavIsOpen(!navIsOpen)}
+        >
+          <span className="sr-only">Open site navigation</span>
+          <svg
+            width="24"
+            height="24"
+            fill="none"
+            className={cx(
+              'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
+              {
+                'opacity-0 scale-80': navIsOpen,
+              }
+            )}
+          >
+            <path
+              d="M4 8h16M4 16h16"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <svg
+            width="24"
+            height="24"
+            fill="none"
+            className={cx(
+              'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
+              {
+                'opacity-0 scale-80': !navIsOpen,
+              }
+            )}
+          >
+            <path
+              d="M6 18L18 6M6 6l12 12"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </main>
+      {!navIsOpen ? (
+        <Footer
+          flavor={{
+            name: flavor.label,
+            value: flavor.value,
+          }}
+          version={{
+            name: version.name,
+            value: version.id,
+          }}
+        />
+      ) : null}
       <Dialog
         as="div"
         className="fixed z-50 inset-0 overflow-y-auto"

nx-dev/nx-dev/pages/_app.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import { Header, Footer } from '@nrwl/nx-dev/ui/common';
 import '../styles/main.css';
 
 export default function CustomApp({ Component, pageProps }: AppProps) {
@@ -37,12 +36,8 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <div className="documentation-app text-gray-700 antialiased bg-white">
-        <Header showSearch={!!pageProps.document} />
+        <Component {...pageProps} />
-        <main>
-          <Component {...pageProps} />
-        </main>
       </div>
-      <Footer />
     </>
   );
 }

nx-dev/nx-dev/pages/angular.tsx

@@ -1,407 +1,474 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
+import {
+  Footer,
+  Header,
+  InlineCommand,
+  NxUsersShowcase,
+} from '@nrwl/nx-dev/ui/common';
+import React from 'react';
+import { useStorage } from '../lib/use-storage';
 
 export function AngularPage() {
+  const { value: storedFlavor } = useStorage('flavor');
+  const { value: storedVersion } = useStorage('version');
   return (
-    <div className="w-full overflow-hidden">
+    <>
-      {/*Intro component*/}
+      <Header
-      <div className="bg-blue-nx-dark text-white">
+        showSearch={false}
-        <div className="max-w-screen-lg mx-auto px-5 py-5 relative">
+        flavor={{
-          <img
+          name: storedFlavor || 'react',
-            src="/images/angular-constellation.svg"
+          value: storedFlavor || 'react',
-            width={800}
+        }}
-            height={650}
+        version={{
-            className="absolute top-0 right-0 constellation-wobble-animation"
+          name: storedVersion || 'Latest',
-            style={{ right: '-200px', top: '-270px' }}
+          value: storedVersion || 'latest',
-          />
+        }}
-          <div className="mt-72">
+      />
-            <h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4">
+      <main>
-              Nx and Modern Angular
+        <div className="w-full overflow-hidden">
-            </h2>
+          {/*Intro component*/}
-          </div>
+          <div className="bg-blue-nx-dark text-white">
-          <div className="mt-8 mb-32 flex sm:flex-row flex-col justify-center">
+            <div className="max-w-screen-lg mx-auto px-5 py-5 relative">
-            <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+              <img
-              <p className="sm:text-lg mb-6">
+                src="/images/angular-constellation.svg"
-                <b>Nx</b> provides a holistic dev experience powered by an
+                width={800}
-                advanced CLI and editor plugins.
+                height={650}
-              </p>
+                className="absolute top-0 right-0 constellation-wobble-animation"
-              <p className="sm:text-lg mb-6">***CHANGE ME***</p>
+                style={{ right: '-200px', top: '-270px' }}
-              <p className="sm:text-lg mb-6">
-                <b>Nx</b> uses distributed graph-based task execution and
-                computation caching. Keep your CI and local dev experience fast
-                as your repository grows.
-              </p>
-              <p className="sm:text-lg mb-6">
-                <b>Nx</b> can be added to any Angular project{' '}
-                <a href="#create-nx-workspace">in minutes</a>.
-              </p>
-            </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">
-              <iframe
-                width="560"
-                height="315"
-                src="https://www.youtube.com/embed/cXOkmOy-8dk"
-                frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-                className="w-full"
               />
+              <div className="mt-72">
+                <h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4">
+                  Nx and Modern Angular
+                </h2>
+                <p className="sm:text-lg mb-16">
+                  Nx is a smart and extensible build framework that helps you
+                  develop, test, build, and scale Angular applications with
+                  fully integrated support for modern tools like Jest, Cypress,
+                  Storybook, ESLint, NgRx, and more.
+                </p>
+              </div>
+              <div className="mt-8 mb-32 flex sm:flex-row flex-col justify-center">
+                <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <p className="sm:text-lg mb-6">
+                    <b>Nx</b> takes the core of the Angular framework and the
+                    CLI and provides a more modern development experience on top
+                    of them. <b>Nx</b>
+                    provides better linting, better testing, a faster CLI,
+                    support for popular community libraries and tools.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    <b>Nx</b> uses distributed graph-based task execution and
+                    computation caching. Keep your CI and local dev experience
+                    fast as your repository grows.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    You can{' '}
+                    <a
+                      href="#create-an-angular-workspace-with-nx"
+                      className="underline pointer"
+                    >
+                      get started by creating a modern Angular workspace with Nx
+                    </a>
+                    , or{' '}
+                    <Link href="/latest/angular/migration/overview">
+                      <a className="underline pointer">
+                        add it to an existing Angular workspace
+                      </a>
+                    </Link>{' '}
+                    .
+                  </p>
+                </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">
+                  <iframe
+                    width="560"
+                    height="315"
+                    src="https://www.youtube.com/embed/cXOkmOy-8dk"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    className="w-full"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
-      </div>
+            {/*How to use Nx*/}
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="mt-32 flex sm:flex-row flex-col justify-center">
-        {/*How to use Nx*/}
+              <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-        <div className="mt-32 flex sm:flex-row flex-col justify-center">
+                <h3
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  id="create-an-angular-workspace-with-nx"
-            <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4"
-              Create an Angular Workspace with Nx
+                >
-            </h3>
+                  Create an Angular Workspace <br className="hidden lg:block" />{' '}
-          </div>
+                  with Nx
-          <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">
+                </h3>
-            <p className="sm:text-lg mb-6">
+              </div>
-              Get started right away by creating a new Angular workspace by
+              <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">
-              running the following command in your Terminal or Command prompt:
+                <p className="sm:text-lg mb-6">
-            </p>
+                  Get started right away by creating a new Angular workspace by
+                  running the following command in your Terminal or Command
+                  prompt:
+                </p>
 
-            <div className="w-full">
+                <div className="w-full">
-              <InlineCommand
+                  <InlineCommand
-                language={'bash'}
+                    language={'bash'}
-                command={'npx create-nx-workspace --preset=angular'}
+                    command={'npx create-nx-workspace --preset=angular'}
-              />
+                  />
+                </div>
+              </div>
+            </div>
+            {/*More info*/}
+            <div
+              className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
+              style={{
+                background:
+                  'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
+              }}
+            >
+              <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/i37yJKK8qGI"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                  className="w-full"
+                />
+              </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">
+                <p className="sm:text-lg mb-6">
+                  Once you’ve created your Angular workspace, follow the steps
+                  in this tutorial to learn how to add testing, share code, view
+                  dependency graphs, and much, much more.
+                </p>
+                <div className="inline-flex">
+                  <Link href="/latest/anguar/tutorial/01-create-application">
+                    <a className="inline-flex items-center font-bold group">
+                      <span className="group-hover:underline">
+                        Nx Angular App Tutorial
+                      </span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
+                      </svg>
+                    </a>
+                  </Link>
+                </div>
+                <p className="italic sm:text-lg my-6">
+                  If you want to add Nx to an existing Angular project, check
+                  out these guides for{' '}
+                  <Link href="/latest/angular/migration/overview">
+                    <a className="underline pointer">
+                      "Create React App" migration
+                    </a>
+                  </Link>
+                  .
+                </p>
+              </div>
             </div>
           </div>
-        </div>
+          {/*Nx technology*/}
-        {/*More info*/}
+          <div className="bg-blue-nx-base text-white">
-        <div
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
-          className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
+              <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-          style={{
+                <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            background:
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-              'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
+                    Distributed Graph-Based Task Executions and Computation
-          }}
+                    Caching
-        >
+                  </h3>
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <p className="sm:text-lg mb-6">
-            <iframe
+                    <span className="font-bold">Nx</span> is smart. It analyzes
-              width="560"
+                    your workspace and figures out what can be affected by every
-              height="315"
+                    code change. That's why Nx doesn't rebuild and retest
-              src="https://www.youtube.com/embed/i37yJKK8qGI"
+                    everything on every commit —{' '}
-              frameBorder="0"
+                    <span className="font-bold">
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      it only rebuilds what is necessary
-              allowFullScreen
+                    </span>
-              className="w-full"
+                    .
-            />
+                  </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
+                    <span className="font-bold">
+                      it can 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 className="w-full sm:w-1/2 flex flex-col justify-between items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <Image
+                    src="/images/distributed-tasks.png"
+                    alt="Distributed Graph-Based Task Execution and Computation Caching illustration"
+                    width={388}
+                    height={300}
+                  />
+                </div>
+              </div>
+            </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">
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
-            <p className="sm:text-lg mb-6">
+            {/*Nx plugins ecosystem*/}
-              Once you’ve created your Angular workspace, follow the steps in
+            <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-              this tutorial to learn how to add testing, share code, view
+              <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
-              dependency graphs, and much, much more.
+                <div className="grid grid-cols-4 gap-16">
-            </p>
+                  <img
-            <div className="inline-flex">
+                    loading="lazy"
-              <Link href="/latest/anguar/tutorial/01-create-application">
+                    className="w-full opacity-25"
-                <a className="inline-flex items-center font-bold group">
+                    height="128"
-                  <span className="group-hover:underline">
+                    width="128"
-                    Nx Angular App Tutorial
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/storybook.svg"
-                  </span>
+                  />
-                  <svg
+                  <img
-                    xmlns="http://www.w3.org/2000/svg"
+                    loading="lazy"
-                    className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                    className="w-full opacity-25"
-                    fill="none"
+                    height="128"
-                    viewBox="0 0 24 24"
+                    width="128"
-                    stroke="currentColor"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cypress.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/angular.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nestjs.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/prettier.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/ionic.svg"
+                  />
+                </div>
+              </div>
+              <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  Rich Plugin Ecosystem
+                </h3>
+                <p className="sm:text-lg mb-6">
+                  <b>
+                    Nx is an open platform with plugins for many modern tools
+                    and frameworks.
+                  </b>
+                  It has support for TypeScript, Angular, NativeScript, Cypress,
+                  Jest, Prettier, Nest.js, AngularCLI, Storybook, Ionic, Go,
+                  Rust among others. With Nx, you get a consistent dev
+                  experience regardless of the tools used.
+                </p>
+                <p className="sm:text-lg mb-6">For instance:</p>
+                <ul className="sm:text-lg list-disc list-inside">
+                  <li>
+                    <a
+                      className="underline pointer"
+                      href="https://blog.nrwl.io/nx-is-modern-angular-bda6cf10746d"
+                    >
+                      Nx is Modern Angular
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="underline pointer"
+                      href="https://blog.nrwl.io/smarter-and-faster-angular-development-with-nx-6ccca0fe18d1"
+                    >
+                      Smarter and Faster Angular Development with Nx
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          {/*Integrated experience*/}
+          <div className="bg-blue-nx-base text-white">
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
+              <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+                <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
+                    Nx Integrated Development Experience
+                  </h3>
+                  <p className="sm:text-lg mb-6">
+                    Nx provides a modern dev experience that is more integrated.
+                    Nx adds a high-quality VS Code plugin which helps you use
+                    the build tool effectively, generate components in folders,
+                    and much more.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    Nx also supports optional free cloud support with Nx Cloud
+                    as well as GitHub integration. Share links with your
+                    teammates where everyone working on a project can examine
+                    detailed build logs and get insights about how to improve
+                    your project and build.
+                  </p>
+                </div>
+                <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <Image
+                    src="/images/vscode-nxcloud-pr.png"
+                    alt="Nx Integrated Development Experience illustration"
+                    width={870}
+                    height={830}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/*Call out*/}
+          <div className="bg-blue-nx-dark text-white overflow-hidden">
+            <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 sm:text-4xl">
+                <span className="block">Ready to dive in?</span>
+                <span className="block">Start using Nx with React today.</span>
+              </h2>
+              <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+                <div className="inline-flex rounded-md shadow">
+                  <Link href="/latest/react/getting-started/getting-started">
+                    <a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
+                      Get started with React
+                    </a>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
+            {/*Learn more*/}
+            <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
+              <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  Learn More About Nx
+                </h3>
+              </div>
+              <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <p className="sm:text-lg mb-6">
+                  To learn more about Nx and how Nx can increase your dev and
+                  build efficiency and modernize your apps stack, check out the
+                  following resources:
+                </p>
+                <ul className="sm:text-lg list-disc list-inside">
+                  <li>
+                    <Link href={'/latest/angular/getting-started/intro'}>
+                      <a className="underline pointer">
+                        Nx Angular Documentation
+                      </a>
+                    </Link>
+                  </li>
+                  <li>
+                    <a
+                      className="underline pointer"
+                      href="https://www.youtube.com/watch?v=2mYLe9Kp9VM&list=PLakNactNC1dH38AfqmwabvOszDmKriGco"
+                      target="_blank"
+                    >
+                      Free Nx Workspaces video course
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
+                      target="_blank"
+                    >
+                      Nx Explainer: Dev Tools for Monorepos, In-Depth with
+                      Victor Savkin
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://go.nrwl.io/nx-office-hours"
+                      target="_blank"
+                    >
+                      Tune into regular Nx Office Hours livestreams
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://nx.app"
+                      target="_blank"
+                    >
+                      Nx Cloud
+                    </a>
+                  </li>
+                </ul>
+                <p className="sm:text-lg mt-6">
+                  You can also{' '}
+                  <a
+                    className="underline pointer"
+                    href="https://twitter.com/NxDevTools"
+                    target="_blank"
                   >
-                    <path
+                    follow Nx Dev Tools on Twitter
-                      strokeLinecap="round"
+                  </a>{' '}
-                      strokeLinejoin="round"
+                  to keep up with latest news, feature announcements, and
-                      strokeWidth={2}
+                  resources from the Nx Core Team.
-                      d="M13 7l5 5m0 0l-5 5m5-5H6"
+                </p>
-                    />
+              </div>
-                  </svg>
-                </a>
-              </Link>
-            </div>
-            <p className="italic sm:text-lg my-6">
-              If you want to add Nx to an existing Angular project, check out
-              these guides for{' '}
-              <Link href="/latest/angular/migration/overview">
-                <a className="underline pointer">
-                  "Create React App" migration
-                </a>
-              </Link>
-              .
-            </p>
-          </div>
-        </div>
-        {/*Nx technology*/}
-        <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Distributed Graph-Based Task Executions and Computation Caching
-            </h3>
-            <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
-              <span className="font-bold">
-                it can 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 className="w-full sm:w-1/2 flex flex-col justify-between items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <img
-              loading="lazy"
-              className="w-full opacity-25"
-              height="128"
-              width="128"
-              src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nx.svg"
-            />
-          </div>
-        </div>
-      </div>
-      {/*Call out*/}
-      <div className="bg-blue-nx-base text-white">
-        <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 sm:text-4xl">
-            <span className="block">Ready to dive in?</span>
-            <span className="block">Start using Nx with React today.</span>
-          </h2>
-          <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-            <div className="inline-flex rounded-md shadow">
-              <Link href="/latest/react/getting-started/getting-started">
-                <a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
-                  Get started with React
-                </a>
-              </Link>
             </div>
           </div>
+          {/*Who is using Nx*/}
+          <NxUsersShowcase />
         </div>
-      </div>
+      </main>
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
+      <Footer
-        {/*Nx plugins ecosystem*/}
+        flavor={{
-        <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+          name: storedFlavor || 'react',
-          <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
+          value: storedFlavor || 'react',
-            <div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-16 lg:gap-24">
+        }}
-              <img
+        version={{
-                loading="lazy"
+          name: storedVersion || 'Latest',
-                className="w-full opacity-25"
+          value: storedVersion || 'latest',
-                height="128"
+        }}
-                width="128"
+      />
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/storybook.svg"
+    </>
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cypress.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/angular.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nestjs.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/prettier.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/ionic.svg"
-              />
-            </div>
-          </div>
-          <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Rich Plugin Ecosystem
-            </h3>
-            <p className="sm:text-lg mb-6 font-bold">
-              Nx is an open platform with plugins for many modern tools and
-              frameworks.
-            </p>
-            <p className="sm:text-lg mb-6">
-              It has support for TypeScript, Angular, NativeScript, Cypress,
-              Jest, Prettier, Nest.js, AngularCLI, Storybook, Ionic, Go, Rust
-              among others. With Nx, you get a consistent dev experience
-              regardless of the tools used.
-            </p>
-            <ul className="sm:text-lg list-disc list-inside">
-              <li>
-                Use Nx's{' '}
-                <a
-                  className="underline pointer"
-                  href="https://nx.dev/latest/angular/storybook/overview"
-                >
-                  Storybook
-                </a>{' '}
-                and{' '}
-                <a
-                  className="underline pointer"
-                  href="https://nx.dev/latest/angular/cypress/overview#cypress-plugin"
-                >
-                  Cypress
-                </a>{' '}
-                plugins to build design systems.
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      {/*Integrated experience*/}
-      <div className="bg-blue-nx-base text-white">
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
-          <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-            <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-                Nx Integrated Development Experience
-              </h3>
-              <p className="sm:text-lg mb-6">
-                Nx provides a modern dev experience that is more integrated. Nx
-                adds a high-quality VS Code plugin which helps you use the build
-                tool effectively, generate components in folders, and much more.
-              </p>
-              <p className="sm:text-lg mb-6">
-                Nx also supports optional free cloud support with Nx Cloud as
-                well as GitHub integration. Share links with your teammates
-                where everyone working on a project can examine detailed build
-                logs and get insights about how to improve your project and
-                build.
-              </p>
-            </div>
-            <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <Image
-                src="/images/vscode-nxcloud-pr.png"
-                alt="Nx Integrated Development Experience illustration"
-                width={870}
-                height={830}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
-        {/*Learn more*/}
-        <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
-          <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Learn More About Nx
-            </h3>
-          </div>
-          <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <p className="sm:text-lg mb-6">
-              To learn more about Nx and how Nx can increase your dev and build
-              efficiency and modernize your apps stack, check out the following
-              resources:
-            </p>
-            <ul className="sm:text-lg list-disc list-inside">
-              <li>
-                <Link href={'/latest/angular/getting-started/intro'}>
-                  <a className="underline pointer">Nx Angular Documentation</a>
-                </Link>
-              </li>
-              <li>
-                <a
-                  className="underline pointer"
-                  href="https://www.youtube.com/watch?v=2mYLe9Kp9VM&list=PLakNactNC1dH38AfqmwabvOszDmKriGco"
-                  target="_blank"
-                >
-                  Free Nx Workspaces video course
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
-                  target="_blank"
-                >
-                  Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
-                  Savkin
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://go.nrwl.io/nx-office-hours"
-                  target="_blank"
-                >
-                  Tune into regular Nx Office Hours livestreams
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://nx.app"
-                  target="_blank"
-                >
-                  Nx Cloud
-                </a>
-              </li>
-            </ul>
-            <p className="sm:text-lg mt-6">
-              You can also{' '}
-              <a
-                className="underline pointer"
-                href="https://twitter.com/NxDevTools"
-                target="_blank"
-              >
-                follow Nx Dev Tools on Twitter
-              </a>{' '}
-              to keep up with latest news, feature announcements, and resources
-              from the Nx Core Team.
-            </p>
-          </div>
-        </div>
-      </div>
-      {/*Who is using Nx*/}
-      <NxUsersShowcase />
-    </div>
   );
 }
 

nx-dev/nx-dev/pages/community.tsx

@@ -1,10 +1,12 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { PluginCard } from '@nrwl/nx-dev/ui/common';
+import { Footer, Header, PluginCard } from '@nrwl/nx-dev/ui/common';
+import React from 'react';
+import { useStorage } from '../lib/use-storage';
 
 declare const fetch: any;
 
-interface NodeProps {
+interface CommunityProps {
   pluginList: {
     description: string;
     name: string;
@@ -12,16 +14,11 @@ interface NodeProps {
   }[];
 }
 
-export async function getStaticProps(): Promise<{ props: NodeProps }> {
+export async function getStaticProps(): Promise<{ props: CommunityProps }> {
-  // Call an external API endpoint to get posts.
-  // You can use any data fetching library
   const res = await fetch(
     'https://raw.githubusercontent.com/nrwl/nx/master/community/approved-plugins.json'
   );
   const pluginList = await res.json();
-
-  // By returning { props: { posts } }, the Blog component
-  // will receive `posts` as a prop at build time
   return {
     props: {
       pluginList,
@@ -29,255 +26,283 @@ export async function getStaticProps(): Promise<{ props: NodeProps }> {
   };
 }
 
-export function Node(props: NodeProps) {
+export function Community(props: CommunityProps) {
+  const { value: storedFlavor } = useStorage('flavor');
+  const { value: storedVersion } = useStorage('version');
   return (
-    <div className="w-full">
+    <>
-      {/*Intro component*/}
+      <Header
-      <div className="bg-gray-50">
+        showSearch={false}
-        <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
+        flavor={{
-          <div className="mt-40">
+          name: storedFlavor || 'react',
-            <h1 className="text-4xl sm:text-6xl lg:text-7xl leading none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10">
+          value: storedFlavor || 'react',
-              It's always better when we're together.
+        }}
-            </h1>
+        version={{
-            <p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
+          name: storedVersion || 'Latest',
-              There are many ways you can connect with the open-source Nx
+          value: storedVersion || 'latest',
-              community. Below, you’ll find details about various connection
+        }}
-              points.
+      />
-            </p>
+      <main>
-          </div>
+        <div className="w-full">
-        </div>
+          {/*Intro component*/}
-      </div>
+          <div className="bg-gray-50">
-      {/*Community*/}
+            <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-      <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
+              <div className="mt-40">
-        <div className="mt-32 flex md:flex-row flex-col justify-center">
+                <h1 className="text-4xl sm:text-6xl lg:text-7xl leading none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10">
-          <div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
+                  It's always better when we're together.
-            <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                </h1>
-              GitHub & Slack
+                <p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
-            </h2>
+                  There are many ways you can connect with the open-source Nx
-
+                  community. Below, you’ll find details about various connection
-            <p className="sm:text-lg mb-6">
+                  points.
-              At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>,
+                </p>
-              you can file issues or contribute code back to the project.
+              </div>
-            </p>
-            <p className="sm:text-lg mb-6">
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                title="Join the Nx Community Slack"
-                href="http://go.nrwl.io/join-slack"
-              >
-                Join the Nx Community Slack
-              </a>{' '}
-              to meet a friendly community of Nx users. This is a perfect place
-              to ask clarifying questions or to talk through new ideas that you
-              want to try with Nx. There's also a channel dedicated to sharing
-              articles about Nx and most of the authors of community plugins can
-              be reached there.
-            </p>
-
-            <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
-              Office Hours & Twitter
-            </h2>
-            <p className="sm:text-lg mb-6">
-              Our live Nx Office Hours take place every second and fourth
-              Monday, from 1:00 - 2:00 PM EST on the{' '}
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                href="https://www.youtube.com/nrwl_io"
-              >
-                Nrwl YouTube channel
-              </a>
-              . Info about upcoming Office Hours sessions is shared on the{' '}
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                href="https://twitter.com/NxDevTools"
-              >
-                @NxDevTools
-              </a>{' '}
-              Twitter account and the Nrwl+Nx Newsletter. You can find past
-              live-streams on the{' '}
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                rel="noreferrer"
-                href="https://www.youtube.com/watch?v=JS3m1wIwRBg&list=PLakNactNC1dH8LCp2mvx5lbO6maNrlBVN"
-              >
-                'Nx Office Hours' Youtube Playlist
-              </a>
-              .
-            </p>
-
-            <p className="sm:text-lg mb-6">
-              In each session, members of the Nx core team answer your
-              questions, help get you up and running with Nx, and address
-              particular challenges. If you have a question or topic you’d like
-              to see covered in Nx Office Hours, you can{' '}
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Nx Office Hours Questions and Suggestions Form"
-                title="Nx Office Hours Questions and Suggestions Form"
-                href="https://forms.gle/ehzCjzcF1xxNaviC7"
-              >
-                submit them here
-              </a>
-            </p>
-
-            <p className="sm:text-lg mb-6">
-              For the latest news about Nx,{' '}
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                rel="noreferrer"
-                href="https://twitter.com/NxDevTools"
-              >
-                follow @NxDevTools on Twitter
-              </a>
-              .
-            </p>
-
-            <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
-              We also have a newsletter
-            </h2>
-            <p className="sm:text-lg mb-6">
-              You can also{' '}
-              <a
-                className="underline cursor-pointer"
-                target="_blank"
-                rel="noreferrer"
-                href="https://go.nrwl.io/nx-newsletter"
-              >
-                subscribe to the Nx Newsletter
-              </a>
-              : a monthly email digest from the Nx core team at Nrwl.
-              Subscribers receive news about Nx releases, posts about new Nx
-              features, details about new plugins, links to community resources,
-              and additional Nx content.
-            </p>
-          </div>
-          <div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pl-16 md:pb-0 pb-10 mt-8 md:mt-0">
-            <Image src="/images/community.svg" width={555} height={735} />
-          </div>
-        </div>
-      </div>
-      {/*How to plugin*/}
-      <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-        <div className="my-32 flex flex-col  md:flex-row items-start justify-center">
-          <div className="w-full lg:w-2/5 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
-            <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
-              Community plugin
-            </h2>
-            <p className="sm:text-lg mb-6">
-              Core Nx plugins are created and maintained by the Nx team at Nrwl
-              and you can see all the available plugins when you run the{' '}
-              <code className="text-sm bg-gray-50 text-gray-600 font-mono leading-6 px-2 py-1 border border-gray-200 rounded">
-                nx list
-              </code>{' '}
-              command in your workspace.
-            </p>
-            <p className="sm:text-lg mb-6">
-              <b>The community plugins listed below</b> are created and
-              maintained by members of the Nx community, will allow you to use
-              the full power of the workspace while using different
-              technologies!
-            </p>
-            <div className="inline-flex rounded-md shadow mb-6">
-              <a
-                href="#community-plugin-list"
-                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"
-              >
-                Check the community plugins right now!
-              </a>
             </div>
-            <h3 className="text-xl leading-none font-bold text-gray-800 tracking-tight mb-4">
-              How to Install
-            </h3>
-            <p className="sm:text-lg mb-6">
-              Each of the plugins listed below have a yarn and an npm icon.
-              Clicking on either of these copies the relevant command to install
-              the dependency for your project.
-            </p>
           </div>
-          <div className="w-full lg:w-3/5 flex flex-col justify-between items-start md:pl-16 pb-10 mt-8 md:mt-0">
+          {/*Community*/}
-            <div className="py-4 px-6 bg-gray-50 rounded border border-gray-100">
+          <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-              <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+            <div className="mt-32 flex md:flex-row flex-col justify-center">
-                How to Create Your Own
+              <div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
-              </h3>
+                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
-              <p className="sm:text-lg mb-6">
+                  GitHub & Slack
-                Check out the{' '}
+                </h2>
-                <a
+
-                  className="underline cursor-pointer"
+                <p className="sm:text-lg mb-6">
-                  target="_blank"
+                  At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>
-                  rel="noreferrer"
+                  , you can file issues or contribute code back to the project.
-                  href="https://go.nrwl.io/nx-newsletter"
+                </p>
+                <p className="sm:text-lg mb-6">
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    title="Join the Nx Community Slack"
+                    href="http://go.nrwl.io/join-slack"
+                  >
+                    Join the Nx Community Slack
+                  </a>{' '}
+                  to meet a friendly community of Nx users. This is a perfect
+                  place to ask clarifying questions or to talk through new ideas
+                  that you want to try with Nx. There's also a channel dedicated
+                  to sharing articles about Nx and most of the authors of
+                  community plugins can be reached there.
+                </p>
+
+                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                  Office Hours & Twitter
+                </h2>
+                <p className="sm:text-lg mb-6">
+                  Our live Nx Office Hours take place every second and fourth
+                  Monday, from 1:00 - 2:00 PM EST on the{' '}
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    href="https://www.youtube.com/nrwl_io"
+                  >
+                    Nrwl YouTube channel
+                  </a>
+                  . Info about upcoming Office Hours sessions is shared on the{' '}
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    href="https://twitter.com/NxDevTools"
+                  >
+                    @NxDevTools
+                  </a>{' '}
+                  Twitter account and the Nrwl+Nx Newsletter. You can find past
+                  live-streams on the{' '}
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://www.youtube.com/watch?v=JS3m1wIwRBg&list=PLakNactNC1dH8LCp2mvx5lbO6maNrlBVN"
+                  >
+                    'Nx Office Hours' Youtube Playlist
+                  </a>
+                  .
+                </p>
+
+                <p className="sm:text-lg mb-6">
+                  In each session, members of the Nx core team answer your
+                  questions, help get you up and running with Nx, and address
+                  particular challenges. If you have a question or topic you’d
+                  like to see covered in Nx Office Hours, you can{' '}
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label="Nx Office Hours Questions and Suggestions Form"
+                    title="Nx Office Hours Questions and Suggestions Form"
+                    href="https://forms.gle/ehzCjzcF1xxNaviC7"
+                  >
+                    submit them here
+                  </a>
+                </p>
+
+                <p className="sm:text-lg mb-6">
+                  For the latest news about Nx,{' '}
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://twitter.com/NxDevTools"
+                  >
+                    follow @NxDevTools on Twitter
+                  </a>
+                  .
+                </p>
+
+                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                  We also have a newsletter
+                </h2>
+                <p className="sm:text-lg mb-6">
+                  You can also{' '}
+                  <a
+                    className="underline cursor-pointer"
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://go.nrwl.io/nx-newsletter"
+                  >
+                    subscribe to the Nx Newsletter
+                  </a>
+                  : a monthly email digest from the Nx core team at Nrwl.
+                  Subscribers receive news about Nx releases, posts about new Nx
+                  features, details about new plugins, links to community
+                  resources, and additional Nx content.
+                </p>
+              </div>
+              <div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pl-16 md:pb-0 pb-10 mt-8 md:mt-0">
+                <Image src="/images/community.svg" width={555} height={735} />
+              </div>
+            </div>
+          </div>
+          {/*How to plugin*/}
+          <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
+            <div className="my-32 flex flex-col  md:flex-row items-start justify-center">
+              <div className="w-full lg:w-2/5 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
+                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                  Community plugin
+                </h2>
+                <p className="sm:text-lg mb-6">
+                  Core Nx plugins are created and maintained by the Nx team at
+                  Nrwl and you can see all the available plugins when you run
+                  the{' '}
+                  <code className="text-sm bg-gray-50 text-gray-600 font-mono leading-6 px-2 py-1 border border-gray-200 rounded">
+                    nx list
+                  </code>{' '}
+                  command in your workspace.
+                </p>
+                <p className="sm:text-lg mb-6">
+                  <b>The community plugins listed below</b> are created and
+                  maintained by members of the Nx community, will allow you to
+                  use the full power of the workspace while using different
+                  technologies!
+                </p>
+                <div className="inline-flex rounded-md shadow mb-6">
+                  <a
+                    href="#community-plugin-list"
+                    className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-base"
+                  >
+                    Check the community plugins right now!
+                  </a>
+                </div>
+                <h3 className="text-xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                  How to Install
+                </h3>
+                <p className="sm:text-lg mb-6">
+                  Each of the plugins listed below have a yarn and an npm icon.
+                  Clicking on either of these copies the relevant command to
+                  install the dependency for your project.
+                </p>
+              </div>
+              <div className="w-full lg:w-3/5 flex flex-col justify-between items-start md:pl-16 pb-10 mt-8 md:mt-0">
+                <div className="py-4 px-6 bg-gray-50 rounded border border-gray-100">
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                    How to Create Your Own
+                  </h3>
+                  <p className="sm:text-lg mb-6">
+                    Check out the{' '}
+                    <a
+                      className="underline cursor-pointer"
+                      target="_blank"
+                      rel="noreferrer"
+                      href="https://go.nrwl.io/nx-newsletter"
+                    >
+                      subscribe to the Nx Newsletter
+                    </a>{' '}
+                    Nx Plugin guide to learn how to get started with building
+                    your own plugin!
+                  </p>
+                  <iframe
+                    width="560"
+                    height="315"
+                    title="YouTube video player"
+                    src="https://www.youtube.com/embed/XYO689PAhow"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    className="w-full"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/*Call out*/}
+          <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-nx-base">
+                  Start using Nx with Node today.
+                </span>
+              </h2>
+              <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+                <div className="inline-flex rounded-md shadow">
+                  <Link href="/latest/node/getting-started/getting-started">
+                    <a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-base">
+                      Get started with Node
+                    </a>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/*Plugins*/}
+          <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
+            <div className="my-12 flex sm:flex-row flex-col justify-center">
+              <div className="w-full py-6 mt-8">
+                <h2
+                  id="community-plugin-list"
+                  className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4 text-center"
                 >
-                  subscribe to the Nx Newsletter
+                  Community Plugins Directory
-                </a>{' '}
+                </h2>
-                Nx Plugin guide to learn how to get started with building your
+              </div>
-                own plugin!
+            </div>
-              </p>
+            <div className="my-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <iframe
+              {props.pluginList.map((plugin) => (
-                width="560"
+                <PluginCard
-                height="315"
+                  key={plugin.name}
-                title="YouTube video player"
+                  name={plugin.name}
-                src="https://www.youtube.com/embed/XYO689PAhow"
+                  description={plugin.description}
-                frameBorder="0"
+                  url={plugin.url}
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                />
-                allowFullScreen
+              ))}
-                className="w-full"
-              />
             </div>
           </div>
         </div>
-      </div>
+      </main>
-      {/*Call out*/}
+      <Footer
-      <div className="bg-gray-50">
+        flavor={{
-        <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">
+          name: storedFlavor || 'react',
-          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+          value: storedFlavor || 'react',
-            <span className="block">Ready to dive in?</span>
+        }}
-            <span className="block text-blue-600">
+        version={{
-              Start using Nx with Node today.
+          name: storedVersion || 'Latest',
-            </span>
+          value: storedVersion || 'latest',
-          </h2>
+        }}
-          <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+      />
-            <div className="inline-flex rounded-md shadow">
+    </>
-              <Link href="/latest/node/getting-started/getting-started">
-                <a 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 with Node
-                </a>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-      {/*Plugins*/}
-      <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-        <div className="my-12 flex sm:flex-row flex-col justify-center">
-          <div className="w-full py-6 mt-8">
-            <h2
-              id="community-plugin-list"
-              className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4 text-center"
-            >
-              Community Plugins Directory
-            </h2>
-          </div>
-        </div>
-        <div className="my-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {props.pluginList.map((plugin) => (
-            <PluginCard
-              key={plugin.name}
-              name={plugin.name}
-              description={plugin.description}
-              url={plugin.url}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
   );
 }
 
-export default Node;
+export default Community;

nx-dev/nx-dev/pages/index.tsx

@@ -1,353 +1,414 @@
 import React from 'react';
 import Link from 'next/link';
-import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
+import {
+  Footer,
+  Header,
+  InlineCommand,
+  NxUsersShowcase,
+} from '@nrwl/nx-dev/ui/common';
 import Image from 'next/image';
+import { useStorage } from '../lib/use-storage';
 
 export function Index() {
+  const { value: storedFlavor } = useStorage('flavor');
+  const { value: storedVersion } = useStorage('version');
   return (
-    <div className="w-full">
+    <>
-      {/*INTRO COMPONENT*/}
+      <Header
-      <div className="bg-blue-nx-base text-white">
+        showSearch={false}
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
+        flavor={{
-          <div className="mt-8 mb-20 flex lg:flex-row flex-col items-center justify-center">
+          name: storedFlavor || 'react',
-            <div className="w-full lg:w-1/2 flex flex-col">
+          value: storedFlavor || 'react',
-              <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
+        version={{
-              </h1>
+          name: storedVersion || 'Latest',
-              <p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
+          value: storedVersion || 'latest',
-                Build full-stack applications with modern tools and reinforce
+        }}
-                best practices for your entire development team.
+      />
-              </p>
+      <main>
+        <div className="w-full">
+          {/*INTRO COMPONENT*/}
+          <div className="bg-blue-nx-base 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 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.
+                  </p>
 
-              <div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
+                  <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">
+                    <Link href="/latest/react/getting-started/getting-started">
-                  <a className="w-full sm:w-auto flex-none bg-purple-nx-base 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-base focus:outline-none transition-colors duration-180">
+                      <a className="w-full sm:w-auto flex-none bg-purple-nx-base 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-base focus:outline-none transition-colors duration-180">
-                    Get Started
+                        Get Started
+                      </a>
+                    </Link>
+
+                    <InlineCommand
+                      language={'bash'}
+                      command={'npx create-nx-workspace'}
+                    />
+                  </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">
+                  <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>
+
+          {/*SELECTION COMPONENT*/}
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <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 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>
-
+                <Link href="/angular">
-                <InlineCommand
+                  <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">
-                  language={'bash'}
+                    <svg viewBox="0 0 24 24" className="w-1/2" fill="#E23236">
-                  command={'npx create-nx-workspace'}
+                      <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>
+                    <div className="sm:text-base md:text-sm lg:text-base">
-            </div>
+                      Angular
-            <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">
+                    </div>
-              <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>
-
-      {/*SELECTION COMPONENT*/}
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
-        <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 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>
-            <Link href="/angular">
-              <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="#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>
-            <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-base 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>
-          {/* 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-base"
-                  >
-                    Learn About Nx Cloud
                   </a>
+                </Link>
+                <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 relative">
+                  <svg
+                    width={42}
+                    height={42}
+                    viewBox="0 0 64 64"
+                    style={{
+                      transform: 'scaleX(-1) rotate(50deg)',
+                      left: '-4.3rem',
+                      position: 'absolute',
+                      top: 'calc(50% - (32px / 2))',
+                    }}
+                    className="hidden md:block"
+                  >
+                    <path
+                      shapeRendering="geometricPrecision"
+                      d="m63.386,16.193l.002-.002c0.002-0.003 0.004-0.006 0.006-0.01 0.172-0.195 0.298-0.43 0.399-0.678 0.032-0.076 0.053-0.148 0.076-0.225 0.058-0.191 0.094-0.389 0.106-0.596 0.006-0.076 0.018-0.148 0.016-0.226 0-0.04 0.01-0.076 0.008-0.115-0.014-0.239-0.062-0.47-0.136-0.687-0.006-0.023-0.022-0.041-0.03-0.064-0.088-0.239-0.214-0.451-0.363-0.645-0.021-0.027-0.028-0.063-0.05-0.09l-10.311-12.146c-0.789-0.93-2.084-0.948-2.894-0.037-0.808,0.91-0.823,2.402-0.032,3.334l5.558,6.549c-8.121-1.076-16.104,0.633-16.481,0.717-24.646,4.467-42.087,27.227-38.88,50.736 0.159,1.164 1.028,1.992 2.019,1.992 0.106,0 0.212-0.009 0.32-0.027 1.116-0.203 1.878-1.409 1.704-2.696-2.857-20.94 13.056-41.282 35.537-45.358 0.103-0.024 8.351-1.794 16.117-0.574l-8.577,5.093c-1.005,0.598-1.398,2.02-0.881,3.177 0.516,1.159 1.748,1.608 2.756,1.017l13.52-8.028c0.183-0.111 0.347-0.25 0.491-0.411z"
+                    />
+                  </svg>
+                  First-class support for your favorite stack
+                </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>
+                <p className="sm:text-lg mb-6">
+                  It has first-class support for many frontend and backend
+                  technologies, so its documentation comes in multiple flavours.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-blue-nx-base 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/distributed-tasks.png"
+                    alt="Distributed Graph-Based Task Execution and Computation 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>
+              {/* 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-base"
+                      >
+                        Learn About Nx Cloud
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </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">
+                    <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>
-          {/*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">
-                <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">
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
-        {/*LEARNING MATERIALS*/}
+            {/*LEARNING MATERIALS*/}
-        <div className="my-32 flex sm:flex-row flex-col">
+            <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">
+              <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
+                <Image
-              src="/images/youtube-videos.svg"
+                  src="/images/youtube-videos.svg"
-              alt="Get access to key learning materials illustration"
+                  alt="Get access to key learning materials illustration"
-              width={388}
+                  width={388}
-              height={300}
+                  height={300}
-            />
+                />
-          </div>
+              </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">
+              <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">
+                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-              Get access to key learning materials
+                  Get access to key learning materials
-            </h2>
+                </h2>
-            <p className="sm:text-lg mb-6">
+                <p className="sm:text-lg mb-6">
-              With accessible and free online content about Nx, you can quickly
+                  With accessible and free online content about Nx, you can
-              get up and running with all of Nx's features. Nx tutorials and
+                  quickly get up and running with all of Nx's features. Nx
-              resources are continuously updated with the latest version. Plus,
+                  tutorials and resources are continuously updated with the
-              when you're looking for advanced courses visit{' '}
+                  latest version. Plus, when you're looking for advanced courses
-              <a
+                  visit{' '}
-                className="cursor-pointer underline"
+                  <a
-                href="https://nxplaybook.com/?utm_source=nx.dev"
+                    className="cursor-pointer underline"
-                target="_blank"
+                    href="https://nxplaybook.com/?utm_source=nx.dev"
-              >
+                    target="_blank"
-                NxPlaybook.com
+                  >
-              </a>
+                    NxPlaybook.com
-              .
+                  </a>
-            </p>
+                  .
-            <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+                </p>
-              <div className="inline-flex rounded-md shadow">
+                <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-                <a
+                  <div className="inline-flex rounded-md shadow">
-                  target="_blank"
+                    <a
-                  href="https://www.youtube.com/watch?v=2mYLe9Kp9VM&list=PLakNactNC1dH38AfqmwabvOszDmKriGco?utm_source=nx.dev"
+                      target="_blank"
-                  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-base"
+                      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-base"
-                  Watch Nx Workspaces Course
+                    >
-                </a>
+                      Watch Nx Workspaces Course
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <div className="bg-blue-nx-base text-white">
+          <div className="bg-blue-nx-base text-white">
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
-          {/*MORE*/}
+              {/*MORE*/}
-          <div className="my-32 flex sm:flex-row flex-col">
+              <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">
+                <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">
+                  <h3 className="text-xl leading-none tracking-tight mb-4">
-                Nx and Nx Console
+                    Nx and Nx Console
-              </h3>
+                  </h3>
-              <p className="sm:text-lg mb-6">
+                  <p className="sm:text-lg mb-6">
-                For developers, Nx extends Nx Console to give you more
+                    For developers, Nx extends Nx Console to give you more
-                visibility into your workspace. With Nx Console and Nx in your
+                    visibility into your workspace. With Nx Console and Nx in
-                workflow you can reduce the time it takes to build high-quality
+                    your workflow you can reduce the time it takes to build
-                software at scale, and improve best-practices across your
+                    high-quality software at scale, and improve best-practices
-                organization.{' '}
+                    across your organization.{' '}
-                <a
+                    <a
-                  href="https://nx.dev/node/cli/console"
+                      href="https://nx.dev/node/cli/console"
-                  target="_blank"
+                      target="_blank"
-                  className="cursor-pointer underline"
+                      className="cursor-pointer underline"
-                >
+                    >
-                  Try out Nx Console
+                      Try out Nx Console
-                </a>
+                    </a>
-                .
+                    .
-              </p>
+                  </p>
-            </div>
+                </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">
+                <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">
+                  <h3 className="text-xl leading-none tracking-tight mb-4">
-                Brought to you by the community
+                    Brought to you by the community
-              </h3>
+                  </h3>
-              <p className="sm:text-lg mb-6">
+                  <p className="sm:text-lg mb-6">
-                Nx is built and maintained as an open-source toolkit for
+                    Nx is built and maintained as an open-source toolkit for
-                developers by community contributors alongside the experts at
+                    developers by community contributors alongside the experts
-                Nrwl, a software consulting firm with renowned JavaScript
+                    at Nrwl, a software consulting firm with renowned JavaScript
-                experts and core contributors. To learn more, visit{' '}
+                    experts and core contributors. To learn more, visit{' '}
-                <a
+                    <a
-                  href="https://nrwl.io/?utm_source=nx.dev"
+                      href="https://nrwl.io/?utm_source=nx.dev"
-                  target="_blank"
+                      target="_blank"
-                  className="cursor-pointer underline"
+                      className="cursor-pointer underline"
-                >
+                    >
-                  nrwl.io
+                      nrwl.io
-                </a>
+                    </a>
-                .
+                    .
-              </p>
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      {/*Who is using Nx*/}
+          {/*Who is using Nx*/}
-      <NxUsersShowcase />
+          <NxUsersShowcase />
-    </div>
+        </div>
+      </main>
+      <Footer
+        flavor={{
+          name: storedFlavor || 'react',
+          value: storedFlavor || 'react',
+        }}
+        version={{
+          name: storedVersion || 'Latest',
+          value: storedVersion || 'latest',
+        }}
+      />
+    </>
   );
 }
 

nx-dev/nx-dev/pages/node.tsx

@@ -1,6 +1,13 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
+import {
+  Footer,
+  Header,
+  InlineCommand,
+  NxUsersShowcase,
+} from '@nrwl/nx-dev/ui/common';
+import React from 'react';
+import { useStorage } from '../lib/use-storage';
 
 export function Node() {
   const sectionItemList = [
@@ -46,458 +53,492 @@ export function Node() {
     },
   ];
 
+  const { value: storedFlavor } = useStorage('flavor');
+  const { value: storedVersion } = useStorage('version');
+
   return (
-    <div className="w-full overflow-hidden">
+    <>
-      {/*Intro component*/}
+      <Header
-      <div className="bg-blue-nx-dark text-white">
+        showSearch={false}
-        <div
+        flavor={{
-          className="max-w-screen-lg mx-auto px-5 py-5"
+          name: storedFlavor || 'react',
-          style={{
+          value: storedFlavor || 'react',
-            background:
+        }}
-              'url(/images/cubes-top-1.png) no-repeat top center / contain',
+        version={{
-          }}
+          name: storedVersion || 'Latest',
-        >
+          value: storedVersion || 'latest',
-          <div className="mt-72 flex sm:flex-row flex-col">
+        }}
-            <div className="w-full sm:w-1/2 lg:w-2/5 flex flex-col items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
+      />
-              <svg
+      <main>
-                width="500"
+        <div className="w-full overflow-hidden">
-                height="500"
+          {/*Intro component*/}
-                viewBox="0 0 400 400"
+          <div className="bg-blue-nx-dark text-white">
-                fill="currentColor"
+            <div
-                xmlns="http://www.w3.org/2000/svg"
+              className="max-w-screen-lg mx-auto px-5 py-5"
-                className="fill-current hidden md:block text-green-nx-base absolute -top-40 -left-72"
+              style={{
-              >
+                background:
-                <circle cx="200" cy="200" r="200" />
+                  'url(/images/cubes-top-1.png) no-repeat top center / contain',
-              </svg>
+              }}
-              <h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4 z-10">
+            >
-                Nx and Node
+              <div className="mt-72 flex sm:flex-row flex-col">
-              </h2>
+                <div className="w-full sm:w-1/2 lg:w-2/5 flex flex-col items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
-              <div className="hidden sm:block pt-4">
-                <Image
-                  src="/images/cubes-left-1.png"
-                  width={488}
-                  height={300}
-                />
-              </div>
-            </div>
-            <div className="w-full sm:w-1/2 lg:w-3/5 flex flex-col items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-                The power and scalability of Node has helped pave the way for
-                increasingly complex and sophisticated applications.
-              </h3>
-              <p className="sm:text-lg mb-6">
-                Using Typescript in Node applications helps dev teams code more
-                consistently, avoid compatibility issues, and it can be used to
-                build libraries for NPM. Unfortunately, the setup is often
-                tedious and time consuming, and any mistakes in your
-                configuration can grind your work to a halt.
-              </p>
-            </div>
-          </div>
-        </div>
-        {/*What is Nx*/}
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
-          <div className="my-32 flex sm:flex-row flex-col justify-center">
-            <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-                Nx is a smart and extensible build framework that helps you
-                develop, test, build, and scale Node applications.
-              </h3>
-              <p className="sm:text-lg mb-6">
-                Nx is a set of tools that provides a standardized and integrated
-                development experience for all of your Node workspaces. It takes
-                care of things like Typescript configuration and library
-                sharing, so you can focus on other, more interesting development
-                tasks. In addition, Nx provides...
-              </p>
-              <ul className="sm:text-lg list-disc list-inside">
-                <li>API creation using Express and Nest</li>
-                <li className="mt-4">Better linting</li>
-                <li className="mt-4">Better testing</li>
-                <li className="mt-4">
-                  Support for popular community tools and frameworks
-                </li>
-                <li className="mt-4">Nx’s own devkit for building plugins</li>
-                <li className="mt-4">
-                  And other Nx-specific features including dependency graphs,
-                  code generation, and computation caching
-                </li>
-              </ul>
-            </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 relative">
-              <svg
-                width="400"
-                height="400"
-                viewBox="0 0 400 400"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                className="fill-current hidden md:block text-green-nx-base absolute -top-20 -right-32"
-              >
-                <circle cx="200" cy="200" r="200" />
-              </svg>
-              <div className="hidden sm:block pt-4">
-                <Image
-                  src="/images/cubes-right-1.png"
-                  width={488}
-                  height={300}
-                />
-              </div>
-              {/*<iframe*/}
-              {/*  width="560"*/}
-              {/*  height="315"*/}
-              {/*  src="https://www.youtube.com/embed/iIh5h_G52kI"*/}
-              {/*  title="YouTube video player"*/}
-              {/*  frameBorder="0"*/}
-              {/*  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"*/}
-              {/*  allowFullScreen*/}
-              {/*  className="w-full"*/}
-              {/*/>*/}
-            </div>
-          </div>
-        </div>
-      </div>
-      {/*Call out*/}
-      <div className="bg-blue-nx-base text-white">
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
-          <div className="flex sm:flex-row flex-col justify-center py-16">
-            <div className="sm:w-1/2 sm:flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
-              <div className="hidden sm:block absolute -top-40">
-                <Image
-                  src="/images/cubes-left-2.png"
-                  width={310}
-                  height={240}
-                />
-              </div>
-            </div>
-            <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <p className="sm:text-lg mb-4 underline">
-                Get started right away by creating a modern Node workspace with
-                Nx, or learn more about the benefits Nx provides when building
-                Node applications.
-              </p>
-              <div className="inline-flex rounded-md shadow">
-                <Link href="/latest/node/getting-started/getting-started">
-                  <a className="inline-flex items-center justify-center px-5 py-2 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
-                    Nx Node Doc
-                  </a>
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
-        {/*How to use Nx*/}
-        <div className="mt-32 flex sm:flex-row flex-col justify-center">
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Create a Node Workspace <br />
-              with Nx Nest or Express
-            </h3>
-          </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">
-            <p className="sm:text-lg mb-6">
-              Get started right away by creating a new Node workspace. If you’re
-              using Nest run the following command in your Terminal or Command
-              prompt:
-            </p>
-
-            <div className="w-full">
-              <InlineCommand
-                language={'bash'}
-                command={'npx create-nx-workspace --preset=nest'}
-              />
-            </div>
-
-            <p className="sm:text-lg my-6">
-              For Express users, the command will be:
-            </p>
-
-            <div className="w-full">
-              <InlineCommand
-                language={'bash'}
-                command={'npx create-nx-workspace --preset=express'}
-              />
-            </div>
-          </div>
-        </div>
-        {/*More info*/}
-        <div
-          className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
-          style={{
-            background:
-              'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
-          }}
-        >
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <iframe
-              width="560"
-              height="315"
-              src="https://www.youtube.com/embed/UcBSBQYNlhE"
-              title="YouTube video player"
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-              className="w-full"
-            />
-          </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">
-            <p className="sm:text-lg mb-6">
-              Once you’ve created your Node workspace, follow the steps in this
-              tutorial to learn how to add testing, share code, view dependency
-              graphs, and much, much more.
-            </p>
-            <div className="inline-flex">
-              <Link href="/latest/node/tutorial/01-create-application">
-                <a className="inline-flex items-center font-bold group">
-                  <span className="group-hover:underline">
-                    Nx Node App Tutorial
-                  </span>
                   <svg
+                    width="500"
+                    height="500"
+                    viewBox="0 0 400 400"
+                    fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg"
-                    className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                    className="fill-current hidden md:block text-green-nx-base absolute -top-40 -left-72"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
                   >
-                    <path
+                    <circle cx="200" cy="200" r="200" />
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13 7l5 5m0 0l-5 5m5-5H6"
-                    />
                   </svg>
-                </a>
+                  <h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4 z-10">
-              </Link>
+                    Nx and Node
+                  </h2>
+                  <div className="hidden sm:block pt-4">
+                    <Image
+                      src="/images/cubes-left-1.png"
+                      width={488}
+                      height={300}
+                    />
+                  </div>
+                </div>
+                <div className="w-full sm:w-1/2 lg:w-3/5 flex flex-col items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
+                    The power and scalability of Node has helped pave the way
+                    for increasingly complex and sophisticated applications.
+                  </h3>
+                  <p className="sm:text-lg mb-6">
+                    Using Typescript in Node applications helps dev teams code
+                    more consistently, avoid compatibility issues, and it can be
+                    used to build libraries for NPM. Unfortunately, the setup is
+                    often tedious and time consuming, and any mistakes in your
+                    configuration can grind your work to a halt.
+                  </p>
+                </div>
+              </div>
             </div>
-            <p className="italic sm:text-lg my-6">
+            {/*What is Nx*/}
-              If you want to add Nx to an existing Node project,{' '}
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
-              <Link href="/latest/node/migration/adding-to-monorepo">
+              <div className="my-32 flex sm:flex-row flex-col justify-center">
-                <a className="underline pointer">check out this guide</a>
+                <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-              </Link>
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-              .
+                    Nx is a smart and extensible build framework that helps you
-            </p>
+                    develop, test, build, and scale Node applications.
-          </div>
+                  </h3>
-        </div>
+                  <p className="sm:text-lg mb-6">
-      </div>
+                    Nx is a set of tools that provides a standardized and
-      {/*VIDEO*/}
+                    integrated development experience for all of your Node
-      <div className="bg-blue-nx-base text-white">
+                    workspaces. It takes care of things like Typescript
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
+                    configuration and library sharing, so you can focus on
-          <div className="py-32 w-full flex justify-center">
+                    other, more interesting development tasks. In addition, Nx
-            <iframe
+                    provides...
-              width="760"
+                  </p>
-              height="440"
+                  <ul className="sm:text-lg list-disc list-inside">
-              src="https://www.youtube.com/embed/iIh5h_G52kI"
+                    <li>API creation using Express and Nest</li>
-              frameBorder="0"
+                    <li className="mt-4">Better linting</li>
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    <li className="mt-4">Better testing</li>
-              allowFullScreen
+                    <li className="mt-4">
-              className="w-max-full mb-8"
+                      Support for popular community tools and frameworks
-              style={{ boxShadow: '-48px 48px 0 0 hsla(162, 47%, 50%, 1)' }}
+                    </li>
-            />
+                    <li className="mt-4">
-          </div>
+                      Nx’s own devkit for building plugins
-        </div>
+                    </li>
-      </div>
+                    <li className="mt-4">
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
+                      And other Nx-specific features including dependency
-        {/*Nx technology*/}
+                      graphs, code generation, and computation caching
-        <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+                    </li>
-          <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  </ul>
-            <div className="grid grid-cols-6 sm:grid-cols-2 md:grid-cols-3 gap-16 lg:gap-24">
+                </div>
-              <img
+                <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 relative">
-                loading="lazy"
+                  <svg
-                className="w-full opacity-25"
+                    width="400"
-                height="128"
+                    height="400"
-                width="128"
+                    viewBox="0 0 400 400"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/jest.svg"
+                    fill="currentColor"
-              />
+                    xmlns="http://www.w3.org/2000/svg"
-              <img
+                    className="fill-current hidden md:block text-green-nx-base absolute -top-20 -right-32"
-                loading="lazy"
+                  >
-                className="w-full opacity-25"
+                    <circle cx="200" cy="200" r="200" />
-                height="128"
+                  </svg>
-                width="128"
+                  <div className="hidden sm:block pt-4">
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nestjs.svg"
+                    <Image
-              />
+                      src="/images/cubes-right-1.png"
-              <img
+                      width={488}
-                loading="lazy"
+                      height={300}
-                className="w-full opacity-25"
+                    />
-                height="128"
+                  </div>
-                width="128"
+                  {/*<iframe*/}
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/express.svg"
+                  {/*  width="560"*/}
-              />
+                  {/*  height="315"*/}
-              <img
+                  {/*  src="https://www.youtube.com/embed/iIh5h_G52kI"*/}
-                loading="lazy"
+                  {/*  title="YouTube video player"*/}
-                className="w-full opacity-25"
+                  {/*  frameBorder="0"*/}
-                height="128"
+                  {/*  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"*/}
-                width="128"
+                  {/*  allowFullScreen*/}
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
+                  {/*  className="w-full"*/}
-              />
+                  {/*/>*/}
-              <img
+                </div>
-                loading="lazy"
+              </div>
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/eslint.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
-              />
             </div>
           </div>
-          <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+          {/*Call out*/}
-            <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+          <div className="bg-blue-nx-base text-white">
-              Tools
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
-            </h3>
+              <div className="flex sm:flex-row flex-col justify-center py-16">
-            <p className="sm:text-lg mb-6">
+                <div className="sm:w-1/2 sm:flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
-              Nx provides excellent tooling for Node in many ways, including:
+                  <div className="hidden sm:block absolute -top-40">
-            </p>
+                    <Image
-            <ul className="sm:text-lg list-disc list-inside">
+                      src="/images/cubes-left-2.png"
-              <li>
+                      width={310}
-                <a
+                      height={240}
-                  className="underline pointer"
+                    />
-                  href="https://www.typescriptlang.org/"
+                  </div>
-                  target="_blank"
+                </div>
-                >
+                <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-                  TypeScript
+                  <p className="sm:text-lg mb-4 underline">
-                </a>{' '}
+                    Get started right away by creating a modern Node workspace
-                extends JavaScript by adding types and saves you time by
+                    with Nx, or learn more about the benefits Nx provides when
-                catching errors and providing fixes before you run code.
+                    building Node applications.
-              </li>
+                  </p>
-              <li className="mt-4">
+                  <div className="inline-flex rounded-md shadow">
-                <a
+                    <Link href="/latest/node/getting-started/getting-started">
-                  className="underline pointer"
+                      <a className="inline-flex items-center justify-center px-5 py-2 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
-                  href="https://jestjs.io/"
+                        Nx Node Doc
-                  target="_blank"
+                      </a>
-                >
+                    </Link>
-                  Jest
+                  </div>
-                </a>{' '}
+                </div>
-                is a zero-config JavaScript testing framework that prioritizes
+              </div>
-                simplicity. With robust documentation and a feature-full API,
-                Jest is a great solution for JS developers looking for a
-                powerful, modern testing toolkit.
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://eslint.org/"
-                  target="_blank"
-                >
-                  ESLint
-                </a>{' '}
-                uses static analysis to identify problems in your code, many of
-                which are fixed automatically in a syntax-aware manner. ESLint
-                is highly configurable; customize your linting preprocess code,
-                use custom parsers, or write your own rules.
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      {/*Integrated experience*/}
-      <div className="bg-blue-nx-base text-white">
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
-          <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-            <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-                Nx Integrated Development Experience
-              </h3>
-              <p className="sm:text-lg mb-6">
-                Nx provides a modern dev experience that is more integrated. Nx
-                adds a high-quality VS Code plugin which helps you use the build
-                tool effectively, generate components in folders, and much more.
-              </p>
-              <p className="sm:text-lg mb-6">
-                Nx also supports optional free cloud support with Nx Cloud as
-                well as GitHub integration. Share links with your teammates
-                where everyone working on a project can examine detailed build
-                logs and get insights about how to improve your project and
-                build.
-              </p>
-            </div>
-            <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <Image
-                src="/images/vscode-nxcloud-pr.png"
-                alt="Nx Integrated Development Experience illustration"
-                width={870}
-                height={830}
-              />
             </div>
           </div>
-        </div>
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
-      </div>
+            {/*How to use Nx*/}
-      {/*Learn more*/}
+            <div className="mt-32 flex sm:flex-row flex-col justify-center">
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
+              <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-        <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
+                <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-          <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  Create a Node Workspace <br />
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  with Nx Nest or Express
-              Learn More About Nx
+                </h3>
-            </h3>
+              </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">
+                <p className="sm:text-lg mb-6">
+                  Get started right away by creating a new Node workspace. If
+                  you’re using Nest run the following command in your Terminal
+                  or Command prompt:
+                </p>
+
+                <div className="w-full">
+                  <InlineCommand
+                    language={'bash'}
+                    command={'npx create-nx-workspace --preset=nest'}
+                  />
+                </div>
+
+                <p className="sm:text-lg my-6">
+                  For Express users, the command will be:
+                </p>
+
+                <div className="w-full">
+                  <InlineCommand
+                    language={'bash'}
+                    command={'npx create-nx-workspace --preset=express'}
+                  />
+                </div>
+              </div>
+            </div>
+            {/*More info*/}
+            <div
+              className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
+              style={{
+                background:
+                  'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
+              }}
+            >
+              <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/UcBSBQYNlhE"
+                  title="YouTube video player"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                  className="w-full"
+                />
+              </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">
+                <p className="sm:text-lg mb-6">
+                  Once you’ve created your Node workspace, follow the steps in
+                  this tutorial to learn how to add testing, share code, view
+                  dependency graphs, and much, much more.
+                </p>
+                <div className="inline-flex">
+                  <Link href="/latest/node/tutorial/01-create-application">
+                    <a className="inline-flex items-center font-bold group">
+                      <span className="group-hover:underline">
+                        Nx Node App Tutorial
+                      </span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
+                      </svg>
+                    </a>
+                  </Link>
+                </div>
+                <p className="italic sm:text-lg my-6">
+                  If you want to add Nx to an existing Node project,{' '}
+                  <Link href="/latest/node/migration/adding-to-monorepo">
+                    <a className="underline pointer">check out this guide</a>
+                  </Link>
+                  .
+                </p>
+              </div>
+            </div>
           </div>
-          <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+          {/*VIDEO*/}
-            <p className="sm:text-lg mb-6">
+          <div className="bg-blue-nx-base text-white">
-              To learn more about Nx and how Nx can increase your dev and build
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
-              efficiency and modernize your apps stack, check out the following
+              <div className="py-32 w-full flex justify-center">
-              resources:
+                <iframe
-            </p>
+                  width="760"
-            <ul className="sm:text-lg list-disc list-inside">
+                  height="440"
-              <li>
+                  src="https://www.youtube.com/embed/iIh5h_G52kI"
-                <a
+                  frameBorder="0"
-                  className="underline pointer"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
+                  allowFullScreen
-                  target="_blank"
+                  className="w-max-full mb-8"
-                >
+                  style={{ boxShadow: '-48px 48px 0 0 hsla(162, 47%, 50%, 1)' }}
-                  Free Nx Workspaces video course
+                />
-                </a>
+              </div>
-              </li>
+            </div>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
-                  target="_blank"
-                >
-                  Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
-                  Savkin
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://go.nrwl.io/nx-office-hours"
-                  target="_blank"
-                >
-                  Tune into regular Nx Office Hours livestreams
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://nx.app"
-                  target="_blank"
-                >
-                  Nx Cloud
-                </a>
-              </li>
-            </ul>
-            <p className="sm:text-lg mt-6">
-              You can also{' '}
-              <a
-                className="underline pointer"
-                href="https://twitter.com/NxDevTools"
-                target="_blank"
-              >
-                follow Nx Dev Tools on Twitter
-              </a>{' '}
-              to keep up with latest news, feature announcements, and resources
-              from the Nx Core Team.
-            </p>
           </div>
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
+            {/*Nx technology*/}
+            <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+              <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <div className="grid grid-cols-6 sm:grid-cols-2 md:grid-cols-3 gap-16 lg:gap-24">
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/jest.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nestjs.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/express.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/eslint.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
+                  />
+                </div>
+              </div>
+              <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  Tools
+                </h3>
+                <p className="sm:text-lg mb-6">
+                  Nx provides excellent tooling for Node in many ways,
+                  including:
+                </p>
+                <ul className="sm:text-lg list-disc list-inside">
+                  <li>
+                    <a
+                      className="underline pointer"
+                      href="https://www.typescriptlang.org/"
+                      target="_blank"
+                    >
+                      TypeScript
+                    </a>{' '}
+                    extends JavaScript by adding types and saves you time by
+                    catching errors and providing fixes before you run code.
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://jestjs.io/"
+                      target="_blank"
+                    >
+                      Jest
+                    </a>{' '}
+                    is a zero-config JavaScript testing framework that
+                    prioritizes simplicity. With robust documentation and a
+                    feature-full API, Jest is a great solution for JS developers
+                    looking for a powerful, modern testing toolkit.
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://eslint.org/"
+                      target="_blank"
+                    >
+                      ESLint
+                    </a>{' '}
+                    uses static analysis to identify problems in your code, many
+                    of which are fixed automatically in a syntax-aware manner.
+                    ESLint is highly configurable; customize your linting
+                    preprocess code, use custom parsers, or write your own
+                    rules.
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          {/*Integrated experience*/}
+          <div className="bg-blue-nx-base text-white">
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
+              <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+                <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
+                    Nx Integrated Development Experience
+                  </h3>
+                  <p className="sm:text-lg mb-6">
+                    Nx provides a modern dev experience that is more integrated.
+                    Nx adds a high-quality VS Code plugin which helps you use
+                    the build tool effectively, generate components in folders,
+                    and much more.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    Nx also supports optional free cloud support with Nx Cloud
+                    as well as GitHub integration. Share links with your
+                    teammates where everyone working on a project can examine
+                    detailed build logs and get insights about how to improve
+                    your project and build.
+                  </p>
+                </div>
+                <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <Image
+                    src="/images/vscode-nxcloud-pr.png"
+                    alt="Nx Integrated Development Experience illustration"
+                    width={870}
+                    height={830}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/*Learn more*/}
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
+              <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  Learn More About Nx
+                </h3>
+              </div>
+              <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <p className="sm:text-lg mb-6">
+                  To learn more about Nx and how Nx can increase your dev and
+                  build efficiency and modernize your apps stack, check out the
+                  following resources:
+                </p>
+                <ul className="sm:text-lg list-disc list-inside">
+                  <li>
+                    <a
+                      className="underline pointer"
+                      href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
+                      target="_blank"
+                    >
+                      Free Nx Workspaces video course
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
+                      target="_blank"
+                    >
+                      Nx Explainer: Dev Tools for Monorepos, In-Depth with
+                      Victor Savkin
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://go.nrwl.io/nx-office-hours"
+                      target="_blank"
+                    >
+                      Tune into regular Nx Office Hours livestreams
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://nx.app"
+                      target="_blank"
+                    >
+                      Nx Cloud
+                    </a>
+                  </li>
+                </ul>
+                <p className="sm:text-lg mt-6">
+                  You can also{' '}
+                  <a
+                    className="underline pointer"
+                    href="https://twitter.com/NxDevTools"
+                    target="_blank"
+                  >
+                    follow Nx Dev Tools on Twitter
+                  </a>{' '}
+                  to keep up with latest news, feature announcements, and
+                  resources from the Nx Core Team.
+                </p>
+              </div>
+            </div>
+          </div>
+          {/*Who is using Nx*/}
+          <NxUsersShowcase />
         </div>
-      </div>
+      </main>
-      {/*Who is using Nx*/}
+      <Footer
-      <NxUsersShowcase />
+        flavor={{
-    </div>
+          name: storedFlavor || 'react',
+          value: storedFlavor || 'react',
+        }}
+        version={{
+          name: storedVersion || 'Latest',
+          value: storedVersion || 'latest',
+        }}
+      />
+    </>
   );
 }
 

nx-dev/nx-dev/pages/react.tsx

@@ -1,452 +1,507 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
+import {
+  Footer,
+  Header,
+  InlineCommand,
+  NxUsersShowcase,
+} from '@nrwl/nx-dev/ui/common';
+import React from 'react';
+import { useStorage } from '../lib/use-storage';
 
 export function ReactPage() {
+  const { value: storedFlavor } = useStorage('flavor');
+  const { value: storedVersion } = useStorage('version');
   return (
-    <div className="w-full overflow-hidden">
+    <>
-      {/*Intro component*/}
+      <Header
-      <div className="bg-blue-nx-dark text-white">
+        showSearch={false}
-        <div className="max-w-screen-lg mx-auto px-5 py-5 relative">
+        flavor={{
-          <img
+          name: storedFlavor || 'react',
-            src="/images/react-constellation.svg"
+          value: storedFlavor || 'react',
-            width={800}
+        }}
-            height={650}
+        version={{
-            className="absolute top-0 right-0 constellation-wobble-animation"
+          name: storedVersion || 'Latest',
-            style={{ right: '-200px', top: '-270px' }}
+          value: storedVersion || 'latest',
-          />
+        }}
-          <div className="mt-72">
+      />
-            <h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4">
+      <main>
-              Nx and React
+        <div className="w-full overflow-hidden">
-            </h2>
+          {/*Intro component*/}
-          </div>
+          <div className="bg-blue-nx-dark text-white">
-          <div className="mt-8 mb-32 flex sm:flex-row flex-col justify-center">
+            <div className="max-w-screen-lg mx-auto px-5 py-5 relative">
-            <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+              <img
-              <p className="sm:text-lg mb-6">
+                src="/images/react-constellation.svg"
-                <b>Nx</b> provides a holistic dev experience powered by an
+                width={800}
-                advanced CLI and editor plugins.
+                height={650}
-              </p>
+                className="absolute top-0 right-0 constellation-wobble-animation"
-              <p className="sm:text-lg mb-6">
+                style={{ right: '-200px', top: '-270px' }}
-                Develop your applications using your preferred React frameworks,
-                mix and match them, without losing the rich support for
-                Storybook, Cypress, Jest, ESLint and more.
-              </p>
-              <p className="sm:text-lg mb-6">
-                <b>Nx</b> uses distributed graph-based task execution and
-                computation caching. Keep your CI and local dev experience fast
-                as your repository grows.
-              </p>
-              <p className="sm:text-lg mb-6">
-                <b>Nx</b> can be added to any React project{' '}
-                <a href="#create-nx-workspace">in minutes</a>.
-              </p>
-            </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">
-              <iframe
-                width="560"
-                height="315"
-                src="https://www.youtube.com/embed/sNz-4PUM0k8"
-                frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-                className="w-full"
               />
+              <div className="mt-72">
+                <h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4">
+                  Nx and React
+                </h2>
+                <p className="sm:text-lg mb-16">
+                  Nx is a smart and extensible build framework to help you
+                  develop, test, build, and scale with React and React
+                  frameworks like Gatsby, Next.js, and React Native.
+                </p>
+              </div>
+              <div className="mt-8 mb-32 flex sm:flex-row flex-col justify-center">
+                <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <p className="sm:text-lg mb-6">
+                    <b>Nx</b> provides a holistic dev experience powered by an
+                    advanced CLI and editor plugins.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    Develop your applications using your preferred React
+                    frameworks, mix and match them, without losing the rich
+                    support for Storybook, Cypress, Jest, ESLint and more.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    <b>Nx</b> uses distributed graph-based task execution and
+                    computation caching. Keep your CI and local dev experience
+                    fast as your repository grows.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    <b>Nx</b> can be added to any React project{' '}
+                    <a
+                      className="underline pointer"
+                      href="#create-nx-workspace"
+                    >
+                      in minutes
+                    </a>
+                    .
+                  </p>
+                </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">
+                  <iframe
+                    width="560"
+                    height="315"
+                    src="https://www.youtube.com/embed/sNz-4PUM0k8"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    className="w-full"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
-      </div>
+            {/*How to use Nx*/}
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
+            <div className="mt-32 flex sm:flex-row flex-col justify-center">
-        {/*How to use Nx*/}
+              <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-        <div className="mt-32 flex sm:flex-row flex-col justify-center">
+                <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  Create a React Workspace with Nx
-            <h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                </h3>
-              Create a React Workspace with Nx
+              </div>
-            </h3>
+              <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">
-          </div>
+                <p className="sm:text-lg mb-6">
-          <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">
+                  Get started right away by creating a new React workspace by
-            <p className="sm:text-lg mb-6">
+                  running the following command in your Terminal or Command
-              Get started right away by creating a new React workspace by
+                  prompt:
-              running the following command in your Terminal or Command prompt:
+                </p>
-            </p>
 
-            <div className="w-full">
+                <div className="w-full">
-              <InlineCommand
+                  <InlineCommand
-                language={'bash'}
+                    language={'bash'}
-                command={'npx create-nx-workspace --preset=react'}
+                    command={'npx create-nx-workspace --preset=react'}
-              />
+                  />
+                </div>
+
+                <p className="sm:text-lg my-6">For NextJS users you can use:</p>
+
+                <div className="w-full">
+                  <InlineCommand
+                    language={'bash'}
+                    command={'npx create-nx-workspace --preset=next'}
+                  />
+                </div>
+              </div>
             </div>
-
+            {/*More info*/}
-            <p className="sm:text-lg my-6">For NextJS users you can use:</p>
+            <div
-
+              className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
-            <div className="w-full">
+              style={{
-              <InlineCommand
+                background:
-                language={'bash'}
+                  'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
-                command={'npx create-nx-workspace --preset=next'}
+              }}
-              />
+            >
+              <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/HcQE5R6ucng"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                  className="w-full"
+                />
+              </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">
+                <p className="sm:text-lg mb-6">
+                  Once you’ve created your React workspace, follow the steps in
+                  this tutorial to learn how to add testing, share code, view
+                  dependency graphs, and much, much more.
+                </p>
+                <div className="inline-flex">
+                  <Link href="/latest/react/tutorial/01-create-application">
+                    <a className="inline-flex items-center font-bold group">
+                      <span className="group-hover:underline">
+                        Nx React App Tutorial
+                      </span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
+                      </svg>
+                    </a>
+                  </Link>
+                </div>
+                <p className="italic sm:text-lg my-6">
+                  If you want to add Nx to an existing React project, check out
+                  these guides for{' '}
+                  <Link href="/latest/react/migration/migration-cra">
+                    <a className="underline pointer">
+                      "Create React App" migration
+                    </a>
+                  </Link>{' '}
+                  or{' '}
+                  <Link href="/latest/react/migration/migration-cra">
+                    <a className="underline pointer">
+                      "Adding Nx to Yarn/Lerna monorepo" migration
+                    </a>
+                  </Link>
+                </p>
+              </div>
             </div>
           </div>
-        </div>
+          {/*Nx technology*/}
-        {/*More info*/}
+          <div className="bg-blue-nx-base text-white">
-        <div
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
-          className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
+              <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-          style={{
+                <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            background:
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-              'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
+                    Distributed Graph-Based Task Executions and Computation
-          }}
+                    Caching
-        >
+                  </h3>
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <p className="sm:text-lg mb-6">
-            <iframe
+                    <span className="font-bold">Nx</span> is smart. It analyzes
-              width="560"
+                    your workspace and figures out what can be affected by every
-              height="315"
+                    code change. That's why Nx doesn't rebuild and retest
-              src="https://www.youtube.com/embed/HcQE5R6ucng"
+                    everything on every commit —{' '}
-              frameBorder="0"
+                    <span className="font-bold">
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      it only rebuilds what is necessary
-              allowFullScreen
+                    </span>
-              className="w-full"
+                    .
-            />
+                  </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
+                    <span className="font-bold">
+                      it can 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 className="w-full sm:w-1/2 flex flex-col justify-between items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <Image
+                    src="/images/distributed-tasks.png"
+                    alt="Distributed Graph-Based Task Execution and Computation Caching illustration"
+                    width={388}
+                    height={300}
+                  />
+                </div>
+              </div>
+            </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">
+
-            <p className="sm:text-lg mb-6">
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
-              Once you’ve created your React workspace, follow the steps in this
+            {/*Nx plugins ecosystem*/}
-              tutorial to learn how to add testing, share code, view dependency
+            <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-              graphs, and much, much more.
+              <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
-            </p>
+                <div className="grid grid-cols-4 gap-16">
-            <div className="inline-flex">
+                  <img
-              <Link href="/latest/react/tutorial/01-create-application">
+                    loading="lazy"
-                <a className="inline-flex items-center font-bold group">
+                    className="w-full opacity-25"
-                  <span className="group-hover:underline">
+                    height="128"
-                    Nx React App Tutorial
+                    width="128"
-                  </span>
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/storybook.svg"
-                  <svg
+                  />
-                    xmlns="http://www.w3.org/2000/svg"
+                  <img
-                    className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                    loading="lazy"
-                    fill="none"
+                    className="w-full opacity-25"
-                    viewBox="0 0 24 24"
+                    height="128"
-                    stroke="currentColor"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cypress.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/gatsby.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/next-dot-js.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/prettier.svg"
+                  />
+                  <img
+                    loading="lazy"
+                    className="w-full opacity-25"
+                    height="128"
+                    width="128"
+                    src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/ionic.svg"
+                  />
+                </div>
+              </div>
+              <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  Rich Plugin Ecosystem
+                </h3>
+                <p className="sm:text-lg mb-6 font-bold">
+                  Nx is an open platform with plugins for many modern tools and
+                  frameworks.
+                </p>
+                <p className="sm:text-lg mb-6">
+                  It has support for TypeScript, React, React Native, Cypress,
+                  Jest, Prettier, Nest.js, Next.js, Gatsby, Storybook, Ionic,
+                  Go, Rust among others. With Nx, you get a consistent dev
+                  experience regardless of the tools used.
+                </p>
+                <ul className="sm:text-lg list-disc list-inside">
+                  <li>
+                    Use Nx's{' '}
+                    <a
+                      className="underline pointer"
+                      href="https://nx.dev/latest/react/storybook/overview"
+                    >
+                      Storybook
+                    </a>{' '}
+                    and{' '}
+                    <a
+                      className="underline pointer"
+                      href="https://nx.dev/latest/react/cypress/overview#cypress-plugin"
+                    >
+                      Cypress
+                    </a>{' '}
+                    plugins to build design systems.
+                  </li>
+                  <li className="mt-4">
+                    Use{' '}
+                    <a
+                      className="underline pointer"
+                      target="_blank"
+                      href="https://blog.nrwl.io/painlessly-build-and-deploy-next-js-apps-with-nx-225e2721da78?source=friends_link&sk=b381e3b9e7a2d8951fbe806ac0363851"
+                    >
+                      NextJS
+                    </a>
+                    ,{' '}
+                    <a
+                      className="underline pointer"
+                      target="_blank"
+                      href="https://blog.nrwl.io/step-to-step-guide-on-creating-a-blog-using-nx-gatsby-wordpress-ac7e9bfc0efd?source=friends_link&sk=5af5e109144bc4985f3fe8d92429463b"
+                    >
+                      Gatsby
+                    </a>
+                    ,{' '}
+                    <a
+                      className="underline pointer"
+                      target="_blank"
+                      href="https://blog.nrwl.io/introducing-react-native-support-for-nx-48d335e90c89?source=friends_link&sk=e04878accafe0d9f696b647d0b9ae2d4"
+                    >
+                      React Native
+                    </a>{' '}
+                    and share code between them.
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          {/*Integrated experience*/}
+          <div className="bg-blue-nx-base text-white">
+            <div className="max-w-screen-lg mx-auto px-5 py-5">
+              <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+                <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
+                    Nx Integrated Development Experience
+                  </h3>
+                  <p className="sm:text-lg mb-6">
+                    Nx provides a modern dev experience that is more integrated.
+                    Nx adds a high-quality VS Code plugin which helps you use
+                    the build tool effectively, generate components in folders,
+                    and much more.
+                  </p>
+                  <p className="sm:text-lg mb-6">
+                    Nx also supports optional free cloud support with Nx Cloud
+                    as well as GitHub integration. Share links with your
+                    teammates where everyone working on a project can examine
+                    detailed build logs and get insights about how to improve
+                    your project and build.
+                  </p>
+                </div>
+                <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                  <Image
+                    src="/images/vscode-nxcloud-pr.png"
+                    alt="Nx Integrated Development Experience illustration"
+                    width={870}
+                    height={830}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/*Call out*/}
+          <div className="bg-blue-nx-dark text-white overflow-hidden">
+            <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 sm:text-4xl">
+                <span className="block">Ready to dive in?</span>
+                <span className="block">Start using Nx with React today.</span>
+              </h2>
+              <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+                <div className="inline-flex rounded-md shadow">
+                  <Link href="/latest/react/getting-started/getting-started">
+                    <a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
+                      Get started with React
+                    </a>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="max-w-screen-lg mx-auto px-5 py-5">
+            {/*Learn more*/}
+            <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
+              <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
+                  Learn More About Nx
+                </h3>
+              </div>
+              <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
+                <p className="sm:text-lg mb-6">
+                  To learn more about Nx and how Nx can increase your dev and
+                  build efficiency and modernize your apps stack, check out the
+                  following resources:
+                </p>
+                <ul className="sm:text-lg list-disc list-inside">
+                  <li>
+                    <Link href={'/latest/react/getting-started/intro'}>
+                      <a className="underline pointer">
+                        Nx React Documentation
+                      </a>
+                    </Link>
+                  </li>
+                  <li>
+                    <a
+                      className="underline pointer"
+                      href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
+                      target="_blank"
+                    >
+                      Free Nx Workspaces video course
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
+                      target="_blank"
+                    >
+                      Nx Explainer: Dev Tools for Monorepos, In-Depth with
+                      Victor Savkin
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://go.nrwl.io/nx-office-hours"
+                      target="_blank"
+                    >
+                      Tune into regular Nx Office Hours livestreams
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      className="underline pointer"
+                      href="https://nx.app"
+                      target="_blank"
+                    >
+                      Nx Cloud
+                    </a>
+                  </li>
+                </ul>
+                <p className="sm:text-lg mt-6">
+                  You can also{' '}
+                  <a
+                    className="underline pointer"
+                    href="https://twitter.com/NxDevTools"
+                    target="_blank"
                   >
-                    <path
+                    follow Nx Dev Tools on Twitter
-                      strokeLinecap="round"
+                  </a>{' '}
-                      strokeLinejoin="round"
+                  to keep up with latest news, feature announcements, and
-                      strokeWidth={2}
+                  resources from the Nx Core Team.
-                      d="M13 7l5 5m0 0l-5 5m5-5H6"
+                </p>
-                    />
+              </div>
-                  </svg>
-                </a>
-              </Link>
-            </div>
-            <p className="italic sm:text-lg my-6">
-              If you want to add Nx to an existing React project, check out
-              these guides for{' '}
-              <Link href="/latest/react/migration/migration-cra">
-                <a className="underline pointer">
-                  "Create React App" migration
-                </a>
-              </Link>{' '}
-              or{' '}
-              <Link href="/latest/react/migration/migration-cra">
-                <a className="underline pointer">
-                  "Adding Nx to Yarn/Lerna monorepo" migration
-                </a>
-              </Link>
-            </p>
-          </div>
-        </div>
-        {/*Nx technology*/}
-        <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-          <div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Distributed Graph-Based Task Executions and Computation Caching
-            </h3>
-            <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
-              <span className="font-bold">
-                it can 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 className="w-full sm:w-1/2 flex flex-col justify-between items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <img
-              loading="lazy"
-              className="w-full opacity-25"
-              height="128"
-              width="128"
-              src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nx.svg"
-            />
-          </div>
-        </div>
-      </div>
-      {/*Call out*/}
-      <div className="bg-blue-nx-base text-white">
-        <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 sm:text-4xl">
-            <span className="block">Ready to dive in?</span>
-            <span className="block">Start using Nx with React today.</span>
-          </h2>
-          <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-            <div className="inline-flex rounded-md shadow">
-              <Link href="/latest/react/getting-started/getting-started">
-                <a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
-                  Get started with React
-                </a>
-              </Link>
             </div>
           </div>
+          {/*Who is using Nx*/}
+          <NxUsersShowcase />
         </div>
-      </div>
+      </main>
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
+      <Footer
-        {/*Nx plugins ecosystem*/}
+        flavor={{
-        <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
+          name: storedFlavor || 'react',
-          <div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
+          value: storedFlavor || 'react',
-            <div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-16 lg:gap-24">
+        }}
-              <img
+        version={{
-                loading="lazy"
+          name: storedVersion || 'Latest',
-                className="w-full opacity-25"
+          value: storedVersion || 'latest',
-                height="128"
+        }}
-                width="128"
+      />
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/storybook.svg"
+    </>
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cypress.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/gatsby.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/next-dot-js.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/prettier.svg"
-              />
-              <img
-                loading="lazy"
-                className="w-full opacity-25"
-                height="128"
-                width="128"
-                src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/ionic.svg"
-              />
-            </div>
-          </div>
-          <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Rich Plugin Ecosystem
-            </h3>
-            <p className="sm:text-lg mb-6 font-bold">
-              Nx is an open platform with plugins for many modern tools and
-              frameworks.
-            </p>
-            <p className="sm:text-lg mb-6">
-              It has support for TypeScript, React, React Native, Cypress, Jest,
-              Prettier, Nest.js, Next.js, Gatsby, Storybook, Ionic, Go, Rust
-              among others. With Nx, you get a consistent dev experience
-              regardless of the tools used.
-            </p>
-            <ul className="sm:text-lg list-disc list-inside">
-              <li>
-                Use Nx's{' '}
-                <a
-                  className="underline pointer"
-                  href="https://nx.dev/latest/react/storybook/overview"
-                >
-                  Storybook
-                </a>{' '}
-                and{' '}
-                <a
-                  className="underline pointer"
-                  href="https://nx.dev/latest/react/cypress/overview#cypress-plugin"
-                >
-                  Cypress
-                </a>{' '}
-                plugins to build design systems.
-              </li>
-              <li className="mt-4">
-                Use{' '}
-                <a
-                  className="underline pointer"
-                  target="_blank"
-                  href="https://blog.nrwl.io/painlessly-build-and-deploy-next-js-apps-with-nx-225e2721da78?source=friends_link&sk=b381e3b9e7a2d8951fbe806ac0363851"
-                >
-                  NextJS
-                </a>
-                ,{' '}
-                <a
-                  className="underline pointer"
-                  target="_blank"
-                  href="https://blog.nrwl.io/step-to-step-guide-on-creating-a-blog-using-nx-gatsby-wordpress-ac7e9bfc0efd?source=friends_link&sk=5af5e109144bc4985f3fe8d92429463b"
-                >
-                  Gatsby
-                </a>
-                ,{' '}
-                <a
-                  className="underline pointer"
-                  target="_blank"
-                  href="https://blog.nrwl.io/introducing-react-native-support-for-nx-48d335e90c89?source=friends_link&sk=e04878accafe0d9f696b647d0b9ae2d4"
-                >
-                  React Native
-                </a>{' '}
-                and share code between them.
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      {/*Integrated experience*/}
-      <div className="bg-blue-nx-base text-white">
-        <div className="max-w-screen-lg mx-auto px-5 py-5">
-          <div className="py-32 flex sm:flex-row flex-col items-center justify-center">
-            <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
-                Nx Integrated Development Experience
-              </h3>
-              <p className="sm:text-lg mb-6">
-                Nx provides a modern dev experience that is more integrated. Nx
-                adds a high-quality VS Code plugin which helps you use the build
-                tool effectively, generate components in folders, and much more.
-              </p>
-              <p className="sm:text-lg mb-6">
-                Nx also supports optional free cloud support with Nx Cloud as
-                well as GitHub integration. Share links with your teammates
-                where everyone working on a project can examine detailed build
-                logs and get insights about how to improve your project and
-                build.
-              </p>
-            </div>
-            <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-              <Image
-                src="/images/vscode-nxcloud-pr.png"
-                alt="Nx Integrated Development Experience illustration"
-                width={870}
-                height={830}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="max-w-screen-lg mx-auto px-5 py-5">
-        {/*Learn more*/}
-        <div className="py-32 flex sm:flex-row flex-col items-start justify-center">
-          <div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
-              Learn More About Nx
-            </h3>
-          </div>
-          <div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
-            <p className="sm:text-lg mb-6">
-              To learn more about Nx and how Nx can increase your dev and build
-              efficiency and modernize your apps stack, check out the following
-              resources:
-            </p>
-            <ul className="sm:text-lg list-disc list-inside">
-              <li>
-                <Link href={'/latest/react/getting-started/intro'}>
-                  <a className="underline pointer">Nx React Documentation</a>
-                </Link>
-              </li>
-              <li>
-                <a
-                  className="underline pointer"
-                  href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
-                  target="_blank"
-                >
-                  Free Nx Workspaces video course
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
-                  target="_blank"
-                >
-                  Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
-                  Savkin
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://go.nrwl.io/nx-office-hours"
-                  target="_blank"
-                >
-                  Tune into regular Nx Office Hours livestreams
-                </a>
-              </li>
-              <li className="mt-4">
-                <a
-                  className="underline pointer"
-                  href="https://nx.app"
-                  target="_blank"
-                >
-                  Nx Cloud
-                </a>
-              </li>
-            </ul>
-            <p className="sm:text-lg mt-6">
-              You can also{' '}
-              <a
-                className="underline pointer"
-                href="https://twitter.com/NxDevTools"
-                target="_blank"
-              >
-                follow Nx Dev Tools on Twitter
-              </a>{' '}
-              to keep up with latest news, feature announcements, and resources
-              from the Nx Core Team.
-            </p>
-          </div>
-        </div>
-      </div>
-      {/*Who is using Nx*/}
-      <NxUsersShowcase />
-    </div>
   );
 }
 

nx-dev/ui/common/src/lib/footer.spec.tsx

@@ -5,7 +5,12 @@ import Footer from './footer';
 
 describe('Footer', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Footer />);
+    const { baseElement } = render(
+      <Footer
+        flavor={{ name: 'react', value: 'react' }}
+        version={{ name: 'latest', value: 'latest' }}
+      />
+    );
     expect(baseElement).toBeTruthy();
   });
 });

nx-dev/ui/common/src/lib/footer.tsx

@@ -1,6 +1,9 @@
 import Link from 'next/link';
-
+export interface FooterProps {
-export function Footer() {
+  version: { name: string; value: string };
+  flavor: { name: string; value: string };
+}
+export function Footer({ version, flavor }: FooterProps) {
   return (
     <footer className="mt-32 text-white body-font">
       <div className="bg-blue-nx-base text-white">
@@ -37,7 +40,9 @@ export function Footer() {
               <h3 className="text-xl leading-none tracking-tight mb-4">Help</h3>
               <ul>
                 <li className="mb-2">
-                  <Link href="/latest/react/getting-started/intro">
+                  <Link
+                    href={`/${version.value}/${flavor.value}/getting-started/intro`}
+                  >
                     <a className="cursor-pointer block">Documentation</a>
                   </Link>
                 </li>

nx-dev/ui/common/src/lib/header.spec.tsx

@@ -5,7 +5,13 @@ import Header from './header';
 
 describe('Header', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Header />);
+    const { baseElement } = render(
+      <Header
+        showSearch={true}
+        flavor={{ name: 'react', value: 'react' }}
+        version={{ name: 'latest', value: 'latest' }}
+      />
+    );
     expect(baseElement).toBeTruthy();
   });
 });

nx-dev/ui/common/src/lib/header.tsx

@@ -4,9 +4,11 @@ import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
 
 export interface HeaderProps {
   showSearch: boolean;
+  flavor: { name: string; value: string } | null;
+  version: { name: string; value: string } | null;
 }
 
-export function Header({ showSearch }: HeaderProps) {
+export function Header({ flavor, showSearch, version }: HeaderProps) {
   return (
     <header className="h-16 px-5 py-5 flex items-center justify-between print:hidden bg-blue-nx-base">
       <div className="flex items-center justify-between w-full max-w-screen-xl mx-auto space-x-10">
@@ -49,17 +51,23 @@ export function Header({ showSearch }: HeaderProps) {
         </div>
         {/*SEARCH*/}
         <div className="hidden md:inline">
-          {!!showSearch ? <AlgoliaSearch /> : null}
+          {!!showSearch ? (
+            <AlgoliaSearch flavorId={flavor.value} versionId={version.value} />
+          ) : null}
         </div>
         {/*NAVIGATION*/}
         <div className="text-sm flex-shrink-0">
           <nav className="flex items-justified justify-center space-x-1">
-            <Link href="/getting-started/getting-started">
+            <Link
+              href={`/${version.value}/${flavor.value}/getting-started/getting-started`}
+            >
               <a className="font-bold px-3 py-2 text-white leading-tight">
                 Get Started
               </a>
             </Link>
-            <Link href="/core-concepts/plugins">
+            <Link
+              href={`/${version.value}/${flavor.value}/core-concepts/plugins`}
+            >
               <a className="px-3 py-2 text-white leading-tight">Plugins</a>
             </Link>
             <Link href="/community">