Kirubel-Kibru-Yaltopia
d261148b35
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { lastYearWinners, lastYearWinnersCopy } from "@/content/last-year-winners";
|
|
import { LastYearWinnerMark } from "@/components/home/LastYearWinnerMark";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
/** Green stats section vs white hero */
|
|
variant?: "on-green" | "on-light";
|
|
className?: string;
|
|
};
|
|
|
|
export function LastYearWinnersScroll({ variant = "on-green", className }: Props) {
|
|
const items = [...lastYearWinners, ...lastYearWinners];
|
|
const onLight = variant === "on-light";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"pt-8",
|
|
onLight ? "mt-8 border-t border-[#1a5c38]/12" : "mt-10 border-t border-white/15",
|
|
className
|
|
)}
|
|
>
|
|
<p
|
|
className={cn(
|
|
"text-center text-[10px] font-semibold uppercase tracking-[0.2em] text-[#ffb300]"
|
|
)}
|
|
>
|
|
{lastYearWinnersCopy.eyebrow}
|
|
</p>
|
|
<p
|
|
className={cn(
|
|
"mt-1 text-center text-sm font-medium",
|
|
onLight ? "text-[#1a5c38]/80" : "text-white/85"
|
|
)}
|
|
>
|
|
{lastYearWinnersCopy.headline}
|
|
</p>
|
|
<div
|
|
className="relative mt-5 overflow-hidden"
|
|
aria-label="Companies supported at last year's summit"
|
|
>
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r to-transparent",
|
|
onLight ? "from-white" : "from-[#1a5c38]"
|
|
)}
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l to-transparent",
|
|
onLight ? "from-white" : "from-[#1a5c38]"
|
|
)}
|
|
/>
|
|
<div className="marquee-winners flex w-max shrink-0 items-center gap-3 py-1">
|
|
{items.map((company, i) => (
|
|
<LastYearWinnerMark key={`${company.id}-${i}`} company={company} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|