Wyzwanie klienta

Salon Glamour to ekskluzywny salon fryzjerski w sercu Warszawy (ul. Piękna 15) – 6 stylistów z certyfikatami, ponad 500 opinii 4.9/5 na Booksy i usługi premium: balayage, Olaplex, keratynowe prostowanie, stylizacje ślubne.

Mimo doskonałej opinii na Booksy, klientka zwróciła się do nas z konkretnym problemem:

„Mam pełny grafik z polecenia, ale klientki premium – te, które wydają 400–800 zł wizyta i wracają co 6 tygodni – najpierw sprawdzają stronę. Jak znajdują cokolwiek przeciętnego, dzwonią do salonu przy Wilczej. Chcę stronę, która MÓWI: to jest premium."

Główne bolączki

Brak strony WWW — jedyną obecnością online był profil Booksy i Facebook
Utracona klientela high-end — klientki wydające 600+ zł za wizytę oczekują strony na poziomie marki, nie linku do portalu rezerwacyjnego
Brak widoczności w Google — zero pozycji na frazy lokalne; ruch tylko z poleceń i Booksy
Brak dark mode — branża kosmetyczna i beauty coraz częściej wybiera ciemne, eleganckie palety
Brak kontroli nad treścią — właścicielka chciała samodzielnie aktualizować cennik, dodawać zdjęcia do galerii i edytować opisy usług bez angażowania programisty

Nasze podejście

Projekt realizowaliśmy w ramach planu Biznes (od 6 000 PLN) — z headless CMS, animacjami, dark mode i pełnym SEO on-page. Dla marki premium nie było miejsca na kompromisy.

1. Strategia i research (Dni 1–4)

Analiza 10 salonów fryzjerskich premium w Warszawie — ich stron, Booksy i Google Maps
Badanie fraz kluczowych: „fryzjer Warszawa", „fryzjer śródmieście", „balayage Warszawa", „koloryzacja Warszawa", „Olaplex Warszawa"
Kluczowy insight: klientki decydują o wyborze salonu w oparciu o zdjęcia, atmosferę strony i opinie — nie tabelę z cenami
Mapowanie ścieżki: Google → Hero → Usługi → Galeria → Zespół → Cennik → Rezerwacja (Booksy)
Persony: (1) klientka premium 30–45 lat, szukająca „swojego" stylisty, (2) panna młoda planująca ślub, (3) klientka regularnie koloryzująca co 6 tygodni

2. Design — luksus, który konwertuje (Dni 5–9)

Paleta dark & gold była oczywistym wyborem: czerń jako dominanta (#0a0a0a) + złoto jako accent (#D4AF37) — estetyka premium, elegancja i profesjonalizm w jednym.

Typografia:

Playfair Display — dla nagłówków; klasyczna antykwa, kojarząca się z luksusem i modą
Inter — dla treści; idealna czytelność na każdym rozmiarze ekranu

Kluczowe decyzje designu:

Pełnoekranowy hero z fotografią salonu w tle, ciemna nakładka gradient from-black/80 — natychmiastowe poczucie luksusu
Złota linia akcentująca (2px) jako separator między kolekcją tekstów — detal, który widać na każdym ekranie
Karta stylisty z imieniem, rolą i specjalizacją — ludzka twarz buduje zaufanie lepiej niż jakikolwiek opis
dark mode po stronie next-themes — bez FOUC, stan persystowany, płynne przejście

3. Architektura CMS — Sanity Studio (Dni 10–15)

Najważniejsza decyzja techniczna: headless CMS Sanity zamiast WordPressa.

Dlaczego Sanity?

Właścicielka salonu zmienia cennik cztery razy w roku, aktualizuje galerię po każdej sesji zdjęciowej i dodaje nowe usługi. Bez CMS każda zmiana = faktura za programistę. Sanity to eliminuje.

Panel admina pod /studio wbudowany bezpośrednio w stronę — zero osobnego hostingu, zero aktualizacji
Edycja w czasie rzeczywistym: cennik, galeria, opisy usług, dane zespołu, SEO — właścicielka robi to samodzielnie w 5 minut
Content revalidation co 60 sekund (export const revalidate = 60) — zmiany widoczne niemal natychmiast
GROQ zapytania dla każdego content type: TEAM_QUERY, SERVICES_QUERY, PRICING_QUERY, SETTINGS_QUERY
Obrazy przez Sanity CDN z @sanity/image-url — automatyczna optymalizacja rozmiaru i formatu

Schemat danych:

| Content Type | Pola                                                       |
| ------------ | ---------------------------------------------------------- |
| settings     | SEO, hero, about (stats, images), galeria, dane kontaktowe |
| team         | imię, rola, doświadczenie, specjalizacja, zdjęcie          |
| service      | nazwa, opis, cena, ikona                                   |
| pricing      | kategoria, pozycje (nazwa, cena, czas)                     |

4. Rozwój (Dni 16–25)

Stack technologiczny:

Next.js 16 (App Router) — SSR + ISR (revalidate: 60); dane z Sanity odświeżane co minutę; natywna optymalizacja obrazów AVIF/WebP
React 19 — Server Components dla wszystkich sekcji powyżej fold; Client Components tylko tam, gdzie potrzebne interakcje
Tailwind CSS 4 — utility-first; brak zbędnego CSS; pełne wsparcie dark mode przez class strategy
TypeScript 5 — pełne typowanie; props komponentów opisane interfejsami
Framer Motion 12 — animacje wejścia każdej sekcji (initial, whileInView, viewport: { once: true }); hover na kartach usług i stylicie; bez wpływu na LCP
Lenis 1.3 — smooth scroll CSS-level; zero skokowego przewijania na iOS i macOS; inicjalizacja lazy po First Contentful Paint
Embla Carousel — galeria zdjęć salonu; touch-friendly; bez autoplay (accessibility-first)
React Hook Form + Zod — formularz kontaktowy; walidacja po stronie klienta i serwera; czytelne komunikaty błędów
Lucide React — ikony nożyczek, zegara, telefonu, mapy — tree-shaking; zero zbędnych KB
@react-google-maps/api — mapa Google Warszawa; ładowana lazy po kliknięciu (zero iframe cost przy pierwszym renderze)
next-themes — dark mode bez FOUC; ThemeProvider na poziomie layoutu
Lenis + LazySmoothScroll — inicjalizacja smooth scroll tylko po hydration; brak efektu skakania na pierwszym renderie
Sanity Vision — plugin do GROQ debuggowania w środowisku deweloperskim
Vercel — edge hosting, automatyczne deploye, zero config SSL

Kluczowe decyzje techniczne:

priority na hero image + fetchPriority="high" → LCP < 0.8 s mimo pełnoekranowego tła
Lazy loading dla below-fold — BelowFoldSections importowany przez next/dynamic z ssr: false → mniejszy initial bundle
LazyFloatingButtons — przyciski CTA (Booksy, telefon) ładowane dynamicznie; nie blokują FCP
LazyCookieConsent — consent banner pojawia się dopiero po hydration; nie blokuje First Contentful Paint
AVIF + WebP — format obrazów konfigurowany w next.config.ts; 40–60% mniej KB vs JPEG
Cache-Control dla statycznych assetów: max-age=31536000, immutable — perfekcyjne CWV score
Security headers — HSTS, X-Content-Type-Options: nosniff, X-Frame-Options: SAMEORIGIN, CSP — stronę zabezpieczamy jak aplikację bankową
JSON-LD HairSalon + LocalBusiness — rich snippets w Google z adresem, telefonem, godzinami; wyróżnienie w SERP

5. Sekcje strony

| Sekcja    | Cel biznesowy                                                                            |
| --------- | -----------------------------------------------------------------------------------------|
| Hero      | Pierwsze 3 sekundy: ciemny luksus, złoto, dwa CTA (Booksy + telefon)                     |
| O nas     | Statystyki: X lat, Y klientów, Z certyfikatów; zdjęcia wnętrza i stylistów               |
| Usługi    | Karty z opisem i ikoną; Framer Motion hover; każda karta = mikro-landing dla usługi      |
| Galeria   | Karuzela Embla z realnych sesji; buduje aspirację i zaufanie wizualne                    |
| Zespół    | Karty stylistów z imieniem, rolą, doświadczeniem; klienci wybierają osobę, nie cennik    |
| Cennik    | Kategorie z kartami (strzyżenie, koloryzacja, stylizacje); eliminuje barierę cenową      |
| Kontakt   | Formularz + dane bezpośrednie; Google Maps click-to-load; przycisk Booksy omnipresent    |

6. SEO on-page (Dni 26–28)

Metadata API Next.js — tytuł szablonowy template: "%s | Salon Glamour Warszawa" z frazami kluczowymi lokalnymi
JSON-LD HairSalon + LocalBusiness — adres, telefon, godziny otwarcia, ocena agregowana
Open Graph 1200×630 — premium zdjęcie salonu z tekstem marki; CTR z social media i linków
14 fraz kluczowych — segmentacja long-tail: „balayage Warszawa", „Olaplex Warszawa", „fryzjer ślubny Warszawa"
Semantyczny HTML — h1→h3 bez skakania, ARIA labels, landmark roles, alt na każdym zdjęciu
Canonical URL — unikanie duplikacji treści
Robots.ts + Sitemap.ts — programowo generowane przez Next.js API przy każdym buildzie

Wyniki po 8 tygodniach

Porównanie: brak strony WWW vs nowa strona Netova:

| Metryka                                  | Przed     | Po     | Zmiana            |
| ---------------------------------------- | --------- | ------ | ----------------- |
| Lighthouse Performance                   | —         | 92     |                   |
| Lighthouse SEO                           | —         | 100    |                   |
| Lighthouse Accessibility                 | —         | 97     |                   |
| Czas ładowania (LCP)                     | —         | 0.8 s  |                   |
| Rezerwacje przez stronę / tydzień        | 0         | 43     | +43               |
| Rezerwacje łącznie (Booksy + strona)     | bazowe    | +68%   | wzrost całościowy |
| Pozycja „fryzjer Warszawa" w Google      | nieobecni | 5      | Top 5             |
| Pozycja „balayage Warszawa"              | nieobecni | 9      | Top 10            |
| Współczynnik odrzuceń                    | —         | 33%    | klasa premium     |
| Samodzielne aktualizacje CMS / miesiąc   | 0         | 12+    | właścicielka sama |

Co mówi klientka

„Pierwszego dnia po uruchomieniu dostałam trzy zapytania od klientek, które napisały, że ‹znalazły mnie w Google›. Wcześniej Google w ogóle mnie nie pokazywał. Ale najbardziej cieszę się, że mogę sama zmieniać cennik – przed sezonem letnim zaktualizowałam go w 10 minut, bez dzwonienia do nikogo."

— Właścicielka, Salon Glamour Warszawa

Podsumowanie

Salon Glamour to dowód, że strona internetowa to nie koszt — to narzędzie sprzedaży dla salonu usługowego. Połączenie Next.js, Sanity CMS, premium designu dark & gold i kompleksowego SEO przyniosło:

📅 +68% rezerwacji w ciągu 8 tygodni od launchu
🏆 Top 5 w Google na frazę „fryzjer Warszawa"
✂️ Pełna autonomia — właścicielka aktualizuje treść samodzielnie przez Sanity Studio
⚡ 0.8 s ładowania — szybciej niż 95% stron w branży kosmetycznej

Chcesz takich samych wyników dla swojego salonu lub firmy usługowej? Skontaktuj się z nami — bezpłatna wycena w 24h.

Salon Glamour – Strona salonu fryzjerskiego, która rezerwuje wizyty 24/7

Galeria