57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { Wrench, CheckCircle, Clock, Star } from "lucide-react";
|
|
|
|
export function TrustBar() {
|
|
const items = [
|
|
{
|
|
icon: Wrench,
|
|
title: "Doświadczeni monterzy",
|
|
description: "Certyfikat F-Gaz, fachowy montaż",
|
|
},
|
|
{
|
|
icon: CheckCircle,
|
|
title: "Kompleksowa usługa",
|
|
description: "Montaż, serwis i doradztwo",
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "Bezpłatna wycena",
|
|
description: "Odpowiadamy w ciągu 24h",
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "Estetyczny montaż",
|
|
description: "Schludna instalacja, bez bałaganu",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="bg-muted border-t border-b border-border py-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center lg:text-left">
|
|
{items.map((item, idx) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="flex flex-col lg:flex-row items-center lg:items-start gap-3 hover:translate-y-[-2px] transition-transform duration-200"
|
|
>
|
|
<div className="p-2 rounded-lg bg-accent-light text-accent shrink-0">
|
|
<Icon className="size-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-primary font-heading">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-xs text-text-muted mt-0.5">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|