agency-web/app/components/Marquee.tsx

40 lines
804 B
TypeScript

"use client";
/**
* Marquee — seamless looping band of disciplines, separated by the brand pill
* glyph. Pure CSS animation (transform only); pauses under reduced-motion via
* the stylesheet. Decorative.
*/
const items = [
"Web & Desarrollo",
"SEO & GEO",
"Paid Ads",
"Contenido",
"Diseño & Marca",
"Automatización",
];
function Row() {
return (
<div className="marquee__row" aria-hidden="true">
{items.map((it) => (
<span className="marquee__item" key={it}>
{it}
<span className="marquee__sep" />
</span>
))}
</div>
);
}
export default function Marquee() {
return (
<div className="marquee" aria-hidden="true">
<div className="marquee__track">
<Row />
<Row />
</div>
</div>
);
}