Infinite Moving Cards Marquee

1'use client';
2
3import React from 'react';
4import { Star } from 'lucide-react';
5
6const REVIEWS = [
7  { name: 'Sarah Jenkins', role: 'VP of Engineering @ CloudScale', text: 'Aurenza UI has accelerated our product deployment cycles by 4x. The attention to detail and theme parity is unmatched.', rating: 5 },
8  { name: 'David Kim', role: 'Senior Architect @ TechCorp', text: 'Cleanest Tailwind v4 code I have ever copy-pasted. Perfectly responsive out of the box with zero runtime bloat.', rating: 5 },
9  { name: 'Elena Rostova', role: 'Head of Product @ Nexus AI', text: 'The spatial effects and dark mode implementations look like a million bucks. Highly recommended for production apps.', rating: 5 },
10  { name: 'Marcus Thorne', role: 'Design Lead @ Studio X', text: 'Incredible editorial typography and layout choices. Fits right into our modern enterprise design system seamlessly.', rating: 5 }
11];
12
13export default function InfiniteMarqueeTestimonial() {
14  return (
15    <div className="w-full max-w-7xl mx-auto py-8 select-none">
16      {/* Section Header */}
17      <div className="flex flex-col items-center text-center mb-8 px-4">
18        <span className="rounded-full bg-blue-50 dark:bg-blue-950/60 border border-blue-200 dark:border-blue-800 px-3 py-1 text-[11px] font-bold text-blue-600 dark:text-blue-400 uppercase tracking-widest">
19          SOCIAL PROOF
20        </span>
21        <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-slate-100 mt-3 tracking-tight">
22          Loved by thousands of builders worldwide
23        </h2>
24        <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-2 max-w-lg font-medium">
25          Here is what founders, engineers, and designers have to say about shipping with Aurenza UI.
26        </p>
27      </div>
28
29      {/* Infinite Marquee */}
30      <div className="w-full overflow-hidden py-2">
31        <div className="group flex w-max gap-4 hover:[animation-play-state:paused] animate-[marquee_25s_linear_infinite]">
32          {[...REVIEWS, ...REVIEWS, ...REVIEWS].map((item, idx) => (
33            <div
34              key={idx}
35              className="w-72 sm:w-80 shrink-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-lg transition-colors hover:border-blue-500/50"
36            >
37              <div className="flex items-center gap-1 text-amber-400 mb-3">
38                {Array.from({ length: item.rating }).map((_, i) => (
39                  <Star key={i} className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
40                ))}
41              </div>
42              <p className="text-xs text-slate-700 dark:text-slate-300 leading-relaxed font-medium">
43                &quot;{item.text}&quot;
44              </p>
45              <div className="mt-4 pt-3 border-t border-slate-100 dark:border-slate-800/80">
46                <h4 className="text-xs font-bold text-slate-900 dark:text-slate-100">{item.name}</h4>
47                <p className="text-[11px] text-slate-500 dark:text-slate-400 font-medium">{item.role}</p>
48              </div>
49            </div>
50          ))}
51        </div>
52      </div>
53    </div>
54  );
55}