testimonials-marquee-block-01

1import {
2  Marquee,
3  MarqueeContent,
4  MarqueeFade,
5  MarqueeItem,
6} from "@/components/kibo-ui/marquee";
7import {
8  Testimonial,
9  TestimonialAuthor,
10  TestimonialAuthorName,
11  TestimonialAuthorTagline,
12  TestimonialAvatar,
13  TestimonialAvatarImg,
14  TestimonialAvatarRing,
15  TestimonialQuote,
16  TestimonialVerifiedBadge,
17} from "@/registry/testimonials-marquee";
18 
19export default function TestimonialsMarqueeDemo1() {
20  return (
21    <div className="w-full bg-background">
22      <Marquee className="border-y border-edge [&_.rfm-initial-child-container]:items-stretch! [&_.rfm-marquee]:items-stretch!">
23        <MarqueeFade side="left" />
24        <MarqueeFade side="right" />
25 
26        <MarqueeContent>
27          {TESTIMONIALS.map((item) => (
28            <MarqueeItem
29              key={item.url}
30              className="mx-0 h-full w-xs border-r border-edge"
31            >
32              <a
33                href={item.url}
34                target="_blank"
35                rel="noopener noreferrer"
36                className="block h-full"
37              >
38                <Testimonial>
39                  <TestimonialQuote>
40                    <p>{item.quote}</p>
41                  </TestimonialQuote>
42 
43                  <TestimonialAuthor>
44                    <TestimonialAvatar>
45                      <TestimonialAvatarImg src={item.authorAvatar} />
46                      <TestimonialAvatarRing />
47                    </TestimonialAvatar>
48 
49                    <TestimonialAuthorName>
50                      {item.authorName}
51                      <TestimonialVerifiedBadge />
52                    </TestimonialAuthorName>
53 
54                    <TestimonialAuthorTagline>
55                      {item.authorTagline}
56                    </TestimonialAuthorTagline>
57                  </TestimonialAuthor>
58                </Testimonial>
59              </a>
60            </MarqueeItem>
61          ))}
62        </MarqueeContent>
63      </Marquee>
64    </div>
65  );
66}
67 
68const TESTIMONIALS = [
69  {
70    authorAvatar:
71      "https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg",
72    authorName: "Guillermo Rauch",
73    authorTagline: "CEO @Vercel",
74    url: "https://x.com/rauchg/status/1978913158514237669",
75    quote:
76      "awesome. Love the components, especially slide-to-unlock. Great job",
77  },
78  {
79    authorAvatar:
80      "https://pbs.twimg.com/profile_images/1756766826736893952/6Gvg6jha_400x400.jpg",
81    authorName: "OrcDev",
82    authorTagline: "Creator of 8bitcn.com",
83// … truncated