Two-by-two speaker grid with gradient avatars, name and company-role lines per tile.
The import and the props worth knowing about, in one place.
import { Event3 } from "@/components/beste/piece/event3";
<Event3
surface="card"
bordered={false}
inverted={false}
speakers={[
{
"name": "Hania Rani",
"role": "Design · Linear",
"initials": "HR",
"image": "https://images.unsplash.com/photo-1528892952291-009c663ce843?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fHBvcnRyYWl0fGVufDB8fDB8fHww"
},
{
"name": "Ólafur Arnalds",
"role": "Engineering · Beste",
"initials": "ÓA",
"image": "https://images.unsplash.com/photo-1557053910-d9eadeed1c58?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzV8fHBvcnRyYWl0fGVufDB8fDB8fHww"
}
]}
/>