46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
|
import ScrollReveal from "./ScrollReveal";
|
||
|
|
|
||
|
|
const clients = [
|
||
|
|
{ name: "Washington Commanders", logo: "/images/clients/commanders.png", width: 160, height: 88 },
|
||
|
|
{ name: "CVS / Aetna", logo: "/images/clients/cvs.png", width: 140, height: 17 },
|
||
|
|
{ name: "UBS", logo: "/images/clients/ubs.png", width: 120, height: 44 },
|
||
|
|
{ name: "BetMGM", logo: "/images/clients/betmgm.png", width: 160, height: 40 },
|
||
|
|
{ name: "Intuit", logo: "/images/clients/intuit.png", width: 130, height: 28 },
|
||
|
|
{ name: "Monumental Sports", logo: "/images/clients/monumental.svg", width: 150, height: 40 },
|
||
|
|
{ name: "COSM", logo: "/images/clients/cosm.svg", width: 120, height: 35 },
|
||
|
|
{ name: "Red Sands", logo: "/images/clients/redsands.svg", width: 130, height: 35 },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function Clients() {
|
||
|
|
return (
|
||
|
|
<section id="clients" className="py-20 bg-surface border-t border-border">
|
||
|
|
<div className="max-w-6xl mx-auto px-6">
|
||
|
|
<ScrollReveal>
|
||
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-white/35 text-center mb-12">
|
||
|
|
Trusted By Industry Leaders
|
||
|
|
</p>
|
||
|
|
<div className="flex flex-wrap justify-center items-center gap-x-14 gap-y-10">
|
||
|
|
{clients.map((client) => (
|
||
|
|
<div
|
||
|
|
key={client.name}
|
||
|
|
className="opacity-40 hover:opacity-85 transition-all duration-500"
|
||
|
|
title={client.name}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={client.logo}
|
||
|
|
alt={client.name}
|
||
|
|
width={client.width}
|
||
|
|
height={client.height}
|
||
|
|
loading="lazy"
|
||
|
|
className="logo-silhouette max-h-12 w-auto object-contain"
|
||
|
|
style={{ filter: "brightness(0) invert(1)" }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</ScrollReveal>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|