Neo-Brutalist Stacked Card Switcher

1'use client';
2
3import React, { useState } from 'react';
4import { ChevronLeft, ChevronRight } from 'lucide-react';
5
6const REVIEWS = [
7  { name: 'Alex Rivers', role: 'Frontend Lead @ Vercel', text: 'Bold design, thick borders, zero BS. Highly customizable components that stand out from generic AI templates.' },
8  { name: 'Maya Lin', role: 'Product Designer @ Linear', text: 'Neo-brutalist cards with perfect contrast in both dark and light modes. Copy paste worked instantly without setup.' },
9  { name: 'Jaxson Reed', role: 'Fullstack Developer @ Supabase', text: 'Saved me 3 days of styling. The hard shadow offset and tactile feel are 10/10.' },
10  { name: 'Sofia Al-Mansoor', role: 'VP of Product @ Stripe', text: 'Incredible speed of integration. The layout cards look pixel perfect on mobile and ultra-wide screens.' }
11];
12
13export default function BrutalistMarqueeTestimonial() {
14  const [index, setIndex] = useState(0);
15
16  const prev = () => setIndex((i) => (i === 0 ? REVIEWS.length - 1 : i - 1));
17  const next = () => setIndex((i) => (i === REVIEWS.length - 1 ? 0 : i + 1));
18
19  const item = REVIEWS[index];
20
21  return (
22    <div className="w-full max-w-4xl mx-auto py-8 px-4 font-mono select-none">
23      {/* Header */}
24      <div className="flex items-center justify-between mb-6">
25        <div>
26          <span className="rounded-md border-2 border-slate-900 dark:border-slate-100 bg-amber-300 dark:bg-amber-400 px-2 py-0.5 text-[10px] font-black text-slate-900 uppercase">
27            NEO-BRUTALIST STACK
28          </span>
29          <h3 className="text-lg font-black text-slate-900 dark:text-slate-100 mt-1">WHAT BUILDERS SAY</h3>
30        </div>
31        <div className="flex items-center gap-2">
32          <span className="text-xs font-black text-slate-900 dark:text-slate-100">
33            0{index + 1} / 0{REVIEWS.length}
34          </span>
35          <button
36            onClick={prev}
37            className="flex h-8 w-8 items-center justify-center rounded-lg border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] active:translate-x-0.5 active:translate-y-0.5 transition"
38          >
39            <ChevronLeft className="h-4 w-4" />
40          </button>
41          <button
42            onClick={next}
43            className="flex h-8 w-8 items-center justify-center rounded-lg border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] active:translate-x-0.5 active:translate-y-0.5 transition"
44          >
45            <ChevronRight className="h-4 w-4" />
46          </button>
47        </div>
48      </div>
49
50      {/* Main Brutalist Stack Card */}
51      <div className="rounded-3xl border-3 border-slate-900 dark:border-slate-100 bg-amber-300 dark:bg-slate-900 p-6 sm:p-8 shadow-[8px_8px_0px_0px_#000] dark:shadow-[8px_8px_0px_0px_#fff] text-slate-900 dark:text-slate-100 transition-all">
52        <div className="flex items-center justify-between mb-4">
53          <span className="rounded-md border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 px-2.5 py-1 text-[11px] font-black uppercase text-slate-900 dark:text-slate-100">
54            VERIFIED REVIEW
55          </span>
56          <span className="text-sm font-black text-slate-900 dark:text-slate-100">5.0 ★</span>
57        </div>
58
59        <p className="text-base sm:text-lg font-bold leading-relaxed text-slate-900 dark:text-slate-100 mt-3">
60          &quot;{item.text}&quot;
61        </p>
62
63        <div className="mt-6 pt-4 border-t-2 border-slate-900 dark:border-slate-100 flex items-center justify-between">
64          <div>
65            <h4 className="text-sm font-black text-slate-900 dark:text-slate-100">{item.name}</h4>
66            <p className="text-xs font-bold text-slate-800 dark:text-slate-400">{item.role}</p>
67          </div>
68          <button
69            onClick={next}
70            className="rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 px-3 py-1.5 text-xs font-black text-slate-900 dark:text-slate-100 shadow-[3px_3px_0px_0px_#000] dark:shadow-[3px_3px_0px_0px_#fff]"
71          >
72            NEXT QUOTE →
73          </button>
74        </div>
75      </div>
76    </div>
77  );
78}