testimonials-marquee-block-02

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 TestimonialsMarqueeDemo2() {
20  return (
21    <div className="w-full space-y-4 bg-background [&_.rfm-initial-child-container]:items-stretch! [&_.rfm-marquee]:items-stretch!">
22      {[TESTIMONIALS_1, TESTIMONIALS_2].map((list, index) => (
23        <Marquee key={index} className="border-y border-edge">
24          <MarqueeFade side="left" />
25          <MarqueeFade side="right" />
26 
27          <MarqueeContent direction={index % 2 === 1 ? "right" : "left"}>
28            {list.map((item) => (
29              <MarqueeItem
30                key={item.url}
31                className="mx-0 h-full w-xs border-r border-edge"
32              >
33                <a
34                  href={item.url}
35                  target="_blank"
36                  rel="noopener noreferrer"
37                  className="block h-full"
38                >
39                  <Testimonial>
40                    <TestimonialQuote>
41                      <p>{item.quote}</p>
42                    </TestimonialQuote>
43 
44                    <TestimonialAuthor>
45                      <TestimonialAvatar>
46                        <TestimonialAvatarImg src={item.authorAvatar} />
47                        <TestimonialAvatarRing />
48                      </TestimonialAvatar>
49 
50                      <TestimonialAuthorName>
51                        {item.authorName}
52                        <TestimonialVerifiedBadge />
53                      </TestimonialAuthorName>
54 
55                      <TestimonialAuthorTagline>
56                        {item.authorTagline}
57                      </TestimonialAuthorTagline>
58                    </TestimonialAuthor>
59                  </Testimonial>
60                </a>
61              </MarqueeItem>
62            ))}
63          </MarqueeContent>
64        </Marquee>
65      ))}
66    </div>
67  );
68}
69 
70const TESTIMONIALS_1 = [
71  {
72    authorAvatar:
73      "https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg",
74    authorName: "Guillermo Rauch",
75    authorTagline: "CEO @Vercel",
76    url: "https://x.com/rauchg/status/1978913158514237669",
77    quote:
78// … truncated