58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { Star, Quote } from "lucide-react";
|
|
import { SectionHeading } from "../common/SectionHeading";
|
|
import { testimonials } from "@/content/testimonials";
|
|
|
|
export function Testimonials() {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow="Opinie Klientów"
|
|
title="Co mówią o nas nasi klienci?"
|
|
subtitle="Zadowolenie klientów to nasz najwyższy cel. Zobacz opinie osób, które zaufały naszym instalatorom i ekipom budowlanym."
|
|
align="center"
|
|
/>
|
|
|
|
{/* Testimonials Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{testimonials.map((test, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="relative p-8 rounded-xl bg-white border border-border hover:shadow-md transition-shadow flex flex-col justify-between"
|
|
>
|
|
{/* Quote icon background decoration */}
|
|
<Quote className="absolute top-6 right-6 size-12 text-slate-100 -z-0" />
|
|
|
|
<div className="relative z-10 flex flex-col gap-4">
|
|
{/* Stars */}
|
|
<div className="flex gap-1 text-cta">
|
|
{Array.from({ length: test.rating }).map((_, iIdx) => (
|
|
<Star key={iIdx} className="size-4 fill-cta text-cta" />
|
|
))}
|
|
</div>
|
|
|
|
{/* Review Text */}
|
|
<p className="text-sm md:text-base text-primary italic leading-relaxed">
|
|
“{test.text}”
|
|
</p>
|
|
</div>
|
|
|
|
{/* Reviewer Details */}
|
|
<div className="relative z-10 border-t border-slate-100 mt-6 pt-4 flex justify-between items-center text-xs">
|
|
<span className="font-bold text-primary font-heading">
|
|
{test.name}
|
|
</span>
|
|
{test.source && (
|
|
<span className="px-2.5 py-1 rounded bg-slate-100 text-text-muted font-medium">
|
|
{test.source}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|