feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,54 @@
+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>
+  );
+};