kirukib
cb404ec079
Some checks failed
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Has been cancelled
Centralize primary, secondary, tertiary, and neutral tokens and apply them across theme variables and UI components. Co-authored-by: Cursor <cursoragent@cursor.com>
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { Person } from "@/content/people";
|
|
import { ScrollReveal } from "@/components/motion/ScrollReveal";
|
|
type Props = {
|
|
speaker: Person;
|
|
className?: string;
|
|
revealDelay?: number;
|
|
};
|
|
|
|
export function SpeakerCard({ speaker, className, revealDelay = 0 }: Props) {
|
|
return (
|
|
<ScrollReveal variant="card" delay={revealDelay} as="div" className={className}>
|
|
<Link
|
|
href="/speakers"
|
|
className="topo-card-surface topo-card-layer group relative z-20 isolate block overflow-hidden rounded-2xl border border-border bg-white p-4 text-[#37a47a] shadow-sm transition-all hover:border-[#37a47a]/25 hover:shadow-md"
|
|
>
|
|
<div className="relative mx-auto aspect-[4/5] w-full max-h-[220px] overflow-hidden rounded-xl bg-muted/30">
|
|
<Image
|
|
src={speaker.image}
|
|
alt={speaker.name}
|
|
fill
|
|
className="object-contain object-bottom transition-transform duration-300 group-hover:scale-[1.02]"
|
|
sizes="(max-width: 768px) 50vw, 25vw"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 text-lg font-bold leading-tight text-[#30614c] group-hover:text-[#37a47a]">
|
|
{speaker.name}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-[#5b5b5b]">{speaker.title}</p>
|
|
<p className="mt-0.5 text-sm font-medium text-[#37a47a]/90">{speaker.company}</p>
|
|
{speaker.panel && (
|
|
<p className="mt-2 line-clamp-2 text-xs text-[#5b5b5b]">{speaker.panel}</p>
|
|
)}
|
|
</Link>
|
|
</ScrollReveal>
|
|
);
|
|
}
|