feat(nx-dev): add customer case studies

Author: juristr

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

@@ -1,7 +1,6 @@
 import { CallToAction, DefaultLayout } from '@nx/nx-dev/ui-common';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-
 import {
   EnterpriseCustomers,
   Hero,
@@ -38,7 +37,7 @@ export function Customers(): JSX.Element {
         <div>
           <Hero />
         </div>
-        <div className="mt-16 lg:mt-16">
+        <div className="mt-16">
           <EnterpriseCustomers />
         </div>
         <div className="mt-16 lg:mt-32">

nx-dev/ui-customers/src/lib/enterprise-customers.tsx

@@ -44,6 +44,7 @@ import {
   VodafoneIcon,
   ZipariIcon,
 } from '@nx/nx-dev/ui-icons';
+import { DownloadCaseStudy } from '@nx/nx-dev/ui-enterprise';
 
 export function EnterpriseCustomers(): JSX.Element {
   return (
@@ -123,11 +124,18 @@ export function EnterpriseCustomers(): JSX.Element {
             >
               <ParamountIcon aria-hidden="true" className="h-14 w-14" />
             </a>
+            <div className="col-span-2 flex items-center justify-center p-6 md:col-span-2">
+              <DownloadCaseStudy
+                title="Banking Case Study"
+                description="$7B European bank cuts CI times by 62% and boosts team productivity."
+                buttonHref="https://go.nx.dev/bank-case-study"
+              />
+            </div>
             <a
               href="https://www.fedex.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-b border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-b border-l border-r border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <FedExIcon aria-hidden="true" className="h-28 w-28" />
             </a>
@@ -143,7 +151,7 @@ export function EnterpriseCustomers(): JSX.Element {
               href="https://zipari.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-b border-r border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-b border-r border-t border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <ZipariIcon aria-hidden="true" className="h-12 w-12" />
             </a>
@@ -152,7 +160,7 @@ export function EnterpriseCustomers(): JSX.Element {
               href="https://www.bill.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-x border-b border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-x border-b border-t border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <BillIcon aria-hidden="true" className="h-16 w-16" />
             </a>
@@ -192,7 +200,7 @@ export function EnterpriseCustomers(): JSX.Element {
               href="https://www.deloitte.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-b border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-b border-r border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <DeloitteIcon aria-hidden="true" className="h-28 w-28" />
             </a>
@@ -204,11 +212,18 @@ export function EnterpriseCustomers(): JSX.Element {
             >
               <VodafoneIcon aria-hidden="true" className="h-12 w-12" />
             </a>
+            <div className="col-span-2 flex items-center justify-center p-6 md:col-span-2">
+              <DownloadCaseStudy
+                title="Financial Institution Case Study"
+                description="$28B Fortune 500 financial institution reduces CI times by 79% with Nx Cloud."
+                buttonHref="https://go.nx.dev/financial-casestudy"
+              />
+            </div>
             <a
               href="https://www.t-mobile.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-b border-r border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-b border-l border-r border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <TMobileIcon aria-hidden="true" className="h-10 w-10" />
             </a>
@@ -224,15 +239,15 @@ export function EnterpriseCustomers(): JSX.Element {
               href="https://www.modernatx.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-b border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-b border-t border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <ModernaIcon aria-hidden="true" className="h-32 w-32" />
             </a>
             <a
               href="https://clickup.com"
               rel="noreferrer"
               target="_blank"
-              className="flex items-center justify-center border-x border-b border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
+              className="flex items-center justify-center border-x border-b border-t border-slate-200/20 p-12 transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
             >
               <ClickUpIcon aria-hidden="true" className="h-12 w-12" />
             </a>

nx-dev/ui-customers/src/lib/oss-projects.tsx

@@ -26,7 +26,7 @@ export function OssProjects(): JSX.Element {
           Popular OSS projects using Nx
         </SectionHeading>
 
-        <div className="mt-20">
+        <div className="mt-16">
           <dl className="grid grid-cols-2 justify-between sm:grid-cols-4">
             <a
               rel="noreferrer"

nx-dev/ui-enterprise/src/lib/download-case-study.tsx

@@ -1,28 +1,37 @@
 import { ButtonLink } from '@nx/nx-dev/ui-common';
 
-export function DownloadCaseStudy(): JSX.Element {
+export interface DownloadCaseStudyProps {
+  title: string;
+  description: string;
+  buttonHref: string;
+  buttonText?: string;
+}
+
+export function DownloadCaseStudy({
+  title,
+  description,
+  buttonHref,
+  buttonText = 'Download (pdf)',
+}: DownloadCaseStudyProps): JSX.Element {
   return (
     <div className="border border-slate-100 bg-white shadow-lg sm:rounded-lg dark:border-slate-800/60 dark:bg-slate-950">
       <div className="px-4 py-5 sm:p-6">
         <h3 className="text-base font-semibold leading-6 text-slate-900 dark:text-slate-100">
-          Our case study
+          {title}
         </h3>
         <div className="mt-2 sm:flex sm:items-start sm:justify-between">
           <div className="max-w-xl text-sm">
-            <p>
-              See how a $7B bank saved money, reduced CI times by 62% and
-              improved developer productivity.
-            </p>
+            <p>{description}</p>
           </div>
           <div className="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
             <ButtonLink
-              href="https://go.nx.dev/bank-case-study"
-              title="Download the case study"
+              href={buttonHref}
+              title={`Download ${title}`}
               variant="primary"
               target="_blank"
               size="small"
             >
-              Download (pdf)
+              {buttonText}
             </ButtonLink>
           </div>
         </div>

nx-dev/ui-enterprise/src/lib/metrics-and-customers.tsx

@@ -157,7 +157,11 @@ export function MetricsAndCustomers(): JSX.Element {
               whileInView="visible"
               className="mx-auto max-w-xl"
             >
-              <DownloadCaseStudy />
+              <DownloadCaseStudy
+                title="Banking Case Study"
+                description="See how a $7B bank saved money, reduced CI times by 62% and improved developer productivity."
+                buttonHref="https://go.nx.dev/bank-case-study"
+              />
             </motion.div>
           </div>
           <div className="hidden w-1/4 items-center justify-end gap-20 lg:flex">