feat: add TestimonialBlock, TestimonialSection, and CTASection components

2026-04-30 19:19:28 +08:00
parent a6e1761b3d
commit 7d514d4b51
3 changed files with 182 additions and 0 deletions
@@ -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 (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+      className="p-6 rounded-xl bg-white border border-[#E5E5E5] hover:shadow-md transition-shadow duration-300"
+    >
+      <Quote className="w-8 h-8 text-[#C41E3A]/20 mb-4" />
+      <blockquote className="text-[#3D3D3D] leading-relaxed mb-6">
+        &ldquo;{quote}&rdquo;
+      </blockquote>
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-[#FEF2F4] flex items-center justify-center text-[#C41E3A] font-semibold text-sm">
+          {author.charAt(0)}
+        </div>
+        <div>
+          <div className="text-sm font-semibold text-[#1C1C1C]">{author}</div>
+          <div className="text-xs text-[#595959]">{title}，{company}</div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}