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,57 @@
+import React from 'react';
+import { TrendingDown, Leaf, ThermometerSun, Wallet } from 'lucide-react';
+
+const benefits = [
+  {
+    title: 'Znaczne oszczędności',
+    description: 'Nawet 70% niższe koszty ogrzewania w porównaniu do tradycyjnych źródeł ciepła, takich jak węgiel, olej czy gaz.',
+    icon: TrendingDown,
+  },
+  {
+    title: 'Ekologiczne ciepło',
+    description: 'Brak emisji spalin i zanieczyszczeń w miejscu działania. Pompa w 75% korzysta z odnawialnej energii z otoczenia.',
+    icon: Leaf,
+  },
+  {
+    title: 'Komfort całoroczny',
+    description: 'Bezobsługowy system zapewniający przyjemne ciepło zimą oraz chłodzenie i produkcję ciepłej wody użytkowej latem.',
+    icon: ThermometerSun,
+  },
+  {
+    title: 'Dotacje i ulgi',
+    description: 'Możliwość odliczenia od podatku oraz skorzystania z programów Czyste Powietrze lub Mój Prąd na pokrycie części kosztów.',
+    icon: Wallet,
+  },
+];
+
+export const BenefitsGrid = () => {
+  return (
+    <section className="py-16 bg-white">
+      <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">Dlaczego warto wybrać pompę ciepła?</h2>
+          <p className="text-gray-600">
+            Pompa ciepła to obecnie najbardziej efektywne i przyszłościowe rozwiązanie do ogrzewania budynków.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {benefits.map((item, idx) => {
+            const Icon = item.icon;
+            return (
+              <div key={idx} className="bg-gray-50 border border-gray-100 rounded-2xl p-8 hover:shadow-lg transition-shadow">
+                <div className="w-14 h-14 bg-accent/10 rounded-2xl flex items-center justify-center mb-6 text-accent">
+                  <Icon className="w-7 h-7" />
+                </div>
+                <h3 className="text-xl font-bold text-primary mb-3">{item.title}</h3>
+                <p className="text-gray-600 text-sm leading-relaxed">
+                  {item.description}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};