← Strony WWW

Dorota Gromala

Salon fryzjerski w Niepołomicach — strona, która wygląda jak wnętrze salonu.

Problem

Salon istnieje w cudzych aplikacjach. Booksy pokazuje wolne terminy, Instagram pokazuje zdjęcia, a poziom pracy i to, czym ten salon różni się od sąsiedniego, nie mieści się w żadnym z nich.

Rozwiązanie

Strona dwujęzyczna z animacją wejścia i sekcją usług, w której narzędzia fryzjerskie rozkładają się na części przy przewijaniu. Paleta nie jest wymyślona — szesnaście kolorów wyciągnięto ze zdjęć samego salonu, ze złotem i głęboką czernią na czele. Przycisk rezerwacji prowadzi do prawdziwego profilu Booksy.

Co robi

  • Dwa języki, treść przełączana bez przeładowania
  • Animacja wejścia z paskiem ładowania
  • Cztery narzędzia fryzjerskie rysowane wektorowo, rozkładające się przy przewijaniu
  • Sekcja usług: strzyżenie, koloryzacja wegańska, ombre, laminacja, trwała keratynowa
  • Portfolio z lightboxem i sekcją opinii
  • Przycisk rezerwacji prowadzący do prawdziwego profilu

Na czym zbudowane

  • Next.js 16 z Reactem 19; strona przychodzi wyrenderowana z serwera, więc treść jest w HTML-u, zanim ruszy JavaScript
  • Dwa języki przez next-intl, treść w plikach pl.json i en.json
  • Animacje w GSAP z ScrollTriggerem, sterowane pozycją przewijania
  • Narzędzia fryzjerskie rysowane jako SVG ze złotymi gradientami, cztery typy
  • Tailwind 4 na warstwę wizualną, TypeScript na całą resztę
  • Prototyp statyczny budowany skryptem do jednego pliku HTML z osadzonymi zasobami

Jak to wygląda

Co to zmieniło

  • W budowie: strona jeszcze nie żyje publicznie, więc żadnych liczb z ruchu ani rezerwacji tu nie ma
  • Salon istnieje dziś wyłącznie na cudzych platformach — Booksy pokazuje terminy, Instagram zdjęcia, a poziom pracy nie mieści się w żadnej z nich
  • Paleta nie jest wymyślona: szesnaście kolorów wyciągniętych ze zdjęć samego salonu

Stack

  • Next.js 16
  • React 19
  • next-intl
  • GSAP + ScrollTrigger
  • Tailwind 4

Historia

Animacja narzędzi jest rysowana jako wektor, nie odtwarzana z pliku wideo: cztery narzędzia, każde ze złotym gradientem, rozkładają się i składają w rytm przewijania. Pomysł przyszedł od samej klientki i był w briefie obok listy usług.