From ccfcc4097f98018d8db9196d6001cb54a2475a60 Mon Sep 17 00:00:00 2001 From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com> Date: Fri, 16 May 2025 13:55:47 -0400 Subject: [PATCH] docs(nx-dev): add solutions sections and components (#31239) It adds a new "Solutions" section to the Nx Dev website with three targeted landing pages for different audiences: engineering teams, management teams platform teams, and leadership. It creates three new page files (engineering.tsx, management.tsx, leadership.tsx, platform.tsx) that showcase Nx's benefits through various UI components like heroes, testimonials, feature sections, and FAQs. Each page highlights specific value propositions - engineering focuses on developer efficiency and standards, platform emphasizes reliable CI/CD scaling, and leadership addresses ROI and risk reduction. The navigation is updated with a new "Solutions" dropdown menu in both desktop and mobile views, with corresponding menu items defined. The solutions pages include consistent sections like customer logos, calls-to-action, testimonials, and feature breakdowns that highlight Nx's capabilities for different stakeholders. --- nx-dev/nx-dev/pages/solutions/engineering.tsx | 82 +++++++ nx-dev/nx-dev/pages/solutions/leadership.tsx | 86 ++++++++ nx-dev/nx-dev/pages/solutions/management.tsx | 85 +++++++ nx-dev/nx-dev/pages/solutions/platform.tsx | 85 +++++++ nx-dev/ui-common/src/lib/headers/header.tsx | 92 +++++++- .../ui-common/src/lib/headers/menu-items.ts | 45 +++- .../src/lib/headers/mobile-menu-item.tsx | 8 +- nx-dev/ui-enterprise/src/index.ts | 23 ++ .../engineering/all-speed-no-stress.tsx | 140 ++++++++++++ ...eveloper-experience-that-works-for-you.tsx | 135 ++++++++++++ .../solutions-engineering-hero.tsx | 206 +++++++++++++++++ .../solutions-engineering-testimonials.tsx | 103 +++++++++ ...uild-a-modern-engineering-organization.tsx | 101 +++++++++ .../lib/solutions/leadership/maximize-roi.tsx | 84 +++++++ .../lib/solutions/leadership/scale-safely.tsx | 87 ++++++++ .../leadership/solutions-leadership-hero.tsx | 208 ++++++++++++++++++ .../solutions-leadership-testimonials.tsx | 103 +++++++++ .../management/cut-down-engineering-waste.tsx | 99 +++++++++ .../management/keep-teams-aligned.tsx | 113 ++++++++++ .../solutions/management/scale-with-ease.tsx | 84 +++++++ .../management/solutions-management-hero.tsx | 206 +++++++++++++++++ .../solutions-management-testimonials.tsx | 104 +++++++++ .../platform/cost-efficient-compute.tsx | 105 +++++++++ .../easy-to-adapt-easy-to-maintain.tsx | 114 ++++++++++ .../solutions/platform/reliable-by-design.tsx | 116 ++++++++++ .../platform/solutions-platform-hero.tsx | 207 +++++++++++++++++ .../solutions-platform-testimonials.tsx | 103 +++++++++ .../solutions-bottom-call-to-action.tsx | 89 ++++++++ .../src/lib/solutions/solutions-faq.tsx | 150 +++++++++++++ .../solutions-top-call-to-action.tsx | 20 ++ 30 files changed, 3175 insertions(+), 8 deletions(-) create mode 100644 nx-dev/nx-dev/pages/solutions/engineering.tsx create mode 100644 nx-dev/nx-dev/pages/solutions/leadership.tsx create mode 100644 nx-dev/nx-dev/pages/solutions/management.tsx create mode 100644 nx-dev/nx-dev/pages/solutions/platform.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/engineering/all-speed-no-stress.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/engineering/developer-experience-that-works-for-you.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/engineering/solutions-engineering-hero.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/engineering/solutions-engineering-testimonials.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/leadership/build-a-modern-engineering-organization.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/leadership/maximize-roi.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/leadership/scale-safely.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/leadership/solutions-leadership-hero.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/leadership/solutions-leadership-testimonials.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/management/cut-down-engineering-waste.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/management/keep-teams-aligned.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/management/scale-with-ease.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/management/solutions-management-hero.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/management/solutions-management-testimonials.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/platform/cost-efficient-compute.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/platform/easy-to-adapt-easy-to-maintain.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/platform/reliable-by-design.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/platform/solutions-platform-hero.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/platform/solutions-platform-testimonials.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/solutions-bottom-call-to-action.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/solutions-faq.tsx create mode 100644 nx-dev/ui-enterprise/src/lib/solutions/solutions-top-call-to-action.tsx diff --git a/nx-dev/nx-dev/pages/solutions/engineering.tsx b/nx-dev/nx-dev/pages/solutions/engineering.tsx new file mode 100644 index 0000000000..9dbe1bb646 --- /dev/null +++ b/nx-dev/nx-dev/pages/solutions/engineering.tsx @@ -0,0 +1,82 @@ +import { useRouter } from 'next/router'; +import { NextSeo } from 'next-seo'; +import { ButtonLinkProps, DefaultLayout } from '@nx/nx-dev/ui-common'; +import { + AllSpeedNoStress, + CustomerLogos, + DeveloperExperienceThatWorksForYou, + HetznerCloudTestimonial, + SolutionsBottomCallToAction, + SolutionsEngineeringHero, + SolutionsEngineeringTestimonials, + SolutionsFaq, + SolutionsTopCallToAction, +} from '@nx/nx-dev/ui-enterprise'; +import { type ReactElement } from 'react'; + +export function EnterpriseSolutionsEngineering(): ReactElement { + const router = useRouter(); + + const headerCTAConfig: ButtonLinkProps[] = [ + { + href: '/contact', + variant: 'secondary', + size: 'small', + title: 'Contact us', + children: 'Contact us', + }, + ]; + + return ( + <> + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); +} + +export default EnterpriseSolutionsEngineering; diff --git a/nx-dev/nx-dev/pages/solutions/leadership.tsx b/nx-dev/nx-dev/pages/solutions/leadership.tsx new file mode 100644 index 0000000000..419ea9c59f --- /dev/null +++ b/nx-dev/nx-dev/pages/solutions/leadership.tsx @@ -0,0 +1,86 @@ +import { useRouter } from 'next/router'; +import { NextSeo } from 'next-seo'; +import { ButtonLinkProps, DefaultLayout } from '@nx/nx-dev/ui-common'; +import { + BuildAModernEngineeringOrganization, + CustomerLogos, + HetznerCloudTestimonial, + MaximizeRoi, + ScaleSafely, + SolutionsBottomCallToAction, + SolutionsFaq, + SolutionsLeadershipHero, + SolutionsLeadershipTestimonials, + SolutionsTopCallToAction, +} from '@nx/nx-dev/ui-enterprise'; +import { type ReactElement } from 'react'; + +export function EnterpriseSolutionsLeadership(): ReactElement { + const router = useRouter(); + + const headerCTAConfig: ButtonLinkProps[] = [ + { + href: '/contact', + variant: 'secondary', + size: 'small', + title: 'Contact us', + children: 'Contact us', + }, + ]; + + return ( + <> + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); +} + +export default EnterpriseSolutionsLeadership; diff --git a/nx-dev/nx-dev/pages/solutions/management.tsx b/nx-dev/nx-dev/pages/solutions/management.tsx new file mode 100644 index 0000000000..497fffcad3 --- /dev/null +++ b/nx-dev/nx-dev/pages/solutions/management.tsx @@ -0,0 +1,85 @@ +import { useRouter } from 'next/router'; +import { NextSeo } from 'next-seo'; +import { ButtonLinkProps, DefaultLayout } from '@nx/nx-dev/ui-common'; +import { + CustomerLogos, + CutDownEngineeringWaste, + HetznerCloudTestimonial, + KeepTeamsAligned, + ScaleWithEase, + SolutionsManagementHero, + SolutionsBottomCallToAction, + SolutionsManagementTestimonials, + SolutionsFaq, + SolutionsTopCallToAction, +} from '@nx/nx-dev/ui-enterprise'; +import { type ReactElement } from 'react'; + +export function EnterpriseSolutionsManagement(): ReactElement { + const router = useRouter(); + + const headerCTAConfig: ButtonLinkProps[] = [ + { + href: '/contact', + variant: 'secondary', + size: 'small', + title: 'Contact us', + children: 'Contact us', + }, + ]; + + return ( + <> + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); +} + +export default EnterpriseSolutionsManagement; diff --git a/nx-dev/nx-dev/pages/solutions/platform.tsx b/nx-dev/nx-dev/pages/solutions/platform.tsx new file mode 100644 index 0000000000..d8bb98b3fd --- /dev/null +++ b/nx-dev/nx-dev/pages/solutions/platform.tsx @@ -0,0 +1,85 @@ +import { useRouter } from 'next/router'; +import { NextSeo } from 'next-seo'; +import { ButtonLinkProps, DefaultLayout } from '@nx/nx-dev/ui-common'; +import { + CostEfficientCompute, + CustomerLogos, + EasyToAdoptEasyToMaintain, + HetznerCloudTestimonial, + ReliableByDesign, + SolutionsBottomCallToAction, + SolutionsFaq, + SolutionsPlatformHero, + SolutionsPlatformTestimonials, + SolutionsTopCallToAction, +} from '@nx/nx-dev/ui-enterprise'; +import { type ReactElement } from 'react'; + +export function EnterpriseSolutionsPlatform(): ReactElement { + const router = useRouter(); + + const headerCTAConfig: ButtonLinkProps[] = [ + { + href: '/contact', + variant: 'secondary', + size: 'small', + title: 'Contact us', + children: 'Contact us', + }, + ]; + + return ( + <> + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); +} + +export default EnterpriseSolutionsPlatform; diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx index 6fbeb81d93..31397313f0 100644 --- a/nx-dev/ui-common/src/lib/headers/header.tsx +++ b/nx-dev/ui-common/src/lib/headers/header.tsx @@ -25,7 +25,11 @@ import { useState, } from 'react'; import { ButtonLink, ButtonLinkProps } from '../button'; -import { enterpriseItems, resourceMenuItems } from './menu-items'; +import { + enterpriseItems, + resourceMenuItems, + solutionsItems, +} from './menu-items'; import { MobileMenuItem } from './mobile-menu-item'; import { SectionsMenu } from './sections-menu'; import { AlgoliaSearch } from '@nx/nx-dev/feature-search'; @@ -120,6 +124,50 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement { > Blog + {/*SOLUTIONS*/} + + {({ open }) => ( + <> + + + Solutions + + + + + + + + + + )} + {/*RESOURCES*/} {({ open }) => ( @@ -186,6 +234,7 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement { Pricing
+ {/*ENTERPRISE*/} {({ open }) => ( <> @@ -379,7 +428,46 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement { > Blog - {/*Resources*/} + {/*SOLUTIONS*/} + + {({ open }) => ( + <> + + Solutions + + + {Object.values(solutionsItems) + .flat() + .map((item) => ( + + ))} + + + )} + + {/*RESOURCES*/} {({ open }) => ( <> 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 14b895fca6..ad25098842 100644 --- a/nx-dev/ui-common/src/lib/headers/menu-items.ts +++ b/nx-dev/ui-common/src/lib/headers/menu-items.ts @@ -19,6 +19,9 @@ import { LifebuoyIcon, BookOpenIcon, ShieldCheckIcon, + ServerStackIcon, + ArrowTrendingUpIcon, + CommandLineIcon, } from '@heroicons/react/24/outline'; import { FC, SVGProps } from 'react'; import { DiscordIcon } from '../discord-icon'; @@ -233,6 +236,44 @@ export const eventItems: MenuItem[] = [ }, ]; +export const solutionsItems: MenuItem[] = [ + { + name: 'Developers', + description: + 'Accelerate your CI with Nx: smart cache sharing, flaky-test auto‑retries, parallel runs & dynamic agents.', + href: '/solutions/engineering', + icon: CommandLineIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Engineering Managers', + description: + 'Boost efficiency with powerful monorepos and intelligent CI. Build, test, and deploy faster, freeing teams to innovate.', + href: '/solutions/management', + icon: BoltIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Platform & DevOps Teams', + description: + 'Get dependable, out-of-the-box CI that scales effortlessly. Cut costs and boost speed with smart caching, distribution, and enhanced security.', + icon: ServerStackIcon, + href: '/solutions/platform', + isNew: false, + isHighlight: false, + }, + { + name: 'CTOs & VPs of Engineering', + description: + 'Supercharge engineering ROI with faster delivery, lower CI costs, and fewer risks. Scale safely and future-proof your stack.', + icon: ArrowTrendingUpIcon, + href: '/solutions/leadership', + isNew: false, + isHighlight: false, + }, +]; export const companyItems: MenuItem[] = [ { name: 'About Us', @@ -261,9 +302,9 @@ export const companyItems: MenuItem[] = [ ]; export const enterpriseItems: MenuItem[] = [ { - name: 'Solutions', + name: 'Overview', description: - "Accelerate your organization's journey to tighter collaboration, better developer experience, and speed.", + "Accelerate your organization's journey to tighter collaboration, better developer experience, and speed…lots of speed.", href: '/enterprise', icon: BuildingOfficeIcon, isNew: false, diff --git a/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx b/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx index f64b2c1c88..bdc13f0ae6 100644 --- a/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx +++ b/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx @@ -1,4 +1,4 @@ -import { ElementType } from 'react'; +import type { ElementType, ReactElement } from 'react'; import type { MenuItem } from './menu-items'; import cx from 'classnames'; import Link from 'next/link'; @@ -12,21 +12,21 @@ export function MobileMenuItem({ as?: ElementType; className?: string; item: MenuItem; -}): JSX.Element { +}): ReactElement { const hasExternalLink = item.href.startsWith('http') || item.href.startsWith('//'); const Tag = as; return ( {item.icon ? ( -