From c5a60c7523d84f43fedabd23f34a80f9b7de4565 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Wed, 20 Nov 2024 11:16:29 +0100
Subject: [PATCH 1/6] feat(nx-dev): update top-level navbar

---
 nx-dev/ui-common/src/lib/headers/header.tsx | 48 +++++++++++++++------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 64739266cf7af..3e4f4cc2c20f8 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -70,7 +70,7 @@ export function Header(): JSX.Element {
           >
             <h2 className="sr-only">Main navigation</h2>
             {/*FEATURES*/}
-            <Popover className="relative">
+            {/* <Popover className="relative">
               {({ open }) => (
                 <>
                   <Popover.Button
@@ -112,9 +112,9 @@ export function Header(): JSX.Element {
                   </Transition>
                 </>
               )}
-            </Popover>
+            </Popover> */}
             {/*SOLUTIONS*/}
-            <Popover className="relative">
+            {/* <Popover className="relative">
               {({ open }) => (
                 <>
                   <Popover.Button
@@ -157,7 +157,7 @@ export function Header(): JSX.Element {
                   </Transition>
                 </>
               )}
-            </Popover>
+            </Popover> */}
             <Link
               href="/getting-started/intro"
               title="Documentation"
@@ -174,14 +174,6 @@ export function Header(): JSX.Element {
             >
               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 }) => (
@@ -222,6 +214,38 @@ export function Header(): JSX.Element {
                 </>
               )}
             </Popover>
+            <Link
+              href="/nx-cloud"
+              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}
+            >
+              Nx Cloud
+            </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}
+            >
+              Pricing
+            </Link>
+            <Link
+              href="/powerpack"
+              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}
+            >
+              Powerpack
+            </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="opacity-50 hover:opacity-100">
               <AlgoliaSearch tiny={true} />
             </div>

From 8d757535fc773432fa941699a6ac787b10cf3099 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Wed, 20 Nov 2024 11:28:15 +0100
Subject: [PATCH 2/6] feat(nx-dev): navbar - victor proposal

---
 nx-dev/ui-common/src/lib/headers/header.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 3e4f4cc2c20f8..69bf18ccf6208 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -214,6 +214,7 @@ export function Header(): JSX.Element {
                 </>
               )}
             </Popover>
+            <div className="hidden h-6 w-px bg-slate-200 md:block dark:bg-slate-700" />
             <Link
               href="/nx-cloud"
               title="Nx Cloud"
@@ -230,6 +231,7 @@ export function Header(): JSX.Element {
             >
               Pricing
             </Link>
+            <div className="hidden h-6 w-px bg-slate-200 md:block dark:bg-slate-700" />
             <Link
               href="/powerpack"
               title="Nx Cloud"

From 790f0783326da014d6b4c2b13ca5125f6483d01f Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Wed, 20 Nov 2024 12:04:51 +0100
Subject: [PATCH 3/6] feat(nx-dev): draft new navbar

---
 nx-dev/ui-common/src/index.ts                 |   4 +-
 .../src/lib/headers/documentation-header.tsx  |   4 +-
 nx-dev/ui-common/src/lib/headers/header.tsx   | 125 +++++++++++-------
 .../ui-common/src/lib/headers/menu-items.ts   |  83 +++++++++++-
 4 files changed, 161 insertions(+), 55 deletions(-)

diff --git a/nx-dev/ui-common/src/index.ts b/nx-dev/ui-common/src/index.ts
index 9f850a6020323..c1bcaa98ca851 100644
--- a/nx-dev/ui-common/src/index.ts
+++ b/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';
diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
index dc9ef5ddcbefd..1466a97bd2df0 100644
--- a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
+++ b/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>
                 </>
diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 69bf18ccf6208..2cb2c683f5768 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -14,9 +14,10 @@ import {
   eventItems,
   featuresItems,
   learnItems,
-  solutions,
+  ossProducts,
   resourceMenuItems,
-  solutionsMenuItems,
+  productsMenuItems,
+  enterpriseResourcesMenuItems,
 } from './menu-items';
 import { MobileMenuItem } from './mobile-menu-item';
 import { SectionsMenu } from './sections-menu';
@@ -113,8 +114,65 @@ export function Header(): JSX.Element {
                 </>
               )}
             </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">
+            <Popover className="relative">
               {({ open }) => (
                 <>
                   <Popover.Button
@@ -129,7 +187,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,29 +210,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>
-            {/*RESOURCES*/}
+            </Popover>
             <Popover className="relative">
               {({ open }) => (
                 <>
@@ -184,8 +225,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(
@@ -207,38 +253,20 @@ 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>
-            <div className="hidden h-6 w-px bg-slate-200 md:block dark:bg-slate-700" />
-            <Link
-              href="/nx-cloud"
-              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}
-            >
-              Nx Cloud
-            </Link>
             <Link
               href="/pricing"
-              title="Nx Cloud"
+              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}
             >
-              Pricing
-            </Link>
-            <div className="hidden h-6 w-px bg-slate-200 md:block dark:bg-slate-700" />
-            <Link
-              href="/powerpack"
-              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}
-            >
-              Powerpack
+              CI Pricing
             </Link>
             <Link
               href="/enterprise"
@@ -248,6 +276,7 @@ export function Header(): JSX.Element {
             >
               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>
@@ -459,7 +488,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}
diff --git a/nx-dev/ui-common/src/lib/headers/menu-items.ts b/nx-dev/ui-common/src/lib/headers/menu-items.ts
index 15ec00dd8a68d..c4d25e8147994 100644
--- a/nx-dev/ui-common/src/lib/headers/menu-items.ts
+++ b/nx-dev/ui-common/src/lib/headers/menu-items.ts
@@ -16,6 +16,7 @@ import {
   MicrophoneIcon,
   VideoCameraIcon,
   CheckBadgeIcon,
+  BookOpenIcon,
 } from '@heroicons/react/24/outline';
 import { FC, SVGProps } from 'react';
 import { DiscordIcon } from '../discord-icon';
@@ -126,7 +127,28 @@ export const featuresItems: Record<string, MenuItem[]> = {
     },
   ],
 };
-export const solutions: MenuItem[] = [
+export const ossProducts: MenuItem[] = [
+  {
+    name: 'Nx',
+    description:
+      'End-to-end solution for smart, efficient and maintainable CI.',
+    href: '/docs',
+    icon: null,
+    isNew: false,
+    isHighlight: false,
+  },
+  {
+    name: 'Nx Console',
+    description:
+      'A suite of paid extensions for the Nx CLI specifically designed for enterprises.',
+    href: '/getting-started/editor-setup',
+    icon: null,
+    isNew: false,
+    isHighlight: false,
+  },
+];
+
+export const enterpriseProducts: MenuItem[] = [
   {
     name: 'Nx Cloud',
     description:
@@ -258,8 +280,9 @@ export const companyItems: MenuItem[] = [
     isHighlight: false,
   },
 ];
-export const solutionsMenuItems = {
-  'Helping you grow': solutions,
+export const productsMenuItems = {
+  'Open Source': ossProducts,
+  Enterprises: enterpriseProducts,
   // 'Use cases': useCaseItems
 };
 export const resourceMenuItems = {
@@ -267,3 +290,57 @@ export const resourceMenuItems = {
   Events: eventItems,
   Company: companyItems,
 };
+
+// Add new sections for enterprise resources
+export const caseStudiesItems: MenuItem[] = [
+  {
+    name: 'Banking Case Study',
+    description: 'See how a $7B bank saved money and reduced CI times by 62%.',
+    href: '/case-studies/migrations',
+    icon: ArrowUpCircleIcon,
+    isNew: false,
+    isHighlight: false,
+  },
+  {
+    name: 'Financial Institution Case Study',
+    description:
+      '$28B Fortune 500 financial institution reduces CI times by 79% with Nx Cloud.',
+    href: '/case-studies/ci-cd',
+    icon: BoltIcon,
+    isNew: false,
+    isHighlight: false,
+  },
+];
+
+export const customerStoriesItems: MenuItem[] = [
+  {
+    name: 'How we help enterprises succeed',
+    description: 'How we collaborate with enterprises to help them succeed.',
+    href: '/customer-stories/testimonials',
+    icon: BookOpenIcon,
+    isNew: false,
+    isHighlight: false,
+  },
+  {
+    name: 'Video Testimonials',
+    description: 'Stories from our enterprise customers.',
+    href: '/customer-stories/testimonials',
+    icon: UserGroupIcon,
+    isNew: false,
+    isHighlight: false,
+  },
+  {
+    name: 'Our Customers',
+    description: 'How large enterprises leverage Nx at scale.',
+    href: '/customers',
+    icon: BuildingOfficeIcon,
+    isNew: false,
+    isHighlight: false,
+  },
+];
+
+// Add the new menu sections
+export const enterpriseResourcesMenuItems = {
+  'Case Studies': caseStudiesItems,
+  Stories: customerStoriesItems,
+};

From 7803723997a35dd89b230e9f257a019f577ae0a4 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Thu, 21 Nov 2024 12:25:20 +0100
Subject: [PATCH 4/6] feat(nx-dev): adjust labels on pricing page

---
 nx-dev/ui-pricing/src/lib/plans-display.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nx-dev/ui-pricing/src/lib/plans-display.tsx b/nx-dev/ui-pricing/src/lib/plans-display.tsx
index 945b5312f0c98..bcf9ded06fbde 100644
--- a/nx-dev/ui-pricing/src/lib/plans-display.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans-display.tsx
@@ -57,7 +57,7 @@ export function PlansDisplay(): ReactElement {
                     }
                     className="w-full"
                   >
-                    Get started
+                    Start for free
                   </ButtonLink>
                 </div>
                 <ul className="mt-4 divide-y divide-slate-200 text-sm dark:divide-slate-800">
@@ -161,7 +161,7 @@ export function PlansDisplay(): ReactElement {
                   }
                   className="w-full"
                 >
-                  Get started
+                  $0 to start
                 </ButtonLink>
               </div>
               <ul className="mt-4 divide-y divide-slate-200 text-sm dark:divide-slate-800">
@@ -280,7 +280,7 @@ export function PlansDisplay(): ReactElement {
                   }
                   className="w-full"
                 >
-                  Learn more
+                  Request a trial
                 </ButtonLink>
               </div>
               <ul className="mt-4 divide-y divide-slate-200 text-sm dark:divide-slate-800">

From b9f9b66a22c6ce02b9772d5f68caba409cb26280 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Thu, 21 Nov 2024 12:57:11 +0100
Subject: [PATCH 5/6] feat(nx-dev): make request trial more apparent

---
 nx-dev/ui-cloud/src/lib/hero.tsx            |  2 +-
 nx-dev/ui-common/src/lib/headers/header.tsx | 14 ++++++++++++--
 nx-dev/ui-enterprise/src/lib/hero.tsx       | 16 ++++++++++++----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/nx-dev/ui-cloud/src/lib/hero.tsx b/nx-dev/ui-cloud/src/lib/hero.tsx
index 7740cbfeb0e9c..cfe7c9638ad0b 100644
--- a/nx-dev/ui-cloud/src/lib/hero.tsx
+++ b/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"
diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 2cb2c683f5768..9bbbf5a454d60 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -285,14 +285,24 @@ 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
+            {/* <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>
+            </Link> */}
+            <ButtonLink
+              href="/contact"
+              variant="primary"
+              size="small"
+              target="_blank"
+              title="Log in to your Nx Cloud Account"
+            >
+              {/* <NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" /> */}
+              <span>Try Nx Cloud for free</span>
+            </ButtonLink>
             <ButtonLink
               href="https://cloud.nx.app"
               variant="secondary"
diff --git a/nx-dev/ui-enterprise/src/lib/hero.tsx b/nx-dev/ui-enterprise/src/lib/hero.tsx
index 530caff564cee..5c311f93c860c 100644
--- a/nx-dev/ui-enterprise/src/lib/hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/hero.tsx
@@ -17,16 +17,24 @@ export function Hero(): JSX.Element {
             Accelerate your organization's journey to tighter collaboration,
             better developer experience, and speed…lots of speed.
           </SectionHeading>
-          <div className="mt-10">
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <ButtonLink
+              href="/contact/sales"
+              title="Request a free trial"
+              variant="primary"
+              size="default"
+            >
+              Request a free trial
+            </ButtonLink>
             <ButtonLink
               href="/contact/engineering"
               title="Talk to the engineering team"
-              variant="primary"
+              variant="secondary"
               size="default"
             >
               Talk to engineering
             </ButtonLink>
-            <p className="mt-6 italic">
+            {/* <p className="mt-6 italic">
               Ready to talk terms?{' '}
               <Link
                 href="/contact/sales"
@@ -37,7 +45,7 @@ export function Hero(): JSX.Element {
                 Speak directly to sales
               </Link>
               .
-            </p>
+            </p> */}
           </div>
         </div>
       </div>

From 71abe5172de03d4f7b3b67f5bac102831040c9a1 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Thu, 21 Nov 2024 13:08:13 +0100
Subject: [PATCH 6/6] feat(nx-dev): make navbar configurable

---
 nx-dev/nx-dev/app/pricing/page.tsx          | 19 +++++-
 nx-dev/nx-dev/pages/enterprise.tsx          | 12 +++-
 nx-dev/ui-common/src/lib/default-layout.tsx |  6 +-
 nx-dev/ui-common/src/lib/headers/header.tsx | 68 ++++++++++++---------
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/nx-dev/nx-dev/app/pricing/page.tsx b/nx-dev/nx-dev/app/pricing/page.tsx
index ccea644bc7f32..4fda072e0e58f 100644
--- a/nx-dev/nx-dev/app/pricing/page.tsx
+++ b/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" />
diff --git a/nx-dev/nx-dev/pages/enterprise.tsx b/nx-dev/nx-dev/pages/enterprise.tsx
index 3d663433c2478..97a5b0ad005de 100644
--- a/nx-dev/nx-dev/pages/enterprise.tsx
+++ b/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>
diff --git a/nx-dev/ui-common/src/lib/default-layout.tsx b/nx-dev/ui-common/src/lib/default-layout.tsx
index 67e131d9e8772..a27b48018de99 100644
--- a/nx-dev/ui-common/src/lib/default-layout.tsx
+++ b/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"
diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 9bbbf5a454d60..f6982fe3e98c8 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -8,7 +8,7 @@ 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,
@@ -25,7 +25,13 @@ 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.
@@ -43,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
@@ -285,34 +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="/contact"
-              variant="primary"
-              size="small"
-              target="_blank"
-              title="Log in to your Nx Cloud Account"
-            >
-              {/* <NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" /> */}
-              <span>Try Nx Cloud for free</span>
-            </ButtonLink>
-            <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"