GRV-Summit-Site/components/home/TopicMarquee.tsx
“kirukib” efa48f6f6b
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Refine topography to hero and footer, improve readability and hero motion.
Limit mainwhite pattern to the landing hero and a bottom footer band; remove it from sections and page headers. Add vertical water-flow animation and stronger hero particles with hover boost. Fix green text on white sections and card descriptions in green bands, including the two-days program cards.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-21 14:29:39 +03:00

34 lines
1.2 KiB
TypeScript

import { Badge } from "@/components/ui/badge";
import { topicChips } from "@/content/tracks";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
export function TopicMarquee() {
const items = [...topicChips, ...topicChips];
return (
<Section id="topics" className="overflow-hidden py-12">
<TopoProseSurface className="mx-auto mb-8 max-w-3xl text-center">
<p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
Program themes
</p>
<h2 className="mt-2 text-2xl font-bold text-[#0d3d26] md:text-3xl">
Topics shaping the summit
</h2>
</TopoProseSurface>
<div className="flex overflow-hidden">
<div className="marquee flex shrink-0 gap-3">
{items.map((topic, i) => (
<Badge
key={`${topic}-${i}`}
variant="secondary"
className="shrink-0 rounded-full border border-[#1a5c38]/15 bg-[#f0f5f2] px-4 py-2 text-sm text-[#1a5c38]"
>
{topic}
</Badge>
))}
</div>
</div>
</Section>
);
}