Strona Blockout

Jednostronicowa strona dla Blockout, firmy z Koszalina od druku wielkoformatowego i oznakowania. Ma jedno zadanie: zbierać zapytania o wycenę. Każda sekcja kończy się przyciskiem, a formularz kontaktowy jest dostępny z każdego miejsca strony.

Kod na GitHubie Uruchom lokalnie

01 · Problem

Co trzeba było rozwiązać

Mała lokalna firma potrzebuje strony, którą da się znaleźć w Google, która szybko działa na telefonie i zamienia odwiedziny w zapytania, bez wymyślonych statystyk i opinii, których nie da się potwierdzić.

02 · Rozwiązanie

Jak to działa

React 19, TypeScript i Vite bez frameworka CSS: system stylów na tokenach w zwykłym CSS, cała treść w typowanych plikach, a tagi SEO i dane schema.org wpisywane do index.html przy buildzie. Nginx w Dockerze serwuje stronę z gzipem, cache'em i nagłówkami bezpieczeństwa.

03 · Funkcje

Co potrafi

Formularz z walidacją w Zod, ukrytym polem na boty i minimalnym czasem wypełnienia 3 s
Meta, Open Graph i schema.org LocalBusiness + FAQPage generowane przy buildzie
Menu mobilne i galeria z pułapką focusu, obsługa klawiatury, dostępne FAQ
Animacje tylko na transform i opacity, wyłączane przy prefers-reduced-motion
Zero błędów WCAG 2.1 AA w audycie axe-core na komputerze i telefonie

04 · Technologie

Zbudowane z

TypeScript
React
Vite
Zod
CSS
Docker
Nginx

Status: W trakcie
Kod: github.com/KacperBlok1/blockout-strona
Demo: Nie ma wersji online · uruchom lokalnie

05 · Wyzwania

Co było trudne

SEO bez renderowania na serwerze
Aplikacji w React działającej w przeglądarce nie widzą roboty, które nie uruchamiają JavaScriptu, więc tytuły, Open Graph i dane strukturalne wpisuje do index.html build Vite.
Formularz bez backendu
Dopóki nie jest ustawiony adres formularza, strona mówi o tym wprost i podaje telefon oraz e-mail, zamiast udawać, że wiadomość poszła.
Bez zmyślonych treści
Wcześniejsza wersja miała wymyślone liczby i opinie klientów. Usunąłem je, a kafelki realizacji są wyraźnie oznaczone jako poglądowe, dopóki nie będzie prawdziwych zdjęć.

06 · Zrzuty ekranu

Jak to wygląda

Strona główna Blockout z nagłówkiem i przyciskiem wyceny — Pierwszy ekran z główną akcjąOtwórz obraz w pełnym rozmiarze ↗

Sekcja z pięcioma krokami współpracy na ciemnym tle — Jak pracujemy: pięć kroków od pomysłu do montażuOtwórz obraz w pełnym rozmiarze ↗

Sekcja FAQ z rozwijanymi pytaniami — FAQ jako dostępny akordeonOtwórz obraz w pełnym rozmiarze ↗

Wypróbuj

Uruchom lokalnie

Nie ma jeszcze wersji online. Kod i README są na GitHubie, a te polecenia uruchamiają projekt z głównego katalogu repozytorium.

Repozytorium na GitHubie

terminal

$ npm install
$ npm run dev
# produkcja: docker compose up -d --build  (port 8080)