raoufi-group/src/components/Marquee.tsx

import { site } from "@/data/site";

/** Continuous gold band separating the intro from the project work. */
export function Marquee() {
  const items = Array.from({ length: 8 });

  return (
    <div className="overflow-hidden border-y border-line bg-sand py-6" aria-hidden="true">
      {/* Rendered twice so the 50% translation loops seamlessly. */}
      <div className="animate-marquee flex w-max items-center gap-14 whitespace-nowrap">
        {items.concat(items).map((_, i) => (
          <span key={i} className="flex items-center gap-14">
            <span className="latin text-sm tracking-[0.42em] text-ink/45">
              {site.taglineLatin}
            </span>
            <span className="h-1.5 w-1.5 rotate-45 bg-gold" />
          </span>
        ))}
      </div>
    </div>
  );
}