Schol-Bud

Kompletny produkt, nie szablon — od identyfikacji wizualnej po nagłówki bezpieczeństwa i zgody RODO. Trzynaście statycznych podstron w trzech warstwach decyzji zakupowej: marka, produkt, decyzja.

Zakres domknięty tak, żeby po oddaniu nie zostało nic „do dorobienia później”: strona działa, mierzy się, indeksuje i przyjmuje zapytania od pierwszego dnia.

1. 01Identyfikacja wizualna i design system — paleta, typografia, komponenty
2. 0213 statycznych podstron w trzech warstwach: marka → produkt → decyzja
3. 03Sześć kart produktowych z pełną specyfikacją (Uw, klasa RC, akustyka, gwarancja)
4. 04Trzy ścieżki konwersji — telefon, formularz wyceny, formularz kontaktowy
5. 05Katalog ośmiu producentów z filtrem kategorii i linkami do katalogów PDF
6. 06SEO techniczne i lokalne — JSON-LD, sitemap, robots, OG
7. 07Zgody cookies, GA4 z Consent Mode v2 i polityka prywatności
8. 08Audyt produkcyjny: Lighthouse mobile i desktop, kontrasty WCAG, cross-browser

Cała strona to statyczny HTML generowany w buildzie. Bez bazy danych, bez CMS-a, bez wtyczek — treść siedzi w siedmiu plikach TypeScript, każda zmiana to commit i automatyczny redeploy. Dwadzieścia jeden tras generuje się statycznie; dynamiczne są wyłącznie dwa endpointy formularzy i obrazek Open Graph.

Next.js 15 w App Routerze, React 19, TypeScript w trybie strict, Tailwind bez biblioteki komponentów. Jeden system ruchu na całą stronę: 200 ms na kolory, 300 ms ease-out na podkreślenia i uniesienie kart. Wejście hero animuje GSAP przez gsap.matchMedia, więc przy prefers-reduced-motion animacja nie startuje w ogóle.

Model okna w hero to glTF skompresowany DRACO — 7 kB geometrii renderowane przez React Three Fiber. Pętla renderowania zatrzymuje się, gdy sekcja wyjedzie z ekranu, więc karta nie mieli klatek w tle przez cały czas życia strony.

Siedemdziesiąt testów w dziewięciu suitach (Jest + Testing Library) pokrywa to, co realnie może się zepsuć: walidację formularza wyceny, filtr producentów, blokadę GA4 przed zgodą, nawigację i spójność danych treści. Na koniec audyt produkcyjny z powtórnym pomiarem po każdej poprawce.

Statyczny Next.js zamiast WordPressa: zero wtyczek do aktualizowania, brak panelu jako wektora ataku, hosting bez serwera i bazy danych, TTFB z CDN-u. Kod należy do klienta i da się go przenieść gdziekolwiek.

Serif Fraunces z osią optical-size zamiast korporacyjnego sansa — wielkie nagłówki są ostrzejsze, małe czytelniejsze. Scena 3D renderuje się dopiero od 1024 px: na telefonie kosztowała ~530 ms TBT, a warunkowy render sprawia, że chunk three.js w ogóle się nie pobiera.

Parametry techniczne na każdej karcie produktu — Uw, klasa antywłamaniowa, akustyka, gwarancja — to dokładnie te liczby, które klient wkleja do arkusza porównawczego. Formularz wyceny ma trzy pola, bo każde dodatkowe to spadek konwersji, a wymiary i tak trzeba zmierzyć na miejscu. Osobna podstrona dla każdej z sześciu kategorii: frazy „okna aluminiowe Żnin” mają słabszą konkurencję niż samo „okna”.

Pod spodem warstwa, której nie widać: honeypot i limit zapytań w formularzach, walidacja po stronie serwera, Content-Security-Policy z jawną listą źródeł, HSTS z preload. GA4 nie pobiera ani jednego skryptu przed zgodą — obok działa bezcookiowa analityka Vercela jako baseline.