Hero Glassmorphic Testimonial Marquee

1'use client';
2
3import React from 'react';
4import { Quote, Sparkles, Star } from 'lucide-react';
5
6const BRANDS = ['STRIPE', 'VERCEL', 'LINEAR', 'SUPABASE', 'NEXT.JS'];
7
8export default function GlassmorphicCardMarquee() {
9  return (
10    <div className="w-full max-w-5xl mx-auto py-8 px-4 select-none">
11      {/* Hero Quote Card */}
12      <div className="relative overflow-hidden rounded-3xl border border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70 backdrop-blur-2xl p-6 sm:p-10 shadow-2xl">
13        <div className="absolute top-0 right-0 p-8 opacity-10 dark:opacity-20 pointer-events-none">
14          <Quote className="h-32 w-32 text-blue-600 dark:text-blue-400" />
15        </div>
16
17        <div className="relative z-10 flex flex-col items-center text-center">
18          {/* Avatar Group */}
19          <div className="flex items-center gap-2 mb-4">
20            <div className="flex -space-x-2 overflow-hidden">
21              <div className="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900 bg-gradient-to-tr from-blue-600 to-indigo-600 text-white font-bold text-xs flex items-center justify-center">CB</div>
22              <div className="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900 bg-gradient-to-tr from-purple-600 to-pink-600 text-white font-bold text-xs flex items-center justify-center">LS</div>
23              <div className="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900 bg-gradient-to-tr from-emerald-600 to-teal-600 text-white font-bold text-xs flex items-center justify-center">AO</div>
24              <div className="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900 bg-gradient-to-tr from-amber-500 to-orange-600 text-white font-bold text-xs flex items-center justify-center">VP</div>
25            </div>
26            <div className="flex items-center gap-1 text-amber-400 ml-2">
27              {[...Array(5)].map((_, i) => (
28                <Star key={i} className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
29              ))}
30              <span className="text-xs font-bold text-slate-700 dark:text-slate-300 ml-1">5.0 rating from 10,000+ devs</span>
31            </div>
32          </div>
33
34          {/* Large Quote */}
35          <h2 className="text-base sm:text-xl md:text-2xl font-semibold text-slate-800 dark:text-slate-100 max-w-3xl leading-relaxed italic">
36            &quot;The glassmorphic components in Aurenza UI are stunning. Our landing page conversion rate boosted by 35% within 48 hours of adopting this design system.&quot;
37          </h2>
38
39          {/* Author Details */}
40          <div className="mt-6 flex flex-col items-center">
41            <h4 className="text-sm font-extrabold text-slate-900 dark:text-slate-100 flex items-center gap-1.5">
42              Chloe Bennett
43              <Sparkles className="h-3.5 w-3.5 text-blue-500" />
44            </h4>
45            <p className="text-xs text-blue-600 dark:text-blue-400 font-medium">Founder & CEO @ LuminAI</p>
46          </div>
47
48          {/* Customer Brands */}
49          <div className="mt-8 pt-6 border-t border-slate-200/50 dark:border-slate-800/50 w-full flex flex-wrap items-center justify-center gap-6 sm:gap-10">
50            {BRANDS.map((brand, i) => (
51              <span key={i} className="text-xs font-black tracking-widest text-slate-400 dark:text-slate-500 font-mono">
52                {brand}
53              </span>
54            ))}
55          </div>
56        </div>
57      </div>
58    </div>
59  );
60}