Skip to content

Commit

Permalink
feat(nx-dev): link more customer videos on enterprise page
Browse files Browse the repository at this point in the history
  • Loading branch information
@juristr
juristr committed Dec 20, 2024
1 parent 6e41b30 commit 7498e47
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 95 deletions.
70 changes: 45 additions & 25 deletions nx-dev/ui-enterprise/src/lib/customer-metrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { HetznerCloudIcon } from '@nx/nx-dev/ui-icons';
import { SectionHeading } from '@nx/nx-dev/ui-common';
import Link from 'next/link';
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
import { PlayIcon } from '@heroicons/react/24/outline';

export function CustomerMetrics(): ReactElement {
return (
Expand All @@ -11,32 +12,51 @@ export function CustomerMetrics(): ReactElement {
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<div className="mt-6 flex flex-col-reverse gap-x-8 gap-y-20 lg:flex-row lg:items-center">
<div className="lg:w-full lg:max-w-2xl lg:flex-auto">
<figure className="rounded-2xl bg-white shadow-lg ring-1 ring-slate-900/5 sm:col-span-2 xl:col-start-2 xl:row-end-1 dark:bg-slate-800">
<blockquote className="p-6 text-lg font-semibold tracking-tight text-black dark:text-white">
<p>
Engineers will run a test command and expect it to run for
20 mins, they start it and see it finishes in a few seconds,
then they ask “Did I start it wrong? Why is it so fast?”
</p>
</blockquote>
<figcaption className="flex flex-wrap items-center gap-x-4 gap-y-4 border-t border-slate-900/10 px-6 py-4 sm:flex-nowrap dark:border-slate-100/10">
<img
alt="pavlo grosse"
src="https://avatars.githubusercontent.com/u/2219064?v=4"
className="size-10 flex-none rounded-full bg-slate-50"
/>
<div className="flex-auto">
<div className="font-semibold">Pavlo Grosse</div>
<div className="text-slate-600 dark:text-slate-500">
Senior Software Engineer, Hetzner Cloud
</div>
<a
href="#hetzner-cloud-testimonial"
onClick={() => {
sendCustomEvent(
'hetzner-quote-click',
'enterprise-customer-metrics',
'enterprise'
);
}}
className="group relative block rounded-2xl"
>
<div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-white/60 opacity-0 backdrop-blur-sm transition duration-300 group-hover:opacity-100 dark:bg-slate-950/60">
<div className="flex items-center gap-2 text-lg font-semibold text-slate-950 drop-shadow dark:text-white">
<PlayIcon className="size-8" />
Watch the interview
</div>
<HetznerCloudIcon
aria-hidden="true"
className="mx-auto size-10 flex-none bg-white text-[#D50C2D]"
/>
</figcaption>
</figure>
</div>
<figure className="relative rounded-2xl bg-white shadow-lg ring-1 ring-slate-900/5 dark:bg-slate-800">
<blockquote className="p-6 text-lg font-semibold tracking-tight text-black dark:text-white">
<p>
Engineers will run a test command and expect it to run for
20 mins, they start it and see it finishes in a few
seconds, then they ask "Did I start it wrong? Why is it so
fast?"
</p>
</blockquote>
<figcaption className="flex flex-wrap items-center gap-x-4 gap-y-4 border-t border-slate-900/10 px-6 py-4 sm:flex-nowrap dark:border-slate-100/10">
<img
alt="pavlo grosse"
src="https://avatars.githubusercontent.com/u/2219064?v=4"
className="size-10 flex-none rounded-full bg-slate-50"
/>
<div className="flex-auto">
<div className="font-semibold">Pavlo Grosse</div>
<div className="text-slate-600 dark:text-slate-500">
Senior Software Engineer, Hetzner Cloud
</div>
</div>
<HetznerCloudIcon
aria-hidden="true"
className="mx-auto size-10 flex-none bg-white text-[#D50C2D]"
/>
</figcaption>
</figure>
</a>
<SectionHeading
as="p"
variant="subtitle"
Expand Down
59 changes: 9 additions & 50 deletions nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { MovingBorder } from '@nx/nx-dev/ui-animations';
import { motion } from 'framer-motion';
import { PlayIcon } from '@heroicons/react/24/outline';
import Image from 'next/image';
import { Dialog, Transition } from '@headlessui/react';
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
import { VideoModal } from './video-modal';

function PlayButton({
className,
Expand Down Expand Up @@ -82,9 +82,9 @@ export function HetznerCloudTestimonial(): ReactElement {
<div className="border-b border-t border-slate-200 bg-slate-50 py-24 sm:py-32 dark:border-slate-800 dark:bg-slate-900">
<section
id="hetzner-cloud-testimonial"
className="z-0 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
className="z-0 mx-auto max-w-7xl scroll-mt-20 px-4 sm:px-6 lg:px-8"
>
<SectionHeading as="h2" variant="title" id="hetzner-cloud-testimonial">
<SectionHeading as="h2" variant="title">
Nx Enterprise{' '}
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
speeds build and test times
Expand Down Expand Up @@ -260,54 +260,13 @@ export function HetznerCloudTestimonial(): ReactElement {
</blockquote>
</figure>
</div>
{/*MODAL*/}
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as="div"
open={isOpen}
onClose={() => setIsOpen(false)}
className="relative z-10"
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative w-auto transform overflow-hidden rounded-2xl border border-slate-950 bg-black text-left align-middle shadow-xl transition-all focus:outline-none">
<iframe
width="808"
height="454"
src="https://www.youtube.com/embed/2BLqiNnBPuU?si=752RGHhozOMzbWlx"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
className="max-w-full"
/>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</section>

<VideoModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
videoUrl="https://youtu.be/2BLqiNnBPuU"
/>
</div>
);
}
80 changes: 60 additions & 20 deletions nx-dev/ui-enterprise/src/lib/testimonial-carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import {
CarouselViewport,
} from './carousel';
import { PayfitIcon, UkgIcon } from '@nx/nx-dev/ui-icons';
import { PlayIcon } from '@heroicons/react/24/outline';
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
import { VideoModal } from './video-modal';

export function Carousel({
items,
Expand Down Expand Up @@ -70,38 +73,62 @@ export function Carousel({
}

export function TestimonialCarousel(): ReactElement {
const [isOpen, setIsOpen] = useState(false);
const [currentVideo, setCurrentVideo] = useState('');

const openVideo = (videoUrl: string) => {
setCurrentVideo(videoUrl);
setIsOpen(true);
};

return (
<section className="">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<Carousel
items={[
{
element: (
<div className="relative overflow-hidden">
<div
onClick={() => {
openVideo('https://youtu.be/Vdk-tza4PCs');
sendCustomEvent(
'payfit-testimonial-video-click',
'testimonial-carousel',
'enterprise'
);
}}
className="group relative cursor-pointer overflow-hidden"
>
<div
className="absolute inset-0 bg-opacity-75 bg-contain bg-right bg-no-repeat"
className="absolute inset-0 bg-opacity-75 bg-cover bg-center bg-no-repeat transition-transform duration-700 group-hover:scale-105"
style={{
backgroundImage:
"url('https://images.unsplash.com/photo-1511376868136-742c0de8c9a8?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-[#0F6FDE] via-[#0F6FDE] via-70% to-[#0F6FDE]/40" />
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 opacity-0 backdrop-blur-sm transition duration-300 group-hover:opacity-100 dark:bg-slate-950/60">
<div className="flex items-center gap-2 text-lg font-semibold text-slate-950 drop-shadow dark:text-white">
<PlayIcon className="size-8" />
Watch the interview
</div>
</div>
<div className="relative mx-auto grid max-w-2xl grid-cols-1 px-12 py-16 text-white lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div className="col-span-3 flex flex-col">
<figure className="flex flex-auto flex-col justify-between">
<blockquote className="text-pretty text-xl/8">
<p>
“The number of hours we spent trying to manage CI
"The number of hours we spent trying to manage CI
before, trying to load balance in CircleCI, the
number of agents that we run ourselves by hand and
try to distribute ourselves manually - it was
painful, we’d spend hours and days trying to do
painful, we'd spend hours and days trying to do
that.{' '}
<span className="font-semibold">
With Nx Cloud we don’t need to think about that,
With Nx Cloud we don't need to think about that,
here is my task, deal with it and make it fast
</span>
.”
."
</p>
</blockquote>
<figcaption className="mt-10 flex items-center gap-x-6">
Expand All @@ -114,7 +141,7 @@ export function TestimonialCarousel(): ReactElement {
<div className="font-semibold">
Nicolas Beaussart
</div>
<div className="mt-1 ">
<div className="mt-1">
Staff Platform Engineer, Payfit
</div>
</div>
Expand All @@ -130,36 +157,46 @@ export function TestimonialCarousel(): ReactElement {
</div>
</div>
),
// innerButtonElement: (
// <PayfitIcon
// aria-hidden="true"
// className="h-10 self-start text-[#0F6FDE]"
// />
// ),
innerButtonElement: (
<span className="text-2xl">Increase speed</span>
),
},
{
element: (
<div className="relative">
<div
onClick={() => {
openVideo('https://youtu.be/rSC8wihnfP4');
sendCustomEvent(
'ukg-testimonial-video-click',
'testimonial-carousel',
'enterprise'
);
}}
className="group relative cursor-pointer overflow-hidden"
>
<div
className="absolute inset-0 bg-opacity-75 bg-contain bg-right bg-no-repeat"
className="absolute inset-0 bg-opacity-75 bg-cover bg-center bg-no-repeat transition-transform duration-700 group-hover:scale-105"
style={{
backgroundImage:
"url('https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-[#005151] via-[#005151] via-55% to-[#005151]/40" />
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 opacity-0 backdrop-blur-sm transition duration-300 group-hover:opacity-100 dark:bg-slate-950/60">
<div className="flex items-center gap-2 text-lg font-semibold text-slate-950 drop-shadow dark:text-white">
<PlayIcon className="size-8" />
Watch the interview
</div>
</div>
<div className="relative mx-auto grid max-w-2xl grid-cols-1 px-12 py-16 text-white lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div className="col-span-2 flex flex-col">
<figure className="flex flex-auto flex-col justify-between">
<blockquote className="text-pretty text-xl/8">
<p>
“I really like the Nx check-ins - Nx people are very
"I really like the Nx check-ins - Nx people are very
well prepared for how to help their team grow and
scale and to help us spot some of our challenges. I
can’t see a future where we don’t have Nx.”
can't see a future where we don't have Nx."
</p>
</blockquote>
<figcaption className="mt-10 flex items-center gap-x-6">
Expand All @@ -181,16 +218,19 @@ export function TestimonialCarousel(): ReactElement {
</div>
</div>
),
// innerButtonElement: (
// <UkgIcon aria-hidden="true" className="h-8 text-[#005151]" />
// ),
innerButtonElement: (
<span className="text-2xl">Proactive partnership</span>
),
},
]}
/>
</div>

<VideoModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
videoUrl={currentVideo}
/>
</section>
);
}
Loading

0 comments on commit 7498e47

Please sign in to comment.