SV Avant-Garde – koncepcyjna strona salonu fryzjerskiego z Sanity CMS

SV Avant-Garde Salon to projekt koncepcyjny strony dla salonu fryzjerskiego w Warszawie. Nazwa marki, adres, zespół, oferta i pozostałe dane demonstracyjne tworzą scenariusz portfolio — projekt nie przedstawia płatnej współpracy z działającym salonem ani rzeczywistych wyników rezerwacji.

Strona pokazuje, jak połączyć wyrazisty, edytorialowy kierunek wizualny z praktycznymi potrzebami salonu: prezentacją usług i zespołu, czytelnym cennikiem, portfolio, kontaktem oraz prostym przejściem do zewnętrznego systemu rezerwacji.

Zakres projektu

• responsywna strona typu one-page oraz osobne podstrony prawne,
• edycja kluczowych treści w Sanity Studio,
• linki do rezerwacji online, telefonu, e-maila, mapy i mediów społecznościowych,
• formularz kontaktowy chroniony przez Cloudflare Turnstile,
• lokalne SEO, dane strukturalne i pliki dla wyszukiwarek,
• optymalizacja obrazów, cache treści i ograniczenie kodu uruchamianego w przeglądarce,
• dostępna nawigacja, semantyczny HTML i obsługa ograniczenia animacji.

Status projektu: realizacja koncepcyjna / portfolio. Wyniki wydajności dotyczą działającej wersji demonstracyjnej; nie są wynikami biznesowymi salonu.

Założenia i kierunek

Zakres odpowiada stronie z CMS-em z planu Biznes, ale sama realizacja powstała jako projekt portfolio. Punktem wyjścia było uporządkowanie informacji, których klient salonu potrzebuje przed umówieniem wizyty: zakresu usług, orientacyjnych cen, informacji o zespole, przykładów pracy oraz danych kontaktowych.

Ścieżka użytkownika została skrócona do prostego układu:

Hero → usługi → cennik → zespół → portfolio → kontakt lub rezerwacja

Przyciski rezerwacji są dostępne w nagłówku, hero, cenniku, sekcji kontaktowej i dolnym pasku mobilnym. Strona nie obsługuje kalendarza ani płatności — przekierowuje do adresu systemu rezerwacyjnego ustawionego w CMS-ie.

Design — edytorialny salon premium

Projekt wykorzystuje kontrast ciepłej kości słoniowej, grafitowej czerni i stonowanego beżu. Zamiast klasycznego układu „dark & gold” powstała kompozycja inspirowana magazynem modowym: duża typografia, asymetryczne kadry, numerowane elementy i wyraźne podziały sekcji.

Typografia:

• Cormorant Garamond — nagłówki i elementy o charakterze edytorialnym,
• Manrope — treść, nawigacja, etykiety i interfejs.

Oba kroje są ładowane przez next/font. Projekt nie ma przełącznika dark mode; ciemne i jasne sekcje są stałą częścią identyfikacji wizualnej.

Animacje wejścia zrealizowałem w CSS z użyciem animation-timeline: view(). Dla przeglądarek bez obsługi tej funkcji treść pozostaje widoczna, a ustawienie prefers-reduced-motion wyłącza ruch i płynne przewijanie.

Sanity CMS i model treści

Panel Sanity Studio działa pod adresem /studio. Dane są pobierane zapytaniami GROQ, a strona ma bezpieczne treści awaryjne, dzięki którym pozostaje kompletna także wtedy, gdy CMS chwilowo nie odpowiada lub kolekcja jest pusta.

Treści z Sanity są cache’owane i rewalidowane co 300 sekund. Obrazy z CMS-u przechodzą przez Sanity CDN, gdzie ustawiane są ich wymiary, jakość, kadrowanie i automatyczny format.

Implementacja

Rzeczywisty stack projektu:

• Next.js 16.3.3 z App Routerem — renderowanie po stronie serwera, Metadata API, Route Handler i rewalidacja danych,
• React 19.2.3 — większość interfejsu jako Server Components; kod kliencki tylko dla menu i formularza,
• TypeScript 5 — typy dokumentów Sanity i modeli widoku,
• Sanity 6 + next-sanity — Studio, schematy, GROQ i obrazy z CDN,
• własny CSS — responsywny layout, stany interakcji i animacje bez frameworka CSS oraz biblioteki animacji,
• Zod 4 — walidacja danych formularza po stronie serwera,
• Cloudflare Turnstile + StaticForms — weryfikacja użytkownika i dostarczenie wiadomości,
• Vercel — hosting działającej wersji demonstracyjnej.

Projekt nie używa Tailwind CSS, Framer Motion, Lenis, Embla Carousel, React Hook Form, Lucide, Google Maps API ani next-themes. Galeria jest responsywną siatką, mapa otwiera się jako zewnętrzny link, a rezerwacja jest integracją linkową z serwisem ustawionym w CMS-ie.

Najważniejsze decyzje techniczne

• zdjęcie hero ma fetchPriority="high", dopasowane sizes i jakość 80,
• pozostałe obrazy korzystają z next/image, responsywnych rozmiarów i automatycznego AVIF/WebP,
• formularz jest dołączany dynamicznie dopiero w pobliżu sekcji kontaktowej,
• endpoint formularza ogranicza rozmiar żądania, sprawdza typ treści, waliduje pola i stosuje prosty limit pięciu prób na godzinę dla adresu IP,
• honeypot i Turnstile ograniczają automatyczny spam,
• Content Security Policy, HSTS, nosniff, SAMEORIGIN, Referrer Policy i Permissions Policy są ustawiane dla całej strony,
• zewnętrzne adresy URL oraz numery telefonu są normalizowane przed użyciem,
• awaria Sanity nie blokuje renderowania — komponenty korzystają z lokalnych tekstów i zdjęć zastępczych.

Funkcje i sekcje strony

Poza stroną główną wdrożenie zawiera politykę prywatności, regulamin, stronę błędu 404, manifest aplikacji, faviconę oraz osobne layouty dla części publicznej i Studio.

SEO i dostępność

• Metadata API ustawia tytuł, opis, canonical, Open Graph i dane dla X/Twitter,
• JSON-LD opisuje salon jako HairSalon, witrynę jako WebSite, a przy dostępnych danych także ofertę, godziny, adres, profile społecznościowe i akcję rezerwacji,
• robots.ts i sitemap.ts generują informacje dla robotów oraz mapę strony,
• język dokumentu ustawiono na polski, a fonty obejmują znaki latin-ext,
• semantyczne sekcje, nagłówki, listy opisowe, teksty alternatywne i etykiety ARIA porządkują strukturę strony,
• link „Przejdź do treści” pomaga użytkownikom klawiatury ominąć nawigację,
• mobilne menu działa jako modal: przenosi fokus, zamyka się klawiszem Escape i utrzymuje fokus wewnątrz,
• formularz przekazuje komunikaty sukcesu i błędów przez aria-live.

Zweryfikowane wyniki wersji demonstracyjnej

Raport PageSpeed Insights wykonany 27 sierpnia 2026 dla https://salonfryzjerski.vercel.app/ pokazał:

W raporcie nie było jeszcze wystarczających danych terenowych od rzeczywistych użytkowników. Dlatego case study podaje wyłącznie wyniki testu laboratoryjnego i nie deklaruje czasu ładowania ani Core Web Vitals, których nie potwierdzają materiały projektu.

Podsumowanie

SV Avant-Garde pokazuje kompletny wzorzec strony dla salonu: od elastycznego CMS-u i responsywnego interfejsu po formularz z ochroną antyspamową, dane strukturalne i dobre wyniki techniczne. Granice projektu są jasno określone — to demonstracja możliwości, bez fikcyjnych opinii, pozycji w Google, liczby rezerwacji lub wzrostu sprzedaży.

---

Prowadzisz salon lub markę beauty? Porozmawiajmy o stronie dopasowanej do Twojej oferty, treści i sposobu przyjmowania rezerwacji.