31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
export function MarqueeStrip() {
|
|
return (
|
|
<div className="relative z-10 mx-[-5px] mb-[-90px] mt-[20px] overflow-hidden bg-gradient-to-r from-[#45D0BD] to-[#44B6E9] py-[42px]" style={{ transform: "rotate(-2.07deg)" }}>
|
|
<div className="flex w-[200%] whitespace-nowrap">
|
|
{/* Marquee track 1 */}
|
|
<div className="animate-marquee flex gap-8">
|
|
{[...Array(6)].map((_, i) => (
|
|
<div key={i} className="flex items-center gap-8">
|
|
<span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
|
|
Artificial Intelligence
|
|
</span>
|
|
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Marquee track 2 (seamless loop) */}
|
|
<div className="animate-marquee flex gap-8">
|
|
{[...Array(6)].map((_, i) => (
|
|
<div key={`dup-${i}`} className="flex items-center gap-8">
|
|
<span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
|
|
Artificial Intelligence
|
|
</span>
|
|
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|