3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. 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-layer group relative z-20 isolate block overflow-hidden rounded-2xl border border-border bg-white p-4 shadow-sm transition-all hover:border-[#1a5c38]/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 group-hover:text-[#1a5c38]">
|
|
{speaker.name}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">{speaker.title}</p>
|
|
<p className="mt-0.5 text-sm font-medium text-[#1a5c38]/90">{speaker.company}</p>
|
|
{speaker.panel && (
|
|
<p className="mt-2 line-clamp-2 text-xs text-muted-foreground">{speaker.panel}</p>
|
|
)}
|
|
</Link>
|
|
</ScrollReveal>
|
|
);
|
|
}
|