style: update hero sections with background images and overlays

2026-07-05 22:32:05 +02:00
parent dbbf35a401
commit 9fe46b8e41
14 changed files with 75 additions and 10 deletions
@@ -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">
-          <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/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
@@ -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">
@@ -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">
-          <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_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">
@@ -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">
-          <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/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">
@@ -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">
-          <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/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">