feat(nx-dev): update top-level navbar

nx-dev/nx-dev/app/pricing/page.tsx

@@ -38,7 +38,24 @@ export const metadata: Metadata = {
 
 export default function PricingPage() {
   return (
-    <DefaultLayout>
+    <DefaultLayout
+      headerCTAConfig={[
+        {
+          href: 'https://cloud.nx.app',
+          variant: 'primary',
+          size: 'small',
+          title: 'Try Nx Cloud for free',
+          children: <span>Try Nx Cloud for free</span>,
+        },
+        {
+          href: '/contact',
+          variant: 'secondary',
+          size: 'small',
+          title: 'Contact us',
+          children: <span>Contact us</span>,
+        },
+      ]}
+    >
       <PlansDisplay />
       <div className="mt-18 lg:mt-32">
         <TrustedBy utmSource="pricingpage" utmCampaign="pricing" />

nx-dev/nx-dev/pages/enterprise.tsx

@@ -40,7 +40,17 @@ export function Enterprise(): JSX.Element {
           type: 'website',
         }}
       />
-      <DefaultLayout>
+      <DefaultLayout
+        headerCTAConfig={[
+          {
+            href: '/contact/sales',
+            variant: 'primary',
+            size: 'small',
+            title: 'Request a free trial',
+            children: <span>Request a free trial</span>,
+          },
+        ]}
+      >
         <div>
           <Hero />
         </div>

nx-dev/ui-cloud/src/lib/hero.tsx

@@ -31,7 +31,7 @@ export function Hero(): JSX.Element {
             variant="primary"
             size="default"
           >
-            Get started
+            Get started for free
           </ButtonLink>
           <ButtonLink
             href="/ci/intro/ci-with-nx"

nx-dev/ui-common/src/index.ts

@@ -25,12 +25,12 @@ export * from './lib/square-dotted-pattern';
 export * from './lib/live-stream-notifier';
 
 export { resourceMenuItems } from './lib/headers/menu-items';
-export { solutionsMenuItems } from './lib/headers/menu-items';
+export { productsMenuItems as solutionsMenuItems } from './lib/headers/menu-items';
 export { eventItems } from './lib/headers/menu-items';
 export { learnItems } from './lib/headers/menu-items';
 export { companyItems } from './lib/headers/menu-items';
 export type { MenuItem } from './lib/headers/menu-items';
-export { solutions as plans } from './lib/headers/menu-items';
+export { ossProducts as plans } from './lib/headers/menu-items';
 export { featuresItems } from './lib/headers/menu-items';
 export { DefaultMenuItem } from './lib/headers/default-menu-item';
 export { MobileMenuItem } from './lib/headers/mobile-menu-item';

nx-dev/ui-common/src/lib/default-layout.tsx

@@ -1,21 +1,23 @@
 import { Footer } from './footer';
 import { Header } from './headers/header';
 import { PropsWithChildren } from 'react';
-import cx from 'classnames';
+import { ButtonLinkProps } from './button';
 
 export function DefaultLayout({
   isHome = false,
   children,
   hideHeader = false,
   hideFooter = false,
+  headerCTAConfig,
 }: {
   isHome?: boolean;
   hideHeader?: boolean;
   hideFooter?: boolean;
+  headerCTAConfig?: ButtonLinkProps[];
 } & PropsWithChildren): JSX.Element {
   return (
     <div className="w-full overflow-hidden dark:bg-slate-950">
-      {!hideHeader && <Header />}
+      {!hideHeader && <Header ctaButtons={headerCTAConfig} />}
       <div className="relative isolate">
         <div
           className="absolute inset-x-0 -top-40 -z-10 h-full transform-gpu overflow-hidden blur-3xl sm:-top-80"

nx-dev/ui-common/src/lib/headers/documentation-header.tsx

@@ -15,7 +15,7 @@ import { TwoColumnsMenu } from './two-columns-menu';
 import {
   featuresItems,
   resourceMenuItems,
-  solutionsMenuItems,
+  productsMenuItems,
 } from './menu-items';
 import { SectionsMenu } from './sections-menu';
 import { DiscordIcon } from '../discord-icon';
@@ -307,7 +307,7 @@ export function DocumentationHeader({
                     leaveTo="opacity-0 translate-y-1"
                   >
                     <Popover.Panel className="absolute z-30 mt-3 w-max max-w-2xl">
-                      <SectionsMenu sections={solutionsMenuItems} />
+                      <SectionsMenu sections={productsMenuItems} />
                     </Popover.Panel>
                   </Transition>
                 </>

nx-dev/ui-common/src/lib/headers/header.tsx

@@ -8,23 +8,30 @@ import {
 import cx from 'classnames';
 import Link from 'next/link';
 import { Fragment, useEffect, useState } from 'react';
-import { ButtonLink } from '../button';
+import { ButtonLink, ButtonLinkProps } from '../button';
 import {
   companyItems,
   eventItems,
   featuresItems,
   learnItems,
-  solutions,
+  ossProducts,
   resourceMenuItems,
-  solutionsMenuItems,
+  productsMenuItems,
+  enterpriseResourcesMenuItems,
 } 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';
 
-export function Header(): JSX.Element {
+// Add props interface at the top of the file
+interface HeaderProps {
+  ctaButtons?: ButtonLinkProps[];
+}
+
+// Update the component signature to accept props
+export function Header({ ctaButtons }: HeaderProps): JSX.Element {
   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.
@@ -42,6 +49,33 @@ export function Header(): JSX.Element {
     };
   }, []);
 
+  // Default CTA buttons configuration
+  const defaultCtaButtons: ButtonLinkProps[] = [
+    {
+      href: '/contact',
+      variant: 'primary',
+      size: 'small',
+      target: '_blank',
+      title: 'Try Nx Cloud for free',
+      children: <span>Try Nx Cloud for free</span>,
+    },
+    {
+      href: 'https://cloud.nx.app',
+      variant: 'secondary',
+      size: 'small',
+      target: '_blank',
+      title: 'Log in to your Nx Cloud Account',
+      children: (
+        <>
+          <NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" />
+          <span>Go to app</span>
+        </>
+      ),
+    },
+  ];
+
+  const buttonsToRender = ctaButtons || defaultCtaButtons;
+
   return (
     <div className="fixed inset-x-0 top-0 isolate z-[5] flex px-4 print:hidden">
       <div
@@ -70,7 +104,7 @@ export function Header(): JSX.Element {
           >
             <h2 className="sr-only">Main navigation</h2>
             {/*FEATURES*/}
-            <Popover className="relative">
+            {/* <Popover className="relative">
               {({ open }) => (
                 <>
                   <Popover.Button
@@ -112,7 +146,64 @@ export function Header(): JSX.Element {
                   </Transition>
                 </>
               )}
+            </Popover> */}
+            <Link
+              href="/getting-started/intro"
+              title="Documentation"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
+            >
+              Docs
+            </Link>
+            <Link
+              href="/blog"
+              title="Blog"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
+            >
+              Blog
+            </Link>
+            {/*RESOURCES*/}
+            <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={cx(
+                      open ? 'text-blue-500 dark:text-sky-500' : '',
+                      'group inline-flex items-center px-3 py-2 font-medium leading-tight outline-0 dark:text-slate-200'
+                    )}
+                  >
+                    <span className="transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500">
+                      Resources
+                    </span>
+                    <ChevronDownIcon
+                      className={cx(
+                        open
+                          ? 'rotate-180 transform text-blue-500 dark:text-sky-500'
+                          : '',
+                        'ml-2 h-3 w-3 transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500'
+                      )}
+                      aria-hidden="true"
+                    />
+                  </Popover.Button>
+
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute left-60 z-10 mt-3 w-max max-w-2xl -translate-x-1/2 transform lg:left-20">
+                      <SectionsMenu sections={resourceMenuItems} />
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
             </Popover>
+            <div className="hidden h-6 w-px bg-slate-200 md:block dark:bg-slate-700" />
             {/*SOLUTIONS*/}
             <Popover className="relative">
               {({ open }) => (
@@ -129,7 +220,7 @@ export function Header(): JSX.Element {
                         'transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500'
                       )}
                     >
-                      Solutions
+                      Products
                     </span>
                     <ChevronDownIcon
                       className={cx(
@@ -152,37 +243,12 @@ export function Header(): JSX.Element {
                     leaveTo="opacity-0 translate-y-1"
                   >
                     <Popover.Panel className="absolute z-10 mt-3 w-max max-w-2xl">
-                      <SectionsMenu sections={solutionsMenuItems} />
+                      <SectionsMenu sections={productsMenuItems} />
                     </Popover.Panel>
                   </Transition>
                 </>
               )}
             </Popover>
-            <Link
-              href="/getting-started/intro"
-              title="Documentation"
-              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
-              prefetch={false}
-            >
-              Docs
-            </Link>
-            <Link
-              href="/blog"
-              title="Blog"
-              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
-              prefetch={false}
-            >
-              Blog
-            </Link>
-            <Link
-              href="/pricing"
-              title="Nx Cloud"
-              className="hidden gap-2 px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
-              prefetch={false}
-            >
-              CI Pricing
-            </Link>
-            {/*RESOURCES*/}
             <Popover className="relative">
               {({ open }) => (
                 <>
@@ -192,8 +258,13 @@ export function Header(): JSX.Element {
                       'group inline-flex items-center px-3 py-2 font-medium leading-tight outline-0 dark:text-slate-200'
                     )}
                   >
-                    <span className="transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500">
-                      Resources
+                    <span
+                      className={cx(
+                        open ? 'text-blue-500 dark:text-sky-500' : '',
+                        'transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500'
+                      )}
+                    >
+                      Explore
                     </span>
                     <ChevronDownIcon
                       className={cx(
@@ -215,13 +286,30 @@ export function Header(): JSX.Element {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute left-60 z-10 mt-3 w-max max-w-2xl -translate-x-1/2 transform lg:left-20">
-                      <SectionsMenu sections={resourceMenuItems} />
+                    <Popover.Panel className="absolute z-10 mt-3 w-max max-w-2xl">
+                      <SectionsMenu sections={enterpriseResourcesMenuItems} />
                     </Popover.Panel>
                   </Transition>
                 </>
               )}
             </Popover>
+            <Link
+              href="/pricing"
+              title="CI Pricing"
+              className="hidden gap-2 px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
+            >
+              CI Pricing
+            </Link>
+            <Link
+              href="/enterprise"
+              title="Nx Cloud"
+              className="hidden gap-2 px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
+            >
+              Enterprise
+            </Link>
+            <div className="hidden h-6 w-px bg-slate-200 md:block dark:bg-slate-700" />
             <div className="opacity-50 hover:opacity-100">
               <AlgoliaSearch tiny={true} />
             </div>
@@ -230,24 +318,9 @@ export function Header(): JSX.Element {
         {/*SECONDARY NAVIGATION*/}
         <div className="flex-shrink-0 text-sm">
           <nav className="flex items-center justify-center space-x-1">
-            <Link
-              className="hidden cursor-pointer px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
-              title="Contact Us"
-              href="/contact"
-              prefetch={false}
-            >
-              Contact
-            </Link>
-            <ButtonLink
-              href="https://cloud.nx.app"
-              variant="secondary"
-              size="small"
-              target="_blank"
-              title="Log in to your Nx Cloud Account"
-            >
-              <NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" />
-              <span>Go to app</span>
-            </ButtonLink>
+            {buttonsToRender.map((buttonProps, index) => (
+              <ButtonLink key={index} {...buttonProps} />
+            ))}
             <a
               title="Nx is open source, check the code on GitHub"
               href="https://github.com/nrwl/nx"
@@ -433,7 +506,7 @@ export function Header(): JSX.Element {
                                   />
                                 </Disclosure.Button>
                                 <Disclosure.Panel as="ul" className="space-y-1">
-                                  {solutions.map((item) => (
+                                  {ossProducts.map((item) => (
                                     <MobileMenuItem
                                       key={item.name}
                                       item={item}