Obsidian: тёмный сайт на фотографиях для премиального барбершопа в Аликанте

Задача

Obsidian - премиальный барбершоп с собственной тату-студией в Аликанте. Его клиенты - местные жители и множество иностранцев и гостей города, поэтому сайту с самого начала были нужны испанский, английский и русский.

В этом бизнесе у сайта одна задача: чтобы посетитель захотел записаться и чтобы запись занимала одно касание. Барбершоп выбирают глазами, поэтому дизайн нужно было строить вокруг фотографий, а не текста.

Дизайн вокруг фотографий

У сайта только тёмная тема - чёрный с золотыми акцентами, в тон самому салону, чтобы страницу несли фотографии.

• Слайдер "до и после", рассчитанный и на касания, и на мышь, показывает настоящее преображение - что на самом деле меняет стрижка.
• В разделе команды - барберы со ссылками на их Instagram, а фотогалерея открывается на весь экран.
• У тату-студии отдельный раздел со стилями, стартовыми ценами и своей галереей тату-работ.
• Товары и подарочные сертификаты - линейка средств для ухода и подарки.

Понятные цены и запись в одно касание

У услуг три уровня - Normal, Premium и Luxury - с ценой каждого для стрижки и для стрижки с бородой. Посетитель видит, что входит в каждый уровень, ещё до выбора.

Каждая кнопка "Записаться" ведёт на страницу барбершопа в Booksy, где клиенты уже записываются и оставляют отзывы. WhatsApp и телефон всегда под рукой. Своих форм на сайте нет, поэтому он не собирает персональные данные.

Доверие встроено

Рейтинг и число отзывов в Google подтягиваются из Google Places API при каждой сборке сайта, так что цифра на странице следует за реальной без ручных правок.

Страницы с целью

Помимо главной, на сайте две посадочные страницы, каждая - под конкретный вопрос:

• Метод Obsidian объясняет, почему стрижка начинается с консультации и диагностики, в противовес подходу "всем одна и та же стрижка".
• Тату в отпуске обращается к тем, кто хочет сделать татуировку во время поездки в Испанию: англоговорящие мастера и бесплатная консультация в WhatsApp как первый шаг.

Скорость и поиск

• Главное изображение первого экрана отдаётся в размерах под каждый экран, загружается заранее и получает приоритет - это самый крупный элемент первого экрана.
• Критический CSS встроен в страницу, HTML сжат; шрифты загружаются отдельными файлами, а не встраиваются в таблицу стилей.
• Испанская главная - основной язык местного рынка - настроена под поиск барбершопа в Аликанте.
• Языковые версии связаны через hreflang, у каждой страницы есть канонический URL, а несуществующие адреса отдают настоящий 404.

Технологии

- Генератор: Astro (статическая сборка)
- Стили: Tailwind CSS 4 + daisyUI 5 + @yatoday/astro-ui
- Интерактив: Svelte 5, PhotoSwipe
- Запись: Booksy
- Рейтинг: Google Places API, при сборке
- CI/CD: GitLab CI → Cloudflare Pages

Результат

Быстрый статический сайт на трёх языках, который показывает барбершоп таким, каким он хочет выглядеть, - через его работы. Цены понятны, рейтинг всегда актуален, а каждая страница ведёт в Booksy или WhatsApp. Ни сервера, ни CMS, которые нужно поддерживать.