Salon łazienek — portfolio

O projekcie

Serwis salonu łazienek i wyposażenia: aranżacje, katalog płytek, ceramiki, armatury i mebli, realizacje z okolicy oraz ścieżka kończąca się pomiarem i ofertą. Strona ma sprzedawać tak, jak sprzedaje ten salon — czyli rozmową i wizytą w ekspozycji, a nie przyciskiem „dodaj do koszyka”.

Punktem wyjścia było rozpoznanie, które zmienia całą nawigację: KLIENT NIE SZUKA PŁYTKI, TYLKO GOTOWEJ ŁAZIENKI. Osoba remontująca mieszkanie nie wie, czy potrzebuje formatu 60×120 z rektyfikacją i klasą R10 — wie, że chce jasną łazienkę w bloku, z prysznicem bez brodzika i miejscem na pralkę. Katalog filtrowany po parametrach technicznych jest dla takiego klienta ścianą, a nie narzędziem.

Dlatego wejściem są ARANŻACJE: skończone wnętrza z rozpisaną listą produktów, metrażem i przedziałem kosztu. Klient wchodzi przez obraz, a dopiero z niego schodzi do konkretnej płytki, baterii czy mebla. Katalog z pełnym filtrowaniem technicznym zostaje pod spodem — dla wykonawcy i dla klienta, który już wie, czego szuka. Te dwie drogi są równoległe, nie alternatywne.

Druga rzecz, która decyduje o zaufaniu, to LICZENIE. Płytka nie jest sprzedawana na sztuki, tylko na metry kwadratowe w pełnych opakowaniach, a do metrażu trzeba doliczyć zapas na docinanie i stłuczki. Kalkulator, który mnoży powierzchnię przez cenę za metr, podaje kwotę, której nikt nigdy nie zapłaci — i kończy się telefonem w środku układania, że zabrakło czterech płytek.

Do tego dochodzi rzecz przemilczana w większości katalogów: PARTIA PRODUKCYJNA. Płytki z różnych partii różnią się odcieniem i o ułamek milimetra wymiarem, a dobranie tej samej partii po miesiącu bywa niemożliwe. To musi być napisane WPROST przy zamówieniu, razem z rekomendacją kupienia całości od razu — bo konsekwencję ponosi klient, nie sklep.

Dostępność w tej branży też znaczy co innego niż w sklepie z elektroniką. „W magazynie” nie mówi nic komuś, kto planuje ekipę na konkretny tydzień; znaczenie ma TERMIN, a terminy bywają wielotygodniowe, zwłaszcza przy sprowadzanych kolekcjach. Karta produktu podaje więc przewidywany termin, a nie zieloną kropkę.

Transport liczy się od WAGI I DOSTĘPU, nie od liczby pozycji. Paleta płytek waży kilkaset kilogramów, wniesienie na czwarte piętro bez windy jest osobną usługą, a rozładunek wymaga kogoś na miejscu. Kalkulator dostawy pyta więc o piętro, windę i możliwość podjazdu — zamiast podać kwotę, którą trzeba potem prostować telefonicznie.

Całość jest zbudowana pod TELEFON NA BUDOWIE: słaby zasięg, jedna ręka, czasem rękawica. Strona ma być lekka, czytelna w słońcu, z dużymi celami dotykowymi i działającymi formularzami także wtedy, gdy skrypty się nie wczytają. Do tego lokalne SEO i dane strukturalne, bo ruch w tej branży zaczyna się od frazy z nazwą miasta i kończy wizytą w ekspozycji.

Problem

Salon miał katalog zbudowany jak hurtownia: listę produktów z filtrami po formacie, rektyfikacji i klasie antypoślizgowej. Dla wykonawcy było to wygodne, dla klienta indywidualnego — nieprzejezdne, bo żeby czegokolwiek użyć, trzeba było już wiedzieć, czego się szuka. Do tego strona podawała cenę za metr kwadratowy, a sprzedaż szła na pełne opakowania, więc kwota na stronie nigdy nie zgadzała się z fakturą. Najczęstsze pytanie w telefonach brzmiało „ile tego naprawdę potrzebuję i ile to będzie kosztowało”, a strona nie odpowiadała na żadną z tych dwóch części.

Rozwiązanie

Aranżacje stały się główną drogą wejścia, a katalog techniczny został pod nimi jako druga, równoległa ścieżka. Każda aranżacja ma rozpisaną listę produktów, metraż i przedział kosztu, więc klient widzi skutek, zanim zacznie wybierać elementy. Karta produktu przelicza metry na PEŁNE PACZKI z zapasem na docinanie i podaje cenę, którą zobaczy na fakturze, razem z ostrzeżeniem o partii produkcyjnej. Dostawa liczona jest z wagi i warunków wniesienia. Ścieżka kończy się formularzem pomiaru i wyceny — z możliwością dołączenia rzutu lub zdjęć — bo tak wygląda prawdziwa sprzedaż w tym salonie.

Funkcje

Aranżacje jako punkt wejścia: skończone wnętrza z listą użytych produktów, metrażem i przedziałem kosztu.
Katalog techniczny jako druga, równoległa ścieżka — dla wykonawcy i dla klienta, który już wie, czego szuka.
Kalkulator przeliczający powierzchnię na PEŁNE opakowania z konfigurowalnym zapasem na docinanie i stłuczki.
Cena pokazywana tak, jak wygląda na fakturze: za paczkę i za całość, a nie sama stawka za metr.
Ostrzeżenie o partii produkcyjnej przy każdym produkcie sprzedawanym na metry, z rekomendacją zakupu całości naraz.
Klasa antypoślizgowa i dopuszczone zastosowanie podane wprost, razem z ostrzeżeniem przy strefie mokrej.
Zgodność z ogrzewaniem podłogowym jako osobna informacja, bo to pytanie wraca przy co drugim remoncie.
Termin dostępności zamiast zielonej kropki — z rozróżnieniem towaru z magazynu i sprowadzanego.
Kalkulator dostawy liczący z wagi, piętra, windy i możliwości podjazdu, a nie z liczby pozycji.
Zastrzeżenie o wierności kolorów na ekranie i zamawianie próbek jednym kliknięciem.
Realizacje z lokalizacją i metrażem jako dowód, a nie stockowe rendery.
Formularz pomiaru i wyceny z możliwością dołączenia rzutu lub zdjęć, działający też bez skryptów.
Dane strukturalne lokalnego przedsiębiorstwa: adres, godziny, dojazd, parking — pod frazy z nazwą miasta.

Moduły

katalog-aranzacji
moduł treści
Skończone wnętrza jako główna droga wejścia klienta indywidualnego.
- Aranżacja niesie listę użytych produktów, metraż pomieszczenia i przedział kosztu — a nie samo zdjęcie.
- Każdy produkt na liście prowadzi do swojej karty, więc z obrazu da się zejść do konkretu jednym kliknięciem.
- Filtry pisane językiem klienta: jasna, ciemna, mała, z prysznicem bez brodzika, z miejscem na pralkę.
- Aranżacja bez kompletnej listy produktów nie może zostać opublikowana — inaczej obiecuje coś, czego nie da się kupić.
karta-produktu
moduł
Mówi to, co rozstrzyga o zakupie w budowlance, a nie to, co łatwo wpisać.
- Klasa antypoślizgowa, dopuszczone zastosowanie i zgodność z ogrzewaniem podłogowym na wierzchu, nie w tabeli na dole.
- Cena za paczkę i za całość obok stawki za metr — tak, jak to wygląda na fakturze.
- Parametry, których brakuje, są NAZWANE jako brakujące; puste pole nie udaje, że czegoś nie ma.
- Produkty powiązane z aranżacjami, w których wystąpiły — to najszybsza droga do pokazania skutku.
kalkulator-paczek
biblioteka
Przelicza powierzchnię na pełne opakowania z zapasem, bo tak wygląda sprzedaż.
- Wejście: wymiary pomieszczenia albo powierzchnia wprost; wyjście: liczba paczek, metry w paczkach i kwota.
- Zapas na docinanie jako parametr z domyślną wartością, osobno dla układu prostego i po skosie.
- Zaokrąglenie ZAWSZE w górę do pełnej paczki — niedobór w środku układania kosztuje więcej niż nadmiar.
- Czysta funkcja bez dostępu do sieci, z testami na przypadki graniczne: równo na styk, resztka jednej płytki, format wielkoformatowy.
partie-i-odcienie
moduł
Mówi wprost o rzeczy, którą katalogi przemilczają, bo nie brzmi handlowo.
- Ostrzeżenie o różnicy odcienia i kalibru między partiami przy każdym towarze sprzedawanym na metry.
- Rekomendacja zakupu całości naraz razem z wyliczoną ilością z kalkulatora.
- Informacja, czy dostępny jest zapas z tej samej partii, i od kiedy przestaje być gwarantowany.
- Treść ostrzeżenia jest jedna dla całego serwisu — zmiana brzmienia nie wymaga przechodzenia po kartach.
dostepnosc-i-termin
usługa
Zamienia „w magazynie” na datę, wokół której da się zaplanować ekipę.
- Rozróżnienie towaru z magazynu, z centrali dostawcy i sprowadzanego na zamówienie.
- Termin podawany jako przedział z datą aktualizacji, a nie jedna liczba udająca pewność.
- Brak danych o terminie jest napisany wprost i kieruje do kontaktu, zamiast pokazywać domyślną wartość.
- Zmiana terminu po stronie dostawcy zapala listę produktów do przejrzenia, nie cichy zapis w bazie.
kalkulator-dostawy
silnik reguł
Liczy transport z wagi i warunków wniesienia, nie z liczby pozycji w koszyku.
- Waga liczona z rzeczywistych mas paczek i palet, z progami przewoźnika.
- Pytania o piętro, windę i możliwość podjazdu; wniesienie jest osobną pozycją, bo jest osobną usługą.
- Rozładunek wymagający obecności na miejscu jest nazwany jako warunek, a nie ukryty w regulaminie.
- Reguły są danymi z datą obowiązywania — zmiana cennika przewoźnika nie wymaga wdrożenia.
zapytanie-o-wycene
moduł formularza
Ścieżka kończąca się pomiarem i ofertą, czyli tak, jak ten salon naprawdę sprzedaje.
- Formularz z metrażem, terminem remontu i możliwością dołączenia rzutu albo zdjęć pomieszczenia.
- Działa bez skryptów: wysyłka klasycznym POST-em, walidacja po stronie serwera, zrozumiały komunikat błędu.
- Wybrane produkty i aranżacje dopinają się do zapytania, więc handlowiec nie zaczyna rozmowy od zera.
- Potwierdzenie mówi, co się teraz stanie i w jakim czasie — zamiast samego „dziękujemy”.
realizacje
moduł treści
Dowód zamiast deklaracji: zrobione łazienki z okolicy, z metrażem i użytymi produktami.
- Każda realizacja ma lokalizację ogólną, metraż i listę produktów — te same, które są w katalogu.
- Zdjęcia własne, nie stockowe; brak zdjęć oznacza brak realizacji na stronie, a nie rendery.
- Powiązanie w obie strony: z realizacji do produktu i z produktu do realizacji, w których wystąpił.
- Realizacje zasilają lokalne SEO treścią, której konkurencja nie ma, bo nie da się jej kupić.
zdjecia-i-kolor
potok obrazów
Pilnuje wagi i uczciwości zdjęć, bo w tej branży zdjęcie jest produktem.
- Warianty rozmiarów i nowoczesne formaty, z rezerwacją miejsca w układzie — zero przeskoków przy wczytywaniu.
- Profil barwny zachowany przy przetwarzaniu; zdjęcie po obróbce nie może być bardziej kolorowe niż towar.
- Zastrzeżenie o wierności kolorów na ekranie stoi przy zdjęciach, a nie w stopce.
- Zamówienie próbki jednym kliknięciem — najtańszy sposób rozwiązania sporu o odcień.
seo-lokalne
moduł
Robi to, od czego zaczyna się ruch w tej branży: frazę z nazwą miasta.
- Dane strukturalne lokalnego przedsiębiorstwa: adres, godziny otwarcia, telefon, obszar obsługi.
- Strony kategorii i realizacji pisane pod realne zapytania, nie pod listę słów kluczowych.
- Dojazd, parking i godziny ekspozycji widoczne bez szukania — wizyta jest celem, nie efektem ubocznym.
- Mapa strony i kanoniki pilnowane automatycznie, żeby katalog nie dublował sam siebie filtrami.
tryb-budowy
warstwa interfejsu
Strona używana jedną ręką, w słońcu, przy słabym zasięgu.
- Duże cele dotykowe i kontrast sprawdzany pomiarem, nie na oko.
- Lekkie strony i priorytet dla treści nad ozdobą — pierwszy ekran ma się pokazać na wolnym łączu.
- Telefon i nawigacja do salonu dostępne z każdego miejsca serwisu, bez wracania do stopki.
- Wszystko, co klient musi zrobić, działa bez JavaScriptu; skrypty tylko usprawniają.

Architektura

Frontend: Next.js (App Router) z eksportem statycznym, TypeScript, Tailwind CSS
Treść: Headless CMS: aranżacje, katalog, realizacje i ostrzeżenia w jednym miejscu
Katalog: Produkty z parametrami technicznymi; powiązania dwustronne z aranżacjami i realizacjami
Kalkulator paczek: Czysta funkcja, zaokrąglenie w górę do pełnego opakowania, zapas jako parametr
Ceny: Grosze, cena za paczkę i za całość obok stawki za metr; zaokrąglenie raz, na końcu
Dostępność: Termin jako przedział z datą aktualizacji; rozróżnienie magazyn / centrala / sprowadzany
Dostawa: Reguły z datą obowiązywania: waga, progi przewoźnika, piętro, winda, podjazd
Formularze: Klasyczny POST z walidacją serwerową; załączniki z limitem rozmiaru i typu
Obrazy: Warianty i nowoczesne formaty, zachowany profil barwny, rezerwacja miejsca w układzie
SEO: Schema.org LocalBusiness i Product, kanoniki, mapa strony, strony pod frazy lokalne
Dostępność cyfrowa: Kontrast i cele dotykowe sprawdzane pomiarem; pełna obsługa bez JavaScriptu
Wydajność: Budżet wagi na stronę, priorytet pierwszego ekranu, zero przeskoków układu
Testy: Przypadki graniczne kalkulatora i reguł dostawy jako czyste funkcje; przelot formularzy bez skryptów