style: update hero sections with background images and overlays

components/sections/AcTypesSection.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Wind, LayoutGrid, Sparkles, ArrowRight } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
@@ -7,6 +8,7 @@ import { cn } from '@/lib/utils';
 const acTypes = [
   {
     title: 'Klimatyzatory SPLIT',
+    image: '/images/services/split.webp',
     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'],
@@ -14,6 +16,7 @@ const acTypes = [
   },
   {
     title: 'Systemy MULTISPLIT',
+    image: '/images/services/split.webp',
     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'],
@@ -21,6 +24,7 @@ const acTypes = [
   },
   {
     title: 'Pozostałe rozwiązania',
+    image: '/images/services/kasetonowe.webp',
     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.'],
@@ -44,6 +48,9 @@ export const AcTypesSection = () => {
             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="relative w-full h-44 rounded-xl overflow-hidden mb-4">
+                  <Image src={type.image} alt={type.title} fill className="object-cover" />
+                </div>
                 <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>