57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { SectionHeading } from '../common/SectionHeading';
|
|
import { ShieldCheck, Clock, ThumbsUp, HeartHandshake } from 'lucide-react';
|
|
|
|
const values = [
|
|
{
|
|
title: 'Najwyższa jakość',
|
|
description: 'Nie idziemy na kompromisy. Stosujemy wyłącznie sprawdzone materiały i urządzenia renomowanych producentów.',
|
|
icon: ThumbsUp
|
|
},
|
|
{
|
|
title: 'Terminowość',
|
|
description: 'Szanujemy Twój czas. Każde zlecenie realizujemy zgodnie z ustalonym harmonogramem.',
|
|
icon: Clock
|
|
},
|
|
{
|
|
title: 'Bezpieczeństwo',
|
|
description: 'Posiadamy wszystkie niezbędne uprawnienia (m.in. F-Gaz, SEP) oraz pełne ubezpieczenie OC firmy.',
|
|
icon: ShieldCheck
|
|
},
|
|
{
|
|
title: 'Długofalowe relacje',
|
|
description: 'Zależy nam na zaufaniu. Po skończonym montażu czy remoncie oferujemy pełną opiekę serwisową.',
|
|
icon: HeartHandshake
|
|
}
|
|
];
|
|
|
|
export function ValuesGrid() {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-slate-50 border-y border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow="Dlaczego my"
|
|
title="Nasze wartości"
|
|
subtitle="Zasady, którymi kierujemy się w codziennej pracy z naszymi klientami."
|
|
align="center"
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
|
{values.map((val, idx) => {
|
|
const Icon = val.icon;
|
|
return (
|
|
<div key={idx} className="bg-white p-8 rounded-2xl border border-border text-center hover:shadow-lg transition-shadow duration-300">
|
|
<div className="mx-auto w-16 h-16 bg-accent/10 text-accent rounded-2xl flex items-center justify-center mb-6 transform -rotate-3 hover:rotate-0 transition-transform">
|
|
<Icon className="w-8 h-8" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-primary font-heading mb-3">{val.title}</h3>
|
|
<p className="text-text-muted leading-relaxed text-sm">{val.description}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|