49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { Marquee } from "../ui/marquee";
|
|
|
|
export function PartnersMarquee() {
|
|
const partners = [
|
|
{
|
|
name: "Conductor Orchestra",
|
|
logo: "https://t3.ftcdn.net/jpg/05/71/43/76/360_F_571437617_ZNppyF5qpbJn9dYifhjWEQkgjbZNBXP9.jpg",
|
|
},
|
|
{
|
|
name: "Chicago Symphony Orchestra",
|
|
logo: "https://upload.wikimedia.org/wikipedia/commons/1/1f/Wiki-CSO_logo2024_stacked-whitebg.png",
|
|
},
|
|
{
|
|
name: "Toronto Symphony Orchestra",
|
|
logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfThsC3B2BGCKjnyr_IMiJmp-0jI9I9blZrw&s",
|
|
},
|
|
{
|
|
name: "Los Angeles Chamber Orchestra",
|
|
logo: "https://admin.itsnicethat.com/images/TOHFR2DIydoDTaGM6NbfVRFZfJU=/168760/format-webp%7Cwidth-2880/5d947a047fa44cbd2200fd0f.jpg",
|
|
},
|
|
{
|
|
name: "Richmond Symphony Orchestra",
|
|
logo: "https://richmondsymphony.org/wp-content/uploads/2021/07/rso-logo-2023.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
|
|
<Marquee>
|
|
{partners.map((partner) => (
|
|
<div
|
|
key={partner.name}
|
|
className="flex flex-col items-center justify-center p-4 bg-white border-2 border-gray-300 rounded-lg shadow-md"
|
|
>
|
|
<img
|
|
src={partner.logo}
|
|
alt={`${partner.name} logo`}
|
|
className="max-h-24"
|
|
/>
|
|
<p>{partner.name}</p>
|
|
</div>
|
|
))}
|
|
</Marquee>
|
|
<div className="from-background pointer-events-none absolute inset-y-0 left-0 w-4 bg-linear-to-r"></div>
|
|
<div className="from-background pointer-events-none absolute inset-y-0 right-0 w-4 bg-linear-to-l"></div>
|
|
</div>
|
|
);
|
|
}
|