diff --git a/nx-dev/nx-dev/pages/customers.tsx b/nx-dev/nx-dev/pages/customers.tsx index 6b6560892f5db..2d4db07468feb 100644 --- a/nx-dev/nx-dev/pages/customers.tsx +++ b/nx-dev/nx-dev/pages/customers.tsx @@ -6,7 +6,7 @@ import { Hero, OssProjects, } from '@nx/nx-dev/ui-customers'; -import { tryNxCloudForFree } from '../lib/components/headerCtaConfigs'; +import { contactButton } from '../lib/components/headerCtaConfigs'; export function Customers(): JSX.Element { const router = useRouter(); @@ -34,7 +34,7 @@ export function Customers(): JSX.Element { type: 'website', }} /> - +
diff --git a/nx-dev/nx-dev/public/images/customers/video-story-broadcom.avif b/nx-dev/nx-dev/public/images/customers/video-story-broadcom.avif new file mode 100644 index 0000000000000..bed2d03e62c61 Binary files /dev/null and b/nx-dev/nx-dev/public/images/customers/video-story-broadcom.avif differ diff --git a/nx-dev/nx-dev/public/images/customers/video-story-caseware.avif b/nx-dev/nx-dev/public/images/customers/video-story-caseware.avif new file mode 100644 index 0000000000000..11e3c44ff32ca Binary files /dev/null and b/nx-dev/nx-dev/public/images/customers/video-story-caseware.avif differ diff --git a/nx-dev/nx-dev/public/images/customers/video-story-pavlo-grosse.avif b/nx-dev/nx-dev/public/images/customers/video-story-pavlo-grosse.avif new file mode 100644 index 0000000000000..65c54a8c134f2 Binary files /dev/null and b/nx-dev/nx-dev/public/images/customers/video-story-pavlo-grosse.avif differ diff --git a/nx-dev/nx-dev/public/images/customers/video-story-payfit.avif b/nx-dev/nx-dev/public/images/customers/video-story-payfit.avif new file mode 100644 index 0000000000000..47a53710fb4bf Binary files /dev/null and b/nx-dev/nx-dev/public/images/customers/video-story-payfit.avif differ diff --git a/nx-dev/nx-dev/public/images/customers/video-story-siriusxm.avif b/nx-dev/nx-dev/public/images/customers/video-story-siriusxm.avif new file mode 100644 index 0000000000000..d145c4b996afd Binary files /dev/null and b/nx-dev/nx-dev/public/images/customers/video-story-siriusxm.avif differ diff --git a/nx-dev/nx-dev/public/images/customers/video-story-ukg.avif b/nx-dev/nx-dev/public/images/customers/video-story-ukg.avif new file mode 100644 index 0000000000000..ef0750aed22b5 Binary files /dev/null and b/nx-dev/nx-dev/public/images/customers/video-story-ukg.avif differ diff --git a/nx-dev/nx-dev/tailwind.config.js b/nx-dev/nx-dev/tailwind.config.js index 2e5639de39585..1933f0db6dbcd 100644 --- a/nx-dev/nx-dev/tailwind.config.js +++ b/nx-dev/nx-dev/tailwind.config.js @@ -63,6 +63,7 @@ module.exports = { theme: { extend: { animation: { + progress: `progress linear forwards`, marquee: 'marquee var(--duration) linear infinite', 'marquee-vertical': 'marquee-vertical var(--duration) linear infinite', }, @@ -75,6 +76,10 @@ module.exports = { from: { transform: 'translateY(0)' }, to: { transform: 'translateY(calc(-100% - var(--gap)))' }, }, + progress: { + '0%': { width: '0%' }, + '100%': { width: '100%' }, + }, }, typography: { DEFAULT: { diff --git a/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx b/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx new file mode 100644 index 0000000000000..f0db35437dcc8 --- /dev/null +++ b/nx-dev/ui-customers/src/lib/customer-icon-grid.tsx @@ -0,0 +1,38 @@ +import { FC, SVGProps } from 'react'; + +interface CustomerIcon { + url: string; + icon: FC>; + height: string; + width: string; +} + +interface CustomerIconGridProps { + icons: CustomerIcon[]; +} + +const CustomerIconGrid: FC = ({ icons }) => { + return ( +
+ {icons.map((customerIcon, index) => { + return ( + + + ); + })} +
+ ); +}; + +export default CustomerIconGrid; +export { CustomerIconGrid, type CustomerIcon }; diff --git a/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx b/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx new file mode 100644 index 0000000000000..acdcb28462c8e --- /dev/null +++ b/nx-dev/ui-customers/src/lib/customer-testimonial-carousel.tsx @@ -0,0 +1,423 @@ +'use client'; +import { + Fragment, + useState, + useEffect, + FC, + SVGProps, + type ReactElement, +} from 'react'; +import { Dialog, Transition } from '@headlessui/react'; +import { + ChevronLeftIcon, + ChevronRightIcon, + PlayIcon, +} from '@heroicons/react/24/outline'; + +import { + CasewareIcon, + HetznerCloudIcon, + PayfitIcon, + SiriusxmIcon, + UkgIcon, + VmwareIcon, +} from '@nx/nx-dev/ui-icons'; +interface Testimonial { + title: string; + subtitle: string; + metrics?: { + value: string; + label: string; + }[]; + quote?: { + text: string; + author: { + name: string; + role: string; + }; + }; + company: string; + videoId: string; + thumbnail: string; + logo: { + icon: FC>; + height: string; + width: string; + color?: string; + }; +} + +const testimonials: Testimonial[] = [ + { + title: 'Customer story', + subtitle: + 'How Hetzner Cloud solved the Performance Paradox: Faster builds with more features', + metrics: [ + { value: 'Faster tests', label: 'From 20 min -> seconds.' }, + { value: 'Faster builds', label: 'Down from 30 minutes.' }, + { value: 'Speed & scale', label: 'Faster CI with even more features.' }, + ], + company: 'Hetzner', + videoId: '2BLqiNnBPuU', + thumbnail: '/images/customers/video-story-pavlo-grosse.avif', + logo: { + icon: HetznerCloudIcon, + height: 'h-10', + width: 'w-10', + color: 'text-[#D50C2D]', + }, + }, + { + title: 'Customer story', + subtitle: + 'Scaling 700+ projects: How Nx Enterprise became a no-brainer for Caseware.', + metrics: [ + { + value: 'Massive scale', + label: '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', + videoId: 'lvS8HjjFwEM', + thumbnail: '/images/customers/video-story-caseware.avif', + logo: { + icon: CasewareIcon, + height: 'h-12', + width: 'w-12', + color: 'text-[#F56354]', + }, + }, + { + title: 'Customer story', + subtitle: + 'How SiriusXM stays competitive by iterating and getting to market fast.', + metrics: [ + { + value: 'Faster releases', + label: + 'Nx streamlines feature management, accelerating delivery cycles.', + }, + { + value: 'Seamless adoption', + label: + 'Nx Cloud integration delivers continuous benefits from day one.', + }, + { + value: 'Expert guidance', + label: + 'Nx Enterprise support provides quick, informed assistance on demand.', + }, + ], + company: 'SiriusXM', + videoId: 'Q0ky-8oJcro', + thumbnail: '/images/customers/video-story-siriusxm.avif', + logo: { + icon: SiriusxmIcon, + height: 'h-32', + width: 'w-32', + color: 'text-[#0000EB]', + }, + }, + { + title: 'Customer story', + subtitle: + 'From 5 days to 2 hours: How Payfit improved velocity and offloads complexity.', + metrics: [ + { + value: 'From 5 days → 2 hours', + label: 'Nx & Nx Cloud drastically accelerate feature deployment', + }, + { + value: 'Eliminated CI Complexity', + label: 'Nx Cloud offloads CI load balancing headaches.', + }, + { + value: 'Faster time-to-market', + label: + 'Nx boosts velocity, helping teams deliver faster and more reliably.', + }, + ], + company: 'Payfit', + videoId: 'Vdk-tza4PCs', + thumbnail: '/images/customers/video-story-payfit.avif', + logo: { + icon: PayfitIcon, + height: 'h-16', + width: 'w-16', + color: 'text-[#0F6FDE]', + }, + }, + { + title: 'Customer story', + subtitle: + 'How UKG reduced build times while scaling development across teams.', + metrics: [ + { + value: 'From 1 day → instant builds', + label: 'Nx Cloud slashed build wait times, enabling dev productivity.', + }, + { + value: 'Eliminated CI Maintenance', + label: + 'Nx Cloud frees teams from managing CI, letting devs focus on code.', + }, + { + value: 'Reduced duplication', + label: + 'Shared libraries cut down redundant code across mobile and web apps.', + }, + ], + company: 'UKG', + videoId: 'rSC8wihnfP4', + thumbnail: '/images/customers/video-story-ukg.avif', + logo: { + icon: UkgIcon, + height: 'h-20', + width: 'w-20', + color: 'text-[#005151]', + }, + }, + { + title: 'Customer story', + subtitle: 'How Broadcom stays efficient and nimble with monorepos', + metrics: [ + { + value: '2x faster', + label: 'Nx doubles speed, supporting fast, nimble development.', + }, + { + value: 'Unmatched DX', + label: 'Nx empowers teams to be more productive than ever.', + }, + { + value: 'Always ahead', + label: + 'Nx’s rapid feature delivery keeps teams at the cutting edge of development.', + }, + ], + company: 'Broadcom (VMware)', + videoId: 'RWTgYNKqxNc', + thumbnail: '/images/customers/video-story-broadcom.avif', + logo: { + icon: VmwareIcon, + height: 'h-28', + width: 'w-28', + color: 'text-[#607078]', + }, + }, +]; + +export function CustomerTestimonialCarousel(): ReactElement { + const [currentIndex, setCurrentIndex] = useState(0); + const [isOpen, setIsOpen] = useState(false); + const currentTestimonial = testimonials[currentIndex]; + const slideLogoTimeOut = 12000; // 12 seconds + + useEffect(() => { + let timer: NodeJS.Timeout; + + if (!isOpen) { + timer = setInterval(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length); + }, slideLogoTimeOut); + } + + return () => { + clearInterval(timer); + }; + }, [currentIndex, setCurrentIndex, isOpen]); + + return ( +
+
+ {/* Left side - Quote or Metrics */} +
+
+ {currentTestimonial.metrics?.map((metric, index) => ( +
+
+ {metric.value} +
+
+ {metric.label} +
+
+ ))} +
+
+ + {/* Right side - Video Card */} +
+
+ {/* Prev Button Mobile only */} + +
setIsOpen(true)} + > + {/* Thumbnail */} + {currentTestimonial.title} + + {/* Gradient Overlay */} +
+ + {/* Content Overlay */} +
+

+ {currentTestimonial.subtitle} +

+ +
+
+ {/* Next Button - Mobile only */} + +
+ + {/* Mobile Navigation display dots */} +
    + {testimonials.map((_, index) => ( +
  • + ))} +
+
+
+ + {/* Carosel Navigation - Larger screens */} +
+ {testimonials.map(({ company, logo }, i) => ( + + ))} +
+ + {/* Video Modal */} + + setIsOpen(false)} + className="relative z-50" + > + +
+ + +
+
+ + +
+