docs(nx-dev): add ProductHunt banner (#16607)

Author: juristr

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

@@ -1,4 +1,4 @@
-import { Footer, Header } from '@nx/nx-dev/ui-common';
+import { AnnouncementBanner, Footer, Header } from '@nx/nx-dev/ui-common';
 import {
   ExtensibleAndIntegrated,
   GettingStarted,
@@ -39,6 +39,7 @@ 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">

nx-dev/ui-common/src/lib/announcement-banner.tsx

@@ -7,24 +7,27 @@ export function AnnouncementBanner(): JSX.Element {
         <div className="text-center sm:px-16 sm:pr-16">
           <p className="text-sm font-medium">
             <span className="md:hidden">
-              <Link href="https://stateofjs.com/en-us/" className="underline">
-                State of JS survey:
+              <Link
+                href="https://www.producthunt.com/posts/nx-cloud#nx-cloud"
+                className="underline"
+              >
+                Nx Cloud is on Product Hunt!
               </Link>
             </span>
             <span className="hidden md:inline">
               <span className="font-semibold">
-                State of JS survey is online!
+                Nx Cloud is on Product Hunt today!
               </span>
             </span>
             <span className="ml-2 inline-block">
               <Link
-                href="https://stateofjs.com/en-us/"
+                href="https://www.producthunt.com/posts/nx-cloud#nx-cloud"
                 rel="noreferrer"
                 target="_blank"
                 className="font-semibold text-blue-500 underline dark:text-sky-500"
               >
                 <span className="absolute inset-0" aria-hidden="true" />
-                Give Nx & Lerna a thumbs up
+                Leave us a review
                 <span aria-hidden="true">&rarr;</span>
               </Link>
             </span>

nx-dev/ui-common/src/lib/documentation-header.tsx

@@ -4,6 +4,7 @@ import { ThemeSwitcher } from '@nx/nx-dev/ui-theme';
 import cx from 'classnames';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { AnnouncementBanner } from './announcement-banner';
 
 function Menu({ tabs }: { tabs: any[] }): JSX.Element {
   return (
@@ -191,6 +192,9 @@ export function DocumentationHeader({
         </div>
         {/*NAVIGATION*/}
         <div className="hidden flex-grow lg:flex">{/* SPACER */}</div>
+        <div className="hidden lg:flex">
+          <AnnouncementBanner />
+        </div>
         <div className="hidden flex-shrink-0 lg:flex">
           <nav
             role="accessory-nav"