From 7498e470fa485c42bf55c0ad0604ca2fb2ca9173 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Tue, 17 Dec 2024 17:08:57 +0100
Subject: [PATCH] feat(nx-dev): link more customer videos on enterprise page

---
 .../src/lib/customer-metrics.tsx              | 70 ++++++++++------
 .../src/lib/hetzner-cloud-testimonial.tsx     | 59 +++-----------
 .../src/lib/testimonial-carousel.tsx          | 80 ++++++++++++++-----
 nx-dev/ui-enterprise/src/lib/video-modal.tsx  | 65 +++++++++++++++
 4 files changed, 179 insertions(+), 95 deletions(-)
 create mode 100644 nx-dev/ui-enterprise/src/lib/video-modal.tsx

diff --git a/nx-dev/ui-enterprise/src/lib/customer-metrics.tsx b/nx-dev/ui-enterprise/src/lib/customer-metrics.tsx
index 503688fbeeb4d..9970a083fd23b 100644
--- a/nx-dev/ui-enterprise/src/lib/customer-metrics.tsx
+++ b/nx-dev/ui-enterprise/src/lib/customer-metrics.tsx
@@ -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 (
@@ -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"
diff --git a/nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx b/nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx
index 8a12de8b2d033..a608e5f06d3d9 100644
--- a/nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx
+++ b/nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx
@@ -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,
@@ -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
@@ -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>
   );
 }
diff --git a/nx-dev/ui-enterprise/src/lib/testimonial-carousel.tsx b/nx-dev/ui-enterprise/src/lib/testimonial-carousel.tsx
index df231aa7a5451..4a3e0edc31d0b 100644
--- a/nx-dev/ui-enterprise/src/lib/testimonial-carousel.tsx
+++ b/nx-dev/ui-enterprise/src/lib/testimonial-carousel.tsx
@@ -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,
@@ -70,6 +73,14 @@ 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">
@@ -77,31 +88,47 @@ export function TestimonialCarousel(): ReactElement {
           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">
@@ -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>
@@ -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">
@@ -181,9 +218,6 @@ export function TestimonialCarousel(): ReactElement {
                   </div>
                 </div>
               ),
-              // innerButtonElement: (
-              //   <UkgIcon aria-hidden="true" className="h-8 text-[#005151]" />
-              // ),
               innerButtonElement: (
                 <span className="text-2xl">Proactive partnership</span>
               ),
@@ -191,6 +225,12 @@ export function TestimonialCarousel(): ReactElement {
           ]}
         />
       </div>
+
+      <VideoModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        videoUrl={currentVideo}
+      />
     </section>
   );
 }
diff --git a/nx-dev/ui-enterprise/src/lib/video-modal.tsx b/nx-dev/ui-enterprise/src/lib/video-modal.tsx
new file mode 100644
index 0000000000000..d467c2cf30986
--- /dev/null
+++ b/nx-dev/ui-enterprise/src/lib/video-modal.tsx
@@ -0,0 +1,65 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, ReactElement } from 'react';
+
+export interface VideoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  videoUrl: string;
+}
+
+export function VideoModal({
+  isOpen,
+  onClose,
+  videoUrl,
+}: VideoModalProps): ReactElement {
+  const embedUrl = videoUrl.replace('youtu.be/', 'youtube.com/embed/');
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog
+        as="div"
+        open={isOpen}
+        onClose={onClose}
+        className="relative z-50"
+      >
+        <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/70 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-white/10 bg-black text-left align-middle shadow-xl transition-all focus:outline-none">
+                <iframe
+                  width="808"
+                  height="454"
+                  src={embedUrl}
+                  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>
+  );
+}