feat(nx-dev): customer videos on customer page (#29380)

Co-authored-by: Nicholas Cunningham <[email protected]>

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',
         }}
       />
-      <DefaultLayout headerCTAConfig={[tryNxCloudForFree]}>
+      <DefaultLayout headerCTAConfig={[contactButton]}>
         <div>
           <Hero />
         </div>

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: {

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<SVGProps<SVGSVGElement>>;
+  height: string;
+  width: string;
+}
+
+interface CustomerIconGridProps {
+  icons: CustomerIcon[];
+}
+
+const CustomerIconGrid: FC<CustomerIconGridProps> = ({ icons }) => {
+  return (
+    <div className="grid grid-cols-2 justify-between md:grid-cols-4">
+      {icons.map((customerIcon, index) => {
+        return (
+          <a
+            key={`customer-icon-${index}`}
+            href={customerIcon.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`flex items-center justify-center border-slate-200/20 p-12 shadow-[0_0px_1px_0_rgba(226,232,240,0.2)] transition hover:bg-slate-100/20 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white`}
+          >
+            <customerIcon.icon
+              aria-hidden="true"
+              className={`${customerIcon.height} ${customerIcon.width}`}
+            />
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+export default CustomerIconGrid;
+export { CustomerIconGrid, type CustomerIcon };