Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -0,0 +1,93 @@
+import React from 'react';
+import { pricingData, PricingItem } from '@/content/pricing';
+import { Check, Download } from 'lucide-react';
+
+export const PricingTable = () => {
+  const splitItems = pricingData.filter((item) => item.category === 'split');
+  const multisplitItems = pricingData.filter((item) => item.category === 'multisplit');
+  const additionalItems = pricingData.filter((item) => item.category === 'additional');
+
+  const renderTableRows = (items: PricingItem[]) => {
+    return items.map((item) => (
+      <tr key={item.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
+        <td className="py-4 px-4 text-gray-800 font-medium">{item.name}</td>
+        <td className="py-4 px-4 text-center whitespace-nowrap text-gray-600">{item.priceNet} zł</td>
+        <td className="py-4 px-4 text-center whitespace-nowrap font-semibold text-primary">{item.priceGrossCompany} zł</td>
+      </tr>
+    ));
+  };
+
+  return (
+    <section className="py-16 bg-white" id="cennik">
+      <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">Cennik usług instalacyjnych</h2>
+          <p className="text-gray-600 max-w-2xl mx-auto">
+            Przejrzyste ceny bez ukrytych kosztów. Ostateczna wycena zależy od specyfiki budynku i trudności montażu – dokonywana jest zawsze przed rozpoczęciem prac.
+          </p>
+        </div>
+
+        <div className="overflow-x-auto rounded-xl border border-gray-200 shadow-sm mb-8">
+          <table className="w-full text-left border-collapse min-w-[600px]">
+            <thead>
+              <tr className="bg-gray-50 border-b border-gray-200 text-sm uppercase text-gray-500">
+                <th className="py-4 px-4 font-semibold w-1/2">Usługa</th>
+                <th className="py-4 px-4 font-semibold text-center">Cena netto</th>
+                <th className="py-4 px-4 font-semibold text-center">Brutto</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* Split */}
+              <tr>
+                <td colSpan={3} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
+                  Montaż układów SPLIT
+                </td>
+              </tr>
+              {renderTableRows(splitItems)}
+
+              {/* Multisplit */}
+              <tr>
+                <td colSpan={3} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
+                  Montaż układów MULTISPLIT
+                </td>
+              </tr>
+              {renderTableRows(multisplitItems)}
+
+              {/* Usługi dodatkowe */}
+              <tr>
+                <td colSpan={3} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
+                  Usługi dodatkowe i serwis
+                </td>
+              </tr>
+              {renderTableRows(additionalItems)}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-8 items-start justify-between bg-gray-50 p-6 rounded-xl border border-gray-100">
+          <div className="flex-1">
+            <h3 className="font-semibold text-primary mb-3 flex items-center gap-2">
+              <Check className="w-5 h-5 text-accent" />
+              Co obejmuje montaż podstawowy?
+            </h3>
+            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-600">
+              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Wykonanie przewiertu przez ścianę</li>
+              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Instalacja chłodnicza do 3 mb</li>
+              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Podłączenie do gniazdka (kabel 3m)</li>
+              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Grawitacyjne odprowadzenie skroplin</li>
+              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Montaż jednostek do wysokości 3m</li>
+              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Próba szczelności i uruchomienie</li>
+            </ul>
+          </div>
+          
+          <div className="w-full md:w-64 shrink-0 flex flex-col items-center md:items-stretch gap-4">
+            <a href="/pdf/cennik-thermcool-2026.pdf" target="_blank" rel="noopener noreferrer" className="btn btn-outline btn-primary bg-white w-fit md:w-full justify-between group flex items-center px-6 py-2 border rounded-lg hover:bg-gray-50 text-sm font-semibold text-primary">
+              Pobierz cennik PDF
+              <Download className="w-4 h-4 ml-2 group-hover:-translate-y-1 transition-transform" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};