wilddragon-site/src/components/Partners.tsx

42 lines
1.6 KiB
TypeScript
Executable file

import ScrollReveal from "./ScrollReveal";
const partners = [
{ name: "THOR Broadcast", logo: "/images/clients/thor-logo.png", width: 140, height: 30 },
{ name: "Ross Video", logo: "/images/clients/ross-video.png", width: 140, height: 56 },
{ name: "Grass Valley", logo: "/images/clients/grass-valley.png", width: 150, height: 32 },
{ name: "vMix by Studio Coast", logo: "/images/clients/vmix.png", width: 130, height: 53 },
{ name: "RED Digital Cinema", logo: "/images/partners/red-digital.png", width: 60, height: 60 },
];
export default function Partners() {
return (
<section className="py-10 bg-neutral-950 border-t border-neutral-800/20">
<div className="max-w-6xl mx-auto px-6">
<ScrollReveal>
<p className="font-mono text-[9px] tracking-[0.3em] uppercase text-white/20 text-center mb-8">
Technology Partners
</p>
<div className="flex flex-wrap justify-center items-center gap-x-14 gap-y-6">
{partners.map((partner) => (
<div
key={partner.name}
className="opacity-20 hover:opacity-50 transition-all duration-700"
title={partner.name}
>
<img
src={partner.logo}
alt={partner.name}
width={partner.width}
height={partner.height}
loading="lazy"
className="logo-silhouette max-h-8 w-auto object-contain"
style={{ filter: "brightness(0) invert(1)" }}
/>
</div>
))}
</div>
</ScrollReveal>
</div>
</section>
);
}