From 8bfa9f90de003ce6f1debb84593b47ef57ab7bdf Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@users.noreply.github.com>
Date: Tue, 10 Jun 2025 10:35:15 -0400
Subject: [PATCH] docs(core): enterprise webinar section (#31527)

Create WebinarSection component for enterprise docs
---
 nx-dev/ui-enterprise/src/lib/hero.tsx         | 21 ++------------
 .../solutions-engineering-hero.tsx            | 26 ++---------------
 .../leadership/solutions-leadership-hero.tsx  | 28 +++----------------
 .../management/solutions-management-hero.tsx  | 26 ++---------------
 .../platform/solutions-platform-hero.tsx      | 26 ++---------------
 .../ui-enterprise/src/lib/webinar-section.tsx | 25 +++++++++++++++++
 6 files changed, 40 insertions(+), 112 deletions(-)
 create mode 100644 nx-dev/ui-enterprise/src/lib/webinar-section.tsx

diff --git a/nx-dev/ui-enterprise/src/lib/hero.tsx b/nx-dev/ui-enterprise/src/lib/hero.tsx
index e4a1b27d67..92c3da2e21 100644
--- a/nx-dev/ui-enterprise/src/lib/hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/hero.tsx
@@ -1,7 +1,7 @@
 import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import { type ReactElement } from 'react';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { WebinarSection } from './webinar-section';
 
 export function Hero(): ReactElement {
   return (
@@ -25,24 +25,7 @@ export function Hero(): ReactElement {
       <div className="absolute inset-0">
         <div className="mx-auto max-w-7xl lg:flex">
           <div className="mx-auto max-w-3xl px-6 pb-24 pt-36 lg:mx-0 lg:shrink-0 lg:px-8">
-            {/*<p>*/}
-            {/*  <a*/}
-            {/*    href="https://bit.ly/4jQLCqp"*/}
-            {/*    title="See live event in details"*/}
-            {/*    className="group/event-link inline-flex space-x-6"*/}
-            {/*  >*/}
-            {/*    <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
-            {/*      Live event*/}
-            {/*    </span>*/}
-            {/*    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
-            {/*      <span>Webinar + live Q&A on May 28th</span>*/}
-            {/*      <ChevronRightIcon*/}
-            {/*        aria-hidden="true"*/}
-            {/*        className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
-            {/*      />*/}
-            {/*    </span>*/}
-            {/*  </a>*/}
-            {/*</p>*/}
+            <WebinarSection />
             <SectionHeading
               id="get-speed-and-scale"
               as="h1"
diff --git a/nx-dev/ui-enterprise/src/lib/solutions/engineering/solutions-engineering-hero.tsx b/nx-dev/ui-enterprise/src/lib/solutions/engineering/solutions-engineering-hero.tsx
index 8b399e0807..f61e470665 100644
--- a/nx-dev/ui-enterprise/src/lib/solutions/engineering/solutions-engineering-hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/solutions/engineering/solutions-engineering-hero.tsx
@@ -1,16 +1,13 @@
 import { ComponentProps, ReactElement, useState } from 'react';
 import { ButtonLink, SectionHeading, VideoModal } from '@nx/nx-dev/ui-common';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
-import {
-  ChevronRightIcon,
-  EnvelopeIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline';
+import { EnvelopeIcon, PlayIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { UkgIcon } from '@nx/nx-dev/ui-icons';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { MovingBorder } from '@nx/nx-dev/ui-animations';
 import { motion } from 'framer-motion';
+import { WebinarSection } from '../../webinar-section';
 
 function PlayButton({
   className,
@@ -84,24 +81,7 @@ export function SolutionsEngineeringHero(): ReactElement {
     <section className="relative overflow-hidden">
       <div className="mx-auto max-w-7xl lg:flex">
         <div className="mx-auto max-w-3xl px-6 py-24 lg:mx-0 lg:shrink-0 lg:px-8">
-          {/*<p>*/}
-          {/*  <a*/}
-          {/*    href="https://bit.ly/4jQLCqp"*/}
-          {/*    title="See live event in details"*/}
-          {/*    className="group/event-link inline-flex space-x-6"*/}
-          {/*  >*/}
-          {/*    <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
-          {/*      Live event*/}
-          {/*    </span>*/}
-          {/*    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
-          {/*      <span>Webinar + live Q&A on May 28th</span>*/}
-          {/*      <ChevronRightIcon*/}
-          {/*        aria-hidden="true"*/}
-          {/*        className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
-          {/*      />*/}
-          {/*    </span>*/}
-          {/*  </a>*/}
-          {/*</p>*/}
+          <WebinarSection />
           <SectionHeading
             id="get-speed-and-scale"
             as="h1"
diff --git a/nx-dev/ui-enterprise/src/lib/solutions/leadership/solutions-leadership-hero.tsx b/nx-dev/ui-enterprise/src/lib/solutions/leadership/solutions-leadership-hero.tsx
index 66a3d25a08..acbf24851e 100644
--- a/nx-dev/ui-enterprise/src/lib/solutions/leadership/solutions-leadership-hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/solutions/leadership/solutions-leadership-hero.tsx
@@ -1,16 +1,13 @@
 import { ComponentProps, ReactElement, useState } from 'react';
 import { ButtonLink, SectionHeading, VideoModal } from '@nx/nx-dev/ui-common';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
-import {
-  ChevronRightIcon,
-  EnvelopeIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline';
+import { EnvelopeIcon, PlayIcon } from '@heroicons/react/24/outline';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { MovingBorder } from '@nx/nx-dev/ui-animations';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
-import { CasewareIcon, UkgIcon } from '@nx/nx-dev/ui-icons';
+import { CasewareIcon } from '@nx/nx-dev/ui-icons';
+import { WebinarSection } from '../../webinar-section';
 
 function PlayButton({
   className,
@@ -84,24 +81,7 @@ export function SolutionsLeadershipHero(): ReactElement {
     <section className="relative overflow-hidden">
       <div className="mx-auto max-w-7xl lg:flex">
         <div className="mx-auto max-w-3xl px-6 py-24 lg:mx-0 lg:shrink-0 lg:px-8">
-          {/*<p>*/}
-          {/*  <a*/}
-          {/*    href="https://bit.ly/4jQLCqp"*/}
-          {/*    title="See live event in details"*/}
-          {/*    className="group/event-link inline-flex space-x-6"*/}
-          {/*  >*/}
-          {/*    <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
-          {/*      Live event*/}
-          {/*    </span>*/}
-          {/*    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
-          {/*      <span>Webinar + live Q&A on May 28th</span>*/}
-          {/*      <ChevronRightIcon*/}
-          {/*        aria-hidden="true"*/}
-          {/*        className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
-          {/*      />*/}
-          {/*    </span>*/}
-          {/*  </a>*/}
-          {/*</p>*/}
+          <WebinarSection />
           <SectionHeading
             id="get-speed-and-scale"
             as="h1"
diff --git a/nx-dev/ui-enterprise/src/lib/solutions/management/solutions-management-hero.tsx b/nx-dev/ui-enterprise/src/lib/solutions/management/solutions-management-hero.tsx
index ea7921bd51..68163d9810 100644
--- a/nx-dev/ui-enterprise/src/lib/solutions/management/solutions-management-hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/solutions/management/solutions-management-hero.tsx
@@ -1,16 +1,13 @@
 import { ComponentProps, ReactElement, useState } from 'react';
 import { ButtonLink, SectionHeading, VideoModal } from '@nx/nx-dev/ui-common';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
-import {
-  ChevronRightIcon,
-  EnvelopeIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline';
+import { EnvelopeIcon, PlayIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { UkgIcon } from '@nx/nx-dev/ui-icons';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { MovingBorder } from '@nx/nx-dev/ui-animations';
 import { motion } from 'framer-motion';
+import { WebinarSection } from '../../webinar-section';
 
 function PlayButton({
   className,
@@ -84,24 +81,7 @@ export function SolutionsManagementHero(): ReactElement {
     <section className="relative overflow-hidden">
       <div className="mx-auto max-w-7xl lg:flex">
         <div className="mx-auto max-w-3xl px-6 py-24 lg:mx-0 lg:shrink-0 lg:px-8">
-          {/*<p>*/}
-          {/*  <a*/}
-          {/*    href="https://bit.ly/4jQLCqp"*/}
-          {/*    title="See live event in details"*/}
-          {/*    className="group/event-link inline-flex space-x-6"*/}
-          {/*  >*/}
-          {/*    <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
-          {/*      Live event*/}
-          {/*    </span>*/}
-          {/*    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
-          {/*      <span>Webinar + live Q&A on May 28th</span>*/}
-          {/*      <ChevronRightIcon*/}
-          {/*        aria-hidden="true"*/}
-          {/*        className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
-          {/*      />*/}
-          {/*    </span>*/}
-          {/*  </a>*/}
-          {/*</p>*/}
+          <WebinarSection />
           <SectionHeading
             id="get-speed-and-scale"
             as="h1"
diff --git a/nx-dev/ui-enterprise/src/lib/solutions/platform/solutions-platform-hero.tsx b/nx-dev/ui-enterprise/src/lib/solutions/platform/solutions-platform-hero.tsx
index fa4e5ac32b..a419aeb6f2 100644
--- a/nx-dev/ui-enterprise/src/lib/solutions/platform/solutions-platform-hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/solutions/platform/solutions-platform-hero.tsx
@@ -1,16 +1,13 @@
 import { ComponentProps, ReactElement, useState } from 'react';
 import { ButtonLink, SectionHeading, VideoModal } from '@nx/nx-dev/ui-common';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
-import {
-  ChevronRightIcon,
-  EnvelopeIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline';
+import { EnvelopeIcon, PlayIcon } from '@heroicons/react/24/outline';
 import { PayfitIcon } from '@nx/nx-dev/ui-icons';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { MovingBorder } from '@nx/nx-dev/ui-animations';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
+import { WebinarSection } from '../../webinar-section';
 
 function PlayButton({
   className,
@@ -84,24 +81,7 @@ export function SolutionsPlatformHero(): ReactElement {
     <section className="relative overflow-hidden">
       <div className="mx-auto max-w-7xl lg:flex">
         <div className="mx-auto max-w-3xl px-6 py-24 lg:mx-0 lg:shrink-0 lg:px-8">
-          {/*<p>*/}
-          {/*  <a*/}
-          {/*    href="https://bit.ly/4jQLCqp"*/}
-          {/*    title="See live event in details"*/}
-          {/*    className="group/event-link inline-flex space-x-6"*/}
-          {/*  >*/}
-          {/*    <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
-          {/*      Live event*/}
-          {/*    </span>*/}
-          {/*    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
-          {/*      <span>Webinar + live Q&A on May 28th</span>*/}
-          {/*      <ChevronRightIcon*/}
-          {/*        aria-hidden="true"*/}
-          {/*        className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
-          {/*      />*/}
-          {/*    </span>*/}
-          {/*  </a>*/}
-          {/*</p>*/}
+          <WebinarSection />
           <SectionHeading
             id="get-speed-and-scale"
             as="h1"
diff --git a/nx-dev/ui-enterprise/src/lib/webinar-section.tsx b/nx-dev/ui-enterprise/src/lib/webinar-section.tsx
new file mode 100644
index 0000000000..74c9d35deb
--- /dev/null
+++ b/nx-dev/ui-enterprise/src/lib/webinar-section.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+
+export const WebinarSection: React.FC = () => {
+  return (
+    <p>
+      <a
+        href="https://bit.ly/3ZmAWrF"
+        title="See live event in details"
+        className="group/event-link inline-flex space-x-6"
+      >
+        <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">
+          Live event
+        </span>
+        <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">
+          <span>Webinar + live Q&A on June 18th</span>
+          <ChevronRightIcon
+            aria-hidden="true"
+            className="size-5 transform transition-all group-hover/event-link:translate-x-1"
+          />
+        </span>
+      </a>
+    </p>
+  );
+};