docs(nx-dev): revamp the Nx Enterprise page on nx.dev (#29209)

This update introduces a revamp to the Nx Enterprise page. The code changes involved the addition of new image files, amending several components for improved UI/UX. This refactor also includes an alteration to the Call-to-Action section and an introduction of a new Carousel component for better navigation. These adjustments aim to provide an improved user experience and enhanced readability. --------- Co-authored-by: Isaac Mann <isaacplmann@users.noreply.github.com>
nrwl · Dec 5, 2024 · cc14411 · cc14411
1 parent 2e98918
commit cc14411
Show file tree

Hide file tree

Showing 32 changed files with 1,689 additions and 1,852 deletions.
diff --git a/nx-dev/nx-dev/pages/enterprise.tsx b/nx-dev/nx-dev/pages/enterprise.tsx
@@ -3,29 +3,31 @@ import { NextSeo } from 'next-seo';
 import { DefaultLayout } from '@nx/nx-dev/ui-common';
 import {
   CallToAction,
-  DownloadEbook,
-  EnterpriseAddons,
+  CustomerLogos,
+  CustomerMetrics,
   Hero,
-  MetricsAndCustomers,
-  ScaleYourPeople,
+  HetznerCloudTestimonial,
+  MakeYourCiFast,
+  ScaleOrganizationIntro,
+  ScaleYourOrganization,
   Security,
-  TrustedBy,
-  SolveYourCi,
+  TestimonialCarousel,
+  VmwareTestimonial,
 } from '@nx/nx-dev/ui-enterprise';
-import { TrialCallout } from '@nx/nx-dev/ui-pricing';
 import { requestFreeTrial } from '../lib/components/headerCtaConfigs';
+import { ReactElement } from 'react';
 
-export function Enterprise(): JSX.Element {
+export function Enterprise(): ReactElement {
   const router = useRouter();
 
   return (
     <>
       <NextSeo
-        title="Nx Enterprise"
+        title="Solving the Performance Paradox, get speed and scale"
         description="Accelerate your organization's journey to tighter collaboration, better developer experience, and speed…lots of speed."
         openGraph={{
           url: 'https://nx.dev' + router.asPath,
-          title: 'Nx Enterprise',
+          title: 'Solving the Performance Paradox, get speed and scale',
           description:
             "Accelerate your organization's journey to tighter collaboration, better developer experience, and speed…lots of speed.",
           images: [
@@ -41,35 +43,32 @@ export function Enterprise(): JSX.Element {
           type: 'website',
         }}
       />
-      <DefaultLayout headerCTAConfig={[requestFreeTrial]}>
+      <DefaultLayout headerCTAConfig={[requestFreeTrial]} isHome={true}>
         <div>
           <Hero />
+          <CustomerLogos />
         </div>
+        <CustomerMetrics />
         <div className="mt-32 lg:mt-40">
-          <MetricsAndCustomers />
+          <MakeYourCiFast />
         </div>
         <div className="mt-32 lg:mt-40">
-          <TrialCallout pageId="enterprise" />
+          <TestimonialCarousel />
         </div>
-        <div className="mt-32 lg:mt-56">
-          <ScaleYourPeople />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <Security />
+        <div className="mt-32 lg:mt-40">
+          <ScaleOrganizationIntro />
+          <ScaleYourOrganization />
         </div>
-        <div className="mt-32 lg:mt-56">
-          <SolveYourCi />
+        <div className="mt-32 lg:mt-40">
+          <HetznerCloudTestimonial />
         </div>
         <div className="mt-32 lg:mt-56">
-          <DownloadEbook />
+          <Security />
         </div>
         <div className="mt-32 lg:mt-56">
-          <EnterpriseAddons />
-        </div>
-        <div className="mt-32">
-          <TrustedBy />
+          <VmwareTestimonial />
         </div>
-        <div className="mt-32 lg:mt-56">
+        <div className="mt-32 lg:mt-40">
           <CallToAction />
         </div>
       </DefaultLayout>

diff --git a/nx-dev/nx-dev/public/images/enterprise/nx-agents.avif b/nx-dev/nx-dev/public/images/enterprise/nx-agents.avif
diff --git a/nx-dev/nx-dev/public/images/enterprise/nx-atomizer.avif b/nx-dev/nx-dev/public/images/enterprise/nx-atomizer.avif
diff --git a/nx-dev/nx-dev/public/images/enterprise/nx-flaky-tasks-detection.avif b/nx-dev/nx-dev/public/images/enterprise/nx-flaky-tasks-detection.avif
diff --git a/nx-dev/nx-dev/public/images/enterprise/nx-partnership.avif b/nx-dev/nx-dev/public/images/enterprise/nx-partnership.avif
diff --git a/nx-dev/nx-dev/public/images/enterprise/nx-replay.avif b/nx-dev/nx-dev/public/images/enterprise/nx-replay.avif
diff --git a/nx-dev/nx-dev/public/images/enterprise/video-story-pavlo-grosse.avif b/nx-dev/nx-dev/public/images/enterprise/video-story-pavlo-grosse.avif
diff --git a/nx-dev/ui-animations/src/lib/marquee.tsx b/nx-dev/ui-animations/src/lib/marquee.tsx
@@ -53,13 +53,16 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cx('flex shrink-0 justify-around [gap:var(--gap)]', {
-              'animate-marquee flex-row': !vertical,
-              'animate-marquee-vertical flex-col': vertical,
-              '[animation-play-state:paused]': shouldReduceMotion,
-              'group-hover:[animation-play-state:paused]': pauseOnHover,
-              '[animation-direction:reverse]': reverse,
-            })}
+            className={cx(
+              'flex shrink-0 items-center justify-around [gap:var(--gap)]',
+              {
+                'animate-marquee flex-row': !vertical,
+                'animate-marquee-vertical flex-col': vertical,
+                '[animation-play-state:paused]': shouldReduceMotion,
+                'group-hover:[animation-play-state:paused]': pauseOnHover,
+                '[animation-direction:reverse]': reverse,
+              }
+            )}
           >
             {children}
           </div>

diff --git a/nx-dev/ui-common/src/lib/default-layout.tsx b/nx-dev/ui-common/src/lib/default-layout.tsx
@@ -24,7 +24,7 @@ export function DefaultLayout({
           aria-hidden="true"
         >
           <div
-            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[46.125rem] -translate-x-1/2 rotate-[35deg] bg-gradient-to-tr from-[#9333ea] to-[#3b82f6] opacity-25 sm:left-[calc(70%-30rem)] sm:w-[92.1875rem] dark:from-[#3b82f6] dark:to-[#9333ea] dark:opacity-15"
+            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[46.125rem] -translate-x-1/2 rotate-[35deg] bg-gradient-to-tr from-[#9333ea] to-[#3b82f6] opacity-10 sm:left-[calc(70%-30rem)] sm:w-[92.1875rem] dark:from-[#3b82f6] dark:to-[#9333ea] dark:opacity-15"
             style={{
               clipPath:
                 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 95.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 67.5% 76.7%, 0.1% 64.9%, 77.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 84.1% 44.1%)',

diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -7,29 +7,19 @@ import {
 } from '@heroicons/react/24/outline';
 import cx from 'classnames';
 import Link from 'next/link';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, ReactElement, useEffect, useState } from 'react';
 import { ButtonLink, ButtonLinkProps } from '../button';
-import {
-  companyItems,
-  eventItems,
-  featuresItems,
-  learnItems,
-  ossProducts,
-  resourceMenuItems,
-  productsMenuItems,
-  enterpriseResourcesMenuItems,
-} from './menu-items';
+import { resourceMenuItems } from './menu-items';
 import { MobileMenuItem } from './mobile-menu-item';
 import { SectionsMenu } from './sections-menu';
-import { TwoColumnsMenu } from './two-columns-menu';
 import { AlgoliaSearch } from '@nx/nx-dev/feature-search';
-import { GitHubIcon, NxCloudAnimatedIcon, NxIcon } from '@nx/nx-dev/ui-icons';
+import { GitHubIcon, NxIcon } from '@nx/nx-dev/ui-icons';
 
 interface HeaderProps {
   ctaButtons?: ButtonLinkProps[];
 }
 
-export function Header({ ctaButtons }: HeaderProps): JSX.Element {
+export function Header({ ctaButtons }: HeaderProps): ReactElement {
   let [isOpen, setIsOpen] = useState(false);
 
   // We need to close the popover if the route changes or the window is resized to prevent the popover from being stuck open.
@@ -70,7 +60,7 @@ export function Header({ ctaButtons }: HeaderProps): JSX.Element {
         }}
       />
       {/*DESKTOP*/}
-      <div className="mx-auto mt-2 hidden w-full max-w-7xl items-center justify-between space-x-10 rounded-xl border border-slate-200/40 bg-white/70 px-4 py-2 shadow-lg backdrop-blur-xl backdrop-saturate-150 lg:flex dark:border-slate-800/60 dark:bg-slate-950/40">
+      <div className="mx-auto mt-2 hidden w-full max-w-7xl items-center justify-between space-x-10 rounded-xl border border-slate-200/40 bg-white/70 px-4 py-2 shadow-sm backdrop-blur-xl backdrop-saturate-150 lg:flex dark:border-slate-800/60 dark:bg-slate-950/40">
         {/*PRIMARY NAVIGATION*/}
         <div className="flex flex-shrink-0 text-sm">
           {/*LOGO*/}

diff --git a/nx-dev/ui-enterprise/src/index.ts b/nx-dev/ui-enterprise/src/index.ts
@@ -1,10 +1,11 @@
 export * from './lib/call-to-action';
-export * from './lib/download-case-study';
-export * from './lib/download-ebook';
-export * from './lib/enterprise-addons';
 export * from './lib/hero';
-export * from './lib/metrics-and-customers';
-export * from './lib/scale-your-people';
 export * from './lib/security';
-export * from './lib/trusted-by';
-export * from './lib/solve-your-ci';
+export * from './lib/customer-logos';
+export * from './lib/customer-metrics';
+export * from './lib/make-your-ci-fast';
+export * from './lib/hetzner-cloud-testimonial';
+export * from './lib/vmware-testimonial';
+export * from './lib/scale-your-organization';
+export * from './lib/testimonial-carousel';
+export * from './lib/download-case-study';
diff --git a/nx-dev/ui-enterprise/src/lib/bento-grid.tsx b/nx-dev/ui-enterprise/src/lib/bento-grid.tsx
diff --git a/nx-dev/ui-enterprise/src/lib/call-to-action.tsx b/nx-dev/ui-enterprise/src/lib/call-to-action.tsx
@@ -1,11 +1,17 @@
 import Link from 'next/link';
+import { ReactElement } from 'react';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
-export function CallToAction(): JSX.Element {
+export function CallToAction(): ReactElement {
   return (
-    <section className="relative isolate px-6 py-32 sm:py-40 lg:px-8">
+    <section
+      className="relative isolate px-6 py-32 sm:py-40 lg:px-8"
+      aria-labelledby="section-cta-heading"
+    >
       <svg
-        className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
+        className="absolute inset-0 -z-10 h-full w-full rotate-180 stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
         aria-hidden="true"
+        focusable="false"
       >
         <defs>
           <pattern
@@ -41,7 +47,7 @@ export function CallToAction(): JSX.Element {
         aria-hidden="true"
       >
         <div
-          className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+          className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-10"
           style={{
             clipPath:
               'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
@@ -50,31 +56,44 @@ export function CallToAction(): JSX.Element {
       </div>
       <div className="mx-auto max-w-2xl text-center">
         <h2
-          id="cta"
+          id="section-cta-heading"
           className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white"
         >
-          Your organization's transformation
-          <br />
-          starts now
+          Get your hands dirty and try it out for yourself.
         </h2>
         <div className="mt-10">
           <Link
-            href="/contact/engineering"
-            title="Talk to the engineering team"
-            className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+            aria-label="Request a free trial"
+            href="/contact/sales"
             prefetch={false}
+            title="Request a free trial"
+            onClick={() =>
+              sendCustomEvent(
+                'request-trial-click',
+                'enterprise-bottom-cta',
+                'enterprise'
+              )
+            }
+            className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
           >
-            Talk to engineering
+            Request a free trial
           </Link>
           <p className="mt-6 italic">
-            Ready to talk terms?{' '}
+            Want to talk terms or see a demo?{' '}
             <Link
               href="/contact/sales"
-              title="Talk to the sales team"
+              title="Talk to the team"
               className="font-semibold underline"
               prefetch={false}
+              onClick={() =>
+                sendCustomEvent(
+                  'contact-team',
+                  'enterprise-bottom-cta',
+                  'enterprise'
+                )
+              }
             >
-              Speak directly to sales
+              Reach out to our team
             </Link>
             .
           </p>