bioagnes - strona firmowa w Astro z katalogiem 24 usług

Punkt wyjścia

Przedsiębiorca nie szuka „obsługi środowiskowej”. Szuka „sprawozdanie BDO termin”, „raport KOBiZE za kogo”, „rejestracja LUCID opakowania”. Każde z tych zapytań to inny moment paniki i inna usługa - a wszystkie prowadzą do tej samej osoby.

Problem projektowy nie polegał więc na opisaniu tego, co Agnieszka robi. Polegał na tym, żeby dwadzieścia kilka usług dało się utrzymać w spójności, kiedy każda musi mieć własny adres, własny opis i własne miejsce w nawigacji - dokładnie to, o co chodzi w stronie firmowej, która ma rosnąć bez przepisywania się od zera przy każdej nowej usłudze.

Decyzje, które ukształtowały projekt

Jeden plik jako źródło prawdy

src/data/services.ts trzyma cały katalog usług. Ten sam plik generuje mega-menu, listę na /uslugi, podstrony /uslugi/[slug], linki w stopce i dane do SEO. Dopisanie usługi to jeden wpis - nie sześć miejsc, w których trzeba pamiętać o tej samej zmianie.

Alternatywa, czyli ręczne pisanie dwudziestu czterech podstron, byłaby szybsza w pierwszym tygodniu i nie do utrzymania w szóstym miesiącu. Pierwsza rozbieżność między menu a stopką pojawia się przy trzeciej edycji.

Dwa poziomy szczegółowości, nie jeden

Nie wszystkie usługi są równe. BDO, KOBiZE, LUCID i pozwolenie wodnoprawne to zapytania o największym wolumenie i najbardziej złożonej treści - dostały własny layout i teksty pisane pod konkretne obiekcje. Reszta jedzie z szablonu generycznego, bo dwadzieścia stron o tej samej strukturze wystarcza, żeby złapać długi ogon.

To kompromis: pełna ręczna robota dla czterech stron zamiast pół roboty dla dwudziestu czterech.

FAQ na dole każdej strony, nie w zakładce

Sekcja FAQ jest wpięta w layout, więc pojawia się pod każdą podstroną. Klient czytający o sprawozdaniu BDO ma odpowiedź na „czy to drogie” i „co jeśli się spóźniłem” tam, gdzie właśnie zaczął się wahać - a nie w zakładce, do której musiałby wrócić.

Akordeon to natywne <details name="faq">: jeden otwarty naraz, zero JavaScriptu, działa z klawiatury i z czytnikiem ekranu bez pisania obsługi ról ARIA - dostępność za darmo, bo przeglądarka robi to, co inaczej trzeba by dopisywać ręcznie (rozpisaliśmy to szerzej przy dostępności WCAG dla polskich firm). Te same pytania zasilają dane strukturalne FAQPage, więc odpowiedzi mogą wyświetlić się bezpośrednio w Google.

Kolor marki jako jedna zmienna

Akcent siedzi w --ac i jest wstrzykiwany na <body> z pliku konfiguracyjnego. Zmiana koloru marki to jedna linia, nie przeszukiwanie arkusza stylów. Bez Tailwinda - przy stronie z jednym spójnym motywem tokeny CSS wystarczają, a nie trzeba utrzymywać konfiguracji ani czyścić nieużywanych klas.

Formularz bez zewnętrznego serwisu

Front jest statyczny, wysyłką zajmuje się contact.php na PHP-FPM z PHPMailerem i SMTP. Zewnętrzny serwis formularzy oznaczałby, że dane kontaktowe klientów przechodzą przez trzecią firmę - przy doradztwie, gdzie w zapytaniu bywa nazwa firmy i skala działalności, to niepotrzebne ryzyko i niepotrzebny wpis w polityce prywatności. To ten sam kompromis, który opisujemy przy formularzu kontaktowym generującym leady - mniej pośredników, więcej kontroli nad tym, gdzie ląduje zapytanie.

Co z tego wyszło

Pomiar strony głównej z 13 września 2026, headless Chrome 1366x900, bez cache: 15 ms do pierwszego bajtu, 0,35 s do pierwszego renderowania treści, 0,44 s do zdarzenia load. Jedenaście żądań: dokument, trzy arkusze stylów, jeden plik JavaScript, dwa obrazy i cztery pliki fontów - 249 kB transferu, najlżej z naszych ostatnich realizacji.

Uczciwa uwaga do tych liczb: to jeden pomiar syntetyczny, nie dane od realnych użytkowników, i nie mamy wyniku poprzedniej wersji strony do porównania - więc nie piszemy o poprawie o iks procent, bo tego nie zmierzyliśmy. To, co widać, to stan zastanego katalogu dwudziestu czterech usług, nie efekt zmiany. Rezerwa, gdyby była potrzebna, jest w czterech plikach fontów - dokładnie to, co opisujemy w checkliście Core Web Vitals.

Technicznie

Astro 4 w trybie statycznym, TypeScript, tokeny w global.css zamiast Tailwinda. Blog na Content Collections. Deploy z main przez GitHub Actions na VPS: nginx serwuje statyk, PHP-FPM obsługuje jeden endpoint formularza.