60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
import { Star } from "lucide-react";
|
||
import ScrollReveal from "@/components/ScrollReveal";
|
||
|
||
interface Testimonial {
|
||
text: string;
|
||
name: string;
|
||
from: string;
|
||
}
|
||
|
||
interface TestimonialsSectionProps {
|
||
testimonials: Testimonial[];
|
||
lang: string;
|
||
}
|
||
|
||
export default function TestimonialsSection({ testimonials, lang }: TestimonialsSectionProps) {
|
||
return (
|
||
<section className="py-28 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
{lang === "en" ? "Guest Reviews" : "Misafir Yorumları"}
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold text-dark">
|
||
{lang === "en" ? "Experiences" : "Deneyimler"}
|
||
</h2>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{testimonials.map((t, i) => (
|
||
<div key={i} className="relative bg-sand rounded-2xl p-8 border border-sand overflow-hidden">
|
||
{/* Large decorative quote */}
|
||
<span className="absolute top-3 right-5 font-serif text-[8rem] leading-none text-primary/8 select-none">
|
||
"
|
||
</span>
|
||
{/* Stars */}
|
||
<div className="flex gap-1 mb-5 relative z-10">
|
||
{Array.from({ length: 5 }).map((_, j) => (
|
||
<Star key={j} className="w-3.5 h-3.5 text-accent" fill="#E87040" />
|
||
))}
|
||
</div>
|
||
<p className="text-foreground/75 text-[13px] leading-relaxed mb-6 relative z-10 italic">
|
||
"{t.text}"
|
||
</p>
|
||
<div className="flex items-center gap-3 relative z-10">
|
||
<div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||
<span className="text-primary font-bold text-sm">{t.name[0]}</span>
|
||
</div>
|
||
<div>
|
||
<span className="block font-semibold text-dark text-sm">{t.name}</span>
|
||
<span className="text-muted text-xs">{t.from}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|