张翔
fecbfd1990
refactor: 优化代码健壮性和类型安全 style: 更新字体样式和全局CSS fix: 修复IntersectionObserver潜在空引用问题 chore: 更新依赖和ESLint配置 build: 更新构建ID和路由配置
104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|