marquee-cards-demo

1"use client"
2 
3import { Marquee } from "@/components/ui/marquee"
4 
5const testimonials = [
6  {
7    name: "Sarah Chen",
8    role: "Product Manager",
9    company: "TechCorp",
10    content:
11      "This component library has revolutionized our development workflow. The quality and attention to detail is exceptional.",
12    avatar:
13      "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
14  },
15  {
16    name: "Alex Rodriguez",
17    role: "Senior Developer",
18    company: "StartupXYZ",
19    content:
20      "Beautiful components that are actually usable in production. The documentation is clear and examples are helpful.",
21    avatar:
22      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
23  },
24  {
25    name: "Emily Johnson",
26    role: "Design Lead",
27    company: "CreativeStudio",
28    content:
29      "Perfect balance between design and functionality. These components save us hours of development time.",
30    avatar:
31      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face",
32  },
33  {
34    name: "Michael Kim",
35    role: "Frontend Engineer",
36    company: "DevTeam",
37    content:
38      "Clean, well-documented, and performant. Everything we need for modern web applications.",
39    avatar:
40      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
41  },
42  {
43    name: "Jessica Wu",
44    role: "UI/UX Designer",
45    company: "DesignLab",
46    content:
47      "These components bridge the gap between design and development perfectly. Highly recommended!",
48    avatar:
49      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&h=150&fit=crop&crop=face",
50  },
51]
52 
53export default function MarqueeCardsDemo() {
54  return (
55    <div className="w-full py-12">
56      <Marquee speed={35} className="py-4">
57        {testimonials.map((testimonial) => (
58          <div
59            key={testimonial.name}
60            className="bg-card border-border rounded-lg border p-6 shadow-sm"
61          >
62            <div className="flex items-start gap-4">
63              <img
64                src={testimonial.avatar}
65                alt={testimonial.name}
66                className="h-12 w-12 rounded-full object-cover"
67              />
68              <div className="flex-1">
69                <div className="mb-2">
70                  <h4 className="text-sm font-semibold">{testimonial.name}</h4>
71// … truncated