Glowing Carousel Card Testimonial

1'use client';
2
3import React, { useState } from 'react';
4import { Star, Zap, ChevronLeft, ChevronRight } from 'lucide-react';
5
6const REVIEWS = [
7  { name: 'Emily Watson', role: 'Head of Growth @ Stripe', text: 'The glowing border effects and rich aesthetic make our testimonial section draw immediate focus on our landing page.', badge: 'Top Rated' },
8  { name: 'Nathan Drake', role: 'Solutions Architect @ Vercel', text: 'Clean copy-paste code with perfect TypeScript support and instant Tailwind v4 compatibility across all routes.', badge: 'Verified' },
9  { name: 'Zoe Martinez', role: 'Design Systems Director @ Figma', text: 'Seamless light and dark mode switching with high-contrast elements. Absolute joy for our product design team.', badge: 'Featured' },
10  { name: 'Lucas Rossi', role: 'Core Lead @ Supabase', text: 'Zero hydration errors and instant setup. Components rendered pixel-perfect across desktop and mobile screens.', badge: 'Top Pick' }
11];
12
13export default function GlowGradientTestimonialRow() {
14  const [current, setCurrent] = useState(0);
15
16  const prev = () => setCurrent((c) => (c === 0 ? REVIEWS.length - 1 : c - 1));
17  const next = () => setCurrent((c) => (c === REVIEWS.length - 1 ? 0 : c + 1));
18
19  const item = REVIEWS[current];
20
21  return (
22    <div className="w-full max-w-4xl mx-auto py-8 px-4 select-none">
23      {/* Header */}
24      <div className="flex items-center justify-between mb-6">
25        <div>
26          <span className="flex items-center gap-1.5 text-xs font-bold text-purple-600 dark:text-purple-400 uppercase tracking-widest">
27            <Zap className="h-3.5 w-3.5" /> FEATURED REVIEWS
28          </span>
29          <h3 className="text-xl font-extrabold text-slate-900 dark:text-slate-100 mt-1">
30            Hear from industry leaders
31          </h3>
32        </div>
33        <div className="flex items-center gap-2">
34          <button
35            onClick={prev}
36            className="flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 hover:border-purple-500 transition shadow-md"
37          >
38            <ChevronLeft className="h-4 w-4" />
39          </button>
40          <button
41            onClick={next}
42            className="flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 hover:border-purple-500 transition shadow-md"
43          >
44            <ChevronRight className="h-4 w-4" />
45          </button>
46        </div>
47      </div>
48
49      {/* Main Gradient Card */}
50      <div className="relative overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 sm:p-8 shadow-xl transition-all">
51        <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500" />
52        
53        <div className="flex items-center justify-between mb-4">
54          <div className="flex items-center gap-0.5 text-purple-500">
55            {[...Array(5)].map((_, i) => (
56              <Star key={i} className="h-4 w-4 fill-purple-500 text-purple-500" />
57            ))}
58          </div>
59          <span className="flex items-center gap-1 rounded-full bg-purple-50 dark:bg-purple-950/60 px-2.5 py-0.5 text-[10px] font-bold text-purple-600 dark:text-purple-300">
60            <Zap className="h-3 w-3" /> {item.badge}
61          </span>
62        </div>
63
64        <p className="text-sm sm:text-base text-slate-700 dark:text-slate-300 leading-relaxed font-medium mt-2">
65          &quot;{item.text}&quot;
66        </p>
67
68        <div className="mt-6 pt-4 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
69          <div>
70            <h4 className="text-sm font-bold text-slate-900 dark:text-slate-100">{item.name}</h4>
71            <p className="text-xs text-purple-600 dark:text-purple-400 font-medium">{item.role}</p>
72          </div>
73          {/* Index indicator */}
74          <div className="flex items-center gap-1.5">
75            {REVIEWS.map((_, idx) => (
76              <button
77                key={idx}
78                onClick={() => setCurrent(idx)}
79                className={`h-2 rounded-full transition-all ${
80                  idx === current ? 'w-6 bg-purple-600' : 'w-2 bg-slate-300 dark:bg-slate-700'
81                }`}
82              />
83            ))}
84          </div>
85        </div>
86      </div>
87    </div>
88  );
89}