docs(core): enterprise webinar section (#31527)

Create WebinarSection component for enterprise docs

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"

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"

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"

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"

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"

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>
+  );
+};