style: update hero sections with background images and overlays

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">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <section className="relative text-white py-24 md:py-32 overflow-hidden">
+          <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">