Paola Nails

Paola Nails to studio stylizacji paznokci w Szczecinie — manicure hybrydowy i żelowy, przedłużanie, zdobienia. Strona ma dwie role. Pokazuje prace w najlepszym możliwym świetle i prowadzi do kontaktu telefonem, przez Messengera albo Instagram.

Salon nie prowadzi rezerwacji online, bo termin ustala się indywidualnie, w rozmowie. Strona nie udaje więc systemu rezerwacji — każde wezwanie do działania prowadzi do bezpośredniego kontaktu.

Zaprojektowałem logo i przeniosłem jego charakter na całą stronę. Głęboka czerń i metaliczne złoto pochodzą wprost ze znaku, a gradient przycisków odtwarza złotą wstęgę z napisem „Stylizacja paznokci”. Między ciemnymi sekcjami pojawiają się jasne, kremowe, a róż jest tylko akcentem — kolor mają wnosić paznokcie.

Nagłówki składa szeryfowy Fraunces ze złotą kursywą, tekst i interfejs — nowoczesny Manrope. Zdjęcia oprawiłem w łukowe ramki ze złotą linią, a motyw łuku wraca w całym serwisie.

Wokół logo i zdjęcia powoli pojawia się osiem złotych iskier (na telefonie pięć), każda w swoim cyklu od 7 do 11 sekund. Mniej więcej co osiem sekund przez główny przycisk przechodzi złoty błysk.

Kafelki galerii przybliżają się o 3% po najechaniu, a sekcje pojawiają się z przesunięciem 14 px i opóźnieniem 90 ms między elementami. Animowane są wyłącznie transformacje i przezroczystość, więc ruch nie obciąża przeglądarki. Przy włączonej opcji ograniczenia ruchu wszystkie efekty się wyłączają.

Galeria pokazuje 19 zdjęć w pięciu kategoriach — zdobienia, kolory, nude i róż, french, świąteczne. Filtry działają bez przeładowania strony, a powiększenie otwiera się w natywnym oknie dialogowym z licznikiem zdjęć.

Obrazy powstają w kilku szerokościach w AVIF, WebP i JPEG, z wymiarami, które zapobiegają przesunięciom układu. Import zdjęć usuwa dane EXIF i lokalizację GPS.

Każda usługa ma własną stronę z ceną, opisem i pytaniami. Zamiast formularza i kalendarza strona wyjaśnia trzy proste kroki — zadzwoń lub napisz, ustalcie termin, przyjdź do salonu.

Przyciski kontaktu są wszędzie tam, gdzie klientka może podjąć decyzję — w nagłówku, na pierwszym ekranie, przy usługach i na końcu każdej strony.

Na telefonie pierwszy ekran od razu pokazuje nagłówek i dwa przyciski — Zadzwoń i Messenger. Menu otwiera się jako pełnoekranowy, ciemny panel z dużymi szeryfowymi linkami.

Podczas przewijania na dole ekranu widać pasek szybkiego kontaktu, który chowa się przy otwartym menu, galerii i banerze zgód. Galeria przechodzi w dwie kolumny, a powiększenie obsługuje gesty przesunięcia.

Eleventy 3 generuje strony z danych — usługi, cennik, FAQ i galeria to pliki JSON, bez backendu i bazy danych. Bootstrap 5.3 wchodzi przez Sass tylko z potrzebnymi modułami, a cały JavaScript to jeden mały pakiet (około 5 KB po kompresji). Fonty są hostowane lokalnie.

Nagłówki CSP i HSTS, a GA4 z Consent Mode v2 nie ładuje niczego przed zgodą. Testy w CI sprawdzają HTML, linki, dane strukturalne i dostępność (Playwright + axe) w czterech szerokościach ekranu.

Każda usługa ma osobną stronę z ceną w tytule i opisie, a lokalizacja pojawia się w nagłówkach, tytułach i danych strukturalnych NailSalon.