diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index 21820cb..15cadc0 100644 --- a/src/app/(marketing)/page.tsx +++ b/src/app/(marketing)/page.tsx @@ -12,6 +12,7 @@ import { AboutSection } from "@/components/sections/about-section"; import { ServicesSection } from "@/components/sections/services-section"; import { ProductsSection } from "@/components/sections/products-section"; import { NewsSection } from "@/components/sections/news-section"; +import { TestimonialsSection } from "@/components/sections/testimonials-section"; import { ContactSection } from "@/components/sections/contact-section"; export default function HomePage() { @@ -28,6 +29,7 @@ export default function HomePage() { + diff --git a/src/components/sections/testimonials-section.tsx b/src/components/sections/testimonials-section.tsx new file mode 100644 index 0000000..0bee76b --- /dev/null +++ b/src/components/sections/testimonials-section.tsx @@ -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(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 ( + + + + + 客户评价 + + + 听听我们的客户怎么说 + + + + + {MOCK_TESTIMONIALS.map((testimonial) => ( + + ))} + + + + ); +} diff --git a/src/components/ui/testimonial-card.tsx b/src/components/ui/testimonial-card.tsx new file mode 100644 index 0000000..23eda42 --- /dev/null +++ b/src/components/ui/testimonial-card.tsx @@ -0,0 +1,62 @@ +'use client'; + +import { Quote } from 'lucide-react'; + +export interface TestimonialCardProps { + quote: string; + author: string; + position: string; + company: string; + avatarUrl?: string; + rating?: number; +} + +export function TestimonialCard({ + quote, + author, + position, + company, + avatarUrl, + rating = 5, +}: TestimonialCardProps) { + return ( + + + + {rating > 0 && ( + + {Array.from({ length: rating }).map((_, i) => ( + + + + ))} + + )} + + + "{quote}" + + + + {avatarUrl && ( + + )} + + {author} + + {position} · {company} + + + + + ); +}
+ 听听我们的客户怎么说 +
+ "{quote}" +