import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar" import { CropMarksGrid, CropMarksGridItem, } from "@/components/ui/crop-marks" const testimonials = [ { area: "a", featured: true, quote: "We replaced a week of custom WebGL with two registry installs. The presets alone covered every page of the launch.", name: "Mara Lindqvist", role: "Design lead, Fathom", avatar: "https://i.pravatar.cc/150?img=47", }, { area: "b", featured: true, quote: "Every component arrived as one readable file. We edited the source instead of fighting a theme API.", name: "Daniel Okafor", role: "Frontend engineer, Relay", avatar: "https://i.pravatar.cc/150?img=12", }, { area: "c", featured: false, quote: "The crop marks became our whole visual language.", name: "Sofia Marin", role: "Founder, Studio Ninefold", avatar: "https://i.pravatar.cc/150?img=32", }, { area: "d", featured: false, quote: "Install, open the file, change three lines. That was the integration.", name: "Jonas Weber", role: "Product, Harbor", avatar: "https://i.pravatar.cc/150?img=68", }, { area: "e", featured: false, quote: "Finally a registry whose demos look like real pages.", name: "Priya Natarajan", role: "Staff engineer, Meridian", avatar: "https://i.pravatar.cc/150?img=5", }, ] function initials(name: string) { return name .split(" ") .map((part) => part[0]) .join("") } /** A solid double quotation mark with rounded corners and curved tails. */ function QuoteMark({ className }: { className?: string }) { return ( ) } /** * A testimonials section on a Crop Marks bento: two featured quotes over * three short ones, each with a quote mark and an avatar. Give the * parent room for the marks' overshoot. */ export function Testimonials01() { return ( {testimonials.map((item) => (

{item.quote}

{initials(item.name)}

{item.name} {item.role}

))} ) }