Submatter/apps/web/components/marketing/marquee-strip.tsx

50 lines
1.2 KiB
TypeScript
Raw Permalink Normal View History

import { cn } from "@/lib/utils";
const items = [
"frontmatter",
"subagents",
"claim_task",
"complete_task",
"convoy",
"workspace_id",
"plans/",
"mcp",
"markdown-backlog",
"human-gates",
"model_policy",
"role-implementer",
"role-reviewer",
"role-architect",
] as const;
export function MarqueeStrip({ className, variant = "dark" }: { className?: string; variant?: "dark" | "light" }) {
const track = [...items, ...items];
return (
<div
className={cn(
"overflow-hidden border-y py-3",
variant === "dark"
? "border-[hsl(var(--hero-border))] bg-[hsl(var(--hero))]"
: "border-foreground bg-background",
className,
)}
aria-hidden
>
<div className="marketing-marquee-track flex w-max gap-8 whitespace-nowrap px-4">
{track.map((item, i) => (
<span
key={`${item}-${i}`}
className={cn(
"font-mono-brand text-[11px] uppercase tracking-[0.18em]",
variant === "dark" ? "text-[hsl(var(--hero-muted))]" : "text-muted-foreground",
)}
>
{item}
</span>
))}
</div>
</div>
);
}