feat: new home web

packages/web/src/pages/landing/TestimonialsSection.tsx

@@ -0,0 +1,71 @@
+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>
+  );
+}