Skip to content

Commit 7498e47

Browse files
juristrjuristr
committed
feat(nx-dev): link more customer videos on enterprise page
1 parent 6e41b30 commit 7498e47

File tree

4 files changed

+179
-95
lines changed

4 files changed

+179
-95
lines changed

Diff for: ‎nx-dev/ui-enterprise/src/lib/customer-metrics.tsx

+45-25
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { HetznerCloudIcon } from '@nx/nx-dev/ui-icons';
33
import { SectionHeading } from '@nx/nx-dev/ui-common';
44
import Link from 'next/link';
55
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
6+
import { PlayIcon } from '@heroicons/react/24/outline';
67

78
export function CustomerMetrics(): ReactElement {
89
return (
@@ -11,32 +12,51 @@ export function CustomerMetrics(): ReactElement {
1112
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
1213
<div className="mt-6 flex flex-col-reverse gap-x-8 gap-y-20 lg:flex-row lg:items-center">
1314
<div className="lg:w-full lg:max-w-2xl lg:flex-auto">
14-
<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">
15-
<blockquote className="p-6 text-lg font-semibold tracking-tight text-black dark:text-white">
16-
<p>
17-
Engineers will run a test command and expect it to run for
18-
20 mins, they start it and see it finishes in a few seconds,
19-
then they ask “Did I start it wrong? Why is it so fast?”
20-
</p>
21-
</blockquote>
22-
<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">
23-
<img
24-
alt="pavlo grosse"
25-
src="https://avatars.githubusercontent.com/u/2219064?v=4"
26-
className="size-10 flex-none rounded-full bg-slate-50"
27-
/>
28-
<div className="flex-auto">
29-
<div className="font-semibold">Pavlo Grosse</div>
30-
<div className="text-slate-600 dark:text-slate-500">
31-
Senior Software Engineer, Hetzner Cloud
32-
</div>
15+
<a
16+
href="#hetzner-cloud-testimonial"
17+
onClick={() => {
18+
sendCustomEvent(
19+
'hetzner-quote-click',
20+
'enterprise-customer-metrics',
21+
'enterprise'
22+
);
23+
}}
24+
className="group relative block rounded-2xl"
25+
>
26+
<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">
27+
<div className="flex items-center gap-2 text-lg font-semibold text-slate-950 drop-shadow dark:text-white">
28+
<PlayIcon className="size-8" />
29+
Watch the interview
3330
</div>
34-
<HetznerCloudIcon
35-
aria-hidden="true"
36-
className="mx-auto size-10 flex-none bg-white text-[#D50C2D]"
37-
/>
38-
</figcaption>
39-
</figure>
31+
</div>
32+
<figure className="relative rounded-2xl bg-white shadow-lg ring-1 ring-slate-900/5 dark:bg-slate-800">
33+
<blockquote className="p-6 text-lg font-semibold tracking-tight text-black dark:text-white">
34+
<p>
35+
Engineers will run a test command and expect it to run for
36+
20 mins, they start it and see it finishes in a few
37+
seconds, then they ask "Did I start it wrong? Why is it so
38+
fast?"
39+
</p>
40+
</blockquote>
41+
<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">
42+
<img
43+
alt="pavlo grosse"
44+
src="https://avatars.githubusercontent.com/u/2219064?v=4"
45+
className="size-10 flex-none rounded-full bg-slate-50"
46+
/>
47+
<div className="flex-auto">
48+
<div className="font-semibold">Pavlo Grosse</div>
49+
<div className="text-slate-600 dark:text-slate-500">
50+
Senior Software Engineer, Hetzner Cloud
51+
</div>
52+
</div>
53+
<HetznerCloudIcon
54+
aria-hidden="true"
55+
className="mx-auto size-10 flex-none bg-white text-[#D50C2D]"
56+
/>
57+
</figcaption>
58+
</figure>
59+
</a>
4060
<SectionHeading
4161
as="p"
4262
variant="subtitle"

Diff for: ‎nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx

+9-50
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { MovingBorder } from '@nx/nx-dev/ui-animations';
77
import { motion } from 'framer-motion';
88
import { PlayIcon } from '@heroicons/react/24/outline';
99
import Image from 'next/image';
10-
import { Dialog, Transition } from '@headlessui/react';
1110
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
11+
import { VideoModal } from './video-modal';
1212

1313
function PlayButton({
1414
className,
@@ -82,9 +82,9 @@ export function HetznerCloudTestimonial(): ReactElement {
8282
<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">
8383
<section
8484
id="hetzner-cloud-testimonial"
85-
className="z-0 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
85+
className="z-0 mx-auto max-w-7xl scroll-mt-20 px-4 sm:px-6 lg:px-8"
8686
>
87-
<SectionHeading as="h2" variant="title" id="hetzner-cloud-testimonial">
87+
<SectionHeading as="h2" variant="title">
8888
Nx Enterprise{' '}
8989
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
9090
speeds build and test times
@@ -260,54 +260,13 @@ export function HetznerCloudTestimonial(): ReactElement {
260260
</blockquote>
261261
</figure>
262262
</div>
263-
{/*MODAL*/}
264-
<Transition appear show={isOpen} as={Fragment}>
265-
<Dialog
266-
as="div"
267-
open={isOpen}
268-
onClose={() => setIsOpen(false)}
269-
className="relative z-10"
270-
>
271-
<Transition.Child
272-
as={Fragment}
273-
enter="ease-out duration-300"
274-
enterFrom="opacity-0"
275-
enterTo="opacity-100"
276-
leave="ease-in duration-200"
277-
leaveFrom="opacity-100"
278-
leaveTo="opacity-0"
279-
>
280-
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
281-
</Transition.Child>
282-
<div className="fixed inset-0 overflow-y-auto">
283-
<div className="flex min-h-full items-center justify-center p-4 text-center">
284-
<Transition.Child
285-
as={Fragment}
286-
enter="ease-out duration-300"
287-
enterFrom="opacity-0 scale-95"
288-
enterTo="opacity-100 scale-100"
289-
leave="ease-in duration-200"
290-
leaveFrom="opacity-100 scale-100"
291-
leaveTo="opacity-0 scale-95"
292-
>
293-
<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">
294-
<iframe
295-
width="808"
296-
height="454"
297-
src="https://www.youtube.com/embed/2BLqiNnBPuU?si=752RGHhozOMzbWlx"
298-
title="YouTube video player"
299-
frameBorder="0"
300-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
301-
allowFullScreen
302-
className="max-w-full"
303-
/>
304-
</Dialog.Panel>
305-
</Transition.Child>
306-
</div>
307-
</div>
308-
</Dialog>
309-
</Transition>
310263
</section>
264+
265+
<VideoModal
266+
isOpen={isOpen}
267+
onClose={() => setIsOpen(false)}
268+
videoUrl="https://youtu.be/2BLqiNnBPuU"
269+
/>
311270
</div>
312271
);
313272
}

Diff for: ‎nx-dev/ui-enterprise/src/lib/testimonial-carousel.tsx

+60-20
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import {
66
CarouselViewport,
77
} from './carousel';
88
import { PayfitIcon, UkgIcon } from '@nx/nx-dev/ui-icons';
9+
import { PlayIcon } from '@heroicons/react/24/outline';
10+
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
11+
import { VideoModal } from './video-modal';
912

1013
export function Carousel({
1114
items,
@@ -70,38 +73,62 @@ export function Carousel({
7073
}
7174

7275
export function TestimonialCarousel(): ReactElement {
76+
const [isOpen, setIsOpen] = useState(false);
77+
const [currentVideo, setCurrentVideo] = useState('');
78+
79+
const openVideo = (videoUrl: string) => {
80+
setCurrentVideo(videoUrl);
81+
setIsOpen(true);
82+
};
83+
7384
return (
7485
<section className="">
7586
<div className="mx-auto max-w-7xl px-6 lg:px-8">
7687
<Carousel
7788
items={[
7889
{
7990
element: (
80-
<div className="relative overflow-hidden">
91+
<div
92+
onClick={() => {
93+
openVideo('https://youtu.be/Vdk-tza4PCs');
94+
sendCustomEvent(
95+
'payfit-testimonial-video-click',
96+
'testimonial-carousel',
97+
'enterprise'
98+
);
99+
}}
100+
className="group relative cursor-pointer overflow-hidden"
101+
>
81102
<div
82-
className="absolute inset-0 bg-opacity-75 bg-contain bg-right bg-no-repeat"
103+
className="absolute inset-0 bg-opacity-75 bg-cover bg-center bg-no-repeat transition-transform duration-700 group-hover:scale-105"
83104
style={{
84105
backgroundImage:
85106
"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')",
86107
}}
87108
/>
88109
<div className="absolute inset-0 bg-gradient-to-r from-[#0F6FDE] via-[#0F6FDE] via-70% to-[#0F6FDE]/40" />
110+
<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">
111+
<div className="flex items-center gap-2 text-lg font-semibold text-slate-950 drop-shadow dark:text-white">
112+
<PlayIcon className="size-8" />
113+
Watch the interview
114+
</div>
115+
</div>
89116
<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">
90117
<div className="col-span-3 flex flex-col">
91118
<figure className="flex flex-auto flex-col justify-between">
92119
<blockquote className="text-pretty text-xl/8">
93120
<p>
94-
“The number of hours we spent trying to manage CI
121+
"The number of hours we spent trying to manage CI
95122
before, trying to load balance in CircleCI, the
96123
number of agents that we run ourselves by hand and
97124
try to distribute ourselves manually - it was
98-
painful, we’d spend hours and days trying to do
125+
painful, we'd spend hours and days trying to do
99126
that.{' '}
100127
<span className="font-semibold">
101-
With Nx Cloud we don’t need to think about that,
128+
With Nx Cloud we don't need to think about that,
102129
here is my task, deal with it and make it fast
103130
</span>
104-
.”
131+
."
105132
</p>
106133
</blockquote>
107134
<figcaption className="mt-10 flex items-center gap-x-6">
@@ -114,7 +141,7 @@ export function TestimonialCarousel(): ReactElement {
114141
<div className="font-semibold">
115142
Nicolas Beaussart
116143
</div>
117-
<div className="mt-1 ">
144+
<div className="mt-1">
118145
Staff Platform Engineer, Payfit
119146
</div>
120147
</div>
@@ -130,36 +157,46 @@ export function TestimonialCarousel(): ReactElement {
130157
</div>
131158
</div>
132159
),
133-
// innerButtonElement: (
134-
// <PayfitIcon
135-
// aria-hidden="true"
136-
// className="h-10 self-start text-[#0F6FDE]"
137-
// />
138-
// ),
139160
innerButtonElement: (
140161
<span className="text-2xl">Increase speed</span>
141162
),
142163
},
143164
{
144165
element: (
145-
<div className="relative">
166+
<div
167+
onClick={() => {
168+
openVideo('https://youtu.be/rSC8wihnfP4');
169+
sendCustomEvent(
170+
'ukg-testimonial-video-click',
171+
'testimonial-carousel',
172+
'enterprise'
173+
);
174+
}}
175+
className="group relative cursor-pointer overflow-hidden"
176+
>
146177
<div
147-
className="absolute inset-0 bg-opacity-75 bg-contain bg-right bg-no-repeat"
178+
className="absolute inset-0 bg-opacity-75 bg-cover bg-center bg-no-repeat transition-transform duration-700 group-hover:scale-105"
148179
style={{
149180
backgroundImage:
150181
"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')",
151182
}}
152183
/>
153184
<div className="absolute inset-0 bg-gradient-to-r from-[#005151] via-[#005151] via-55% to-[#005151]/40" />
185+
<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">
186+
<div className="flex items-center gap-2 text-lg font-semibold text-slate-950 drop-shadow dark:text-white">
187+
<PlayIcon className="size-8" />
188+
Watch the interview
189+
</div>
190+
</div>
154191
<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">
155192
<div className="col-span-2 flex flex-col">
156193
<figure className="flex flex-auto flex-col justify-between">
157194
<blockquote className="text-pretty text-xl/8">
158195
<p>
159-
“I really like the Nx check-ins - Nx people are very
196+
"I really like the Nx check-ins - Nx people are very
160197
well prepared for how to help their team grow and
161198
scale and to help us spot some of our challenges. I
162-
can’t see a future where we don’t have Nx.”
199+
can't see a future where we don't have Nx."
163200
</p>
164201
</blockquote>
165202
<figcaption className="mt-10 flex items-center gap-x-6">
@@ -181,16 +218,19 @@ export function TestimonialCarousel(): ReactElement {
181218
</div>
182219
</div>
183220
),
184-
// innerButtonElement: (
185-
// <UkgIcon aria-hidden="true" className="h-8 text-[#005151]" />
186-
// ),
187221
innerButtonElement: (
188222
<span className="text-2xl">Proactive partnership</span>
189223
),
190224
},
191225
]}
192226
/>
193227
</div>
228+
229+
<VideoModal
230+
isOpen={isOpen}
231+
onClose={() => setIsOpen(false)}
232+
videoUrl={currentVideo}
233+
/>
194234
</section>
195235
);
196236
}

0 commit comments

Comments
 (0)