Luxury Serif Spotlight Review

1'use client';
2
3import React from 'react';
4import { Award, CheckCircle2, Star } from 'lucide-react';
5
6export default function LuxuryEditorialTestimonialRow() {
7  return (
8    <div className="w-full max-w-6xl mx-auto py-10 px-4 select-none">
9      <div className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 sm:p-10 shadow-2xl transition-colors">
10        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
11          {/* Left Column: Metrics & Spotlight */}
12          <div className="lg:col-span-5 border-b lg:border-b-0 lg:border-r border-slate-200 dark:border-slate-800 pb-6 lg:pb-0 lg:pr-8">
13            <span className="flex h-9 w-9 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-950/60 text-amber-600 dark:text-amber-400 mb-4">
14              <Award className="h-5 w-5" />
15            </span>
16
17            <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">
18              99.8%
19            </h3>
20            <p className="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wider mt-1">
21              Customer Satisfaction Score
22            </p>
23
24            <div className="mt-6 flex items-center gap-1 text-amber-400">
25              {[...Array(5)].map((_, i) => (
26                <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
27              ))}
28              <span className="text-xs font-bold text-slate-700 dark:text-slate-300 ml-2">4.9/5 from 2,500+ reviews</span>
29            </div>
30
31            <p className="text-xs text-slate-500 dark:text-slate-400 mt-4 leading-relaxed font-medium">
32              Enterprise engineering teams rely on Aurenza UI for rapid design consistency and zero runtime bloat.
33            </p>
34          </div>
35
36          {/* Right Column: Editorial Quote */}
37          <div className="lg:col-span-7 flex flex-col justify-between">
38            <p className="text-lg sm:text-xl font-serif italic text-slate-800 dark:text-slate-200 leading-relaxed">
39              &quot;Aurenza UI represents the gold standard in web component design. Beautiful spatial balance, high-contrast dark mode parity, and typography hierarchy that saved our product rebrand months of design iteration.&quot;
40            </p>
41
42            <div className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
43              <div>
44                <h4 className="text-sm font-extrabold text-slate-900 dark:text-slate-100 flex items-center gap-1.5">
45                  Julian Vance
46                  <CheckCircle2 className="h-4 w-4 text-blue-500" />
47                </h4>
48                <p className="text-xs text-slate-500 dark:text-slate-400 font-medium">Executive Creative Director @ Vance & Co</p>
49              </div>
50              <span className="text-xs font-mono font-bold tracking-widest text-slate-400 dark:text-slate-500 uppercase">
51                VANCE & CO
52              </span>
53            </div>
54          </div>
55        </div>
56      </div>
57    </div>
58  );
59}