softspm_www/doc/SoftSPM_projekt.doc

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head><meta charset="utf-8"><title>SoftSPM — projekt nowej strony</title>
<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom></w:WordDocument></xml><![endif]-->
<style>
body{font-family:Calibri,Arial,sans-serif;font-size:11pt;color:#1d1f20;line-height:1.5;}
h1{font-size:22pt;color:#5980a6;border-bottom:2pt solid #5980a6;padding-bottom:6pt;}
h2{font-size:15pt;color:#39536e;margin-top:18pt;}
h3{font-size:12pt;color:#1d1f20;margin-top:12pt;}
table{border-collapse:collapse;width:100%;margin:8pt 0;}
th,td{border:0.5pt solid #9fb3c8;padding:4pt 8pt;font-size:10pt;text-align:left;vertical-align:top;}
th{background:#e3eaf2;color:#39536e;}
.swatch{font-family:Consolas,monospace;font-size:10pt;}
.meta{color:#666;font-size:10pt;}
</style></head><body>

<h1>SoftSPM — projekt nowej strony internetowej</h1>
<p class="meta">Dokumentacja projektowa · wersja 1.0 · sierpień 2026 · makieta: SoftSPM_makieta.html</p>

<h2>1. Cel i założenia</h2>
<p>Nowa strona SoftSPM zachowuje dotychczasowy charakter i zakres firmy (system sterowania pompami głębinowymi), ale przenosi ciężar komunikacji na nowe produkty: <b>szkolenia, konsulting i webinaria</b> dla branży wodociągowo-kanalizacyjnej. Główny przekaz: <b>wiedza i doświadczenie praktyków od 2014 roku</b> — programy budowane na rzeczywistych wdrożeniach, nie na slajdach.</p>
<ul>
<li>Główne CTA: zapis na szkolenie / umówienie konsultacji.</li>
<li>System SoftSPM prezentowany jako źródło wiedzy — sekcja pod koniec strony.</li>
<li>Ekosystem (wodociagowiec.pl, gieldakomunalna.pl, platforma kursowa) — wzmianka w stopce.</li>
<li>Języki: polski + wersja angielska strony głównej.</li>
</ul>

<h2>2. Struktura serwisu</h2>
<table>
<tr><th>Strona</th><th>Plik</th><th>Zawartość</th></tr>
<tr><td>Strona główna (PL)</td><td>index.html</td><td>Hero · Doświadczenie w liczbach (arkusz techniczny) · Oferta (szkolenia / konsulting / webinaria) · Najbliższe terminy · Platforma kursowa · System SoftSPM · Opinia · Newsletter · Stopka z ekosystemem</td></tr>
<tr><td>Szkolenia / Webinaria</td><td>szkolenia.html</td><td>Hero · 5 ścieżek tematycznych · Format szkolenia (arkusz) · Terminy · Webinaria + pakiet roczny · Zgłoszenie</td></tr>
<tr><td>Konsulting</td><td>konsulting.html</td><td>Hero · Zakres usług (audyt, dobór pomp, SCADA, cyfryzacja) · Przebieg współpracy w 3 krokach · Opinia · Bezpłatna rozmowa wstępna</td></tr>
<tr><td>Strona główna (EN)</td><td>index-en.html</td><td>Angielskie lustro strony głównej</td></tr>
</table>

<h2>3. Ścieżki tematyczne szkoleń</h2>
<ul>
<li>Eksploatacja i diagnostyka pomp głębinowych</li>
<li>Optymalizacja energetyczna SUW</li>
<li>Monitoring i SCADA / IoT — predykcja awarii</li>
<li>Cyfryzacja przedsiębiorstw wod-kan</li>
<li>Prawo i taryfy (cykl webinariów)</li>
</ul>

<h2>4. Design — system „Industry" (HydroNexis)</h2>
<p>Strona konsekwentnie stosuje styl wireframe/blueprint: jasne techniczne tło, stalowo-niebieski akcent, kwadratowe narożniki z krzyżykami rejestracyjnymi („+"), karty jako rysunki liniowe bez wypełnienia, zdjęcia w duotonie akcentu. Liczby i parametry prezentowane jako arkusze techniczne (tabela spec z nagłówkiem rewizji).</p>

<h3>4.1. Kolorystyka</h3>
<table>
<tr><th>Rola</th><th>Wartość</th><th>Zastosowanie</th></tr>
<tr><td>Tło</td><td class="swatch">#f2f2f3</td><td>Jasny techniczny grunt całej strony</td></tr>
<tr><td>Tekst</td><td class="swatch">#1d1f20</td><td>Treść, nagłówki</td></tr>
<tr><td>Akcent (stalowy)</td><td class="swatch">#5980a6</td><td>Przyciski primary, tagi, linki, duotone zdjęć</td></tr>
<tr><td>Akcent ciemny (700–900)</td><td class="swatch">ramp OKLCH</td><td>Tekst akcentowy w rozmiarze akapitu, stany pressed</td></tr>
</table>
<p>Zasada: jedna barwa akcentu, bez dodatkowych kolorów dekoracyjnych. Tinty i stany hover z tonalnej skali 100–900.</p>

<h3>4.2. Typografia</h3>
<table>
<tr><th>Rola</th><th>Krój</th><th>Charakter</th></tr>
<tr><td>Nagłówki</td><td>Barlow Condensed</td><td>Skondensowane, wersaliki w tytułach sekcji i tabel</td></tr>
<tr><td>Tekst</td><td>Barlow</td><td>Czytelny grotesk, interlinia rytmu 24px</td></tr>
</table>

<h3>4.3. Komponenty</h3>
<ul>
<li><b>Przyciski:</b> primary — jedyny pełny obiekt (wypełnienie akcentem, kwadratowe rogi, znaczniki narożne); ghost — obrys.</li>
<li><b>Karty ofertowe:</b> ramka włoskowa + 4 krzyżyki narożne, bez tła.</li>
<li><b>Arkusz techniczny („plate"):</b> tabela spec z paskiem tytułowym (kod, rewizja, numer arkusza) — nośnik liczb i parametrów.</li>
<li><b>Tabela terminów:</b> data tabelaryczna, temat w Barlow Condensed, tagi Szkolenie/Webinar, link „Zapisz się →"; na mobile wiersze składają się do kart.</li>
<li><b>Zdjęcia:</b> zawsze w duotonie akcentu, w ramce blueprint.</li>
<li><b>Ikony:</b> Lucide, stroke 1.5.</li>
</ul>

<h2>5. Treści do potwierdzenia przed publikacją</h2>
<ul>
<li>Liczby w sekcji „Doświadczenie w liczbach" (480+ przeszkolonych, 24 webinaria/rok, 60+ wdrożeń) — wartości przykładowe.</li>
<li>Referencje/cytaty — przykładowe, do zastąpienia prawdziwymi.</li>
<li>Nazwa i adres platformy kursowej (linki „Przejdź do platformy").</li>
<li>Terminy szkoleń i cennik pakietu rocznego webinariów.</li>
<li>Zdjęcia z obiektów (obecnie placeholder w duotonie).</li>
</ul>

<h2>6. Następne kroki</h2>
<ul>
<li>Akceptacja struktury i treści makiety.</li>
<li>Podpięcie formularzy (zapisy, newsletter) do systemu mailingowego.</li>
<li>Integracja kalendarza terminów z platformą kursową.</li>
<li>Sesja zdjęciowa na obiektach lub wybór zdjęć archiwalnych.</li>
</ul>

</body></html>