feat(nx-dev): update home page (#26893)

Add new sections and update information about Nx.

---------

Co-authored-by: Juri <[email protected]>
(cherry picked from commit 85d310a)

docs/README.md

@@ -183,6 +183,14 @@ To display a terminal command, use:
 ‎```
 ````
 
+You can also add a title to the shell as follows:
+
+````
+‎```shell {% title="Build the app" %}
+‎ npx nx build
+‎```
+````
+
 #### Terminal Output
 
 You can display your terminal output with a dedicated component the same way you would show code.

docs/shared/getting-started/intro.md

@@ -17,10 +17,32 @@ Find out more about [why you should use Nx](/getting-started/why-nx) or browse o
 
 ## Try Nx Yourself!
 
-```shell
-npx create-nx-workspace@latest
+{% side-by-side %}
+
+```shell {% title="Create a new workspace" %}
+npx create-nx-workspace
+```
+
+```shell {% title="Add Nx to an existing workspace" %}
+npx nx init
 ```
 
+{% /side-by-side %}
+
+Also, here are some recipes that give you more details based on the technology stack you're using:
+
+{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %}
+
+{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%}
+
+{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%}
+
+{% link-card title="Migrate from Angular CLI" appearance="small" url="/recipes/angular/migration/angular" icon="angular" /%}
+
+{% /cards %}
+{% /tab %}
+{% /tabs %}
+
 ## Learn Nx
 
 {% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}
@@ -57,26 +79,6 @@ npx create-nx-workspace@latest
 
 {% /cards %}
 
-## Have an Existing Project? Add Nx to it!
-
-If you have an existing project and want to adopt Nx or migrate to Nx just run the following command which guides you through the migration process:
-
-```shell
-npx nx@latest init
-```
-
-Alternatively, here are some recipes that give you more details based on the technology stack you're using:
-
-{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %}
-
-{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%}
-
-{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%}
-
-{% link-card title="Migrate from Angular CLI" appearance="small" url="/recipes/angular/migration/angular" icon="angular" /%}
-
-{% /cards %}
-
 ## Pick Your Stack!
 
 {% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %}

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

@@ -49,12 +49,12 @@ export default function Community(): JSX.Element {
             <div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
               <div className="md:col-span-2">
                 <header>
-                  <SectionHeading as="h1" variant="title" id="champions">
+                  <SectionHeading as="h1" variant="subtitle" id="champions">
                     Get to know our
                   </SectionHeading>
                   <SectionHeading
                     as="p"
-                    variant="display"
+                    variant="title"
                     id="nx-champions"
                     className="mt-4"
                   >
@@ -81,7 +81,7 @@ export default function Community(): JSX.Element {
                   </div>
                 </div>
               </div>
-              <div className="mt-6 flex h-full w-full flex-col items-start items-stretch gap-6 md:mt-0">
+              <div className="mt-6 flex h-full w-full flex-col items-stretch gap-6 md:mt-0">
                 {champions3.map((data) => (
                   <ChampionCard key={data.name} data={data} />
                 ))}

nx-dev/nx-dev/pages/customers.tsx

@@ -1,4 +1,4 @@
-import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import { CallToAction, DefaultLayout } from '@nx/nx-dev/ui-common';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
 
@@ -44,6 +44,9 @@ export function Customers(): JSX.Element {
         <div className="mt-16 lg:mt-32">
           <OssProjects />
         </div>
+        <div className="mt-32 lg:mt-56">
+          <CallToAction />
+        </div>
       </DefaultLayout>
     </>
   );

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

@@ -1,18 +1,14 @@
-import { AnnouncementBanner, Footer, Header } from '@nx/nx-dev/ui-common';
+import { CallToAction, DefaultLayout } from '@nx/nx-dev/ui-common';
+import { NextSeo } from 'next-seo';
 import {
-  ExtensibleAndIntegrated,
-  GettingStarted,
+  CiForMonorepos,
   Hero,
-  ImproveWorstCiCase,
-  Migrate,
-  MigrationsAndCodeGeneration,
-  MonorepoStyles,
-  Newsletter,
-  NxStatistics,
-  NxWithCi,
-  Testimonials,
+  SmarterToolsForMonorepos,
+  Statistics,
+  TeamAndCommunity,
+  TrustedBy,
+  WorkBetterAchieveMoreShipQuicker,
 } from '@nx/nx-dev/ui-home';
-import { NextSeo } from 'next-seo';
 
 export default function Index(): JSX.Element {
   return (
@@ -39,35 +35,31 @@ export default function Index(): JSX.Element {
         }}
       />
       <h1 className="sr-only">Next generation monorepo tool</h1>
-      <AnnouncementBanner />
-      <Header />
-      <main id="main" role="main">
-        <div className="w-full">
-          {/*HERO COMPONENT*/}
-          <Hero />
-          {/*NX CI*/}
-          <NxWithCi />
-          {/*NX STATISTICS*/}
-          <NxStatistics />
-          {/*MONOREPO STYLES*/}
-          <MonorepoStyles />
-          {/*WORST CASE CI TIMES*/}
-          <ImproveWorstCiCase />
-          {/*EXTENSIBLE & INTEGRATED*/}
-          <ExtensibleAndIntegrated />
-          {/*MIGRATE*/}
-          <Migrate />
-          {/*AFFECTED & CODE GENERATION*/}
-          <MigrationsAndCodeGeneration />
-          {/*GETTING STARTED*/}
-          <GettingStarted />
-          {/*TESTIMONIALS*/}
-          <Testimonials />
-          {/*NEWSLETTER*/}
-          <Newsletter />
+      {/*<AnnouncementBanner />*/}
+      <DefaultLayout isHome>
+        <Hero />
+        <div className="mt-16 lg:-mt-32">
+          <Statistics />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <TrustedBy />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <CiForMonorepos />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <WorkBetterAchieveMoreShipQuicker />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <SmarterToolsForMonorepos />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <TeamAndCommunity />
+        </div>
+        <div className="mt-32 lg:mt-56">
+          <CallToAction />
         </div>
-      </main>
-      <Footer />
+      </DefaultLayout>
     </>
   );
 }

nx-dev/nx-dev/pages/shader.tsx

@@ -0,0 +1,87 @@
+import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
+
+export default function Shader(): JSX.Element {
+  return (
+    <>
+      <div className="absolute left-0 top-0 z-10 h-screen w-screen overflow-hidden bg-white text-gray-50">
+        {/*COTTON CANDY*/}
+        {/*<ShaderGradientCanvas
+          pointerEvents="none"
+          eventPrefix="client"
+          fov={45}
+          pixelDensity={1}
+          className="pointer-events-none"
+        >
+          <ShaderGradient
+            brightness={4}
+            cDistance={5}
+            color1="#ebedff"
+            color2="#f3f2f8"
+            color3="#dbf8ff"
+            frameRate={10}
+            grain="off"
+            lightType="3d"
+            positionX={0}
+            positionY={1.8}
+            positionZ={0}
+            range="enabled"
+            rangeEnd={40}
+            rangeStart={0}
+            reflection={0.1}
+            rotationX={0}
+            rotationY={0}
+            rotationZ={-90}
+            shader="defaults"
+            type="waterPlane"
+            uDensity={1}
+            uFrequency={5.5}
+            uSpeed={0.3}
+            uStrength={3}
+            uTime={0.2}
+          />
+        </ShaderGradientCanvas>*/}
+
+        {/*UNIVERSE*/}
+        <ShaderGradientCanvas
+          pointerEvents="none"
+          eventPrefix="client"
+          fov={45}
+          pixelDensity={1}
+          className="pointer-events-none"
+        >
+          <ShaderGradient
+            brightness={4}
+            cAzimuthAngle={180}
+            cameraZoom={1}
+            cDistance={4}
+            cPolarAngle={115}
+            color1="#5606FF"
+            color2="#FE8989"
+            color3="#000000"
+            frameRate={10}
+            grain="off"
+            lightType="3d"
+            positionX={-0.5}
+            positionY={0.1}
+            positionZ={0}
+            range="enabled"
+            rangeEnd={40}
+            rangeStart={0}
+            reflection={0.1}
+            rotationX={0}
+            rotationY={0}
+            rotationZ={235}
+            shader="defaults"
+            type="waterPlane"
+            uAmplitude={0}
+            uDensity={1.1}
+            uFrequency={5.5}
+            uSpeed={0.1}
+            uStrength={2.4}
+            uTime={0.2}
+          />
+        </ShaderGradientCanvas>
+      </div>
+    </>
+  );
+}