Testimonial 01

1import { cn } from "@/lib/utils";
2import { Marquee } from "@/components/ui/marquee";
3import { Card } from "@/components/ui/card";
4import { Avatar, AvatarFallback } from "@/components/ui/avatar";
5 
6interface TestimonialItem {
7  name: string;
8  role: string;
9  content: string;
10  avatar?: string;
11}
12 
13interface Testimonial01Props {
14  title?: string;
15  description?: string;
16  testimonials?: TestimonialItem[];
17  className?: string;
18}
19 
20const testimonials: TestimonialItem[] = [
21  {
22    name: "Alex Chen",
23    role: "Frontend Developer",
24    content:
25      "These components saved me weeks of development time. Copy, paste, customize—it's that simple!",
26  },
27  {
28    name: "Sarah Johnson",
29    role: "UI/UX Designer",
30    content:
31      "The components are beautifully designed and fully customizable. Perfect for rapid prototyping and production.",
32  },
33  {
34    name: "Michael Rodriguez",
35    role: "Full-Stack Engineer",
36    content:
37      "TypeScript support and accessibility built-in? This is exactly what I need to ship faster without compromising quality.",
38  },
39  {
40    name: "Emily Watson",
41    role: "Product Manager",
42    content:
43      "Our team's velocity increased significantly. We're shipping features faster than ever with these reusable components.",
44  },
45  {
46    name: "David Kim",
47    role: "Senior Developer",
48    content:
49      "Zero dependencies, fully typed, and production-ready. This is how component libraries should be built.",
50  },
51  {
52    name: "Lisa Anderson",
53    role: "Tech Lead",
54    content:
55      "The best part? Everything is customizable with Tailwind. No fighting with CSS frameworks or complex overrides.",
56  },
57];
58 
59const TestimonialCard = ({ name, role, content, avatar }: TestimonialItem) => {
60  const initials = name
61    .split(" ")
62    .map((n) => n[0])
63    .join("")
64    .toUpperCase();
65 
66  return (
67    <Card className="w-80 gap-4 p-6">
68      <div className="flex items-center gap-2">
69        <Avatar className="size-10">
70          {avatar ? (
71            <img src={avatar} alt={name} className="size-full object-cover" />
72          ) : (
73            <AvatarFallback className="bg-primary font-medium text-primary-foreground">
74              {initials}
75            </AvatarFallback>
76          )}
77        </Avatar>
78        <div className="flex flex-col gap-0.5">
79          <p className="font-medium">{name}</p>
80          <p className="text-sm text-muted-foreground">{role}</p>
81        </div>
82      </div>
83// … truncated