Dual-Row Counter Scrolling Marquee

1'use client';
2
3import React from 'react';
4import { MessageSquare, Star } from 'lucide-react';
5
6const TOP_REVIEWS = [
7  { name: 'Marcus Vance', role: '@marcus_v', text: 'Game-changer for our team. Deploying UI components has never been this smooth.', rating: 5 },
8  { name: 'Elena Rostova', role: '@elena_design', text: 'The attention to typography and spatial hierarchy is 10/10.', rating: 5 },
9  { name: 'David Kim', role: '@dkim_dev', text: 'Zero hydration errors and instant Tailwind v4 compatibility.', rating: 5 }
10];
11
12const BOTTOM_REVIEWS = [
13  { name: 'Sophia Sterling', role: '@sophias', text: 'Extremely clean copy-paste source code. Matches live preview 100%.', rating: 5 },
14  { name: 'Liam Croft', role: '@liam_croft', text: 'The dual-row marquee counter scrolling is visually spectacular.', rating: 5 },
15  { name: 'Amara Okafor', role: '@amara_ux', text: 'Beautiful dark and light mode adaptation for production apps.', rating: 5 }
16];
17
18export default function DualRowCounterMarquee() {
19  return (
20    <div className="w-full max-w-7xl mx-auto py-8 select-none">
21      {/* Header */}
22      <div className="flex flex-col items-center text-center mb-6 px-4">
23        <span className="rounded-full bg-indigo-50 dark:bg-indigo-950/60 border border-indigo-200 dark:border-indigo-800 px-3.5 py-1 text-[11px] font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-widest">
24          DUAL MOTION
25        </span>
26        <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-slate-100 mt-2 tracking-tight">
27          Empowering high-growth products worldwide
28        </h2>
29      </div>
30
31      <div className="w-full overflow-hidden space-y-4 py-2">
32        <div className="group flex w-max gap-4 hover:[animation-play-state:paused] animate-[marquee_25s_linear_infinite]">
33          {[...TOP_REVIEWS, ...TOP_REVIEWS, ...TOP_REVIEWS].map((item, idx) => (
34            <div
35              key={idx}
36              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-4 shadow-md transition-colors"
37            >
38              <div className="flex items-center justify-between mb-2">
39                <div className="flex items-center gap-2">
40                  <div className="h-7 w-7 rounded-full bg-blue-600 flex items-center justify-center font-bold text-white text-[11px]">
41                    {item.name.charAt(0)}
42                  </div>
43                  <div>
44                    <h4 className="text-xs font-bold text-slate-900 dark:text-slate-100">{item.name}</h4>
45                    <p className="text-[10px] text-slate-400 font-mono">{item.role}</p>
46                  </div>
47                </div>
48                <MessageSquare className="h-3.5 w-3.5 text-blue-500" />
49              </div>
50              <p className="text-xs text-slate-600 dark:text-slate-300 font-medium leading-relaxed">
51                &quot;{item.text}&quot;
52              </p>
53            </div>
54          ))}
55        </div>
56
57        <div className="group flex w-max gap-4 hover:[animation-play-state:paused] animate-[marquee-reverse_25s_linear_infinite]">
58          {[...BOTTOM_REVIEWS, ...BOTTOM_REVIEWS, ...BOTTOM_REVIEWS].map((item, idx) => (
59            <div
60              key={idx}
61              className="w-72 sm:w-80 shrink-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/80 p-4 shadow-md transition-colors"
62            >
63              <div className="flex items-center justify-between mb-2">
64                <div className="flex items-center gap-2">
65                  <div className="h-7 w-7 rounded-full bg-indigo-600 flex items-center justify-center font-bold text-white text-[11px]">
66                    {item.name.charAt(0)}
67                  </div>
68                  <div>
69                    <h4 className="text-xs font-bold text-slate-900 dark:text-slate-100">{item.name}</h4>
70                    <p className="text-[10px] text-slate-400 font-mono">{item.role}</p>
71                  </div>
72                </div>
73                <div className="flex items-center text-amber-400">
74                  <Star className="h-3 w-3 fill-amber-400" />
75                  <span className="text-[10px] font-bold text-slate-500 ml-1">5.0</span>
76                </div>
77              </div>
78              <p className="text-xs text-slate-600 dark:text-slate-300 font-medium leading-relaxed">
79                &quot;{item.text}&quot;
80              </p>
81            </div>
82          ))}
83        </div>
84      </div>
85    </div>
86  );
87}