64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Wind, Droplets, Mountain } from 'lucide-react';
|
|
|
|
const pumpTypes = [
|
|
{
|
|
title: 'Powietrze - Woda',
|
|
description: 'Najpopularniejsze rozwiązanie. Urządzenie pobiera energię z powietrza zewnętrznego i przekazuje ją do wodnej instalacji grzewczej (kaloryfery, podłogówka) oraz podgrzewa wodę użytkową.',
|
|
forWho: 'Idealne do nowych domów i większości termomodernizacji (wymiana pieca).',
|
|
icon: Droplets,
|
|
},
|
|
{
|
|
title: 'Powietrze - Powietrze',
|
|
description: 'Działają na zasadzie klimatyzatorów. Ogrzewają bezpośrednio powietrze w pomieszczeniu, bez udziału instalacji wodnej. Szybko nagrzewają i posiadają funkcję chłodzenia.',
|
|
forWho: 'Świetne jako dodatkowe źródło ciepła, do domków letniskowych i mniejszych przestrzeni.',
|
|
icon: Wind,
|
|
},
|
|
{
|
|
title: 'Gruntowe',
|
|
description: 'Pobierają ciepło z wnętrza ziemi za pomocą kolektorów. Zapewniają najwyższą i najbardziej stabilną wydajność niezależnie od mrozów na zewnątrz.',
|
|
forWho: 'Dla inwestorów z dużą działką, oczekujących najwyższej niezawodności i gotowych na wyższe koszty początkowe.',
|
|
icon: Mountain,
|
|
},
|
|
];
|
|
|
|
export const HeatPumpTypes = () => {
|
|
return (
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
|
<div className="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-bold text-primary mb-4">Rodzaje pomp ciepła</h2>
|
|
<p className="text-gray-600">
|
|
Wybór odpowiedniej technologii zależy od uwarunkowań Twojego budynku, wielkości działki oraz budżetu.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{pumpTypes.map((type, idx) => {
|
|
const Icon = type.icon;
|
|
return (
|
|
<div key={idx} className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col h-full hover:shadow-md transition-shadow">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center text-primary">
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-primary">{type.title}</h3>
|
|
</div>
|
|
|
|
<p className="text-gray-600 mb-6 text-sm flex-grow">
|
|
{type.description}
|
|
</p>
|
|
|
|
<div className="bg-gray-50 rounded-lg p-4 mt-auto">
|
|
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Dla kogo?</h4>
|
|
<p className="text-sm text-gray-700 font-medium">{type.forWho}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|