68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
|
|
interface Partner {
|
|
name: string;
|
|
logo?: string;
|
|
}
|
|
|
|
interface PartnerLogosProps {
|
|
partners: Partner[];
|
|
}
|
|
|
|
export const PartnerLogos: React.FC<PartnerLogosProps> = ({ partners }) => {
|
|
// Duplicate for seamless infinite scroll
|
|
const duplicatedPartners = [...partners, ...partners];
|
|
|
|
return (
|
|
<div className="relative overflow-hidden py-8">
|
|
{/* Gradient masks */}
|
|
<div className="absolute left-0 top-0 bottom-0 w-32 bg-linear-to-r from-zsl-bg to-transparent z-10" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-32 bg-linear-to-l from-zsl-bg to-transparent z-10" />
|
|
|
|
{/* Scrolling container */}
|
|
<div className="flex animate-scroll">
|
|
{duplicatedPartners.map((partner, index) => (
|
|
<div
|
|
key={`${partner.name}-${index}`}
|
|
className="shrink-0 mx-8 md:mx-12"
|
|
>
|
|
<div className="w-32 h-16 md:w-40 md:h-20 flex items-center justify-center bg-zsl-card/30 border border-zsl-primary/10 rounded-lg hover:border-zsl-primary/30 transition-all duration-300 group px-4">
|
|
{partner.logo ? (
|
|
<img
|
|
src={partner.logo}
|
|
alt={partner.name}
|
|
className="max-w-full max-h-full object-contain opacity-50 group-hover:opacity-100 transition-opacity duration-300 filter grayscale group-hover:grayscale-0"
|
|
/>
|
|
) : (
|
|
<span className="text-sm font-medium text-zsl-muted/50 group-hover:text-zsl-primary transition-colors duration-300 text-center">
|
|
{partner.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add CSS animation */}
|
|
<style jsx>{`
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.animate-scroll {
|
|
animation: scroll 30s linear infinite;
|
|
}
|
|
.animate-scroll:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|