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,63 @@
+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>
+  );
+};