diff --git a/nx-dev/nx-dev/public/images/conferences/monorepoworld-vertical-banner.avif b/nx-dev/nx-dev/public/images/conferences/monorepoworld-vertical-banner.avif
new file mode 100644
index 00000000000000..4c3629945e91e4
Binary files /dev/null and b/nx-dev/nx-dev/public/images/conferences/monorepoworld-vertical-banner.avif differ
diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index c6042d79e7189e..4a0aefa8d9fd89 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/nx-dev/ui-home/src/lib/hero.tsx
@@ -6,6 +6,8 @@ import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
 import { useState } from 'react';
 import Link from 'next/link';
 import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
+import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
+import { motion, MotionConfig } from 'framer-motion';
 
 export function Hero(): JSX.Element {
   return (
@@ -23,23 +25,6 @@ export function Hero(): JSX.Element {
       </div>
       <div className="z-20 mx-auto grid h-screen max-w-6xl grid-cols-1 place-items-center text-center">
         <div className="container">
-          <div className="-mt-16 hidden sm:mb-8 sm:flex sm:justify-center">
-            <div className="relative rounded-full bg-white px-3 py-1 text-sm leading-6 ring-1 ring-slate-900/10 transition-all hover:ring-slate-900/20 dark:bg-slate-950 dark:ring-slate-100/10 dark:hover:ring-slate-100/20">
-              <span className="text-blue-500 dark:text-sky-500">
-                Monorepo World
-              </span>{' '}
-              - The conf for monorepos and dev tooling.{' '}
-              <Link
-                href="https://monorepo.world"
-                title="Discover Nx Agents"
-                className="font-semibold text-blue-500 dark:text-sky-500"
-                prefetch={false}
-              >
-                <span className="absolute inset-0" aria-hidden="true"></span>
-                Find out more <span aria-hidden="true">→</span>
-              </Link>
-            </div>
-          </div>
           <SectionHeading as="h1" variant="display" data-cy="primary-heading">
             <span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
               Smart
@@ -96,6 +81,93 @@ export function Hero(): JSX.Element {
               Contact us
             </ButtonLink>
           </div>
+          <div className="mt-12 hidden sm:flex sm:justify-center">
+            <MotionConfig reducedMotion="user">
+              <motion.div
+                initial={{
+                  y: 16,
+                  opacity: 0,
+                }}
+                whileInView={{
+                  y: 0,
+                  opacity: 1,
+                }}
+                viewport={{ once: true }}
+                transition={{
+                  ease: 'easeOut',
+                  duration: 0.225,
+                  delay: 1,
+                }}
+                className="pointer-events-auto relative mx-auto w-full max-w-lg overflow-hidden rounded-lg bg-slate-950 text-left text-white shadow-lg ring-1 ring-white ring-opacity-5 transition hover:bg-slate-800"
+              >
+                <div className="p-4">
+                  <div className="flex items-start gap-6">
+                    <div className="-m-4 flex-shrink-0">
+                      <img
+                        src="/images/conferences/monorepoworld-vertical-banner.avif"
+                        alt="MonorepoWorld conference image"
+                        className="size-32"
+                      />
+                      {/*<MonorepoWorldIcon*/}
+                      {/*  className="h-8 w-8 text-slate-950"*/}
+                      {/*  aria-hidden="true"*/}
+                      {/*/>*/}
+                    </div>
+                    <div className="w-0 flex-1 pt-1">
+                      <p className="text-base font-semibold">
+                        <a
+                          href="https://monorepo.world/?utm_source=nxdev&utm_medium=website&utm_campaign=homepage_banner&utm_campaign=monorepoworld"
+                          title="Join us at Monorepo World"
+                          target="_blank"
+                        >
+                          <span className="absolute inset-0" />
+                          The Nx team will be at Monorepo World!
+                        </a>
+                      </p>
+                      <p className="mt-1 text-sm text-slate-300">
+                        The ultimate conference for{' '}
+                        <span className="text-[#DDFB24]">monorepos</span> and
+                        developer{' '}
+                        <span className="text-[#DDFB24]">tooling</span> on 0ct.
+                        7. 2024, Mountain View, CA.
+                      </p>
+                    </div>
+                    {/*<div className="flex-shrink-0 place-self-end">*/}
+                    {/*  <a*/}
+                    {/*    href="https://monorepo.world/?utm_source=nxdev&utm_medium=website&utm_campaign=homepage_banner&utm_campaign=monorepoworld"*/}
+                    {/*    title="Join us at Monorepo World"*/}
+                    {/*    className="rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"*/}
+                    {/*  >*/}
+                    {/*    <span className="absolute inset-0" /> Join us*/}
+                    {/*  </a>*/}
+                    {/*</div>*/}
+                  </div>
+                </div>
+                {/*<span className="inline-flex gap-2 font-semibold text-slate-950 dark:text-white">*/}
+                {/*  <MonorepoWorldIcon aria-hidden="true" className="size-6" />*/}
+                {/*  Monorepo World*/}
+                {/*</span>*/}
+                {/*<svg*/}
+                {/*  width="2"*/}
+                {/*  height="2"*/}
+                {/*  fill="currentColor"*/}
+                {/*  aria-hidden="true"*/}
+                {/*>*/}
+                {/*  <circle cx="1" cy="1" r="1"></circle>*/}
+                {/*</svg>*/}
+                {/*<span>The conf for monorepos and dev tooling.</span>*/}
+                {/*<Link*/}
+                {/*  href="https://monorepo.world"*/}
+                {/*  title="Monorepo World conference"*/}
+                {/*  className="font-semibold"*/}
+                {/*  prefetch={false}*/}
+                {/*>*/}
+                {/*  <span className="absolute inset-0" aria-hidden="true"></span>*/}
+                {/*  Find out more <span aria-hidden="true">→</span>*/}
+                {/*</Link>*/}
+              </motion.div>
+            </MotionConfig>
+          </div>
         </div>
       </div>
     </div>
diff --git a/nx-dev/ui-icons/src/index.ts b/nx-dev/ui-icons/src/index.ts
index 86209781a8dc05..5e6e5dbdee37bf 100644
--- a/nx-dev/ui-icons/src/index.ts
+++ b/nx-dev/ui-icons/src/index.ts
@@ -73,6 +73,15 @@ export * from './lib/customers/zipari';
 export * from './lib/editors/jetbrains';
 export * from './lib/editors/visual-studio-code';
 
+// OTHERS
+export * from './lib/monorepo-world';
+
+// PODCASTS
+export * from './lib/podcasts/amazon-music';
+export * from './lib/podcasts/apple-podcasts';
+export * from './lib/podcasts/i-heart-radio';
+export * from './lib/podcasts/spotify';
+
 // PRODUCTS
 export * from './lib/products';
 
@@ -119,9 +128,3 @@ export * from './lib/technologies/vite';
 export * from './lib/technologies/vitest';
 export * from './lib/technologies/vue';
 export * from './lib/technologies/webpack';
-
-// PODCASTS
-export * from './lib/podcasts/amazon-music';
-export * from './lib/podcasts/apple-podcasts';
-export * from './lib/podcasts/i-heart-radio';
-export * from './lib/podcasts/spotify';
diff --git a/nx-dev/ui-icons/src/lib/monorepo-world.tsx b/nx-dev/ui-icons/src/lib/monorepo-world.tsx
new file mode 100644
index 00000000000000..a416ea8476618c
--- /dev/null
+++ b/nx-dev/ui-icons/src/lib/monorepo-world.tsx
@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export function MonorepoWorldIcon(props: ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M4.95951 15.2616v-4.7654c0-.82631.64074-1.49877 1.45095-1.49877.77235 0 1.43154.67246 1.43154 1.49877v3.296l1.96008-.9991v-2.2969c0-.82631.65942-1.49877 1.45092-1.49877.7724 0 1.4129.67246 1.4129 1.49877v.8369l1.9746-1.0066C14.5545 8.46636 13.0638 7 11.2536 7c-.9797 0-1.82771.44126-2.44924 1.13332C8.2568 7.44126 7.37148 7 6.41027 7 4.52607 7 3 8.55635 3 10.4962v5.7643l1.95951-.9989ZM17.5251 9.72944v4.76546c0 .8263-.6408 1.4988-1.451 1.4988-.7723 0-1.4315-.6725-1.4315-1.4988v-3.296l-1.9601.9991v2.2969c0 .8263-.6594 1.4988-1.451 1.4988-.7723 0-1.41287-.6725-1.41287-1.4988v-.8369L7.8441 14.6646c.08596 1.8601 1.57666 3.3265 3.3869 3.3265.9796 0 1.8277-.4413 2.4492-1.1333.5476.692 1.4329 1.1333 2.3941 1.1333 1.8842 0 3.4103-1.5564 3.4103-3.4962V8.73073l-1.9595.99871ZM21.0205 18c.541 0 .9795-.4472.9795-.9989 0-.5517-.4385-.9989-.9795-.9989-.5409 0-.9794.4472-.9794.9989 0 .5517.4385.9989.9794.9989Z" />
+    </svg>
+  );
+}