feat(nx-dev): update home hero & livestream notifier (#28403)

nrwl · Oct 12, 2024 · 74bdc58 · 74bdc58
1 parent 37a7eb1
commit 74bdc58
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 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
@@ -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
@@ -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>