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

Author: juristr

docs/blog/2024-10-25-sports-retailer-success.md

@@ -2,7 +2,7 @@
 title: Improve your architecture and CI pipeline times with Nx projects
 slug: improve-architecture-and-ci-times-with-projects
 authors: [Philip Fulcher]
-tags: [nx, enterprise]
+tags: [nx, 'customer story']
 cover_image: '/blog/images/2024-10-25/header.avif'
 pinned: true
 ---

nx-dev/nx-dev/app/blog/[slug]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata, ResolvingMetadata } from 'next';
 import { blogApi } from '../../../lib/blog.api';
 import { BlogDetails } from '@nx/nx-dev/ui-blog';
 import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import { tryNxCloudForFree } from '../../../lib/components/headerCtaConfigs';
 
 interface BlogPostDetailProps {
   params: { slug: string };
@@ -44,12 +45,13 @@ export async function generateStaticParams() {
 export default async function BlogPostDetail({
   params: { slug },
 }: BlogPostDetailProps) {
+  const ctaHeaderConfig = [tryNxCloudForFree];
   const blog = await blogApi.getBlogPostBySlug(slug);
   return blog ? (
     <>
       {/* This empty div is necessary as app router does not automatically scroll on route changes */}
       <div></div>
-      <DefaultLayout>
+      <DefaultLayout headerCTAConfig={ctaHeaderConfig}>
         <BlogDetails post={blog} />
       </DefaultLayout>
     </>

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

@@ -3,6 +3,10 @@ import { blogApi } from '../../lib/blog.api';
 import { BlogContainer } from '@nx/nx-dev/ui-blog';
 import { DefaultLayout } from '@nx/nx-dev/ui-common';
 import { Suspense } from 'react';
+import {
+  requestFreeTrial,
+  tryNxCloudForFree,
+} from '../../lib/components/headerCtaConfigs';
 
 export const metadata: Metadata = {
   title: 'Nx Blog - Updates from the Nx & Nx Cloud team',
@@ -34,11 +38,13 @@ async function getBlogTags() {
 }
 
 export default async function BlogIndex() {
+  const ctaHeaderConfig = [tryNxCloudForFree];
+
   const blogs = await getBlogs();
   const tags = await getBlogTags();
   return (
     <Suspense>
-      <DefaultLayout>
+      <DefaultLayout headerCTAConfig={ctaHeaderConfig}>
         <BlogContainer blogPosts={blogs} tags={tags} />
       </DefaultLayout>
     </Suspense>

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

@@ -9,7 +9,11 @@ import {
   Statistics,
 } from '@nx/nx-dev/ui-cloud';
 
-import { CallToAction, DefaultLayout } from '@nx/nx-dev/ui-common';
+import {
+  ButtonLinkProps,
+  CallToAction,
+  DefaultLayout,
+} from '@nx/nx-dev/ui-common';
 
 import type { Metadata } from 'next';
 
@@ -37,8 +41,18 @@ export const metadata: Metadata = {
 };
 
 export default function NxCloudPage(): JSX.Element {
+  const headerCTAConfig: ButtonLinkProps[] = [
+    {
+      href: '/pricing',
+      variant: 'primary',
+      size: 'small',
+      title: 'Get started for free',
+      children: 'Get started for free',
+    },
+  ];
+
   return (
-    <DefaultLayout>
+    <DefaultLayout headerCTAConfig={headerCTAConfig}>
       <Hero />
       <TrustedBy />
 

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

@@ -1,10 +1,11 @@
-import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import { ButtonLinkProps, DefaultLayout } from '@nx/nx-dev/ui-common';
 import {
   CallToAction,
   GetStarted,
   Hero,
   PowerpackFeatures,
 } from '@nx/nx-dev/ui-powerpack';
+import { contactButton } from '../../lib/components/headerCtaConfigs';
 
 import type { Metadata } from 'next';
 
@@ -32,8 +33,18 @@ export const metadata: Metadata = {
 };
 
 export default function NxPowerPackPage(): JSX.Element {
+  const headerCTAConfig: ButtonLinkProps[] = [
+    {
+      href: 'https://cloud.nx.app/powerpack/purchase?licenseBusinessType=small&utm_source=nx.dev&utm_medium=referral&utm_campaign=nx-powerpackurl',
+      variant: 'primary',
+      size: 'small',
+      title: 'Request a free trial',
+      children: 'Request a free trial',
+    },
+  ];
+
   return (
-    <DefaultLayout>
+    <DefaultLayout headerCTAConfig={headerCTAConfig}>
       <Hero />
 
       <div className="mt-32 scroll-mt-32 lg:mt-56" id="features">

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

@@ -12,6 +12,7 @@ import {
   Testimonials,
   TrustedBy,
 } from '@nx/nx-dev/ui-common';
+import { gotoAppButton } from '../../lib/components/headerCtaConfigs';
 
 export const metadata: Metadata = {
   title: 'Nx Cloud - Available Plans',
@@ -38,7 +39,7 @@ export const metadata: Metadata = {
 
 export default function PricingPage() {
   return (
-    <DefaultLayout>
+    <DefaultLayout headerCTAConfig={[gotoAppButton]}>
       <PlansDisplay />
       <div className="mt-18 lg:mt-32">
         <TrustedBy utmSource="pricingpage" utmCampaign="pricing" />

nx-dev/nx-dev/lib/components/headerCtaConfigs.tsx

@@ -0,0 +1,41 @@
+import { ButtonLinkProps } from '@nx/nx-dev/ui-common';
+import { NxCloudAnimatedIcon } from '@nx/nx-dev/ui-icons';
+
+export const requestFreeTrial: ButtonLinkProps = {
+  href: '/contact/sales',
+  variant: 'primary',
+  size: 'small',
+  title: 'Request a free trial',
+  children: 'Request a free trial',
+};
+
+export const tryNxCloudForFree: ButtonLinkProps = {
+  href: '/pricing',
+  variant: 'primary',
+  size: 'small',
+  title: 'Try Nx Cloud for free',
+  children: 'Try Nx Cloud for free',
+};
+
+export const gotoAppButton: ButtonLinkProps = {
+  href: 'https://nx.app/?utm_source=nx.dev&utm_medium=header-menu',
+  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>
+    </>
+  ),
+};
+
+export const contactButton: ButtonLinkProps = {
+  href: '/contact',
+  variant: 'secondary',
+  size: 'small',
+  target: '_blank',
+  title: 'Contact Us',
+  children: <span>Contact</span>,
+};

nx-dev/nx-dev/pages/customers.tsx

@@ -6,6 +6,7 @@ import {
   Hero,
   OssProjects,
 } from '@nx/nx-dev/ui-customers';
+import { tryNxCloudForFree } from '../lib/components/headerCtaConfigs';
 
 export function Customers(): JSX.Element {
   const router = useRouter();
@@ -33,7 +34,7 @@ export function Customers(): JSX.Element {
           type: 'website',
         }}
       />
-      <DefaultLayout>
+      <DefaultLayout headerCTAConfig={[tryNxCloudForFree]}>
         <div>
           <Hero />
         </div>

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

@@ -13,6 +13,7 @@ import {
   SolveYourCi,
 } from '@nx/nx-dev/ui-enterprise';
 import { TrialCallout } from '@nx/nx-dev/ui-pricing';
+import { requestFreeTrial } from '../lib/components/headerCtaConfigs';
 
 export function Enterprise(): JSX.Element {
   const router = useRouter();
@@ -40,7 +41,7 @@ export function Enterprise(): JSX.Element {
           type: 'website',
         }}
       />
-      <DefaultLayout>
+      <DefaultLayout headerCTAConfig={[requestFreeTrial]}>
         <div>
           <Hero />
         </div>

nx-dev/nx-dev/pages/index.tsx

@@ -8,8 +8,15 @@ import {
   TeamAndCommunity,
   WorkBetterAchieveMoreShipQuicker,
 } from '@nx/nx-dev/ui-home';
+import {
+  requestFreeTrial,
+  gotoAppButton,
+  contactButton,
+} from '../lib/components/headerCtaConfigs';
 
 export default function Index(): JSX.Element {
+  const headerCTAConfig = [contactButton];
+
   return (
     <>
       <NextSeo
@@ -34,7 +41,7 @@ export default function Index(): JSX.Element {
         }}
       />
       <h1 className="sr-only">Build system with advanced CI capabilities.</h1>
-      <DefaultLayout isHome>
+      <DefaultLayout isHome headerCTAConfig={headerCTAConfig}>
         <Hero />
         <div className="mt-16 lg:-mt-32">
           <Statistics />

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

@@ -7,6 +7,7 @@ import { ComponentProps, Fragment, useState } from 'react';
 import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import { MovingBorder } from '@nx/nx-dev/ui-animations';
 import Image from 'next/image';
+import { NxCloudAnimatedIcon } from '@nx/nx-dev/ui-icons';
 
 export function Hero(): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
@@ -31,7 +32,8 @@ export function Hero(): JSX.Element {
             variant="primary"
             size="default"
           >
-            Get started
+            <NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" />
+            <span>Go to app</span>
           </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/button.tsx

@@ -17,6 +17,12 @@ interface ButtonProps {
   children: ReactNode | ReactNode[];
 }
 
+export type ButtonLinkProps = ButtonProps & {
+  className?: string;
+  href: string;
+  title: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+
 const variantStyles: Record<AllowedVariants, string> = {
   primary:
     'bg-blue-500 dark:bg-sky-500 text-white group-hover:bg-blue-600 dark:group-hover:bg-sky-600 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:group-ring-offset-2',
@@ -99,11 +105,7 @@ export const ButtonLink = forwardRef(function (
     variant = 'primary',
     title = '',
     ...props
-  }: ButtonProps & {
-    className?: string;
-    href: string;
-    title: string;
-  } & AnchorHTMLAttributes<HTMLAnchorElement>,
+  }: ButtonLinkProps,
   ref: ForwardedRef<HTMLAnchorElement>
 ): JSX.Element {
   return (

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"