47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* ProofBar — "trusted by" band. A labelled, seamless looping marquee of the
|
|
* industries we grow, separated by the brand pill glyph. Pure CSS transform
|
|
* animation; pauses under reduced-motion via the stylesheet. Decorative track,
|
|
* but the label and items are real text. (Swap industry labels for greyscale
|
|
* client logos before launch.)
|
|
*/
|
|
|
|
const items = [
|
|
"E-commerce",
|
|
"B2B SaaS",
|
|
"Clinics",
|
|
"Professional services",
|
|
"Retail",
|
|
"Hospitality",
|
|
];
|
|
|
|
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 (
|
|
<section className="proof" aria-label="Industries we work with">
|
|
<p className="proof__label">
|
|
Trusted by teams that care about the sales number
|
|
</p>
|
|
<div className="marquee">
|
|
<div className="marquee__track">
|
|
<Row />
|
|
<Row />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|