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,78 @@
+import React from 'react';
+import Link from 'next/link';
+import { Wind, LayoutGrid, Sparkles, ArrowRight } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const acTypes = [
+  {
+    title: 'Klimatyzatory SPLIT',
+    description: 'Najpopularniejsze rozwiązanie do jednego pomieszczenia. Składa się z jednej jednostki wewnętrznej i jednej zewnętrznej.',
+    icon: Wind,
+    subtypes: ['Ścienne', 'Konsolowe', 'Kasetonowe', 'Kanałowe'],
+    link: '/sklep/klimatyzatory-split',
+  },
+  {
+    title: 'Systemy MULTISPLIT',
+    description: 'Idealne do chłodzenia całego domu. Do jednej jednostki zewnętrznej można podłączyć od 2 do 5 jednostek wewnętrznych.',
+    icon: LayoutGrid,
+    subtypes: ['Dla 2 pomieszczeń', 'Dla 3 pomieszczeń', 'Dla 4-5 pomieszczeń', 'Mieszane typy jednostek'],
+    link: '/sklep/klimatyzatory-multisplit',
+  },
+  {
+    title: 'Pozostałe rozwiązania',
+    description: 'Specjalistyczne urządzenia łączące funkcje chłodzenia z zaawansowanym grzaniem lub oczyszczaniem powietrza.',
+    icon: Sparkles,
+    subtypes: ['Z funkcją ogrzewania (do -25°C)', 'Z zaawansowanym oczyszczaczem', 'Klimatyzatory przenośne', 'Klimatyzatory bez jednostki zewn.'],
+    link: '/sklep/inne',
+  },
+];
+
+export const AcTypesSection = () => {
+  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 klimatyzatorów</h2>
+          <p className="text-gray-600">
+            Dobierzemy rozwiązanie idealnie dopasowane do Twoich potrzeb, niezależnie od tego czy chłodzisz jedno pomieszczenie, czy cały dom.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {acTypes.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="w-14 h-14 bg-accent/10 rounded-xl 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">{type.title}</h3>
+                <p className="text-gray-600 mb-6 text-sm flex-grow">
+                  {type.description}
+                </p>
+                
+                <ul className="space-y-2 mb-8">
+                  {type.subtypes.map((subtype, sIdx) => (
+                    <li key={sIdx} className="flex items-center text-sm text-gray-700">
+                      <div className="w-1.5 h-1.5 rounded-full bg-accent mr-3"></div>
+                      {subtype}
+                    </li>
+                  ))}
+                </ul>
+                
+                <Link 
+                  href={type.link}
+                  className={cn("btn btn-outline btn-primary bg-white w-full justify-between group mt-auto")}
+                >
+                  Sprawdź modele
+                  <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};