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,102 @@
+import React from 'react';
+import { pricingData, PricingItem } from '@/content/pricing';
+import { Check, Info, ArrowRight, 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.priceGrossPrivate} zł</td>
+        <td className="py-4 px-4 text-center whitespace-nowrap text-gray-600 hidden sm:table-cell">{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 (8% VAT)*</th>
+                <th className="py-4 px-4 font-semibold text-center hidden sm:table-cell">Brutto (23% VAT)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* Split */}
+              <tr>
+                <td colSpan={4} 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={4} 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={4} 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">
+            <h4 className="font-semibold text-primary mb-3 flex items-center gap-2">
+              <Check className="w-5 h-5 text-accent" />
+              Co obejmuje montaż podstawowy?
+            </h4>
+            <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="md:w-64 shrink-0 flex flex-col gap-4">
+            <button className="btn btn-outline btn-primary bg-white w-full justify-between group">
+              Pobierz cennik PDF
+              <Download className="w-4 h-4 ml-2 group-hover:-translate-y-1 transition-transform" />
+            </button>
+            
+            <div className="text-xs text-gray-500 flex items-start gap-2 bg-white p-3 rounded-lg border border-gray-100">
+              <Info className="w-4 h-4 shrink-0 text-accent mt-0.5" />
+              <p>
+                *Stawka 8% VAT obowiązuje przy montażu w obiektach mieszkalnych (domy do 300m², mieszkania do 150m²).
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};