Strona inwestycji mieszkaniowej
Strona sprzedażowa osiedla na 142 mieszkania, zbudowana wokół tego, czego ustawa o jawności cen wymaga od dewelopera: każde mieszkanie na planie budynku, każda cena z historią, publiczny cennik do pobrania. Klient i inwestycja są fikcyjne — strona i jej kod są prawdziwe.
- Klient
- Lenno Development — klient fikcyjny, projekt demonstracyjny webmotion
- Branża
- Deweloper mieszkaniowy
- Czas trwania
- Wrzesień–październik 2026
- Zakres
- Design, Development, Maintenance, Performance, Security
- Zespół
- Jedna osoba — projekt w Figmie i wdrożenie w WordPressie
- Dostępna pod
- lenno.webmotion.io
Co ten projekt musiał rozwiązać
Problem, jaki był, i decyzja, która go rozwiązała.
Cennik, któremu kupujący może zaufać, a nie folder z PDF-em w załączniku
Od ustawy z 21 maja 2025 r. o jawności cen mieszkań deweloper musi publikować cenę każdego lokalu, jej historię i koszty dodatkowe, i to w formie nadającej się do maszynowego odczytu. Większość stron deweloperskich dokleja cennik w PDF-ie do folderu reklamowego. Tutaj cennik musiał być stroną.
- 142 mieszkania ze statusem i ceną w każdym widoku
- Pełna historia cen każdego lokalu i publiczny cennik
- Polski i angielski bez prowadzenia dwóch cenników
Jeden cennik, z którego czyta każdy widok
Mieszkania to jeden typ treści z ceną, historią zmian i statusem. Wyszukiwarka, karty lokali, PDF-y, schowek i publiczny cennik czytają te same rekordy, a jeden import CSV od działu sprzedaży aktualizuje je wszystkie.
- Mieszkania nie są tłumaczone — jeden rekord obsługuje oba języki
- Zmiana ceny sama dopisuje się do historii
- Aktualna liczba wolnych lokali w edytowalnych tekstach
Stack, na którym to zbudowaliśmy
Ten sam benchmark, od którego zaczyna się każdy projekt webmotion, plus kilka elementów, których wymagał cennik dewelopera.
- WordPress CMS i edytor blokowy
- ACF Pro 24 autorskie bloki i pola lokali
- Polylang PL / EN w stronach, wpisach i opcjach
- PHP 8.2+ Typowane serwisy cen i lokali
- Sage 11 Szkielet motywu od Roots
- Acorn 6 Kontener Laravela w WordPressie
- Blade Widoki, composery, serwisy
- Alpine.js Wyszukiwarka i schowek na jednym JSON-ie lokali
- Tailwind CSS v4 Tokeny prosto z planszy stylu w Figmie
- Geist Hostowany lokalnie, z polskimi znakami
- Lenis Płynne przewijanie i przejścia do kotwic
- PhotoSwipe 5 Lightbox galerii
- Vite 6 Build assetów i HMR
- ddev / Docker Identyczne środowiska lokalne
- GitLab CI + Deployer Najpierw testy, potem wdrożenie
- LiteSpeed + LSCache Serwer produkcyjny i cache stron
Z czym to połączyliśmy
Każda karta mówi, co to za system, co robi na tej stronie i w którą stronę płyną dane.
-
CSV / XML
Publiczny cennik
Cały cennik pod /ceny.csv i /ceny.xml, z historią cen i kosztami dodatkowymi, plus codzienny zrzut o 6:00 gotowy do publikacji w dane.gov.pl.
Strona → kupujący, dane.gov.pl -
Import
Import cen
Dział sprzedaży wgrywa arkusz w panelu albo przez WP-CLI; ceny i statusy zmieniają się wszędzie, a historia uzupełnia się sama.
Arkusz → strona -
PDF
dompdf
Każde mieszkanie ma kartę PDF generowaną na żądanie, z rzutem, parametrami i ceną, w obu językach.
Lokal → PDF -
Formularze
Contact Form 7
Trzy formularze w szablonach Blade: zapytanie o lokal, umówienie spotkania z kalendarzem i wysłanie schowka do doradcy.
Odwiedzający → doradca -
i18n
Polylang + ACF Options
Strony, budynki, dziennik budowy i zespół są przetłumaczone; mieszkania zostają jednym rekordem, a angielskie adresy dodaje reguła rewrite.
PL ⇄ EN -
Mapy
OpenStreetMap
Mapy lokalizacji wyrenderowane z danych OSM i przekolorowane do palety marki, z zachowanym podpisem OpenStreetMap.
OSM → mapa statyczna
Kolory i typografia, z którymi wychodzi
Paleta klienta zapisana jako tokeny — każda próbka poniżej to zmienna eksportowana przez motyw.
- Granat #102C57 Tekst, akcenty, ciemne sekcje, dostępne
- Krem #FEFAF6 Tło strony
- Beż #EADBC8 Panele, karty, tła sekcji
- Piaskowy #DAC0A3 Obramowania i linie
- Brąz #8A6A45 Status: rezerwacja
- Szarobrązowy #6F675E Status: sprzedane
- Regular 400
- Medium 500
- SemiBold 600
- Display
- 88 / 0.98 / −0.04em
- Nagłówek sekcji
- 44 / 1.08 / −0.03em
- 689 900 zł
- 28 / 1.2 / 600
- Tekst główny w rozmiarze 17 na 1.6
- 17 / 1.6 / 400
- Etykieta sekcji
- 13 / 0.08em / wersaliki
- 6px Przyciski, pola
- 12px Karty, panele
- 999px Etykiety statusu, chipy
Sam produkt
Zrzuty z działającej strony. Każdy kafelek otwiera się w pełnym rozmiarze.
Co faktycznie zbudowaliśmy
Sześć elementów, na których stoi strona — tych, z których dział sprzedaży dewelopera korzysta na co dzień.
-
01
Plan budynku zamiast formularza filtrów
Każde mieszkanie to kwadrat w kolorze swojego statusu. Filtrowanie działa w przeglądarce na jednym JSON-ie ze 142 lokalami, więc jest natychmiastowe i działa także zza cache'u stron.
-
02
Historia cen wbudowana w model
Zmiana ceny dopisuje poprzednią do historii. Każda karta mieszkania pokazuje ją jako wykres i tabelę, z kosztami dodatkowymi pod spodem.
-
03
Publiczny cennik
/ceny.csv i /ceny.xml udostępniają cały cennik, a codzienny zrzut trafia do katalogu uploads, gotowy do publikacji w dane.gov.pl.
-
04
Jeden import aktualizuje stronę
Plik CSV od działu sprzedaży zmienia ceny i statusy naraz w wyszukiwarce, na kartach mieszkań, w PDF-ach i w cenniku.
-
05
Schowek bez zakładania konta
Schowek żyje w przeglądarce, porównuje do trzech mieszkań i wysyła listę do doradcy przez formularz.
-
06
Aktualne liczby w edytowalnych tekstach
Redaktor wpisuje {available} albo {sold} w nagłówku, a liczba przychodzi z cennika — żadna strona nie obiecuje mieszkań, których już nie ma.
Co to zmieniło
Zmierzone na działającej stronie, nie oszacowane — pod każdą liczbą jest źródło pomiaru.
Co dział sprzedaży dewelopera może prowadzić bez otwierania kodu.
- Dziesięć widoków w Figmie, na desktop i mobile
- 24 bloki ACF i pięć własnych typów treści
- Wyszukiwarka z planem budynków, karty mieszkań i schowek
- Historia cen, cennik CSV/XML i import CSV
- Karty mieszkań w PDF i dokumenty dla kupujących
- Polski i angielski, łącznie z formularzami i opcjami
Masz projekt, który ma działać tak samo?
Prześlij brief albo umów rozmowę. Odpowiadamy zakresem i widełkami, nie szablonem.
