docs(nx-dev): add WebinarNotifier component (#29087)

Introduce the `WebinarNotifier` component and integrate it within the app. This helps in promoting the upcoming webinars to users by displaying a notification banner with details and a signup link.

nx-dev/nx-dev/pages/_app.tsx

@@ -7,7 +7,7 @@ import Script from 'next/script';
 import { useEffect } from 'react';
 import '../styles/main.css';
 import Link from 'next/link';
-import { LiveStreamNotifier } from '@nx/nx-dev/ui-common';
+import { LiveStreamNotifier, WebinarNotifier } from '@nx/nx-dev/ui-common';
 
 export default function CustomApp({
   Component,
@@ -81,6 +81,7 @@ export default function CustomApp({
       </Link>
       <Component {...pageProps} />
       {/* <LiveStreamNotifier /> */}
+      <WebinarNotifier />
 
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       <Script

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

@@ -8,11 +8,7 @@ import {
   TeamAndCommunity,
   WorkBetterAchieveMoreShipQuicker,
 } from '@nx/nx-dev/ui-home';
-import {
-  requestFreeTrial,
-  gotoAppButton,
-  contactButton,
-} from '../lib/components/headerCtaConfigs';
+import { contactButton } from '../lib/components/headerCtaConfigs';
 
 export default function Index(): JSX.Element {
   const headerCTAConfig = [contactButton];

nx-dev/ui-common/src/index.ts

@@ -23,9 +23,9 @@ export * from './lib/trusted-by';
 export * from './lib/testimonials';
 export * from './lib/square-dotted-pattern';
 export * from './lib/live-stream-notifier';
+export * from './lib/webinar-notifier';
 
 export { resourceMenuItems } from './lib/headers/menu-items';
-export { productsMenuItems as solutionsMenuItems } from './lib/headers/menu-items';
 export { eventItems } from './lib/headers/menu-items';
 export { learnItems } from './lib/headers/menu-items';
 export { companyItems } from './lib/headers/menu-items';

nx-dev/ui-common/src/lib/webinar-notifier.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, useEffect, ReactElement } from 'react';
+import { motion } from 'framer-motion';
+import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
+import { ButtonLink } from './button';
+import {
+  PlayIcon,
+  XMarkIcon,
+  ChatBubbleLeftRightIcon,
+  VideoCameraIcon,
+  MegaphoneIcon,
+} from '@heroicons/react/24/outline';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
+
+export function WebinarNotifier(): ReactElement | null {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const localStorageKey = 'webinar-december-10-2024--notifier-closed';
+
+  useEffect(() => {
+    setIsMounted(true);
+    const isClosedSession = localStorage.getItem(localStorageKey);
+    if (isClosedSession === 'true') {
+      setIsVisible(false);
+    }
+  }, []);
+
+  const closeNotifier = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsVisible(false);
+    localStorage.setItem(localStorageKey, 'true');
+  };
+
+  if (!isMounted || !isVisible) return null;
+
+  return (
+    <motion.div
+      layout
+      initial={{ y: '120%' }}
+      animate={{ y: 0 }}
+      exit={{ y: '120%' }}
+      transition={{
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+        mass: 1,
+      }}
+      className="fixed bottom-0 left-0 right-0 z-30 w-full overflow-hidden bg-slate-950 text-white shadow-lg md:bottom-4 md:left-auto md:right-4 md:w-[512px] md:rounded-lg"
+      style={{ originY: 1 }}
+    >
+      <div className="relative p-4">
+        <button
+          onClick={closeNotifier}
+          className="absolute right-2 top-2 rounded-full p-1 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-white"
+        >
+          <XMarkIcon className="size-5" aria-hidden="true" />
+          <span className="sr-only">Close</span>
+        </button>
+        <div>
+          <motion.h3
+            layout="position"
+            className="flex items-center gap-2 pr-8 text-lg font-semibold"
+          >
+            <MegaphoneIcon
+              aria-hidden="true"
+              className="size-8 flex-shrink-0"
+            />
+            <span>Join our webinar + live Q&A on Dec 10th</span>
+          </motion.h3>
+          <motion.div key="live-event" className="mt-4 space-y-4">
+            <p className="mb-2 text-sm">
+              Learn how Nx Cloud can help you overcome the performance paradox
+              with fast, reliable CI and better coordination as you scale your
+              organization.
+            </p>
+            <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-4">
+              <a
+                onClick={() =>
+                  sendCustomEvent(
+                    'webinar-sign-up-click',
+                    'december-10-2024',
+                    'webinar-notifier'
+                  )
+                }
+                title="Signup"
+                href="https://go.nx.dev/december-webinar"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-pink-600 px-2 py-2 text-sm font-semibold text-white transition hover:bg-pink-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"
+              >
+                <VideoCameraIcon aria-hidden="true" className="size-4" />
+                <span>Sign Up Now</span>
+              </a>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}