46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { Reveal } from "@/components/reveal";
|
|
|
|
const partners = Array.from({ length: 6 }, (_, i) => ({
|
|
id: i,
|
|
name: "Company Name",
|
|
tagline: "Partnership placeholder",
|
|
}));
|
|
|
|
function PartnerIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="size-7 shrink-0 fill-current" aria-hidden>
|
|
<rect x="3" y="3" width="7" height="7" rx="1.5" transform="rotate(12 6.5 6.5)" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1.5" transform="rotate(-12 17.5 6.5)" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1.5" transform="rotate(20 17.5 17.5)" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function Partners() {
|
|
return (
|
|
<section aria-label="Partners" className="relative py-10 lg:py-14">
|
|
<Reveal className="overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_8%,#000_92%,transparent)]">
|
|
{/* List rendered twice so translating -50% loops seamlessly */}
|
|
<div className="flex w-max animate-marquee hover:[animation-play-state:paused]">
|
|
{[0, 1].map((copy) => (
|
|
<ul key={copy} aria-hidden={copy === 1} className="flex shrink-0">
|
|
{partners.map((p) => (
|
|
<li className="group flex items-center gap-3 px-8 transition-opacity duration-300 sm:px-12" key={p.id}>
|
|
<span className="text-foreground/70 transition-colors duration-300 group-hover:text-accent">
|
|
<PartnerIcon />
|
|
</span>
|
|
<div className="leading-tight">
|
|
<p className="text-sm font-semibold text-foreground">{p.name}</p>
|
|
<p className="text-sm text-muted">{p.tagline}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
</section>
|
|
);
|
|
}
|