feat: add testimonials section with testimonial cards

2026-02-13 14:11:19 +08:00
parent 04b2aca4c1
commit 8ac0065a06
3 changed files with 167 additions and 0 deletions
@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { TestimonialCard } from '@/components/ui/testimonial-card';
+
+interface Testimonial {
+  id: string;
+  quote: string;
+  author: string;
+  position: string;
+  company: string;
+  avatarUrl?: string;
+  rating?: number;
+}
+
+const MOCK_TESTIMONIALS: Testimonial[] = [
+  {
+    id: '1',
+    quote: '睿新致远的团队非常专业，他们不仅理解我们的业务需求，还能提供超出预期的技术解决方案。数字化转型后，我们的运营效率提升了40%。',
+    author: '张总',
+    position: '总经理',
+    company: '某制造企业',
+    avatarUrl: '/testimonials/avatar-1.jpg',
+    rating: 5,
+  },
+  {
+    id: '2',
+    quote: '选择睿新致远是我们最正确的决定。他们的数据中台解决方案帮助我们实现了数据资产的统一管理，决策效率大幅提升。',
+    author: '李经理',
+    position: '信息部经理',
+    company: '某零售集团',
+    avatarUrl: '/testimonials/avatar-2.jpg',
+    rating: 5,
+  },
+  {
+    id: '3',
+    quote: '从需求分析到系统上线，睿新致远的团队都表现出极高的专业素养。他们的ERP系统让我们的业务流程更加标准化、透明化。',
+    author: '王总监',
+    position: '运营总监',
+    company: '某物流企业',
+    avatarUrl: '/testimonials/avatar-3.jpg',
+    rating: 5,
+  },
+];
+
+export function TestimonialsSection() {
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      id="testimonials"
+      ref={sectionRef}
+      className="py-24 bg-white"
+    >
+      <div className="container-wide">
+        <div
+          className={`
+            text-center mb-16
+            opacity-0 translate-y-4
+            ${isVisible ? 'animate-fade-in-up' : ''}
+          `}
+        >
+          <h2 className="text-3xl sm:text-4xl font-semibold text-[#171717] mb-4">
+            客户评价
+          </h2>
+          <p className="text-lg text-[#737373] max-w-2xl mx-auto">
+            听听我们的客户怎么说
+          </p>
+        </div>
+
+        <div
+          className={`
+            grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8
+            opacity-0 translate-y-4
+            ${isVisible ? 'animate-fade-in-up stagger-1' : ''}
+          `}
+        >
+          {MOCK_TESTIMONIALS.map((testimonial) => (
+            <TestimonialCard key={testimonial.id} {...testimonial} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}