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 • Modular 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-метрики додамо після публічного запуску клієнтом
