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,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 (
+    <div className="relative p-8 rounded-lg border border-[#E5E5E5]/50 bg-white hover:shadow-md transition-shadow">
+      <Quote className="absolute top-6 right-6 w-8 h-8 text-[#C41E3A]/10" />
+      
+      {rating > 0 && (
+        <div className="flex gap-1 mb-4">
+          {Array.from({ length: rating }).map((_, i) => (
+            <svg
+              key={i}
+              className="w-4 h-4 text-[#C41E3A]"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+          ))}
+        </div>
+      )}
+
+      <blockquote className="text-base text-[#171717] mb-6 leading-relaxed">
+        "{quote}"
+      </blockquote>
+
+      <div className="flex items-center gap-4">
+        {avatarUrl && (
+          <img
+            src={avatarUrl}
+            alt={author}
+            className="w-12 h-12 rounded-full object-cover"
+          />
+        )}
+        <div>
+          <div className="font-semibold text-[#171717]">{author}</div>
+          <div className="text-sm text-[#737373]">
+            {position} · {company}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}