Stylizacja strony dokumenty, czyszczenie informacji z wyboru opcji do kontaktu po wyslaniu, odswieżeniu

src/content/document/promocja copy 2.yaml

@@ -1,14 +0,0 @@
-title: "Promocja świąteczna"
-visible: true
-intro: Przykładowo gdybysmy dodali promocję do dokumentów
-content: |
-  Jeśli kupujesz w sklepach internetowych, prawdopodobnie co pewien czas natykasz się na opisy, które nie zachęcają do zakupów. 
-  Do najczęściej powtarzanych błędów opisów produktów należą:
-
-  - brak konkretów – klient chce wiedzieć, z czego produkt jest wykonany, jakie ma wymiary czy funkcje, a nie tylko, że jest „wysokiej jakości”;
-  - zbyt techniczny język – warto dostosować ton komunikacji do odbiorcy, unikając skomplikowanych terminów (i w drugą stronę – jeśli sprzedajesz towar skierowany do profesjonalistów, nie trzeba w opisie ze szczegółami wyjaśniać, jak działa czy do czego służy);
-  - brak narracji – storytelling w opisach produktów pomaga zbudować emocjonalne zaangażowanie klienta;
-
-  ignorowanie pytań klientów – warto analizować najczęstsze pytania i uwzględniać odpowiedzi w opisach; jeśli np. często dostajesz zapytania dotyczące tego, czy produkt jest wodoodporny, lepiej napisać o tym od razu w opisie;
-
-  zbyt długie i skomplikowane opisy – należy dbać o przejrzystość treści, używać krótkich akapitów i list wypunktowanych; klient poszukuje konkretów, a nie zawiłych opowieści, które trudno się czyta.

src/content/document/promocja copy.yaml

@@ -1,14 +0,0 @@
-title: "Promocja świąteczna"
-visible: true
-intro: Przykładowo gdybysmy dodali promocję do dokumentów
-content: |
-  Jeśli kupujesz w sklepach internetowych, prawdopodobnie co pewien czas natykasz się na opisy, które nie zachęcają do zakupów. 
-  Do najczęściej powtarzanych błędów opisów produktów należą:
-
-  - brak konkretów – klient chce wiedzieć, z czego produkt jest wykonany, jakie ma wymiary czy funkcje, a nie tylko, że jest „wysokiej jakości”;
-  - zbyt techniczny język – warto dostosować ton komunikacji do odbiorcy, unikając skomplikowanych terminów (i w drugą stronę – jeśli sprzedajesz towar skierowany do profesjonalistów, nie trzeba w opisie ze szczegółami wyjaśniać, jak działa czy do czego służy);
-  - brak narracji – storytelling w opisach produktów pomaga zbudować emocjonalne zaangażowanie klienta;
-
-  ignorowanie pytań klientów – warto analizować najczęstsze pytania i uwzględniać odpowiedzi w opisach; jeśli np. często dostajesz zapytania dotyczące tego, czy produkt jest wodoodporny, lepiej napisać o tym od razu w opisie;
-
-  zbyt długie i skomplikowane opisy – należy dbać o przejrzystość treści, używać krótkich akapitów i list wypunktowanych; klient poszukuje konkretów, a nie zawiłych opowieści, które trudno się czyta.

src/pages/api/contact/contact.js

@@ -145,7 +145,7 @@ ${form.message || ""}
       subject,
       text,
       html,
-      replyTo: form.email ? String(form.email) : undefined, // wygodne do "Odpowiedz"
+      replyTo: form.email ? String(form.email) : undefined,
     });
 
     return new Response(JSON.stringify({ ok: true }), {

src/pages/dokumenty/[slug].astro

@@ -3,6 +3,7 @@ import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import Markdown from "../../islands/Markdown.jsx";
 import { marked } from "marked";
 import { getDocumentBySlug } from "../../lib/documents";
+import "../../styles/document.css";
 
 const { slug } = Astro.params;
 
@@ -17,7 +18,7 @@ const html = marked.parse(doc.content);
 <DefaultLayout title={doc.title}>
   <section class="f-section">
     <div class="f-section-grid-single">
-      <a href="/dokumenty" class="text-sm opacity-70 hover:opacity-100">
+      <a href="/dokumenty" class="f-document-link">
         ← Wróć do dokumentów
       </a>
 

src/pages/dokumenty/index.astro

@@ -1,29 +1,28 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import { listDocuments } from "../../lib/documents";
+import "../../styles/document.css";
 
 const documents = listDocuments().filter((d) => d.visible === true);
 ---
 
 <DefaultLayout title="Dokumenty">
-  <section class="max-w-6xl mx-auto px-4 py-10">
+  <section class="f-documents">
-    <h1 class="text-4xl md:text-5xl font-bold text-[--f-header]">Dokumenty</h1>
+    <h1 class="f-documents-title">Dokumenty</h1>
 
-    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <div class="f-documents-grid">
       {documents.map((doc) => (
         <a
           href={`/dokumenty/${doc.slug}`}
-          class="group rounded-2xl border border-[--f-border-color]
+          class="f-document-card"
-                 bg-[--f-background] p-5 shadow-sm
-                 transition hover:-translate-y-0.5 hover:shadow-md"
         >
-          <h3 class="text-xl font-bold group-hover:underline">{doc.title}</h3>
+          <h3 class="f-document-title">{doc.title}</h3>
 
           {doc.intro && (
-            <p class="mt-3 text-sm opacity-80 leading-relaxed">{doc.intro}</p>
+            <p class="f-document-intro">{doc.intro}</p>
           )}
 
-          <span class="mt-4 inline-block text-sm opacity-70">Otwórz →</span>
+          <span class="f-document-link">Otwórz →</span>
         </a>
       ))}
     </div>

src/pages/kontakt/index.astro

@@ -18,7 +18,7 @@ const form = data.form;
 ---
 
 <DefaultLayout seo={seo}>
-<section class="f-section">
+  <section class="f-section">
     <div class="f-section-grid md:grid-cols-2 gap-10 items-start">
       <div>
         <h2 class="f-section-title">{data.title}</h2>
@@ -89,7 +89,11 @@ const form = data.form;
             </span>
           </label>
 
-        <button type="submit" class="btn btn-primary w-full py-3" title={form.submit.title}>
+          <button
+            type="submit"
+            class="btn btn-primary w-full py-3"
+            title={form.submit.title}
+          >
             {form.submit.label}
           </button>
         </form>
@@ -115,7 +119,7 @@ const form = data.form;
     <div id="toast" class="f-toast"></div>
 
     <input type="hidden" name="offerConfig" id="offerConfig" />
-</section>
+  </section>
 
   <!-- ReCaptcha v3 -->
   <script
@@ -182,43 +186,30 @@ const form = data.form;
 
       // ----------
       const LS_KEY = "fuz_offer_config_v1";
+      const SS_INJECTED_KEY = "fuz_offer_injected_v1";
 
-function formatOfferSummary(o) {
+      function clearOfferDraft() {
-  if (!o || !o.pkg) return "";
-
-  const lines = [];
-  lines.push(`Wybrana oferta: ${o.pkg.name} (${o.totals?.base ?? 0} ${o.totals?.currencyLabel ?? ""})`);
-
-  if (o.decoder) lines.push(`Dekoder: ${o.decoder.name} (+${o.decoder.price} ${o.totals?.currencyLabel ?? ""})`);
-  if (o.phone) lines.push(`Telefon: ${o.phone.name} (+${o.phone.price} ${o.totals?.currencyLabel ?? ""})`);
-
-  if (Array.isArray(o.tvAddons) && o.tvAddons.length) {
-    lines.push("Pakiety TV:");
-    o.tvAddons.forEach((x) => {
-      const term = x.term ? `, ${x.term}` : "";
-      lines.push(`- ${x.nazwa} x${x.qty} (${x.unit} ${o.totals?.currencyLabel ?? ""}${term})`);
-    });
-  }
-
-  if (Array.isArray(o.addons) && o.addons.length) {
-    lines.push("Dodatki:");
-    o.addons.forEach((x) =>
-      lines.push(`- ${x.nazwa} x${x.qty} (${x.unit} ${o.totals?.currencyLabel ?? ""})`),
-    );
-  }
-
-  lines.push(`RAZEM: ${o.totals?.total ?? 0} ${o.totals?.currencyLabel ?? ""}`);
-  return lines.join("\n");
-}
-
-function hydrateOfferIntoForm() {
         try {
+          localStorage.removeItem(LS_KEY);
+          sessionStorage.removeItem(SS_INJECTED_KEY);
+
+          const hidden = document.getElementById("offerConfig");
+          if (hidden) hidden.value = "";
+        } catch {}
+      }
+
+      function hydrateOfferIntoForm() {
+        try {
+          if (sessionStorage.getItem(SS_INJECTED_KEY) === "1") return;
+
           const raw = localStorage.getItem(LS_KEY);
           if (!raw) return;
 
           const payload = JSON.parse(raw);
+
           const msg = document.querySelector('textarea[name="message"]');
           const subject = document.querySelector('input[name="subject"]');
+          const hidden = document.getElementById("offerConfig");
 
           const offerText =
             typeof payload?.message === "string" && payload.message.trim()
@@ -232,13 +223,35 @@ function hydrateOfferIntoForm() {
           }
 
           if (msg) {
+            const marker = "Wybrana oferta:";
+            const alreadyHas = msg.value && msg.value.includes(marker);
+            if (!alreadyHas) {
               msg.value = (msg.value ? msg.value + "\n\n" : "") + offerText;
             }
+          }
+
+          if (hidden) hidden.value = offerText;
+
+          sessionStorage.setItem(SS_INJECTED_KEY, "1");
         } catch {}
-}
+      }
 
-hydrateOfferIntoForm();
+      hydrateOfferIntoForm();
 
+      function onSubmitSuccessCleanup() {
+        clearOfferDraft();
+      }
+
+      function onLeaveCleanup() {
+        clearOfferDraft();
+      }
+
+      window.addEventListener("pagehide", onLeaveCleanup);
+      window.addEventListener("beforeunload", onLeaveCleanup);
+      if (json.ok) {
+        form.reset();
+        onSubmitSuccessCleanup();
+      }
       // ----------
     });
   </script>

src/styles/document.css

@@ -0,0 +1,30 @@
+
+  .f-documents {
+    @apply max-w-7xl mx-auto px-4 py-10;
+  }
+
+  .f-documents-title {
+    @apply text-4xl md:text-5xl font-bold text-[--f-header];
+  }
+
+  .f-documents-grid {
+    @apply mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3;
+  }
+
+  .f-document-card {
+    @apply border border-[--f-border-color] bg-[--f-background] text-[--f-text]
+           p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md;
+  }
+
+  .f-document-title {
+    @apply text-2xl font-bold;
+  }
+
+  .f-document-intro {
+    @apply mt-3 text-xl opacity-80 leading-relaxed;
+  }
+
+  .f-document-link {
+    @apply mt-4 inline-block text-base opacity-70 text-[--f-link-text];
+  }
+