feat(nx-dev): add customer case studies
This commit is contained in:
parent
5ddcb565d9
commit
75a73ed0e7
@ -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">
|
||||
|
||||
@ -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,7 +239,7 @@ 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>
|
||||
@ -232,7 +247,7 @@ export function EnterpriseCustomers(): JSX.Element {
|
||||
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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user