55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Home, Zap, Wrench } from 'lucide-react';
|
|
|
|
const cases = [
|
|
{
|
|
icon: Home,
|
|
title: 'Nowo budowany dom',
|
|
description: 'Najlepszy moment na decyzję o pompie ciepła. Pozwala to na uniknięcie budowy komina, przyłącza gazowego i wydzielania kotłowni. Idealnie współpracuje z nowoczesnym ogrzewaniem podłogowym.',
|
|
},
|
|
{
|
|
icon: Wrench,
|
|
title: 'Wymiana starego kotła (kopciucha)',
|
|
description: 'Zastąpienie uciążliwego pieca węglowego bezobsługową pompą. Często wymaga dostosowania istniejącej instalacji, ale daje dostęp do najwyższych poziomów dofinansowania z programu Czyste Powietrze.',
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: 'Modernizacja i hybryda',
|
|
description: 'Dołożenie pompy ciepła do istniejącego, wciąż sprawnego kotła gazowego lub olejowego. Pompa przejmuje ogrzewanie przez większość sezonu, a stary kocioł wspomaga system tylko w największe mrozy.',
|
|
},
|
|
];
|
|
|
|
export const UseCases = () => {
|
|
return (
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4 md:px-8 max-w-5xl">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-primary mb-4">Kiedy warto zainwestować?</h2>
|
|
<p className="text-gray-600">
|
|
Pompa ciepła to elastyczne rozwiązanie, które sprawdzi się w różnych scenariuszach życiowych i inwestycyjnych.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{cases.map((useCase, idx) => {
|
|
const Icon = useCase.icon;
|
|
return (
|
|
<div key={idx} className="flex flex-col sm:flex-row gap-6 p-6 md:p-8 rounded-2xl border border-gray-100 hover:border-accent/30 transition-colors bg-gray-50/50 hover:bg-white group">
|
|
<div className="w-16 h-16 shrink-0 bg-white border border-gray-100 shadow-sm rounded-2xl flex items-center justify-center text-primary group-hover:text-accent group-hover:border-accent/20 transition-all">
|
|
<Icon className="w-8 h-8" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-primary mb-3">{useCase.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed">
|
|
{useCase.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|