Kolejne poprawki

src/components/sections/SectionJamboxMozliwosci.astro

@@ -0,0 +1,67 @@
+---
+import Markdown from "../../islands/Markdown.jsx";
+
+// Pobranie XML Jambox
+const url = "https://www.jambox.pl/xml/mozliwosci.xml";
+const xmlText: string = await fetch(url).then(r => r.text());
+
+// Parser wszystkich <node>
+function parseNodes(xml: string) {
+  return [...xml.matchAll(/<node>([\s\S]*?)<\/node>/g)].map((match) => {
+    const block = match[1];
+
+    const get = (tag: string) => {
+      const m = block.match(new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`));
+      return m ? m[1].trim() : "";
+    };
+
+    return {
+      title: get("title"),
+      teaser: get("teaser"),
+      description: get("description"),
+      icon: get("icon"),
+    };
+  });
+}
+
+const nodes = parseNodes(xmlText);
+---
+
+<section class="f-section">
+  <h2 class="f-section-title mb-10">Dodatkowe możliwości telewizji JAMBOX</h2>
+
+  {nodes.map((item, i) => {
+    const reverse = i % 2 === 1;
+
+    return (
+      <div class={`f-section-item py-14`}>
+        <div class={`f-section-grid md:grid-cols-2`}>
+
+          <!-- OBRAZ -->
+          <div class={`${reverse ? "md:order-2" : "md:order-1"}`}>
+            <img 
+              src={item.icon} 
+              alt={item.title} 
+              loading="lazy"
+              class="f-section-image rounded-xl shadow-lg"
+            />
+          </div>
+
+          <!-- TEKST -->
+          <div class={`f-section-grid ${reverse ? "md:order-1" : "md:order-2"}`}>
+            <h3 class="f-section-title text-2xl mb-4">{item.title}</h3>
+
+            {item.teaser && (
+              <p class="text-lg font-medium opacity-80 mb-4">
+                {item.teaser}
+              </p>
+            )}
+
+            <Markdown text={item.description} />
+          </div>
+
+        </div>
+      </div>
+    );
+  })}
+</section>

src/content/home/hero.yaml

@@ -19,7 +19,7 @@ ctas:
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
 
-  - label: "Sprawdź dostępność usługi"
+  # - label: "Sprawdź dostępność usługi"
-    href: "/mapa-zasiegu"
+  #   href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false
+  #   primary: false

src/content/internet-swiatlowodowy/hero.yaml

@@ -21,7 +21,7 @@ ctas:
     primary: false
     title: "Przejdź do oferty telefonu"
 
-  - label: "Sprawdź dostępność usługi"
+  # - label: "Sprawdź dostępność usługi"
-    href: "/mapa-zasiegu"
+  #   href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false  
+  #   primary: false  

src/content/internet-swiatlowodowy/offers.yaml

@@ -2,132 +2,152 @@ przelaczniki:
   - id: "budynek"
     etykieta: "Rodzaj budynku"
     domyslny: "jednorodzinny"
-    title: Zmień rodzaj budynku by zobaczyć odpowiednie ceny
+    title: "Zmień rodzaj budynku by zobaczyć odpowiednie ceny"
     opcje:
       - id: "jednorodzinny"
         nazwa: "Jednorodzinny"
+
       - id: "wielorodzinny"
         nazwa: "Wielorodzinny"
 
   - id: "umowa"
     etykieta: "Okres umowy"
     domyslny: "24m"
-    title: Wybierz okres umowy by zobaczyć odpowiednie ceny
+    title: "Wybierz okres umowy by zobaczyć odpowiednie ceny"
     opcje:
       - id: "24m"
         nazwa: "24 miesiące"
+
       - id: "bezterminowa"
         nazwa: "Bezterminowa"
 
-# WIERSZE TABELI
 funkcje:
   - id: "pobieranie"
     etykieta: "Prędkość pobierania"
+
   - id: "wysylanie"
     etykieta: "Prędkość wysyłania"
+
   - id: "router"
     etykieta: "Router Wi-Fi"
-  # - id: "tv"
+
-  #   etykieta: "Pakiet TV"
-  - id: "umowa_info"
-    etykieta: "Umowa"
-  - id: "instalacja"
-    etykieta: "Aktywacja"
   - id: "adres_ip"
     etykieta: "Adres IP"
 
-plany_title: 
+  - id: "umowa_info"
+    etykieta: "Umowa"
+
+  - id: "instalacja"
+    etykieta: "Aktywacja"
+
 plany:
   - id: "fiber100"
     nazwa: "FIBER 100"
-    predkosc: "100 Mb/s"
     popularny: false
+
     ceny:
       jednorodzinny:
-        # 12m: "59 zł/mc"
+        24m: 64
-        24m: "64 zł/mc"
+        bezterminowa: 84
-        bezterminowa: "84 zł/mc"
       wielorodzinny:
-        # 12m: "55 zł/mc"
+        24m: 54
-        24m: "54 zł/mc"
+        bezterminowa: 74
-        bezterminowa: "74 zł/mc"
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "do 100 Mb/s"
       wysylanie: "do 50 Mb/s"
       router: true
       adres_ip: "Dynamiczny"
-      tv: false
       umowa_info: "12 / 24 / bez umowy"
-      instalacja: "149 zł"
 
   - id: "fiber300"
     nazwa: "FIBER 300"
-    predkosc: "300 Mb/s"
     popularny: true
+
     ceny:
       jednorodzinny:
-        # 12m: "79 zł/mc"
+        24m: 75
-        24m: "75 zł/mc"
+        bezterminowa: 95
-        bezterminowa: "95 zł/mc"
       wielorodzinny:
-        # 12m: "69 zł/mc"
+        24m: 65
-        24m: "65 zł/mc"
+        bezterminowa: 85
-        bezterminowa: "85 zł/mc"
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "do 300 Mb/s"
       wysylanie: "do 150 Mb/s"
       router: true
-      umowa_info: "12 / 24 / bez umowy"
-      instalacja: "149,00 zł"
       adres_ip: "Dynamiczny"
+      umowa_info: "12 / 24 / bez umowy"
 
   - id: "fiber600"
     nazwa: "FIBER 600"
-    predkosc: "600 Mb/s"
     popularny: false
+
     ceny:
       jednorodzinny:
-        24m: "85 zł/mc"
+        24m: 85
-        bezterminowa: "105 zł/mc"
+        bezterminowa: 105
       wielorodzinny:
-        24m: "75 zł/mc"
+        24m: 75
-        bezterminowa: "95 zł/mc"
+        bezterminowa: 95
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "do 600 Mb/s"
       wysylanie: "do 300 Mb/s"
       router: true
-      umowa_info: "24 / bez umowy"
-      instalacja: "149 zł"
       adres_ip: "Dynamiczny"
+      umowa_info: "24 / bez umowy"
 
-uslugi:
+addons:
-  title: Usługi dodatkowe
-  description: Do wybranej opcji możesz dokupić dotakowe usługi.
-  items:
-    - Nazwa usługi
-    - Cena
-    - Szczegóły
-uslugi_dodatkowe:
   - id: "public_ip"
     nazwa: "Publiczny adres IP"
-    cena: "18,45 zł miesięcznie."
+    typ: "checkbox"
-    opis: |
+    cena: 18.45
-      Otrzymujesz unikalny, publiczny adres przypisany na stałe do Twojego łącza, który pozwala na:
-      - Monitoring domu  
-      - Dostęp zdalny do urządzeń  
-      - Hostowanie serwera lub aplikacji  
 
-      Jest to przydatne dla firm, graczy i zaawansowanych użytkowników, którzy potrzebują stabilnej identyfikacji swojej sieci w internecie. 
+  - id: "telefon"
-  
+    nazwa: "Telefon VoIP"
-  - id: telefon
+    typ: "select"
-    nazwa: Telefon
+    opis: "Wybierz pakiet telefonii"
-    cena: od wybranej opcji
+    opcje:
-    opis: |
+      - id: "brak"
-      Profesjonalna telefonia VoIP jako dodatek do internetu
+        nazwa: "Bez telefonu"
-      - Niższe koszty połączeń - szczególnie na komórki i za granicę
+        cena: 0
-      - Zachowaj dotychczasowy numer lub otrzymaj nowy lokalny
+      - id: "tele30"
-      - Bez dodatkowych kabli - działa przez internet
+        nazwa: "TELE 30"
-      - Jeden numer dostępny na wielu urządzeniach jednocześnie
+        cena: 9.90
-      - Krystalicznie czysty dźwięk HD
+      - id: "tele100"
-
+        nazwa: "TELE 100"
-      [Poznaj szczegóły oferty telefonii →](/telefon "Poznaj szczegóły oferty telefonii")
+        cena: 15.00
+      - id: "tele300"
+        nazwa: "TELE 300"
+        cena: 29.00
+      - id: "tele500"
+        nazwa: "TELE 500"
+        cena: 44.00

src/content/internet-swiatlowodowy/page.yaml

@@ -3,8 +3,8 @@ title:
 
 paragraphs:
   - title:
-    # content: |
+    content: |
-    #   Światłowody to najbardziej zaawansowana technologia przesyłu danych. 
+      Wybierz rodzaj budynku i czas trwania umowy 
       
     #   Gwarantują błyskawiczną prędkość, stabilność i niezawodność bez względu na warunki.
 
@@ -18,11 +18,5 @@ paragraphs:
   
     #   Sprawdź naszą pełną ofertę i wybierz rozwiązanie dopasowane do Twoich potrzeb.
 
-  - title:
+  # - title:
-    content: 
+  #   content: 
-      Router WiFi AC1200 w cenie instalacji, zapewnia jeszcze większą moc, szybkość, zasięg i bezpieczeństwo dla Twoich stale rosnących potrzeb sieciowych.
-
-      Dzięki funkcji sieci gościnnej Twoi goście mają dostęp do internetu, a Twoje urządzenia i dane pozostają bezpieczne. 
-
-      Technologia dwuzakresowa eliminuje zakłócenia i gwarantuje płynne działanie sieci dla całej rodziny.
-# Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów

src/content/internet-telewizja/hero.yaml

@@ -20,7 +20,7 @@ ctas:
     title: "Przejdź do oferty telefonu"
     primary: false
 
-  - label: "Sprawdź dostępność usługi"
+  # - label: "Sprawdź dostępność usługi"
-    href: "/mapa-zasiegu"
+  #   href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false   
+  #   primary: false   

src/content/internet-telewizja/offers.yaml

@@ -2,7 +2,7 @@ przelaczniki:
   - id: "budynek"
     etykieta: "Rodzaj budynku"
     domyslny: "jednorodzinny"
-    title: Zmień rodzaj budynku by zobaczyć odpowiednie ceny
+    title: "Zmień rodzaj budynku by zobaczyć odpowiednie ceny"
     opcje:
       - id: "jednorodzinny"
         nazwa: "Jednorodzinny"
@@ -12,7 +12,7 @@ przelaczniki:
   - id: "umowa"
     etykieta: "Okres umowy"
     domyslny: "24m"
-    title: Wybierz okres umowy by zobaczyć odpowiednie ceny
+    title: "Wybierz okres umowy by zobaczyć odpowiednie ceny"
     opcje:
       - id: "24m"
         nazwa: "24 miesiące"
@@ -35,18 +35,28 @@ funkcje:
   - id: "instalacja"
     etykieta: "Aktywacja"
 
-plany_title: 
 plany:
   - id: "pakiet-1"
     nazwa: "SMART"
     popularny: false
+
     ceny:
       jednorodzinny:
-        24m: "109 zł/mc"
+        24m: 109
-        bezterminowa: "129 zł/mc"
+        bezterminowa: 129
       wielorodzinny:
-        24m: "99 zł/mc"
+        24m: 99
-        bezterminowa: "119 zł/mc"
+        bezterminowa: 119
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "300 Mb/s"
       wysylanie: "150 Mb/s"
@@ -54,18 +64,28 @@ plany:
       kanaly: "127"
       hd: "99"
       umowa_info: "24 / Bezterminowa"
-      instalacja: "99 zł"
 
   - id: "pakiet-2"
     nazwa: "OPTIMUM"
     popularny: false
+
     ceny:
       jednorodzinny:
-        24m: "125 zł/mc"
+        24m: 125
-        bezterminowa: "145 zł/mc"
+        bezterminowa: 145
       wielorodzinny:
-        24m: "115 zł/mc"
+        24m: 115
-        bezterminowa: "135 zł/mc"
+        bezterminowa: 135
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "300 Mb/s"
       wysylanie: "150 Mb/s"
@@ -73,18 +93,28 @@ plany:
       kanaly: "171"
       hd: "129"
       umowa_info: "24 / Bezterminowa"
-      instalacja: "99 zł"
 
   - id: "pakiet-3"
     nazwa: "PLATINUM"
     popularny: true
+
     ceny:
       jednorodzinny:
-        24m: "158 zł/mc"
+        24m: 158
-        bezterminowa: "178 zł/mc"
+        bezterminowa: 178
       wielorodzinny:
-        24m: "148 zł/mc"
+        24m: 148
-        bezterminowa: "168 zł/mc"
+        bezterminowa: 168
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "300 Mb/s"
       wysylanie: "150 Mb/s"
@@ -92,18 +122,28 @@ plany:
       kanaly: "207"
       hd: "157"
       umowa_info: "24 / Bezterminowa"
-      instalacja: "99 zł"
 
   - id: "pakiet-4"
     nazwa: "PODSTAWOWY"
     popularny: false
+
     ceny:
       jednorodzinny:
-        24m: "88 zł/mc"
+        24m: 88
-        bezterminowa: "108 zł/mc"
+        bezterminowa: 108
       wielorodzinny:
-        24m: "78 zł/mc"
+        24m: 78
-        bezterminowa: "98 zł/mc"
+        bezterminowa: 98
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "300 Mb/s"
       wysylanie: "150 Mb/s"
@@ -111,18 +151,28 @@ plany:
       kanaly: "83"
       hd: "63"
       umowa_info: "24 / Bezterminowa"
-      instalacja: "99 zł"
 
   - id: "pakiet-5"
     nazwa: "KORZYSTNY"
     popularny: false
+
     ceny:
       jednorodzinny:
-        24m: "110 zł/mc"
+        24m: 110
-        bezterminowa: "130 zł/mc"
+        bezterminowa: 130
       wielorodzinny:
-        24m: "100 zł/mc"
+        24m: 100
-        bezterminowa: "120 zł/mc"
+        bezterminowa: 120
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "300 Mb/s"
       wysylanie: "150 Mb/s"
@@ -130,18 +180,28 @@ plany:
       kanaly: "142"
       hd: "107"
       umowa_info: "24 / Bezterminowa"
-      instalacja: "99 zł"
 
   - id: "pakiet-6"
     nazwa: "BOGATY"
     popularny: false
+
     ceny:
       jednorodzinny:
-        24m: "120 zł/mc"
+        24m: 120
-        bezterminowa: "140 zł/mc"
+        bezterminowa: 140
       wielorodzinny:
-        24m: "110 zł/mc"
+        24m: 110
-        bezterminowa: "130 zł/mc"
+        bezterminowa: 130
+
+    koszty:
+      instalacja:
+        jednorodzinny:
+          24m: 149
+          bezterminowa: 199
+        wielorodzinny:
+          24m: 99
+          bezterminowa: 149
+
     funkcje:
       pobieranie: "300 Mb/s"
       wysylanie: "150 Mb/s"
@@ -149,87 +209,3 @@ plany:
       kanaly: "184"
       hd: "139"
       umowa_info: "24 / Bezterminowa"
-      instalacja: "99 zł"
-
-uslugi:
-  title: Usługi dodatkowe
-  description: Do wybranej opcji możesz dokupić dotakowe usługi.
-  items:
-    - Nazwa usługi
-    - Cena
-    - Szczegóły
-uslugi_dodatkowe:
-  - id: "public_ip"
-    nazwa: "Publiczny adres IP"
-    cena: "18,45 zł miesięcznie."
-    opis: |
-      Otrzymujesz unikalny, publiczny adres przypisany na stałe do Twojego łącza, który pozwala na:
-      - Monitoring domu  
-      - Dostęp zdalny do urządzeń  
-      - Hostowanie serwera lub aplikacji  
-
-      Jest to przydatne dla firm, graczy i zaawansowanych użytkowników, którzy potrzebują stabilnej identyfikacji swojej sieci w internecie.
-  - id: telefon
-    nazwa: Telefon
-    cena: od wybranej opcji
-    opis: |
-      Profesjonalna telefonia VoIP jako dodatek do internetu
-
-      - Niższe koszty połączeń - szczególnie na komórki i za granicę
-      - Zachowaj dotychczasowy numer lub otrzymaj nowy lokalny
-      - Bez dodatkowych kabli - działa przez internet
-      - Jeden numer dostępny na wielu urządzeniach jednocześnie
-      - Krystalicznie czysty dźwięk HD
-      
-      [Poznaj szczegóły oferty telefonii →](/telefon)
-
-  - id: "canal_plus"
-    nazwa: "Canal+ Seriale i Filmy"
-    cena: "od 25,00 zł miesięcznie"
-    opis: |
-      <div class="w-full max-w-xl mx-auto aspect-video">
-        <iframe
-          title="Pakiet Canal+"
-          src="https://www.jambox.pl/iframe-pakiet-logo?p=49"
-          class="w-full h-full rounded-lg shadow"
-          style="w-full h-full rounded-lg shadow bg-transparent"
-        ></iframe>
-      </div>
-
-  - id: "canal_sport"
-    nazwa: "Canal+ Super Sport"
-    cena: "od 65,00 zł miesięcznie"
-    opis: |
-      <div class="w-full max-w-xl mx-auto aspect-video" style="aspect-ratio: 6 / 1;">
-        <iframe
-          title="Pakiet Canal+"
-          src="https://www.jambox.pl/iframe-pakiet-logo?p=48"
-          class="w-full h-full rounded-lg shadow bg-transparent">
-        </iframe>
-      </div>
-
-  - id: "canal_hbo"
-    nazwa: "HBO +MAX"
-    cena: "od 27,90 zł miesięcznie"
-    opis: |
-      <div class="w-full max-w-xl mx-auto aspect-video">
-        <iframe
-          title="Pakiet Canal+"
-          src="https://www.jambox.pl/iframe-pakiet-logo?p=20"
-          class="w-full h-full rounded-lg shadow"
-          style="w-full h-full rounded-lg shadow bg-transparent"
-        ></iframe>
-      </div>
-
-  - id: "canal_cinemax"
-    nazwa: "Cinemax"
-    cena: "od 14,90 zł miesięcznie"
-    opis: |
-      <div class="w-full max-w-xl mx-auto aspect-video">
-        <iframe
-          title="Pakiet Canal+"
-          src="https://www.jambox.pl/iframe-pakiet-logo?p=18"
-          class="w-full h-full rounded-lg shadow"
-          style="w-full h-full rounded-lg shadow bg-transparent"
-        ></iframe>
-      </div>

src/content/internet-telewizja/page.yaml

@@ -13,9 +13,3 @@ paragraphs:
     #   Oszczędzaj czas i ciesz się prostotą, wszystko czego potrzebujesz, w jednym miejscu.
 
 # Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów
-
-  - title:
-    content: 
-      Telewizja dostępna jest wyłącznie jako element pakietów.
-
-      Liczba kanałów zależy od wybranego pakietu.

src/content/telefon/hero.yaml

@@ -20,7 +20,7 @@ ctas:
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
 
-  - label: "Sprawdź dostępność usługi "
+  # - label: "Sprawdź dostępność usługi "
-    href: "/mapa-zasiegu"
+  #   href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false   
+  #   primary: false   

src/content/telefon/offers.yaml

@@ -1,19 +1,21 @@
 funkcje:
   - id: "minuty_darmowe"
     etykieta: "Darmowe minuty"
+
   - id: "cena_minuta_stacjonarna"
     etykieta: "Połączenia do krajowych sieci stacjonarnych"
+
   - id: "cena_minuta_komorkowe"
     etykieta: "Połączenia do krajowych sieci komórkowych"
+
   - id: "instalacja"
     etykieta: "Aktywacja"
 
-plany_title: 
 plany:
   - id: "tele30"
     nazwa: "TELE 30"
     popularny: false
-    cena: "9,90 zł/mc"
+    cena: 9.90
     funkcje:
       minuty_darmowe: "30"
       cena_minuta_stacjonarna: "0,07 zł / min."
@@ -23,7 +25,7 @@ plany:
   - id: "tele100"
     nazwa: "TELE 100"
     popularny: false
-    cena: "15,00 zł/mc"
+    cena: 15.00
     funkcje:
       minuty_darmowe: "100"
       cena_minuta_stacjonarna: "0,07 zł / min."
@@ -33,7 +35,7 @@ plany:
   - id: "tele300"
     nazwa: "TELE 300"
     popularny: false
-    cena: "29,00 zł/mc"
+    cena: 29.00
     funkcje:
       minuty_darmowe: "300"
       cena_minuta_stacjonarna: "0,07 zł / min."
@@ -43,9 +45,11 @@ plany:
   - id: "tele500"
     nazwa: "TELE 500"
     popularny: false
-    cena: "44,00 zł/mc"
+    cena: 44.00
     funkcje:
       minuty_darmowe: "500"
       cena_minuta_stacjonarna: "0,07 zł / min."
       cena_minuta_komorkowe: "0,19 zł / min"
       instalacja: "1,23 zł"
+
+addons: []

src/helpers/getInstallationPrice.js

@@ -0,0 +1,22 @@
+export function getInstallationPrice(plan, switches, selected) {
+  // Dla telefonii – instalacja to po prostu funkcja wpisana w plan
+  if (!plan.koszty) {
+    // instalacja jest zapisana jako tekst "1,23 zł"
+    const raw = plan.funkcje?.instalacja;
+    if (!raw) return 0;
+
+    const num = parseFloat(raw.replace(",", "."));
+    return isNaN(num) ? 0 : num;
+  }
+
+  // Internet / TV
+  const budynek = selected.budynek;
+  const umowa = selected.umowa;
+
+  return (
+    plan.koszty?.instalacja?.[budynek]?.[umowa] ??
+    plan.koszty?.instalacja?.[budynek]?.default ??
+    plan.koszty?.instalacja?.default ??
+    0
+  );
+}

src/islands/Offers/OffersTable.jsx

@@ -1,83 +1,75 @@
 import { getPrice } from "../../helpers/getPrice";
 import { getActiveLabel } from "../../helpers/getActiveLabel";
+import { getInstallationPrice } from "../../helpers/getInstallationPrice";
 import "../../styles/offers/offers-table.css";
 
+export default function OffersCards({ data, switches, selected }) {
+  const plans = data.plany;
 
-export default function OffersTable({ switches, selected, plans, features, plan_title }) {
   return (
-    <div class="f-table-wrapper">
+    <section class="f-offers">
-      <table class="f-table">
+      {data.plany_title && (
-        <thead class="f-table-head">
+        <h2 class="f-offers-title">{data.plany_title}</h2>
-          <tr>
+      )}
-            <th class="f-table-heading">{plan_title}</th>
-            {plans.map((plan) => (
-              <th
-                class={`f-plan-heading ${plan.popularny ? "is-popular f-popular-top" : ""
-                  }`}
-              >
-                {/* {plan.popularny && (<div class="f-popular-badge">Popularny</div>)} */}
-                <div class="f-plan-title">{plan.nazwa}</div>
-                <div class="f-plan-price">
-                  {getPrice(plan, switches, selected)}
-                </div>
-                {/* <div class="f-plan-speed">{plan.predkosc}</div> */}
-              </th>
-            ))}
-          </tr>
-        </thead>
 
-        <tbody>
+      <div class={`f-offers-grid f-count-${plans.length}`}>
-          {features.map((f, rowIndex) => (
+        {plans.map((plan) => (
-            <tr class={rowIndex % 2 === 0 ? "f-row-even" : "f-row-odd"}>
+          <OfferCard
-              <td class="f-feature-name">{f.etykieta}</td>
+            key={plan.id}
+            plan={plan}
+            features={data.funkcje}
+            switches={switches}
+            selected={selected}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
 
-              {plans.map((plan) => {
+function OfferCard({ plan, features, switches, selected }) {
-                const isPopular = plan.popularny;
+  const basePrice = getPrice(plan, switches, selected);
-                const isLastRow = rowIndex === features.length - 1;
 
-                if (f.id === "umowa_info") {
+  // NOWE: cena instalacji dynamiczna
-                  return (
+  const installPrice = getInstallationPrice(plan, switches, selected);
-                    <td
-                      class={`f-feature-cell ${isPopular
-                          ? `is-popular ${isLastRow ? "f-popular-bottom" : ""
-                          }`
-                          : ""
-                        }`}
-                    >
-                      {getActiveLabel(switches, selected, "umowa")}
-                    </td>
-                  );
-                }
 
-                const val = plan.funkcje?.[f.id];
+  return (
+    <div class={`f-card ${plan.popularny ? "f-card-popular" : ""}`}>
+      {plan.popularny && (
+        <div class="f-card-badge">Najczęściej wybierany</div>
+      )}
 
-                const baseClass =
+      <div class="f-card-header">
-                  val === true
+        <div class="f-card-name">{plan.nazwa}</div>
-                    ? "f-feature-yes"
+        <div class="f-card-price">{basePrice} zł/mies.</div>
-                    : val === false || val == null
+      </div>
-                      ? "f-feature-no"
-                      : "f-feature-cell";
 
-                return (
+      <ul class="f-card-features">
-                  <td
+        {features.map((f) => {
-                    class={`${baseClass} ${isPopular
+          let val =
-                        ? `is-popular ${isLastRow ? "f-popular-bottom" : ""
+            f.id === "umowa_info"
-                        }`
+              ? getActiveLabel(switches, selected, "umowa")
-                        : ""
+              : plan.funkcje?.[f.id];
-                      }`}
+
-                  >
+          // PODMIANA pola instalacji — nie ze statycznego YAML tylko dynamicznie
-                    {val === true
+          if (f.id === "instalacja") {
-                      ? "✓"
+            val = installPrice + " zł";
-                      : val === false || val == null
+          }
-                        ? "✕"
+
-                        : val}
+          return (
-                  </td>
+            <li class="f-card-row">
-                );
+              <span class="f-card-label">{f.etykieta}</span>
-              })}
+              <span class="f-card-value">
-            </tr>
+                {val === true
-          ))}
+                  ? "✓"
-        </tbody>
+                  : val === false || val == null
-      </table>
+                    ? "✕"
+                    : val}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
 }

src/islands/OffersIsland.jsx

@@ -1,69 +1,59 @@
 import { useState } from "preact/hooks";
-import FuzMarkdown from "./Markdown.jsx";
 
 import OffersSwitches from "./Offers/OffersSwitches.jsx";
-import OffersTable from "./Offers/OffersTable.jsx";
+import OffersCards from "./Offers/OffersTable.jsx";   // <-- WAŻNE!!
 import OffersExtraServices from "./Offers/OffersExtraServices.jsx";
-// import "../styles/offers/offers-main.css";
 
-export default function InternetOffersIsland({ data }) {
+export default function OffersIsland({ data }) {
   const switches = data.przelaczniki ?? [];
-  const features = data.funkcje ?? [];
-  const plans = data.plany ?? [];
-  const plan_title = data.plany_title ?? "";
-  const extraServices = data.uslugi_dodatkowe ?? [];
-  const services = data.uslugi ?? [];
 
-  const initialSelected = {};
+  // selected state
-  switches.forEach((sw) => {
+  const [selected, setSelected] = useState(() => {
-    initialSelected[sw.id] = sw.domyslny;
+    const init = {};
+    switches.forEach((sw) => (init[sw.id] = sw.domyslny));
+    return init;
   });
 
-  const [selected, setSelected] = useState(initialSelected);
+  // services accordion (jeśli potrzebne)
-  const [openServiceId, setOpenServiceId] = useState(null);
+  const [openId, setOpenId] = useState(null);
 
-  const toggleService = (id) =>
+  const handleSwitch = (switchId, value) => {
-    setOpenServiceId((prev) => (prev === id ? null : id));
+    setSelected((prev) => ({
+      ...prev,
+      [switchId]: value
+    }));
+  };
 
-  const handleSwitchClick = (switchId, optionId) =>
+  const toggleExtra = (id) => {
-    setSelected((prev) => ({ ...prev, [switchId]: optionId }));
+    setOpenId((prev) => (prev === id ? null : id));
+  };
 
   return (
-    <section class="f-offers-section">
+    <div class="f-offers-wrapper">
-      <div class="f-offers-container">
-        {data.opis_gorny && (
-          <div class="f-offers-description">
-            <FuzMarkdown text={data.opis_gorny} />
-          </div>
-        )}
 
-        <OffersSwitches
+      {/* SWITCHERY */}
-          switches={switches}
+      <OffersSwitches
-          selected={selected}
+        switches={switches}
-          onSwitch={handleSwitchClick}
+        selected={selected}
-        />
+        onSwitch={handleSwitch}
+      />
 
-        <OffersTable
+      {/* KARTY OFERT */}
-          switches={switches}
+      <OffersCards
-          selected={selected}
+        data={data}
-          plans={plans}
+        switches={switches}
-          features={features}
+        selected={selected}
-          plan_title={plan_title}
+      />
-        />
 
+      {/* USŁUGI DODATKOWE */}
+      {data.uslugi_dodatkowe && (
         <OffersExtraServices
-          extraServices={extraServices}
+          extraServices={data.uslugi_dodatkowe}
-          openId={openServiceId}
+          services={data.uslugi}
-          toggle={toggleService}
+          openId={openId}
-          services={services}
+          toggle={toggleExtra}
         />
-
+      )}
-        {data.opis_dolny && (
+    </div>
-          <div class="fuz-offers-description">
-            <FuzMarkdown text={data.opis_dolny} />
-          </div>
-        )}
-      </div>
-    </section>
   );
 }

src/pages/internet-swiatlowodowy/index.astro

@@ -41,17 +41,22 @@ const rest = page.paragraphs.slice(1);
     </div>
   </section>
 
-  <OffersIsland client:load data={data} />
-
-  {rest.map((p: Paragraph) => (
   <section class="f-section">
     <div class="f-section-grid-single md:grid-cols-1">
-      {p.title && <h3 class="f-section-title">{p.title}</h3>}
+      <OffersIsland client:load data={data} />
-      <Markdown text={p.content.replace(/\n/g, "\n\n")} />
     </div>
   </section>
-))}
+
+  {
+    rest.map((p: Paragraph) => (
+      <section class="f-section">
+        <div class="f-section-grid-single md:grid-cols-1">
+          {p.title && <h3 class="f-section-title">{p.title}</h3>}
+          <Markdown text={p.content.replace(/\n/g, "\n\n")} />
+        </div>
+      </section>
+    ))
+  }
 
   <SectionRenderer src="./src/content/internet-swiatlowodowy/section.yaml" />
-
 </DefaultLayout>

src/pages/internet-telewizja/index.astro

@@ -5,6 +5,7 @@ import SectionRenderer from "../../components/sections/SectionRenderer.astro";
 import Markdown from "../../islands/Markdown.jsx";
 import Modal from "../../islands/Modal.jsx";
 import OffersIsland from "../../islands/OffersIsland.jsx";
+import JamboxMozliwosci from "../../components/sections/SectionJamboxMozliwosci.astro";
 
 import yaml from "js-yaml";
 import fs from "fs";
@@ -45,7 +46,14 @@ const rest = page.paragraphs.slice(1);
     </div>
   </section>
 
-  <OffersIsland client:load data={data} />
+    <section class="f-section">
+    <div class="f-section-grid-single md:grid-cols-1 max-w-6xl mx-auto">
+      <OffersIsland client:load data={data} />
+    </div>
+  </section>
+
+  
+  <!-- <OffersIsland client:load data={data} /> -->
   {
     rest.map((p: Paragraph) => (
       <section class="f-section">
@@ -59,6 +67,9 @@ const rest = page.paragraphs.slice(1);
 
   <SectionRenderer src="./src/content/internet-telewizja/section.yaml" />
 
+  <JamboxMozliwosci />
+
+
   <Modal client:load modalData={modalData} />
 
 </DefaultLayout>

src/pages/telefon/index.astro

@@ -41,7 +41,13 @@ const rest = page.paragraphs.slice(1);
     </div>
   </section>
 
-  <OffersIsland client:load data={data} />
+    <section class="f-section">
+    <div class="f-section-grid-single md:grid-cols-1">
+      <OffersIsland client:load data={data} />
+    </div>
+  </section>
+
+  <!-- <OffersIsland client:load data={data} /> -->
   {
     rest.map((p: Paragraph) => (
       <section class="f-section">

src/styles/offers/offers-switches.css

@@ -1,9 +1,9 @@
 .f-switches-wrapper {
-  @apply flex flex-wrap justify-center gap-6 mb-10;
+  @apply flex flex-wrap justify-center gap-6;
 }
 
 .f-switch-group {
-  @apply inline-flex overflow-hidden relative bg-[--f-background-switch] mt-8;
+  @apply inline-flex overflow-hidden relative bg-[--f-background-switch];
 }
 
 .f-switch {

src/styles/offers/offers-table.css

@@ -1,89 +1,146 @@
-.f-table-wrapper {
+/* GŁÓWNE SEKCJE */
-  @apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[--f-offers-border];
+.f-offers {
+  @apply my-6;
 }
 
-.f-table {
+/* GRID FLEX — zawsze centrowany */
-  @apply min-w-full border-collapse;
+.f-offers-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+  padding: 0 1rem;
 }
 
-.f-table-head {
+/* KARTA – POPRAWIONA, BEZ width/max-width/flex 1 1 300px */
-  background: color-mix(in srgb, var(--f-text) 6%, transparent);
+.f-card {
+  flex: 0 1 320px; 
+  
+  @apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border]
+         rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
 }
 
-.f-table-heading {
+.f-card:hover {
-  @apply text-center font-semibold text-xl  py-4 px-4 text-wrap;
+  @apply shadow-lg;
+  transform: translateY(-3px);
 }
 
-.f-plan-heading {
+/* POPULARNY PLAN */
-  @apply text-center py-4 px-4 align-bottom relative;
+.f-card-popular {
-}
+  border: 2px solid var(--f-offers-popular);
-
-.f-plan-title {
-  @apply text-xl font-semibold mb-1;
-}
-
-.f-plan-price {
-  @apply text-2xl font-extrabold mb-1 text-[--f-offers-price];
-}
-
-/* Na ten moment ukryte */
-.f-plan-speed {
-  @apply text-xs opacity-[0.7];
-}
-
-.f-row-even {
-  background: transparent;
-}
-
-.f-row-odd {
-  background: color-mix(in srgb, var(--f-text) 4%, transparent);
-}
-
-.f-feature-name {
-  @apply py-3 px-4 text-lg font-medium ;
-}
-
-.f-feature-cell {
-  @apply py-3 px-4 text-center text-lg;
-}
-
-.f-feature-yes {
-  @apply py-3 px-4 text-center font-bold text-base;
-}
-
-.f-feature-no {
-  @apply py-3 px-4 text-center font-bold text-base opacity-[0.45];
-}
-
-/* Popularny */
-.is-popular,
-.f-popular-col {
   background: var(--f-offers-popular-bg);
-  /* color-mix(in srgb, var(--f-offers-popular) 22%, transparent) !important; */
-  border-left: 2px solid var(--f-offers-popular);
-  border-right: 2px solid var(--f-offers-popular);
-  position: relative;
-  z-index: 0;
 }
 
-.f-popular-top {
+.f-card-badge {
-  border-top: 2px solid var(--f-offers-popular);
+  @apply absolute top-3 right-3 bg-[--btn-background]
+         text-[--btn-text] text-sm font-semibold px-3 py-1 rounded-full;
 }
 
-.f-popular-bottom {
+/* HEADER */
-  border-bottom: 2px solid var(--f-offers-popular);
+.f-card-header {
+  @apply flex flex-col items-start gap-1;
 }
 
-.f-popular-badge {
+.f-card-name {
-  @apply bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full inline-block mb-2 uppercase tracking-wide;
+  @apply text-xl font-semibold;
-  /* background: #3b82f6; 
+}
-  color: white;
+
-  font-size: 0.75rem;
+.f-card-price {
-  font-weight: 600;
+  @apply text-3xl font-extrabold text-[--f-offers-price];
-  padding: 0.25rem 0.75rem;
+}
-  border-radius: 9999px;
+
-  display: inline-block;
+/* FEATURES */
-  margin-bottom: 0.5rem;
+.f-card-features {
-  text-transform: uppercase;
+  @apply list-none p-0 m-0;
-  letter-spacing: 0.025em; */
+}
+
+.f-card-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr; 
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--f-offers-border);
+  align-items: center;
+}
+
+.f-card-row:last-child {
+  border-bottom: none;
+}
+
+.f-card-label {
+  @apply text-base font-medium opacity-80;
+}
+
+.f-card-value {
+  @apply text-base font-semibold text-right;
+}
+
+.f-card-value.yes {
+  @apply text-green-600;
+}
+
+.f-card-value.no {
+  @apply text-red-600 opacity-60;
+}
+
+
+/* -----------------------------
+   INTELIGENTNY UKŁAD KART
+------------------------------ */
+
+/* DOMYŚLNE: responsywnie */
+.f-card {
+  flex: 1 1 300px;
+  max-width: 360px;
+}
+
+/* LICZNIK KART */
+.f-offers-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+}
+
+/* --- UKŁAD SPECJALNY --- */
+
+/* 4 karty → 2 + 2 */
+.f-count-4 .f-card {
+  flex: 0 1 calc(50% - 2rem);
+  max-width: 420px;
+}
+
+/* 5 kart → 3 + 2 */
+.f-count-5 .f-card {
+  flex: 0 1 calc(33% - 2rem);
+}
+.f-count-5 .f-card:nth-child(n+4) {
+  flex: 0 1 calc(50% - 2rem);
+  max-width: 420px;
+}
+
+/* 7 kart → 3 + 3 + 1 (środek) */
+.f-count-7 .f-card {
+  flex: 0 1 calc(33% - 2rem);
+}
+.f-count-7 .f-card:last-child {
+  flex: 0 1 calc(33% - 2rem);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* 8 kart → 3 + 3 + 2 */
+.f-count-8 .f-card {
+  flex: 0 1 calc(33% - 2rem);
+}
+.f-count-8 .f-card:nth-child(n+7) {
+  flex: 0 1 calc(50% - 2rem);
+  max-width: 420px;
+}
+
+/* 10 kart → 3 + 3 + 3 + 1 */
+.f-count-10 .f-card:last-child {
+  flex: 0 1 calc(33% - 2rem);
+  margin-left: auto;
+  margin-right: auto;
 }

src/styles/theme.css

@@ -66,10 +66,16 @@
   --f-link-text: var(--link-color-light);
   --f-link-text-hover: var(--link-hover-light);
   /* Buttons Input */
+  /*
   --btn-background: var(--link-color-light);
   --btn-text: var(--surface4-light); 
   --btn-background-hover: var(--surface4-light);
   --btn-text-hover: var(--link-color-light);
+  */
+  --btn-background: var(--surface4-light);
+  --btn-text: var(--link-color-light);
+  --btn-background-hover: var(--link-color-light);
+  --btn-text-hover: var(--surface4-light);
 
   --f-background-toast: var(--surface2-dark);