72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { useI18n } from '../../lib/i18n';
|
|
import { useScrollReveal } from '../../hooks/useScrollReveal';
|
|
|
|
const testimonials = [1, 2, 3] as const;
|
|
|
|
export default function TestimonialsSection() {
|
|
const { t } = useI18n();
|
|
const { ref, isVisible } = useScrollReveal();
|
|
|
|
const colors = ['#f59e0b', '#6366f1', '#30a46c'];
|
|
|
|
return (
|
|
<div className="w-full py-20">
|
|
<div ref={ref} className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<div className={`text-center mb-16 transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
|
<span className="inline-block text-xs font-semibold uppercase tracking-[0.15em] mb-3 px-3 py-1 rounded-full"
|
|
style={{ color: 'var(--fox-amber)', background: 'var(--fox-glow)' }}>
|
|
{t('testimonials.label')}
|
|
</span>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight" style={{ fontFamily: 'var(--font-heading)', color: 'var(--text-primary)' }}>
|
|
{t('testimonials.title')}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
{testimonials.map((num, i) => (
|
|
<div
|
|
key={num}
|
|
className={`relative p-7 rounded-2xl transition-all duration-700 hover:-translate-y-1 hover:shadow-lg ${
|
|
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
|
|
}`}
|
|
style={{
|
|
transitionDelay: isVisible ? `${200 + i * 150}ms` : '0ms',
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border-default)',
|
|
}}
|
|
>
|
|
{/* Quote mark */}
|
|
<div className="absolute top-5 right-6 text-5xl font-serif leading-none" style={{ color: 'var(--border-default)' }}>
|
|
"
|
|
</div>
|
|
|
|
{/* Quote text */}
|
|
<p className="text-sm leading-relaxed mb-6 relative z-10" style={{ color: 'var(--text-secondary)' }}>
|
|
"{t(`testimonials.${num}.quote`)}"
|
|
</p>
|
|
|
|
{/* Author */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-bold text-white shrink-0"
|
|
style={{ background: colors[i] }}>
|
|
{t(`testimonials.${num}.name`).split(' ').map(w => w[0]).join('')}
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
|
{t(`testimonials.${num}.name`)}
|
|
</div>
|
|
<div className="text-[12px]" style={{ color: 'var(--text-muted)' }}>
|
|
{t(`testimonials.${num}.role`)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|