Cyberpunk HUD Review Row

1'use client';
2
3import React from 'react';
4import { Terminal, ShieldCheck, Cpu } from 'lucide-react';
5
6const REVIEWS = [
7  { name: 'Kaelen Vance', role: 'Security Architect', text: 'Telemetry metrics and code audit passed 100%. No hidden bundle dependencies or inline style vulnerabilities.', ver: 'v2.4' },
8  { name: 'Ryder Blake', role: 'DevOps Lead', text: 'Integrates perfectly with Next.js 16 SSR and client components without any hydration mismatch errors.', ver: 'v2.4' },
9  { name: 'Nadia Ray', role: 'FullStack Engineer', text: 'The terminal & cyberpunk aesthetic components are unbelievable. Copy paste worked in under 30 seconds.', ver: 'v2.4' }
10];
11
12export default function CyberTelemetryTestimonialRow() {
13  return (
14    <div className="w-full max-w-7xl mx-auto py-8 font-mono select-none">
15      {/* Header */}
16      <div className="flex flex-col items-center text-center mb-6 px-4">
17        <div className="flex items-center gap-2 rounded-xl border border-cyan-500/30 bg-slate-950 px-3 py-1 text-xs text-cyan-400">
18          <Cpu className="h-4 w-4 text-cyan-400" />
19          <span>SYSTEM // TELEMETRY FEEDBACK</span>
20        </div>
21        <h2 className="text-xl sm:text-2xl font-bold text-cyan-300 mt-2">
22          AUDIT LOGS & ENGINE TESTIMONIALS
23        </h2>
24      </div>
25
26      <div className="w-full overflow-hidden py-2">
27        <div className="group flex w-max gap-4 hover:[animation-play-state:paused] animate-[marquee_28s_linear_infinite]">
28          {[...REVIEWS, ...REVIEWS, ...REVIEWS].map((item, idx) => (
29            <div
30              key={idx}
31              className="w-72 sm:w-80 shrink-0 rounded-2xl border border-cyan-500/30 bg-slate-950 p-5 text-cyan-400 shadow-[0_0_20px_rgba(6,182,212,0.15)]"
32            >
33              <div className="flex items-center justify-between border-b border-cyan-500/20 pb-2 mb-3 text-[10px] text-cyan-500">
34                <span className="flex items-center gap-1.5">
35                  <Terminal className="h-3 w-3 text-cyan-400" />
36                  FEED // LOG #{idx + 101}
37                </span>
38                <span className="text-cyan-300 font-bold">{item.ver}</span>
39              </div>
40              <p className="text-xs text-slate-300 leading-relaxed font-sans">
41                &quot;{item.text}&quot;
42              </p>
43              <div className="mt-4 pt-3 border-t border-cyan-500/20 flex items-center justify-between">
44                <div>
45                  <h4 className="text-xs font-bold text-cyan-300">{item.name}</h4>
46                  <p className="text-[10px] text-slate-400">{item.role}</p>
47                </div>
48                <ShieldCheck className="h-4 w-4 text-cyan-400" />
49              </div>
50            </div>
51          ))}
52        </div>
53      </div>
54    </div>
55  );
56}