From 74bdc583b972109d22b6805d8f33d2c1d8872fca Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Sat, 12 Oct 2024 14:11:56 -0700
Subject: [PATCH] feat(nx-dev): update home hero & livestream notifier (#28403)

---
 .../src/lib/live-stream-notifier.tsx          | 41 ++++++++++++++-----
 nx-dev/ui-home/src/lib/hero.tsx               | 14 ++++++-
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/nx-dev/ui-common/src/lib/live-stream-notifier.tsx b/nx-dev/ui-common/src/lib/live-stream-notifier.tsx
index 60f84f858aadd..872d0d5ac4c91 100644
--- a/nx-dev/ui-common/src/lib/live-stream-notifier.tsx
+++ b/nx-dev/ui-common/src/lib/live-stream-notifier.tsx
@@ -3,9 +3,14 @@
 import { useState, useEffect, ReactElement } from 'react';
 import { motion } from 'framer-motion';
 import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
-import { XMarkIcon, VideoCameraIcon } from '@heroicons/react/24/outline';
+import { ButtonLink } from './button';
+import {
+  PlayIcon,
+  XMarkIcon,
+  ChatBubbleLeftRightIcon,
+} from '@heroicons/react/24/outline';
 
-export function LiveStreamNotifier(): ReactElement {
+export function LiveStreamNotifier(): ReactElement | null {
   const [isVisible, setIsVisible] = useState<boolean>(true);
 
   useEffect(() => {
@@ -57,33 +62,49 @@ export function LiveStreamNotifier(): ReactElement {
               aria-hidden="true"
               className="size-8 flex-shrink-0"
             />
-            <span>Monorepo World just ended!</span>
+            <span>Monorepo World live replays available!</span>
           </motion.h3>
           <motion.div key="live-event" className="mt-4 space-y-4">
             <p className="mb-2 text-sm">
-              In case you missed Monorepo World, it is now available for replay.
+              Watch the replays of exciting talks on developer tooling and
+              monorepos! Catch all the insightful presentations from the event
+              on our YouTube channel.
             </p>
             <div className="flex flex-wrap items-center gap-1 sm:gap-4">
               <a
-                title="Track 1 replay"
+                title="Watch track 1"
                 href="http://go.nx.dev/MWTrack1"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#DDFB24] px-2 py-2 text-sm font-semibold text-black transition hover:bg-[#B2CF04] 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-5" />
-                <span>Track 1 replay</span>
+                <PlayIcon aria-hidden="true" className="size-4" />
+                <span>Track 1</span>
               </a>
               <a
                 href="http://go.nx.dev/MWTrack2"
                 target="_blank"
-                title="Track 2 replay"
+                title="Watch track 2"
                 rel="noopener noreferrer"
                 className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#DDFB24] px-2 py-2 text-sm font-semibold text-black transition hover:bg-[#B2CF04] 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-5" />
-                <span>Track 2 replay</span>
+                <PlayIcon aria-hidden="true" className="size-4" />
+                <span>Track 2</span>
               </a>
+              <ButtonLink
+                variant="secondary"
+                size="small"
+                href="https://discord.gg/7yFabzBP"
+                target="_blank"
+                title="Join the discussion on Discord"
+                rel="noopener noreferrer"
+              >
+                <ChatBubbleLeftRightIcon
+                  aria-hidden="true"
+                  className="size-4"
+                />
+                <span>#monorepo-world</span>
+              </ButtonLink>
             </div>
           </motion.div>
         </div>
diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index b07ee58ce8446..a9d8738089a28 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/nx-dev/ui-home/src/lib/hero.tsx
@@ -6,7 +6,11 @@ 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 {
+  MonorepoWorldIcon,
+  RustIcon,
+  TypeScriptIcon,
+} from '@nx/nx-dev/ui-icons';
 import { motion, MotionConfig } from 'framer-motion';
 
 export function Hero(): JSX.Element {
@@ -80,6 +84,14 @@ export function Hero(): JSX.Element {
               Contact us
             </ButtonLink>
           </div>
+
+          <div className="mt-4 flex items-center justify-center gap-2 text-sm italic">
+            Built with
+            <RustIcon aria-hidden="true" className="size-5 shrink-0" />
+            <span className="sr-only">Rust</span> for speed &
+            <TypeScriptIcon aria-hidden="true" className="size-4 shrink-0" />
+            <span className="sr-only">TypeScript</span> for extensibility.
+          </div>
         </div>
       </div>
     </div>