From 7d514d4b5156f69c214fc667d6b50651ec5a2954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Thu, 30 Apr 2026 19:19:28 +0800 Subject: [PATCH] feat: add TestimonialBlock, TestimonialSection, and CTASection components --- src/components/sections/cta-section.tsx | 58 +++++++++++++ .../sections/testimonial-section.tsx | 86 +++++++++++++++++++ src/components/ui/testimonial-block.tsx | 38 ++++++++ 3 files changed, 182 insertions(+) create mode 100644 src/components/sections/cta-section.tsx create mode 100644 src/components/sections/testimonial-section.tsx create mode 100644 src/components/ui/testimonial-block.tsx diff --git a/src/components/sections/cta-section.tsx b/src/components/sections/cta-section.tsx new file mode 100644 index 0000000..fc75c6d --- /dev/null +++ b/src/components/sections/cta-section.tsx @@ -0,0 +1,58 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { Button } from '@/components/ui/button'; +import { ArrowRight } from 'lucide-react'; + +interface CTASectionProps { + title?: string; + description?: string; + primaryLabel?: string; + primaryHref?: string; + secondaryLabel?: string; + secondaryHref?: string; +} + +export function CTASection({ + title = '开启您的数字化转型之旅', + description = '与诺瓦隆一起，让技术成为您业务增长的核心引擎', + primaryLabel = '立即咨询', + primaryHref = '/contact', + secondaryLabel = '查看案例', + secondaryHref = '/cases', +}: CTASectionProps) { + return ( +
+
+ +

+ {title} +

+

+ {description} +

+
+ + +
+ +
+
+ ); +} diff --git a/src/components/sections/testimonial-section.tsx b/src/components/sections/testimonial-section.tsx new file mode 100644 index 0000000..d7322d2 --- /dev/null +++ b/src/components/sections/testimonial-section.tsx @@ -0,0 +1,86 @@ +'use client'; + +import { useEffect, useRef, useState } from 'react'; +import { motion } from 'framer-motion'; +import { TestimonialBlock } from '@/components/ui/testimonial-block'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +const TESTIMONIALS = [ + { + quote: '诺瓦隆的ERP系统帮助我们实现了财务与业务的深度一体化，运营效率提升了35%，数据决策更加精准。', + author: '张总', + title: 'CIO', + company: '某制造集团', + }, + { + quote: 'CRM系统让我们的销售团队从繁杂的手工跟进中解放出来，客户转化率提升了28%，团队协作更高效。', + author: '李总', + title: '销售总监', + company: '某零售企业', + }, + { + quote: 'BI平台让我们第一次真正实现了数据驱动决策，管理层可以随时掌握业务全貌，决策速度提升了60%。', + author: '王总', + title: 'VP of Data', + company: '某教育集团', + }, +]; + +export function TestimonialSection() { + const [isVisible, setIsVisible] = useState(false); + const sectionRef = useRef(null); + const shouldReduceMotion = useReducedMotion(); + + 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 ( +
+
+ +

+ 客户成果 +

+

+ 听听我们的客户怎么说——真实案例，真实成果 +

+ + +
+ {TESTIMONIALS.map((testimonial, index) => ( + + ))} +
+
+
+ ); +} diff --git a/src/components/ui/testimonial-block.tsx b/src/components/ui/testimonial-block.tsx new file mode 100644 index 0000000..a1d86f7 --- /dev/null +++ b/src/components/ui/testimonial-block.tsx @@ -0,0 +1,38 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { Quote } from 'lucide-react'; + +interface TestimonialBlockProps { + quote: string; + author: string; + title: string; + company: string; + index: number; +} + +export function TestimonialBlock({ quote, author, title, company, index }: TestimonialBlockProps) { + return ( + + +
+ “{quote}” +
+
+
+ {author.charAt(0)} +
+
+
{author}
+
{title}，{company}
+
+
+ + ); +}