wilddragon-site/src.bright-backup/components/Testimonial.tsx
2026-04-17 15:51:01 -04:00

46 lines
1.8 KiB
TypeScript
Executable file

import ScrollReveal from "./ScrollReveal";
import { Quote } from "lucide-react";
export default function Testimonial() {
return (
<section className="py-24 md:py-32 bg-surface relative overflow-hidden">
{/* Radial glow */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-accent/[0.04] rounded-full blur-[100px]" />
{/* Subtle background texture */}
<div className="absolute inset-0 opacity-[0.03]">
<div
className="absolute inset-0"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.4) 1px, transparent 0)`,
backgroundSize: "40px 40px",
}}
/>
</div>
<div className="relative z-10 max-w-4xl mx-auto px-6">
<ScrollReveal>
<div className="text-center">
<Quote
size={36}
className="text-accent/30 mx-auto mb-8"
strokeWidth={1}
/>
<blockquote className="text-xl md:text-2xl lg:text-3xl font-light text-white/85 leading-relaxed mb-10">
&ldquo;The best broadcast infrastructure is invisible to the people who use it every day.
It just works&mdash;reliably, intuitively, and at scale. That&apos;s what I design for.&rdquo;
</blockquote>
<div className="flex items-center justify-center gap-4">
<div className="w-10 h-px bg-accent/40 glow-accent-sm" />
<div>
<p className="text-sm font-medium text-white">Zachary Gaetano</p>
<p className="text-xs text-white/45">Principal Systems Designer</p>
</div>
<div className="w-10 h-px bg-accent/40 glow-accent-sm" />
</div>
</div>
</ScrollReveal>
</div>
</section>
);
}