feat(nx-dev): add preliminary updates to homepage

nrwl · Dec 6, 2023 · 0852162 · 0852162
1 parent 3befa3a
commit 0852162
Show file tree

Hide file tree

Showing 14 changed files with 2,530 additions and 369 deletions.
diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
@@ -3,13 +3,13 @@ import {
   ExtensibleAndIntegrated,
   GettingStarted,
   Hero,
-  LogoCloud,
+  ImproveWorstCiCase,
   Migrate,
   MigrationsAndCodeGeneration,
   MonorepoStyles,
   Newsletter,
-  NxIsFast,
   NxStatistics,
+  NxWithCi,
   Testimonials,
 } from '@nx/nx-dev/ui-home';
 import { NextSeo } from 'next-seo';
@@ -39,24 +39,24 @@ export default function Index(): JSX.Element {
         }}
       />
       <h1 className="sr-only">Next generation monorepo tool</h1>
-      <AnnouncementBanner />
+      {/*<AnnouncementBanner />*/}
       <Header />
       <main id="main" role="main">
         <div className="w-full">
           {/*HERO COMPONENT*/}
           <Hero />
-          {/*LOGO CLOUD*/}
-          <LogoCloud />
+          {/*NX CI*/}
+          <NxWithCi />
           {/*NX STATISTICS*/}
           <NxStatistics />
-          {/*NX IS FAST*/}
-          <NxIsFast />
-          {/*MIGRATE*/}
-          <Migrate />
           {/*MONOREPO STYLES*/}
           <MonorepoStyles />
+          {/*WORST CASE CI TIMES*/}
+          <ImproveWorstCiCase />
           {/*EXTENSIBLE & INTEGRATED*/}
           <ExtensibleAndIntegrated />
+          {/*MIGRATE*/}
+          <Migrate />
           {/*AFFECTED & CODE GENERATION*/}
           <MigrationsAndCodeGeneration />
           {/*GETTING STARTED*/}

diff --git a/nx-dev/nx-dev/public/images/background/waves-background.svg b/nx-dev/nx-dev/public/images/background/waves-background.svg
diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.svg b/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.svg
diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.webp b/nx-dev/nx-dev/public/images/illustrations/nxdev-dark.webp
diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-light.svg b/nx-dev/nx-dev/public/images/illustrations/nxdev-light.svg
diff --git a/nx-dev/nx-dev/public/images/illustrations/nxdev-light.webp b/nx-dev/nx-dev/public/images/illustrations/nxdev-light.webp
diff --git a/nx-dev/ui-home/src/index.ts b/nx-dev/ui-home/src/index.ts
@@ -1,12 +1,14 @@
 export * from './lib/extensible-and-integrated';
 export * from './lib/getting-started';
 export * from './lib/hero';
+export * from './lib/improve-worst-ci-case';
 export * from './lib/logo-cloud';
 export * from './lib/migrate';
 export * from './lib/migrations-and-code-generation';
 export * from './lib/monorepo-styles';
 export * from './lib/newsletter';
 export * from './lib/nx-is-fast';
 export * from './lib/nx-statistics';
+export * from './lib/nx-with-ci';
 export * from './lib/testimonials';
 export * from './lib/why-is-nx-fast';
diff --git a/nx-dev/ui-home/src/lib/getting-started.tsx b/nx-dev/ui-home/src/lib/getting-started.tsx
@@ -1,5 +1,4 @@
 import { ButtonLink } from '@nx/nx-dev/ui-common';
-import React from 'react';
 
 export function GettingStarted(): JSX.Element {
   return (

diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
diff --git a/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx b/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx
@@ -0,0 +1,33 @@
+import { ButtonLink } from '@nx/nx-dev/ui-common';
+
+export function ImproveWorstCiCase(): JSX.Element {
+  return (
+    <article
+      id="getting-started"
+      className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
+    >
+      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
+            <span className="block">Taste the performance,</span>
+            <span className="block text-white">
+              improve your worst case CI times in 5 minutes
+            </span>
+          </h2>
+        </div>
+        <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+          <div className="inline-flex rounded-md">
+            <ButtonLink
+              href="/concepts/dte"
+              title="Improve your worst case CI times"
+              variant="secondary"
+              size="large"
+            >
+              Try it now!
+            </ButtonLink>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/nx-dev/ui-home/src/lib/logo-cloud.tsx b/nx-dev/ui-home/src/lib/logo-cloud.tsx
diff --git a/nx-dev/ui-home/src/lib/nx-is-fast.tsx b/nx-dev/ui-home/src/lib/nx-is-fast.tsx
@@ -7,7 +7,7 @@ import {
   ServerStackIcon,
 } from '@heroicons/react/24/outline';
 import { CogIcon } from '@heroicons/react/24/solid';
-import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { Button, ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import {
   animate,
   motion,
@@ -67,20 +67,17 @@ export function NxIsFast(): JSX.Element {
   }, [controls, inView, progress]);
 
   return (
-    <article
-      id="nx-is-fast"
-      className="relative bg-slate-50 py-28 dark:bg-slate-800/40"
-    >
+    <article id="nx-is-fast" className="relative ">
       <motion.div
         ref={ref}
         animate={controls}
-        className="mx-auto max-w-7xl px-4 pt-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:pt-16"
+        className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16"
       >
         <div>
           <header>
-            <SectionHeading as="h1" variant="title" id="nx-is-fast">
+            {/*<SectionHeading as="h1" variant="title" id="nx-is-fast">
               Nx is fast
-            </SectionHeading>
+            </SectionHeading>*/}
             <SectionHeading
               as="p"
               variant="display"
@@ -134,8 +131,8 @@ export function NxIsFast(): JSX.Element {
         </div>
       </motion.div>
       <div className="mx-auto max-w-7xl px-4 pt-12 sm:px-6 lg:px-8 lg:pt-16">
-        <dl className="grid grid-cols-1 gap-16 sm:grid-cols-2 lg:grid-cols-4">
-          <div key="Never rebuild the same code twice" className="group">
+        <dl className="grid grid-cols-1 gap-16 sm:grid-cols-2">
+          {/*<div key="Never rebuild the same code twice" className="group">
             <dt>
               <div className="relative flex h-12 w-12">
                 <CogIcon
@@ -164,62 +161,72 @@ export function NxIsFast(): JSX.Element {
               </span>{' '}
               from its cache.
             </dd>
-          </div>
-          <div key="Distributed task execution" className="group">
-            <dt>
-              <div className="relative flex h-12 w-12">
-                <ServerStackIcon
-                  className="h-8 w-8 text-blue-500 dark:text-sky-500"
-                  aria-hidden="true"
-                />
-                <CogIcon
-                  className="absolute bottom-0 right-0 h-8 w-8 text-purple-500 opacity-0 transition-opacity group-hover:opacity-100 group-hover:motion-safe:animate-spin dark:text-fuchsia-500"
-                  aria-hidden="true"
-                />
-              </div>
-              <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
-                <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
-                Distributed task execution (DTE)
-              </p>
-            </dt>
-            <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
-              Smart, automated, dynamic distribution of tasks across multiple
-              machines to get{' '}
-              <span className="font-medium">
-                maximum parallelization and CPU efficient
-              </span>{' '}
-              CI runs.
-            </dd>
-          </div>
-          <div key="Computation caching" className="group">
-            <dt>
-              <div className="relative flex h-12 w-12">
-                <CloudArrowDownIcon
-                  className="h-8 w-8 text-blue-500 dark:text-sky-500"
-                  aria-hidden="true"
-                />
-                <CubeTransparentIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
-                  aria-hidden="true"
-                />
-                <CubeTransparentIcon
-                  className="5 absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-5 group-hover:translate-y-6 group-hover:opacity-100 dark:text-fuchsia-500"
-                  aria-hidden="true"
-                />
-              </div>
-              <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
-                <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
-                Remote caching
-              </p>
-            </dt>
-            <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
-              <span className="font-medium">
-                Share your local computation cache
-              </span>{' '}
-              with team mates and your CI system for maximum efficiency.
-            </dd>
-          </div>
-          <div key="Efficient execution" className="group">
+            <div className="m-4 flex flex-row-reverse">
+              <ButtonLink
+                size="small"
+                variant="secondary"
+                title="Learn how caching works in Nx"
+                href="/concepts/how-caching-works"
+              >
+                Learn more about caching
+              </ButtonLink>
+            </div>
+          </div>*/}
+          {/*<div key="Distributed task execution" className="group">*/}
+          {/*  <dt>*/}
+          {/*    <div className="relative flex h-12 w-12">*/}
+          {/*      <ServerStackIcon*/}
+          {/*        className="h-8 w-8 text-blue-500 dark:text-sky-500"*/}
+          {/*        aria-hidden="true"*/}
+          {/*      />*/}
+          {/*      <CogIcon*/}
+          {/*        className="absolute bottom-0 right-0 h-8 w-8 text-purple-500 opacity-0 transition-opacity group-hover:opacity-100 group-hover:motion-safe:animate-spin dark:text-fuchsia-500"*/}
+          {/*        aria-hidden="true"*/}
+          {/*      />*/}
+          {/*    </div>*/}
+          {/*    <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">*/}
+          {/*      <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>*/}
+          {/*      Distributed task execution (DTE)*/}
+          {/*    </p>*/}
+          {/*  </dt>*/}
+          {/*  <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">*/}
+          {/*    Smart, automated, dynamic distribution of tasks across multiple*/}
+          {/*    machines to get{' '}*/}
+          {/*    <span className="font-medium">*/}
+          {/*      maximum parallelization and CPU efficient*/}
+          {/*    </span>{' '}*/}
+          {/*    CI runs.*/}
+          {/*  </dd>*/}
+          {/*</div>*/}
+          {/*<div key="Computation caching" className="group">*/}
+          {/*  <dt>*/}
+          {/*    <div className="relative flex h-12 w-12">*/}
+          {/*      <CloudArrowDownIcon*/}
+          {/*        className="h-8 w-8 text-blue-500 dark:text-sky-500"*/}
+          {/*        aria-hidden="true"*/}
+          {/*      />*/}
+          {/*      <CubeTransparentIcon*/}
+          {/*        className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"*/}
+          {/*        aria-hidden="true"*/}
+          {/*      />*/}
+          {/*      <CubeTransparentIcon*/}
+          {/*        className="5 absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-5 group-hover:translate-y-6 group-hover:opacity-100 dark:text-fuchsia-500"*/}
+          {/*        aria-hidden="true"*/}
+          {/*      />*/}
+          {/*    </div>*/}
+          {/*    <p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">*/}
+          {/*      <span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>*/}
+          {/*      Remote caching*/}
+          {/*    </p>*/}
+          {/*  </dt>*/}
+          {/*  <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">*/}
+          {/*    <span className="font-medium">*/}
+          {/*      Share your local computation cache*/}
+          {/*    </span>{' '}*/}
+          {/*    with team mates and your CI system for maximum efficiency.*/}
+          {/*  </dd>*/}
+          {/*</div>*/}
+          {/*<div key="Efficient execution" className="group">
             <dt>
               <div className="relative flex h-12 w-12">
                 <AcademicCapIcon
@@ -248,7 +255,17 @@ export function NxIsFast(): JSX.Element {
               </span>{' '}
               and what tasks need to be re-run.
             </dd>
-          </div>
+            <div className="m-4 flex flex-row-reverse">
+              <ButtonLink
+                size="small"
+                variant="secondary"
+                title="Learn how the `affected` command works"
+                href="/concepts/affected"
+              >
+                Learn more about the "affect" command
+              </ButtonLink>
+            </div>
+          </div>*/}
         </dl>
       </div>
     </article>

diff --git a/nx-dev/ui-home/src/lib/nx-statistics.tsx b/nx-dev/ui-home/src/lib/nx-statistics.tsx
@@ -1,14 +1,15 @@
 import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { LogoCloud } from './logo-cloud';
 
 export function NxStatistics(): JSX.Element {
   return (
-    <div className="bg-white pt-12 dark:bg-slate-900 sm:pt-16">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div className="bg-white pt-12 dark:bg-slate-900 sm:pt-28">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-12">
         <div className="mx-auto max-w-4xl text-center">
           <SectionHeading as="h2" variant="display" id="trusted-by-all">
             Trusted by developers, enterprises and open-source projects.
           </SectionHeading>
-          <p className="mt-3 text-lg text-slate-700 dark:text-slate-400 sm:mt-4">
+          <p className="mt-3 text-lg text-slate-700 dark:text-slate-400 sm:mt-4 sr-only">
             Whether your workspace{' '}
             <span className="font-semibold">
               has a single project or a thousand
@@ -17,6 +18,8 @@ export function NxStatistics(): JSX.Element {
           </p>
         </div>
       </div>
+      {/*LOGO CLOUD*/}
+      <LogoCloud />
       <div className="mt-10 bg-slate-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
         <div className="relative">
           <div className="absolute inset-0 h-1/2 border-b border-slate-200 bg-white dark:border-black dark:bg-slate-900"></div>
@@ -28,7 +31,7 @@ export function NxStatistics(): JSX.Element {
                     developers use it every day
                   </dt>
                   <dd className="order-1 text-4xl font-semibold text-slate-800 drop-shadow-sm dark:text-slate-200 dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.35)]">
-                    1.5M+
+                    2M+
                   </dd>
                 </div>
                 <div className="flex flex-col border-t border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l sm:border-r">
@@ -44,7 +47,7 @@ export function NxStatistics(): JSX.Element {
                     monthly npm downloads
                   </dt>
                   <dd className="order-1 text-4xl font-semibold text-slate-800 drop-shadow-sm dark:text-slate-200 dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.35)]">
-                    11M+
+                    16M+
                   </dd>
                 </div>
               </dl>