From 7bbb5e4961ecb98d720addca73e486a009fb1c92 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Thu, 11 Jul 2024 11:31:32 -0400
Subject: [PATCH] feat(nx-dev): update homepage

---
 nx-dev/nx-dev/pages/index.tsx                 |   4 +
 nx-dev/ui-home/src/index.ts                   |   1 +
 .../src/lib/sections/call-to-action.tsx       |  90 ++++++++++++++++
 .../sections/smarter-tools-for-monorepos.tsx  |  29 +++--
 .../src/lib/sections/technologies/fastify.tsx |  17 +++
 .../src/lib/sections/technologies/pnpm.tsx    |  17 +++
 .../src/lib/sections/technologies/solid.tsx   |  17 +++
 .../work-better-achieve-more-ship-quicker.tsx | 101 +-----------------
 nx-dev/ui-home/src/lib/sections/youtube.tsx   |  17 +++
 .../src/lib/nodes/heading.component.tsx       |   2 +-
 10 files changed, 185 insertions(+), 110 deletions(-)
 create mode 100644 nx-dev/ui-home/src/lib/sections/call-to-action.tsx
 create mode 100644 nx-dev/ui-home/src/lib/sections/technologies/fastify.tsx
 create mode 100644 nx-dev/ui-home/src/lib/sections/technologies/pnpm.tsx
 create mode 100644 nx-dev/ui-home/src/lib/sections/technologies/solid.tsx
 create mode 100644 nx-dev/ui-home/src/lib/sections/youtube.tsx

diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
index 5aa810b024d7e2..823d14a19ac301 100644
--- a/nx-dev/nx-dev/pages/index.tsx
+++ b/nx-dev/nx-dev/pages/index.tsx
@@ -1,6 +1,7 @@
 import { DefaultLayout } from '@nx/nx-dev/ui-common';
 import { NextSeo } from 'next-seo';
 import {
+  CallToAction,
   CiForMonorepos,
   Hero,
   SmarterToolsForMonorepos,
@@ -56,6 +57,9 @@ export default function Index(): JSX.Element {
         <div className="mt-32 lg:mt-56">
           <TeamAndCommunity />
         </div>
+        <div className="mt-32 lg:mt-56">
+          <CallToAction />
+        </div>
       </DefaultLayout>
     </>
   );
diff --git a/nx-dev/ui-home/src/index.ts b/nx-dev/ui-home/src/index.ts
index 2e08cd5ae7d55d..538dac43e7cea3 100644
--- a/nx-dev/ui-home/src/index.ts
+++ b/nx-dev/ui-home/src/index.ts
@@ -5,3 +5,4 @@ export * from './lib/sections/statistics';
 export * from './lib/sections/team-and-community';
 export * from './lib/sections/trusted-by';
 export * from './lib/sections/work-better-achieve-more-ship-quicker';
+export * from './lib/sections/call-to-action';
diff --git a/nx-dev/ui-home/src/lib/sections/call-to-action.tsx b/nx-dev/ui-home/src/lib/sections/call-to-action.tsx
new file mode 100644
index 00000000000000..de63e7918af42d
--- /dev/null
+++ b/nx-dev/ui-home/src/lib/sections/call-to-action.tsx
@@ -0,0 +1,90 @@
+import Link from 'next/link';
+
+export function CallToAction(): JSX.Element {
+  return (
+    <section className="relative isolate px-6 py-32 sm:py-40 lg:px-8">
+      <svg
+        className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
+        aria-hidden="true"
+      >
+        <defs>
+          <pattern
+            id="1d4240dd-898f-445f-932d-e2872fd12de3"
+            width={200}
+            height={200}
+            x="50%"
+            y={0}
+            patternUnits="userSpaceOnUse"
+          >
+            <path d="M.5 200V.5H200" fill="none" />
+          </pattern>
+        </defs>
+        <svg
+          x="50%"
+          y={0}
+          className="overflow-visible fill-slate-200/20 dark:fill-slate-800/20"
+        >
+          <path
+            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+            strokeWidth={0}
+          />
+        </svg>
+        <rect
+          width="100%"
+          height="100%"
+          strokeWidth={0}
+          fill="url(#1d4240dd-898f-445f-932d-e2872fd12de3)"
+        />
+      </svg>
+      <div
+        className="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
+        aria-hidden="true"
+      >
+        <div
+          className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+          style={{
+            clipPath:
+              'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
+          }}
+        />
+      </div>
+      <div className="mx-auto max-w-2xl text-center">
+        <h2
+          id="cta"
+          className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white"
+        >
+          Ready to
+          <br />
+          Build smarter and ship faster?
+        </h2>
+        <p className="mx-auto mt-6 max-w-xl text-2xl leading-8 text-slate-700 dark:text-slate-300">
+          Experience the next generation of CI tooling.
+        </p>
+        <div className="mt-10 flex items-center justify-center gap-x-6">
+          <Link
+            href="/getting-started/intro"
+            title="Get started with Nx"
+            prefetch={false}
+            className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+          >
+            Get started
+          </Link>
+          <Link
+            href="/contact"
+            title="Get in touch"
+            prefetch={false}
+            className="group text-sm font-semibold leading-6 text-slate-950 dark:text-white"
+          >
+            Contact us{' '}
+            <span
+              aria-hidden="true"
+              className="inline-block transition group-hover:translate-x-1"
+            >
+              →
+            </span>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/nx-dev/ui-home/src/lib/sections/smarter-tools-for-monorepos.tsx b/nx-dev/ui-home/src/lib/sections/smarter-tools-for-monorepos.tsx
index 9b799a0c7933bc..bb4431044fad07 100644
--- a/nx-dev/ui-home/src/lib/sections/smarter-tools-for-monorepos.tsx
+++ b/nx-dev/ui-home/src/lib/sections/smarter-tools-for-monorepos.tsx
@@ -36,6 +36,10 @@ import { WebpackIcon } from './technologies/webpack';
 import { SectionHeading, Strong, TextLink } from '../typography';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { motion } from 'framer-motion';
+import { FastifyIcon } from './technologies/fastify';
+import { PnpmIcon } from './technologies/pnpm';
+import { SolidIcon } from './technologies/solid';
+import { YoutubeIcon } from './youtube';
 
 export function SmarterToolsForMonorepos(): JSX.Element {
   return (
@@ -193,11 +197,11 @@ export function SmarterToolsForMonorepos(): JSX.Element {
             <Link
               href="/something"
               prefetch={false}
-              title="Nx with Playwright"
+              title="Nx with Pnpm"
               className="h-full w-full p-4"
             >
               <span className="absolute inset-0" />
-              <PlaywrightIcon aria-hidden="true" className="h-full w-full" />
+              <PnpmIcon aria-hidden="true" className="h-full w-full" />
             </Link>
           </Card>
           <Card>
@@ -215,11 +219,11 @@ export function SmarterToolsForMonorepos(): JSX.Element {
             <Link
               href="/something"
               prefetch={false}
-              title="Nx with Prettier"
+              title="Nx with Solid"
               className="h-full w-full p-4"
             >
               <span className="absolute inset-0" />
-              <PrettierIcon aria-hidden="true" className="h-full w-full" />
+              <SolidIcon aria-hidden="true" className="h-full w-full" />
             </Link>
           </Card>
         </div>
@@ -239,9 +243,16 @@ export function SmarterToolsForMonorepos(): JSX.Element {
                 alt="Nx Video tutorials card"
               />
             </div>
-            <FitText className="text-slate-950 dark:text-white">
-              Video tutorials
-            </FitText>
+
+            <Link
+              href="#"
+              title="Nx video tutorials"
+              className="h-full w-full p-4"
+            >
+              <FitText className="text-slate-950 dark:text-white">
+                Video tutorials
+              </FitText>
+            </Link>
           </Card>
           <div className="col-span-2 row-span-1 grid grid-cols-6 gap-4">
             <div className="grid grid-cols-1 gap-4">
@@ -428,13 +439,13 @@ export function SmarterToolsForMonorepos(): JSX.Element {
           </Card>
           <Card>
             <Link
-              href="/nx-api/vite"
+              href="/showcase/example-repos/add-fastify"
               prefetch={false}
               title="Nx with Vitest"
               className="h-full w-full p-4"
             >
               <span className="absolute inset-0" />
-              <VitestIcon aria-hidden="true" className="h-full w-full" />
+              <FastifyIcon aria-hidden="true" className="h-full w-full" />
             </Link>
           </Card>
           <Card>
diff --git a/nx-dev/ui-home/src/lib/sections/technologies/fastify.tsx b/nx-dev/ui-home/src/lib/sections/technologies/fastify.tsx
new file mode 100644
index 00000000000000..70175fa73d0564
--- /dev/null
+++ b/nx-dev/ui-home/src/lib/sections/technologies/fastify.tsx
@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#000000` for a colored version.
+ */
+export const FastifyIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>Fastify</title>
+    <path d="M23.245 6.49L24 4.533l-.031-.121-7.473 1.967c.797-1.153.523-2.078.523-2.078s-2.387 1.524-4.193 1.485c-1.804-.04-2.387-.52-5.155.362-2.768.882-3.551 3.59-4.351 4.173-.804.583-3.32 2.477-3.32 2.477l.006.034 2.27-.724s-.622.585-1.945 2.37l-.062-.057.002.011s1.064 1.626 2.107 1.324a2.14 2.14 0 0 0 .353-.147c.419.234.967.463 1.572.525 0 0-.41-.475-.752-1.017l.238-.154.865.318-.096-.812c.003-.003.006-.003.008-.006l.849.311-.105-.738a5.65 5.65 0 0 1 .322-.158l.885-3.345 3.662-2.497-.291.733c-.741 1.826-2.135 2.256-2.135 2.256l-.582.22c-.433.512-.614.637-.764 2.353.348-.088.682-.107.984-.028 1.564.421 2.107 2.307 1.685 2.827-.104.13-.356.354-.673.617H7.77l-.008.514-.065.051h-.645l-.009.504-.17.127c-.607.011-1.373-.518-1.373-.518 0 .481.401 1.225.401 1.225l.07-.034-.061.045s1.625 1.083 2.646.681c.91-.356 3.263-2.213 5.296-3.093l6.15-1.62.811-2.1-4.688 1.235v-1.889l5.5-1.448.811-2.1-6.31 1.662V8.367zm-11.163 4l1.459-.384.02.074-.455 1.179-1.513.398zm.503 2.526l-1.512.398.489-1.266 1.459-.385.02.074zm1.971-.424l-1.513.398.49-1.266 1.459-.385.02.073Z" />
+  </svg>
+);
diff --git a/nx-dev/ui-home/src/lib/sections/technologies/pnpm.tsx b/nx-dev/ui-home/src/lib/sections/technologies/pnpm.tsx
new file mode 100644
index 00000000000000..041278eeffdba2
--- /dev/null
+++ b/nx-dev/ui-home/src/lib/sections/technologies/pnpm.tsx
@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#F69220` for a colored version.
+ */
+export const PnpmIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>pnpm</title>
+    <path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
+  </svg>
+);
diff --git a/nx-dev/ui-home/src/lib/sections/technologies/solid.tsx b/nx-dev/ui-home/src/lib/sections/technologies/solid.tsx
new file mode 100644
index 00000000000000..7bde1b54ee2a4e
--- /dev/null
+++ b/nx-dev/ui-home/src/lib/sections/technologies/solid.tsx
@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#2C4F7C` for a colored version.
+ */
+export const SolidIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>Solid</title>
+    <path d="M11.558.788A9.082 9.082 0 0 0 9.776.99l-.453.15c-.906.303-1.656.755-2.1 1.348l-.301.452-2.035 3.528c.426-.387.974-.698 1.643-.894h.001l.613-.154h.001a8.82 8.82 0 0 1 1.777-.206c2.916-.053 6.033 1.148 8.423 2.36 2.317 1.175 3.888 2.32 3.987 2.39L24 5.518c-.082-.06-1.66-1.21-3.991-2.386-2.393-1.206-5.521-2.396-8.45-2.343zM8.924 5.366a8.634 8.634 0 0 0-1.745.203l-.606.151c-1.278.376-2.095 1.16-2.43 2.108-.334.948-.188 2.065.487 3.116.33.43.747.813 1.216 1.147L12.328 10h.001a6.943 6.943 0 0 1 6.013 1.013l2.844-.963c-.17-.124-1.663-1.2-3.91-2.34-2.379-1.206-5.479-2.396-8.352-2.344zm5.435 4.497a6.791 6.791 0 0 0-1.984.283L2.94 13.189 0 18.334l9.276-2.992a6.945 6.945 0 0 1 7.408 2.314v.001c.695.903.89 1.906.66 2.808l2.572-4.63c.595-1.041.45-2.225-.302-3.429a6.792 6.792 0 0 0-5.255-2.543zm-3.031 5.341a6.787 6.787 0 0 0-2.006.283L.008 18.492c.175.131 2.02 1.498 4.687 2.768 2.797 1.332 6.37 2.467 9.468 1.712l.454-.152h.002c1.278-.376 2.134-1.162 2.487-2.09.353-.93.207-2.004-.541-2.978a6.791 6.791 0 0 0-5.237-2.548z" />
+  </svg>
+);
diff --git a/nx-dev/ui-home/src/lib/sections/work-better-achieve-more-ship-quicker.tsx b/nx-dev/ui-home/src/lib/sections/work-better-achieve-more-ship-quicker.tsx
index 0334a37ed34776..1cf3d6bbc69777 100644
--- a/nx-dev/ui-home/src/lib/sections/work-better-achieve-more-ship-quicker.tsx
+++ b/nx-dev/ui-home/src/lib/sections/work-better-achieve-more-ship-quicker.tsx
@@ -45,107 +45,8 @@ export function WorkBetterAchieveMoreShipQuicker(): JSX.Element {
         </SectionHeading>
       </div>
 
-      <div className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-2 md:gap-y-16 lg:max-w-none lg:grid-cols-4">
-        <div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
-          <div className="flex items-center gap-3 text-lg font-medium leading-6">
-            <CubeTransparentIcon
-              aria-hidden="true"
-              className="h-5 w-5 flex-none"
-            />
-            Visibility
-          </div>
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 4 12"
-            fill="currentColor"
-            className="absolute right-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 translate-x-full transform text-slate-100 lg:block dark:text-slate-800"
-          >
-            <path
-              d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
-              fillRule="evenodd"
-            />
-          </svg>
-        </div>
-        <div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 4 12"
-            fill="currentColor"
-            className="absolute left-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 transform text-white lg:block dark:text-slate-950"
-          >
-            <path
-              d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
-              fillRule="evenodd"
-            />
-          </svg>
-          <div className="flex items-center gap-3 text-lg font-medium leading-6">
-            <IdentificationIcon
-              aria-hidden="true"
-              className="h-5 w-5 flex-none"
-            />
-            Ownership
-          </div>
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 4 12"
-            fill="currentColor"
-            className="absolute right-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 translate-x-full transform text-slate-100 lg:block dark:text-slate-800"
-          >
-            <path
-              d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
-              fillRule="evenodd"
-            />
-          </svg>
-        </div>
-        <div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 4 12"
-            fill="currentColor"
-            className="absolute left-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 transform text-white lg:block dark:text-slate-950"
-          >
-            <path
-              d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
-              fillRule="evenodd"
-            />
-          </svg>
-          <div className="flex items-center gap-3 text-lg font-medium leading-6">
-            <UserGroupIcon aria-hidden="true" className="h-5 w-5 flex-none" />
-            Control
-          </div>
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 4 12"
-            fill="currentColor"
-            className="absolute right-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 translate-x-full transform text-slate-100 lg:block dark:text-slate-800"
-          >
-            <path
-              d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
-              fillRule="evenodd"
-            />
-          </svg>
-        </div>
-        <div className="relative rounded-md bg-slate-100 px-4 py-3 text-slate-900 dark:bg-slate-800 dark:text-slate-100">
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 4 12"
-            fill="currentColor"
-            className="absolute left-0 top-1/2 hidden h-6 w-2 -translate-y-1/2 transform text-white lg:block dark:text-slate-950"
-          >
-            <path
-              d="M3.26 4.9a2 2 0 0 1 0 2.2L0 12V0l3.26 4.9z"
-              fillRule="evenodd"
-            />
-          </svg>
-          <div className="flex items-center gap-3 text-lg font-medium leading-6">
-            <Cog6ToothIcon aria-hidden="true" className="h-5 w-5 flex-none" />
-            Automation
-          </div>
-        </div>
-      </div>
-
       {/*Remove this*/}
-      <picture className="mt-6 block">
+      <picture className="mt-12 block">
         <img
           src="/home-temp/temporary.png"
           alt="something here"
diff --git a/nx-dev/ui-home/src/lib/sections/youtube.tsx b/nx-dev/ui-home/src/lib/sections/youtube.tsx
new file mode 100644
index 00000000000000..e0c3fdbb7acee6
--- /dev/null
+++ b/nx-dev/ui-home/src/lib/sections/youtube.tsx
@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#FF0000` for a colored version.
+ */
+export const YoutubeIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>YouTube</title>
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+  </svg>
+);
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
index 7cf07a0354e3f4..5747555fc7f11f 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
@@ -18,7 +18,7 @@ export function Heading({
   return (
     <Component
       id={id}
-      className={['not-prose group', className].filter(Boolean).join(' ')}
+      className={['group', className].filter(Boolean).join(' ')}
     >
       {children}
       <Link aria-hidden="true" href={`#${id}`}>