diff --git a/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx b/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx index bda32105364384..8bcece655ba5ab 100644 --- a/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx +++ b/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx @@ -38,7 +38,7 @@ function getBorderClass(index: number, totalIcons: number, columns = 4) { const CustomerIconGrid: FC = ({ icons }) => { return ( -
+
{icons.map((customerIcon, index) => { const borderClass = getBorderClass(index, icons.length); diff --git a/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx b/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx index 3d8656b5b8aecc..a31a4d3900261f 100644 --- a/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx +++ b/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx @@ -1,7 +1,11 @@ 'use client'; import { Fragment, useState, useEffect } from 'react'; import { Dialog, Transition } from '@headlessui/react'; -import { PlayIcon } from '@heroicons/react/24/outline'; +import { + ChevronLeftIcon, + ChevronRightIcon, + PlayIcon, +} from '@heroicons/react/24/outline'; import Image from 'next/image'; import { CasewareIcon, @@ -56,12 +60,21 @@ const testimonials: Testimonial[] = [ { title: 'Customer story', subtitle: - 'Scaling 700+ projects: How Nx Enterprise became a no-brainer for Caseware', + 'Scaling 700+ projects: How Nx Enterprise became a no-brainer for Caseware.', metrics: [ - { value: '700+', label: 'Monorepo projects scaled effortlessly' }, { - value: 'Efficiency', - label: 'Unified workflows: frontend to backend', + value: 'Massive scale', + label: + '600–700 projects, unifying frontends and backends company wide.', + }, + { + value: 'Instant impact', + label: 'Trialing Nx Enterprise cut build times immediately.', + }, + { + value: 'Actionable insights', + label: + 'Nx Cloud’s metrics uncovered inefficiencies across 10+ year old codebase.', }, ], company: 'Caseware', @@ -167,7 +180,6 @@ export function CustomerTestimonialCarousel(): JSX.Element { useEffect(() => { let timer: NodeJS.Timeout; - // Clear the current timer and start a new one if (!isOpen) { timer = setInterval(() => { setCurrentIndex((prevIndex) => { @@ -177,7 +189,6 @@ export function CustomerTestimonialCarousel(): JSX.Element { }, slideLogoTimeOut); } - // Cleanup on unmount or when dependencies change return () => { clearInterval(timer); }; @@ -230,7 +241,7 @@ export function CustomerTestimonialCarousel(): JSX.Element {
{currentTestimonial.metrics?.map((metric, index) => (
-
+
{metric.value}
@@ -245,6 +256,19 @@ export function CustomerTestimonialCarousel(): JSX.Element { {/* Right side - Video Card */}
+ {/* Prev Button Mobile only */} +
setIsOpen(true)} @@ -272,6 +296,19 @@ export function CustomerTestimonialCarousel(): JSX.Element {
+ {/* Next Button - Mobile only */} +
{/* Mobile Navigation display dots */} @@ -290,7 +327,7 @@ export function CustomerTestimonialCarousel(): JSX.Element {
- {/* Carosel Navigation */} + {/* Carosel Navigation - Larger screens */}
{testimonials.map(({ company, logo }, i) => (