style: update hero sections with background images and overlays

app/cennik-montazu/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Check, Phone, ArrowRight, Wrench, Zap, Wind } from 'lucide-react';
 import { companyDetails } from '@/content/company';
 
@@ -111,8 +112,16 @@ export default function CennikMontazuPage() {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       <main>
         {/* Hero */}
-        <section className="bg-primary text-white py-16 md:py-24">
+        <section className="relative text-white py-24 md:py-32 overflow-hidden">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Image
+            src="/images/services/wycena.webp"
+            alt="Cennik montażu klimatyzacji Wrocław"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-primary/50" />
+          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-full text-sm font-medium mb-6">
               <Wrench className="size-4" />
               Aktualne ceny — 2026

app/klimatyzacja-do-biura/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Check, Phone, Wrench, ArrowRight, Building2, Thermometer, Wind, Zap, Clock } from 'lucide-react';
 import { companyDetails } from '@/content/company';
 
@@ -108,8 +109,16 @@ export default function KlimatyzacjaDoBiuraPage() {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       <main>
         {/* Hero */}
-        <section className="bg-primary text-white py-16 md:py-24">
+        <section className="relative text-white py-24 md:py-32 overflow-hidden">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Image
+            src="/images/services/klimatyzacja_do_biura.webp"
+            alt="Klimatyzacja do biura"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-primary/50" />
+          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-full text-sm font-medium mb-6">
               <Building2 className="size-4" />
               Klimatyzacja dla firm i biur
@@ -123,6 +132,7 @@ export default function KlimatyzacjaDoBiuraPage() {
               Dobieramy, montujemy i serwisujemy klimatyzację dla biur, lokali handlowych
               i restauracji na terenie Wrocławia i Dolnego Śląska.
             </p>
+
             <div className="flex flex-col sm:flex-row gap-4">
               <a href={`tel:${companyDetails.phoneRaw}`}>
                 <button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent/90 transition-colors">

app/klimatyzacja-do-domu/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Check, Phone, Wrench, ArrowRight, Home, Thermometer, Wind, Zap } from 'lucide-react';
 import { companyDetails } from '@/content/company';
 
@@ -86,8 +87,16 @@ export default function KlimatyzacjaDoDomuPage() {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       <main>
         {/* Hero */}
-        <section className="bg-primary text-white py-16 md:py-24">
+        <section className="relative text-white py-24 md:py-32 overflow-hidden">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Image
+            src="/images/services/klimatyzacja_do_domu.webp"
+            alt="Klimatyzacja do domu"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-primary/50" />
+          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-full text-sm font-medium mb-6">
               <Home className="size-4" />
               Klimatyzacja do domu i mieszkania
@@ -101,6 +110,7 @@ export default function KlimatyzacjaDoDomuPage() {
               zwraca się przez cały rok. Montujemy klimatyzatory w domach i mieszkaniach
               we Wrocławiu i na Dolnym Śląsku. Bezpłatna wycena przed realizacją.
             </p>
+
             <div className="flex flex-col sm:flex-row gap-4">
               <a href={`tel:${companyDetails.phoneRaw}`}>
                 <button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent/90 transition-colors">

app/montaz-klimatyzacji/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Check, Phone, Wrench, ArrowRight, ShieldCheck, Clock, Star } from 'lucide-react';
 import { companyDetails } from '@/content/company';
 
@@ -87,8 +88,16 @@ export default function MontazKlimatyzacjiPage() {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       <main>
         {/* Hero */}
-        <section className="bg-primary text-white py-16 md:py-24">
+        <section className="relative text-white py-24 md:py-32 overflow-hidden">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Image
+            src="/images/services/instalacja_klimatyzacji.webp"
+            alt="Montaż klimatyzacji Wrocław"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-primary/50" />
+          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-full text-sm font-medium mb-6">
               <Wrench className="size-4" />
               Montaż z uprawnieniami F-Gaz
@@ -101,6 +110,7 @@ export default function MontazKlimatyzacjiPage() {
               Montujemy klimatyzatory split, multisplit i kasetonowe na terenie Wrocławia i całego Dolnego Śląska.
               Uprawnienia F-Gaz, estetyczna instalacja, sprzątanie po montażu — i 2 lata gwarancji.
             </p>
+
             <div className="flex flex-col sm:flex-row gap-4">
               <a href={`tel:${companyDetails.phoneRaw}`}>
                 <button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent/90 transition-colors">

app/serwis-klimatyzacji/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Check, Phone, Wrench, ArrowRight, Thermometer, Wind, Zap, ShieldCheck } from 'lucide-react';
 import { companyDetails } from '@/content/company';
 
@@ -120,8 +121,16 @@ export default function SerwisKlimatyzacjiPage() {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       <main>
         {/* Hero */}
-        <section className="bg-primary text-white py-16 md:py-24">
+        <section className="relative text-white py-24 md:py-32 overflow-hidden">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Image
+            src="/images/services/czyszczenie.webp"
+            alt="Serwis klimatyzacji Wrocław"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-primary/50" />
+          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-full text-sm font-medium mb-6">
               <Wrench className="size-4" />
               Wszystkie marki — Dolny Śląsk
@@ -134,6 +143,7 @@ export default function SerwisKlimatyzacjiPage() {
               Czyszczenie, odgrzybianie, przeglądy techniczne i naprawy klimatyzatorów wszystkich marek.
               Działamy na terenie Wrocławia i całego Dolnego Śląska — szybki termin, uczciwa cena.
             </p>
+
             <div className="flex flex-col sm:flex-row gap-4">
               <a href={`tel:${companyDetails.phoneRaw}`}>
                 <button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent/90 transition-colors">

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>

components/sections/WhyUs.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { Award, FileText, ShieldCheck, Sparkles } from "lucide-react";
 import { companyDetails } from "@/content/company";
 
@@ -41,6 +42,14 @@ export function WhyUs() {
               <p className="text-sm md:text-base text-text-muted mt-4 leading-relaxed">
                 Stawiamy na najwyższą jakość wykonania, terminowość oraz bezkompromisowe bezpieczeństwo. Pomagamy na każdym kroku — od wyboru odpowiedniego urządzenia, poprzez załatwienie dotacji, aż po finalny montaż i regularny serwis.
               </p>
+              <div className="relative w-full h-64 rounded-2xl overflow-hidden mt-6">
+                <Image
+                  src="/images/services/wycena.webp"
+                  alt="Bezpłatna wycena klimatyzacji ThermCool"
+                  fill
+                  className="object-cover"
+                />
+              </div>
             </div>