Infinite Card Marquee

1"use client";
2
3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5
6export const horizontalCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Web Development",
10    description: "Modern frontend solutions",
11    content: (
12      <div className="p-2">
13        <p className="text-sm">
14          Our team specializes in building responsive and accessible web
15          applications using the latest technologies.
16        </p>
17      </div>
18    ),
19    footer: (
20      <div className="flex w-full justify-between">
21        <Badge variant="outline">React</Badge>
22        <Badge variant="outline">Next.js</Badge>
23      </div>
24    ),
25  },
26  {
27    id: 2,
28    title: "Mobile Apps",
29    description: "Cross-platform development",
30    content: (
31      <div className="p-2">
32        <p className="text-sm">
33          We create native-like mobile experiences that work seamlessly across
34          both iOS and Android platforms.
35        </p>
36      </div>
37    ),
38    footer: (
39      <div className="flex w-full justify-between">
40        <Badge variant="outline">React Native</Badge>
41        <Badge variant="outline">Flutter</Badge>
42      </div>
43    ),
44  },
45  {
46    id: 3,
47    title: "Backend Services",
48    description: "Scalable API solutions",
49    content: (
50      <div className="p-2">
51        <p className="text-sm">
52          Our backend services are built to scale, with robust APIs and
53          efficient database designs.
54        </p>
55      </div>
56    ),
57    footer: (
58      <div className="flex w-full justify-between">
59        <Badge variant="outline">Node.js</Badge>
60        <Badge variant="outline">Python</Badge>
61      </div>
62    ),
63  },
64  {
65    id: 4,
66    title: "DevOps",
67    description: "CI/CD and deployment",
68    content: (
69      <div className="p-2">
70        <p className="text-sm">
71          We implement automated testing and deployment pipelines to ensure
72          consistent and reliable software delivery.
73        </p>
74      </div>
75    ),
76    footer: (
77      <div className="flex w-full justify-between">
78        <Badge variant="outline">Docker</Badge>
79        <Badge variant="outline">Kubernetes</Badge>
80      </div>
81    ),
82  },
83  {
84    id: 5,
85    title: "UI/UX Design",
86    description: "User-centered interfaces",
87    content: (
88      <div className="p-2">
89        <p className="text-sm">
90          Our design team creates intuitive and visually appealing interfaces
91          with a focus on user experience.
92        </p>
93      </div>
94    ),
95    footer: (
96      <div className="flex w-full justify-between">
97        <Badge variant="outline">Figma</Badge>
98        <Badge variant="outline">Adobe XD</Badge>
99      </div>
100    ),
101  },
102];
103
104export function InfiniteCardMarqueeHorizontalExample() {
105  return (
106    <InfiniteCardMarquee
107      cards={horizontalCards}
108      axis="horizontal"
109      speed="normal"
110      cardWidth={300}
111      gap={16}
112      className="flex h-[400px] items-center"
113    />
114  );
115}

1"use client";
2
3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5
6export const verticalCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Web Development",
10    description: "Modern frontend solutions",
11    content: (
12      <div className="p-2">
13        <p className="text-sm">
14          Our team specializes in building responsive and accessible web
15          applications using the latest technologies.
16        </p>
17      </div>
18    ),
19    footer: (
20      <div className="flex w-full justify-between">
21        <Badge variant="outline">React</Badge>
22        <Badge variant="outline">Next.js</Badge>
23      </div>
24    ),
25  },
26  {
27    id: 2,
28    title: "Mobile Apps",
29    description: "Cross-platform development",
30    content: (
31      <div className="p-2">
32        <p className="text-sm">
33          We create native-like mobile experiences that work seamlessly across
34          both iOS and Android platforms.
35        </p>
36      </div>
37    ),
38    footer: (
39      <div className="flex w-full justify-between">
40        <Badge variant="outline">React Native</Badge>
41        <Badge variant="outline">Flutter</Badge>
42      </div>
43    ),
44  },
45  {
46    id: 3,
47    title: "Backend Services",
48    description: "Scalable API solutions",
49    content: (
50      <div className="p-2">
51        <p className="text-sm">
52          Our backend services are built to scale, with robust APIs and
53          efficient database designs.
54        </p>
55      </div>
56    ),
57    footer: (
58      <div className="flex w-full justify-between">
59        <Badge variant="outline">Node.js</Badge>
60        <Badge variant="outline">Python</Badge>
61      </div>
62    ),
63  },
64  {
65    id: 4,
66    title: "DevOps",
67    description: "CI/CD and deployment",
68    content: (
69      <div className="p-2">
70        <p className="text-sm">
71          We implement automated testing and deployment pipelines to ensure
72          consistent and reliable software delivery.
73        </p>
74      </div>
75    ),
76    footer: (
77      <div className="flex w-full justify-between">
78        <Badge variant="outline">Docker</Badge>
79        <Badge variant="outline">Kubernetes</Badge>
80      </div>
81    ),
82  },
83  {
84    id: 5,
85    title: "UI/UX Design",
86    description: "User-centered interfaces",
87    content: (
88      <div className="p-2">
89        <p className="text-sm">
90          Our design team creates intuitive and visually appealing interfaces
91          with a focus on user experience.
92        </p>
93      </div>
94    ),
95    footer: (
96      <div className="flex w-full justify-between">
97        <Badge variant="outline">Figma</Badge>
98        <Badge variant="outline">Adobe XD</Badge>
99      </div>
100    ),
101  },
102];
103
104export function InfiniteCardMarqueeVerticalExample() {
105  return (
106    <div className="mx-auto w-full max-w-xs">
107      <InfiniteCardMarquee
108        cards={verticalCards.slice(0, 4)}
109        axis="vertical"
110        speed="fast"
111        cardWidth={280}
112        cardHeight={260}
113        gap={12}
114        className="h-[400px]"
115        viewportClassName="h-full"
116      />
117    </div>
118  );
119}

1"use client";
2
3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5
6export const rowsCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Exceptional Quality",
10    description: "Tibbs Tech transformed our business operations.",
11    content: (
12      <div className="space-y-2 p-2">
13        <p className="text-sm">
14          &quot;The team at Tibbs Tech delivered beyond our expectations. Their
15          attention to detail and commitment to quality is unmatched in the
16          industry.&quot;
17        </p>
18        <div className="flex items-center gap-2 pt-2">
19          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
20            JD
21          </div>
22          <div>
23            <p className="text-sm font-medium">John Doe</p>
24            <p className="text-xs text-muted-foreground">CTO, TechCorp</p>
25          </div>
26        </div>
27      </div>
28    ),
29    footer: (
30      <div className="flex w-full justify-between">
31        <Badge variant="outline">Software Development</Badge>
32        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
33      </div>
34    ),
35  },
36  {
37    id: 2,
38    title: "Innovative Solutions",
39    description: "Cutting-edge technology implementation",
40    content: (
41      <div className="space-y-2 p-2">
42        <p className="text-sm">
43          &quot;Tibbs Tech provided innovative solutions that helped us stay
44          ahead of our competition. Their strategic approach to problem-solving
45          is refreshing.&quot;
46        </p>
47        <div className="flex items-center gap-2 pt-2">
48          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
49            JS
50          </div>
51          <div>
52            <p className="text-sm font-medium">Jane Smith</p>
53            <p className="text-xs text-muted-foreground">CEO, InnovateTech</p>
54          </div>
55        </div>
56      </div>
57    ),
58    footer: (
59      <div className="flex w-full justify-between">
60        <Badge variant="outline">AI Integration</Badge>
61        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
62      </div>
63    ),
64  },
65  {
66    id: 3,
67    title: "Reliable Support",
68    description: "24/7 customer assistance",
69    content: (
70      <div className="space-y-2 p-2">
71        <p className="text-sm">
72          &quot;The support team at Tibbs Tech is always available and quick to
73          respond. They&apos;ve saved us from critical situations multiple
74          times.&quot;
75        </p>
76        <div className="flex items-center gap-2 pt-2">
77          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
78            RJ
79          </div>
80          <div>
81            <p className="text-sm font-medium">Robert Johnson</p>
82            <p className="text-xs text-muted-foreground">
83              IT Director, Enterprise Co.
84            </p>
85          </div>
86        </div>
87      </div>
88    ),
89    footer: (
90      <div className="flex w-full justify-between">
91        <Badge variant="outline">Technical Support</Badge>
92        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
93      </div>
94    ),
95  },
96];
97
98export function InfiniteCardMarqueeRowsExample() {
99  return (
100    <InfiniteCardMarquee
101      cards={rowsCards}
102      rows={2}
103      rowReverse={[false, true]}
104      cardWidth={280}
105      cardHeight={340}
106      gap={16}
107      rowGap={8}
108    />
109  );
110}