La Raffinerie
Два заведения, один бренд: сайт должен был работать на оба, не размывая ни одно из них.
- Год
- 2026
- Разработка
- 4 недели
- Стек
- React · Vite · Tailwind · Framer Motion · Vercel
- Дизайн
- Разработка
- Локальное SEO для нескольких адресов
- Тексты
Демоверсия, размещённая Kayzen Web на адресе Vercel; окончательный домен принадлежит клиенту.
- заведения, один домен
- 2
- производительность в Lighthouse
- 95/100
- доступность в Lighthouse
- 100/100
Какую задачу нужно было решить.
Контекст
La Raffinerie — бар крафтового пива, тапас и коктейлей с двумя адресами в Лионе: Сакс (Saxe, 3-й округ) и Вез (Vaise, 9-й округ).
Ограничение
Два заведения — классическая проблема локального SEO: либо два сайта и раздробленный авторитет домена, либо один сайт — и невидимость по запросам квартала. Добавим к этому постоянно меняющуюся пивную карту и публику, которая не всегда знает, что выбрать.
Решение
Один домен и отдельная страница для каждого заведения, у каждой — полная карточка и собственная разметка. Пивная карта превращается в гид по дегустации: у каждого пива указаны стиль, горечь, крепость и рекомендуемые тапас. Мы не перечисляем — мы советуем.
Показатели на момент сдачи.
Оценки Lighthouse для сайта в рабочей среде. Мы публикуем их как есть: если какая-то оценка низкая, её причина и план исправления описаны ниже, а не замалчиваются.
Каждое решение — и его причина.
Гид вместо списка
Фильтры по стилю и горечи, рекомендуемые тапас к каждому пиву. Гость, который колеблется между сорока позициями, закажет то же, что обычно, — или не закажет ничего.
У каждого адреса свой характер
Фотографии, атмосфера и часы работы — свои для Сакс и Вез, на общей графической основе. Две страницы-близнеца и посетитель, и Google восприняли бы как заполнение пустоты.
Движение на службе фактуры
Анимации появления подчёркивают фактуру — пену, медь, сланец. Они полностью исчезают, если пользователь запросил уменьшение движения.
Палитра проекта
Сланец
#22262B
Основной фон
Медь
#C0763C
Действие, акценты
Пена
#EFE6D4
Текст, светлые поверхности
Хмель
#6C7A3F
Метки стилей
Типографическая система
Заголовки
Bebas Neue
Основной текст
Inter 400
Узкие прописные для заголовков — стиль крафтовой пивоварни, — уравновешенные очень читаемым гротеском в карточках дегустации.
Что внутри.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
Карта в данных, а не в HTML
Пиво и тапас хранятся в типизированном файле данных. Добавление позиции не требует трогать разметку и не рискует сломать вёрстку.
Дозированные анимации
Framer Motion загружается только страницами, где действительно есть анимация. Информационные страницы (как добраться, часы работы) не скачивают из него ни строчки.
Как сайт становится находимым.
Две отдельные карточки LocalBusiness
У каждого заведения собственный узел с адресом, географическими координатами и часами работы. Один блок на два адреса не позволил бы Google правильно связать обе карточки.
Запросы по кварталу
«Пивной бар Сакс», «бар Вез Лион 9» вместо «бар Лион». Страница квартала выигрывает по фразам, на которые страница бренда нацелиться не может.
Индексируемый контент о дегустации
Карточки сортов отвечают на реальные запросы («горькое IPA Лион», «тапас к янтарному пиву») и приводят ознакомительный трафик, который один лишь адрес не собирает.
Удобно для всех.
С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.
100/100 с интерактивными фильтрами
Фильтры — нативные кнопки с объявляемым нажатым состоянием, а число результатов сообщается в live-области после каждого изменения.
Что было сдано.
- Главная
- Сакс (Лион, 3-й округ) — полная карточка
- Вез (Лион, 9-й округ) — полная карточка
- Гид по пиву
- Тапас и коктейли
- Контакты
Ход проекта.
Стратегия для нескольких адресов
Выбор «один домен — две страницы», разметка для каждого заведения.
Контент о дегустации
Стили, горечь, сочетания: карта становится гидом.
Дизайн
Общая основа, свой характер у каждого адреса.
Разработка
Типизированные данные, анимации, загружаемые по требованию.
О чём нас часто спрашивают.
Другие проекты
Соответствие GDPR & SaaSKonsent by Kayzen
Разработчик баннеров, который сам же их проверяет, — судья в собственном деле: независимость и была продуктом.
Наступательная кибербезопасность & SaaSSentinel by Kayzen
Продавать продукт безопасности инженерам: каждое утверждение должно было быть доказуемым.
Данные & МетеосервисMétéo Climat France
358 индексируемых страниц, анимированная карта на 72 срока — и ни одной строчки фреймворка.
Тот же уровень требований — для вашего сайта.
Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.