99 lines
5.2 KiB
TypeScript
99 lines
5.2 KiB
TypeScript
'use client';
|
|
import { motion, Variants } from 'framer-motion';
|
|
import { Spotlight } from './elements/spotlight';
|
|
import { AnimateValue } from '@nx/nx-dev/ui-animations';
|
|
import { ReactElement } from 'react';
|
|
|
|
export function FasterAndCheaper(): ReactElement {
|
|
const spotlight: Variants = {
|
|
offscreen: {
|
|
display: 'none',
|
|
},
|
|
onscreen: {
|
|
display: 'block',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<section id="faster-and-cheaper" className="scroll-mt-24">
|
|
<motion.div
|
|
initial="offscreen"
|
|
whileInView="onscreen"
|
|
viewport={{ once: true }}
|
|
className="relative mx-auto max-w-7xl px-6 lg:px-8"
|
|
>
|
|
<motion.div
|
|
variants={spotlight}
|
|
className="absolute left-1/2 z-0 h-[50%] w-[50%] transform-gpu"
|
|
>
|
|
<Spotlight className="w-full max-w-full" fill="pink" />
|
|
</motion.div>
|
|
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<h2 className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white">
|
|
Both faster & cheaper
|
|
</h2>
|
|
<p className="mt-6 text-2xl leading-7 text-slate-700 dark:text-slate-300">
|
|
Nx Cloud makes your CI significantly faster and cheaper, while also
|
|
making it more maintainable and reliable.
|
|
</p>
|
|
</div>
|
|
<div className="relative z-20 mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-5xl">
|
|
<div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2">
|
|
<article className="group/card relative grid transform-gpu cursor-default items-center gap-4 overflow-hidden rounded-xl border border-slate-200 bg-white/50 backdrop-blur-sm transition duration-200 hover:-translate-y-4 hover:shadow-xl md:col-span-1 dark:border-slate-800 dark:bg-slate-950/50 dark:shadow-none">
|
|
<div className="p-4 text-center">
|
|
<div className="mt-2 text-3xl font-medium leading-7 text-slate-950 transition duration-200 lg:text-8xl dark:text-white">
|
|
<AnimateValue num={30} suffix=" - " />
|
|
<AnimateValue num={70} suffix="%" />
|
|
</div>
|
|
<div className="mt-4 text-3xl font-medium leading-7 text-slate-950 transition duration-200 lg:text-5xl dark:text-white">
|
|
Faster CI
|
|
</div>
|
|
<div className="mt-4 text-sm text-slate-600 transition duration-200 group-hover/card:text-slate-400 dark:text-slate-400 group-hover/card:dark:text-slate-600">
|
|
Reported by enterprises using Nx Cloud.
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article className="group/card relative grid transform-gpu cursor-default items-center gap-4 overflow-hidden rounded-xl border border-slate-200 bg-white/50 backdrop-blur-sm transition duration-200 hover:-translate-y-4 hover:shadow-xl md:col-span-1 dark:border-slate-800 dark:bg-slate-950/50 dark:shadow-none">
|
|
<div className="p-4 text-center">
|
|
<div className="mt-4 text-center text-3xl font-medium leading-7 text-slate-950 transition duration-200 lg:text-5xl dark:text-white">
|
|
Halve your CI bill
|
|
</div>
|
|
<div className="mt-6">
|
|
<div className="flex items-center">
|
|
<div className="w-28 shrink-0 border-r-2 border-slate-200 py-3 pr-2 text-right text-slate-700 transition duration-200 dark:border-slate-800 dark:text-slate-300">
|
|
CI
|
|
</div>
|
|
<div className="flex-grow py-1.5 font-semibold">
|
|
<div className="w-full flex-grow items-center justify-end rounded-r-lg border border-l-0 border-slate-200 bg-slate-100 px-4 py-2 text-right text-slate-900 transition duration-200 dark:border-slate-800 dark:bg-slate-700 dark:text-white">
|
|
<span className="drop-shadow-sm">$6k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-28 shrink-0 border-r-2 border-slate-200 py-3 pr-2 text-right font-medium text-slate-700 transition duration-200 dark:border-slate-800 dark:text-slate-300">
|
|
CI + Nx Cloud
|
|
</div>
|
|
<div className="flex-grow py-1.5 font-semibold">
|
|
<div className="w-1/2 rounded-r-lg border border-l-0 border-slate-200 bg-gradient-to-r from-emerald-500 to-green-500 px-4 py-2 text-right text-white transition duration-200 dark:border-slate-800">
|
|
<span className="drop-shadow-sm">$3.2k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="mt-6 text-xs text-slate-400 transition duration-200 dark:text-slate-600">
|
|
<span className="underline">
|
|
Cost per month for CI compute.
|
|
</span>{' '}
|
|
Data collected based on a typical month of CI runs measured on
|
|
the Nx OSS monorepo.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|