KAYA Thai Massage — Сайт для KAYA Thai Massage — спа-салон в Киеве
Клиент пришёл к нам с готовым дизайном от <a href="https://www.behance.net/stan_shap" target="_blank">Станислава</a>. Мы сотрудничали более чем с 20 дизайнерами, и его подход — однозначно в топе. Он не просто рисует красивую картинку, а реально продумывает адаптив под все экраны и логику каждого элемента. Нашей задачей было аккуратно перенести этот дизайн в код. Сделали точную вёрстку (pixel-perfect), обеспечили быструю загрузку, написали чистый код и заложили базу для мультиязычного SEO. Благодарим KAYA за доверие.
Задача
Исходные данные и задача: • Готовый дизайн высокого уровня — каждый элемент проработан, responsive поведение прописано для всех breakpoints • Нужна pixel-perfect реализация без компромиссов — клиент и дизайнер ждут точное соответствие макету • Мультиязычный сайт (uk + en + ru) с полноценным SEO для локального бизнеса в Киеве • Сайт должен быть быстрым на мобильных — большинство гостей записываются с телефона • Сложная интерактивность: smooth scroll, галереи, парные анимации, видео • Всё должно работать стабильно и в Chrome, и в Safari (где Lenis smooth scroll глючит)
Решение
⚡ Скорость (под LCP) • Critical CSS inline, app.min.css preload с fetchpriority="high" • Preload LCP-изображения (hero-poster) с responsive imagesrcset (mobile/desktop) • Preload критичных шрифтов: Manrope SemiBold/Regular + EB Garamond Italic • WebP как основной формат + JPG fallback через <picture> • Lazy-load Fancybox — подключается только при первом клике на data-fancybox • DNS-prefetch + preconnect к Google (карта) и Instagram 🎨 Pixel-perfect вёрстка • Семантический HTML5 без лишних div • Модульный CSS под дизайн-систему Станислава • Анимации на GSAP 3 + ScrollTrigger — движение соответствует замыслу дизайнера • Lenis smooth scroll с условным отключением в Safari (там нестабильно) • Swiper для слайдеров услуг и отзывов • Собственная логика взаимодействия с iframe карты (Lenis останавливается, когда курсор над картой) 🔍 SEO + AI-доступность • Schema.org HealthAndBeautyBusiness с полными данными (адрес, телефон, openingHours, geo) • Hreflang uk / en / ru, canonical на каждой языковой версии • Open Graph + Twitter Cards с правильным размером (1200×630) • llms.txt — машиночитаемое описание бизнеса для AI-поисковиков (ChatGPT, Perplexity, Gemini) • robots.txt + sitemap.xml ♿ Доступность • Семантические теги, ARIA-метки, skip-навигация • Корректная иерархия заголовков h1 → h2 → h3 • format-detection="telephone=no" — без авто-преобразований телефонов 🛡️ Безопасность • .well-known/security.txt • Чистые URL, без расширений
Результат
Результат — рабочий мультиязычный сайт топ уровня. • Pixel-perfect соответствие макетам Станислава • 3 языка (uk + en + ru) с полноценным hreflang • Schema.org HealthAndBeautyBusiness — Google понимает, что это спа-салон в Киеве • llms.txt — ChatGPT, Perplexity и Gemini могут рекомендовать KAYA в своих ответах • GSAP-анимации + Lenis smooth scroll с Safari fallback Полный цикл от кода до продакшна: • Консультировали клиента при выборе и покупке хостинга и домена • Сами провели публикацию и настройку продакшн-сервера • Реальные Lighthouse-метрики добавим после публичного запуска клиентом
