miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(nx-dev): add customer case studies

Browse Source
This commit is contained in:
Juri 2024-10-31 00:23:59 +01:00 committed by Juri Strumpflohner
parent 5ddcb565d9
commit 75a73ed0e7
5 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nx-dev/nx-dev/pages/customers.tsx
View File

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

29
nx-dev/ui-customers/src/lib/enterprise-customers.tsx
View File

@ -44,6 +44,7 @@ import {
VodafoneIcon, VodafoneIcon,
ZipariIcon, ZipariIcon,
} from '@nx/nx-dev/ui-icons'; } from '@nx/nx-dev/ui-icons';
import { DownloadCaseStudy } from '@nx/nx-dev/ui-enterprise';
export function EnterpriseCustomers(): JSX.Element { export function EnterpriseCustomers(): JSX.Element {
return ( return (
@ -123,11 +124,18 @@ export function EnterpriseCustomers(): JSX.Element {
> >
<ParamountIcon aria-hidden="true" className="h-14 w-14" /> <ParamountIcon aria-hidden="true" className="h-14 w-14" />
</a> </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 <a
href="https://www.fedex.com" href="https://www.fedex.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <FedExIcon aria-hidden="true" className="h-28 w-28" />
</a> </a>
@ -143,7 +151,7 @@ export function EnterpriseCustomers(): JSX.Element {
href="https://zipari.com" href="https://zipari.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <ZipariIcon aria-hidden="true" className="h-12 w-12" />
</a> </a>
@ -152,7 +160,7 @@ export function EnterpriseCustomers(): JSX.Element {
href="https://www.bill.com" href="https://www.bill.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <BillIcon aria-hidden="true" className="h-16 w-16" />
</a> </a>
@ -192,7 +200,7 @@ export function EnterpriseCustomers(): JSX.Element {
href="https://www.deloitte.com" href="https://www.deloitte.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <DeloitteIcon aria-hidden="true" className="h-28 w-28" />
</a> </a>
@ -204,11 +212,18 @@ export function EnterpriseCustomers(): JSX.Element {
> >
<VodafoneIcon aria-hidden="true" className="h-12 w-12" /> <VodafoneIcon aria-hidden="true" className="h-12 w-12" />
</a> </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 <a
href="https://www.t-mobile.com" href="https://www.t-mobile.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <TMobileIcon aria-hidden="true" className="h-10 w-10" />
</a> </a>
@ -224,7 +239,7 @@ export function EnterpriseCustomers(): JSX.Element {
href="https://www.modernatx.com" href="https://www.modernatx.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <ModernaIcon aria-hidden="true" className="h-32 w-32" />
</a> </a>
@ -232,7 +247,7 @@ export function EnterpriseCustomers(): JSX.Element {
href="https://clickup.com" href="https://clickup.com"
rel="noreferrer" rel="noreferrer"
target="_blank" 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" /> <ClickUpIcon aria-hidden="true" className="h-12 w-12" />
</a> </a>

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

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

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

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

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

@ -157,7 +157,11 @@ export function MetricsAndCustomers(): JSX.Element {
whileInView="visible" whileInView="visible"
className="mx-auto max-w-xl" 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> </motion.div>
</div> </div>
<div className="hidden w-1/4 items-center justify-end gap-20 lg:flex"> <div className="hidden w-1/4 items-center justify-end gap-20 lg:flex">