37 lines
1.2 KiB
React
37 lines
1.2 KiB
React
import React from 'react'
|
|
import './LogoMarquee.css'
|
|
|
|
/**
|
|
* Scrolling logo marquee showing clients/partners/media.
|
|
* Supports variant="dark" (default) and variant="light" for visibility of different logo colors.
|
|
*/
|
|
export default function LogoMarquee({ logos = [], title = '', titleAccent = '', variant = 'dark' }) {
|
|
if (logos.length === 0) return null
|
|
|
|
// Duplicate logos for seamless loop
|
|
const allLogos = [...logos, ...logos, ...logos]
|
|
|
|
return (
|
|
<section className={`marquee-section marquee-${variant}`}>
|
|
{(title || titleAccent) && (
|
|
<h2 className="marquee-title section-title">
|
|
{title} {titleAccent && <span className="text-gradient">{titleAccent}</span>}
|
|
</h2>
|
|
)}
|
|
<div className="marquee-track">
|
|
<div className="marquee-inner">
|
|
{allLogos.map((logo, i) => (
|
|
<div className="marquee-item" key={i} aria-hidden={i >= logos.length}>
|
|
{logo.src ? (
|
|
<img src={logo.src} alt={logo.name} />
|
|
) : (
|
|
<span className="marquee-text-logo">{logo.name}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|