Testimonial Grid

1"use client";
2 
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6type TestimonialQuote = {
7  lead: string;
8  highlight?: string;
9  tail?: string;
10};
11 
12type TestimonialItem = {
13  name: string;
14  imageSrc: string;
15  position: string;
16  company: string;
17  quote: TestimonialQuote | string;
18  imageAlt?: string;
19};
20 
21type TestimonialGridProps = {
22  title?: string | null;
23  items?: TestimonialItem[];
24  className?: string;
25  gridClassName?: string;
26  cardClassName?: string;
27  highlightClassName?: string;
28};
29 
30type TestimonialGridCardProps = TestimonialItem & {
31  className?: string;
32  highlightClassName?: string;
33};
34 
35const DEFAULT_TITLE = "Here's what others say about Refinery!";
36 
37const DEFAULT_TESTIMONIALS: TestimonialItem[] = [
38  {
39    name: "Murdo Aten Alescio",
40    imageSrc:
41      "https://images.unsplash.com/photo-1674851993235-f730432c37f8?q=80&w=687",
42    position: "Chief Technology Officer",
43    company: "Toogle",
44    quote: {
45      lead: "I just love Refinery. It",
46      highlight:
47        "gives us a refined design system with best-in-class web interactions",
48      tail: "we can browse, adopt, and ship quickly.",
49    },
50  },
51  {
52    name: "Danielle Porter",
53    imageSrc:
54      "https://res.cloudinary.com/dbglon4f7/image/upload/v1777228990/danielle_ilgbqd.png",
55    position: "Lead Designer",
56    company: "TouYube",
57    quote: {
58      lead: "Refinery exceeded my expectations as a design system inspired by the web's best interactions. It",
59      highlight: "helps us discover elevated patterns, align design decisions,",
60      tail: "and deliver a premium product feel.",
61    },
62  },
63  {
64    name: "Monica Witkowska",
65    imageSrc:
66      "https://res.cloudinary.com/dbglon4f7/image/upload/v1777228970/monica_yai9gl.png",
67    position: "Frontend Engineer",
68    company: "Metamine",
69    quote: {
70      lead: "Refinery has become essential for our frontend team. We browse interaction patterns and beautifully refined components, then",
71      highlight: "integrate Refinery into our product with minimal friction.",
72    },
73  },
74  {
75    name: "Tuor Håkansson",
76    imageSrc:
77      "https://images.unsplash.com/photo-1631885628726-d60689c330db?q=80&w=685",
78    position: "SDE II",
79    company: "Z Combinator",
80    quote: {
81      lead: "Refinery has been a game-changer for our team. Instead of starting from scratch.",
82      highlight:
83        "We explore top interaction patterns and refined UI examples, then implement them with confidence.",
84    },
85  },
86];
87 
88// … truncated