feat(nx-dev): add Monorepo World banner to hero (#27482)

Integrate a new Monorepo World banner with animations in the hero section using framer-motion. Updated the UI icons library to include Monorepo World icon and relevant SVG file.

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
@@ -63,7 +48,6 @@ export function Hero(): JSX.Element {
             variant="subtitle"
             className="mx-auto mt-6 max-w-4xl"
           >
-            {/*Structured, maintainable and efficient monorepos. Locally and on CI, easy as that.*/}
             <Strong>Build system</Strong>, optimized for monorepos, with plugins
             for popular frameworks and tools and{' '}
             <Strong>advanced CI capabilities</Strong> including caching and
@@ -96,6 +80,58 @@ export function Hero(): JSX.Element {
               Contact us
             </ButtonLink>
           </div>
+          <div className="mt-12 flex 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 hidden flex-shrink-0 sm:block">
+                      <img
+                        src="/images/conferences/monorepoworld-vertical-banner.avif"
+                        alt="MonorepoWorld conference image"
+                        className="size-32"
+                      />
+                    </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>
+                </div>
+              </motion.div>
+            </MotionConfig>
+          </div>
         </div>
       </div>
     </div>

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';

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>
+  );
+}