Wayfarer Vet
Editorial single-page для незалежної ветпрактики — спокійна турбота, чотири старших лікарі, дванадцять тисяч прийнятих улюбленців, екстрені прийоми у день. Зроблено як самостійний бренд з власною типографічною парою і motion-мовою.
Проблема, яку ми прийшли вирішити.
Generic small-business медичний шаблон. Stock-фото generic-клінік. Бронювання на третьому кліку за стороннім віджетом. Чотири старших лікарі з серйозними спеціалізаціями — знеособлена 'команда'. Calm-room протокол, який і є реальним differentiator клініки, був невидимий тим, хто не приходив особисто.
Editorial-скрол відкривається реальною атмосферою клініки. У кожного лікаря — фото, імʼя і дипломи. Послуги розбиті на шість карток з прозорими stat-пілюлями. Pet-галерея показує реальні візити з цього тижня. Віджет бронювання стоїть точно там, де відвідувач уже переконався. Бренд читається так само, як відчувається клініка.
Контекст
Незалежна практика на чотирьох лікарів в Окленді сиділа на generic small-business шаблоні. Реальність клініки — тихі кабінети, сорокапʼятихвилинні консультації, calm-room протокол, що заспокоює тривожних собак за пʼять хвилин — ніяк не доносилася через цифровий досвід. Бренду потрібен був editorial-сайт, який читається так само, як відчувається клініка.
Підхід
Самостійна Next.js 16 сторінка на /demo/vet-clinic — повністю окрема brand-мова від портфельного сайту. Унікальна типографічна пара: display Cormorant Garamond (italic на акцентних словах для editorial-флерера) + body Plus Jakarta Sans. Hero відкривається колажем з трьох фото на parallax-скролі плюс floating 4.9★ бейдж і live-availability чіп. Сітка із шести послуг з primary-blue icon-чіпами і amber stat-пілюлями. Ряд із чотирьох лікарів з full-bleed портретами. Pet-галерея з masonry-плитками і hover scale-in. Sticky-nav, frosted контакт-картки у закриваючому CTA. Усі анімації спокійні й editorial — fade-up на скролі, hover lift, parallax — жодного хаосу.
Як цей проєкт робився насправді.
Кожен проєкт залишає паперовий слід. Коментарі в Figma, ТЗ у Notion, історія в GitHub, логи Vercel, треди в Telegram, перша тижнева аналітика. Цифри нижче — реальні, скріни доступні на запит під NDA.
◆ Скріни будь-якого артефакту — на запит. Конфіденційні деталі відредаговані.
Ключові можливості
- ◆Editorial-герой — три реальні фото з parallax-скролом, floating 4.9★ беджем, live availability chip
- ◆Унікальна типографічна пара — Cormorant Garamond italic на акцентних словах + Plus Jakarta Sans body
- ◆Сітка з шести послуг з primary-blue icon-чіпами та amber stat-пілюлями
- ◆Ряд із чотирьох лікарів з full-bleed портретами і ротуючими avatar-градієнтами
- ◆Pet-галерея з masonry-плитками, hover scale-in і editorial uppercase лейблами
- ◆Закриваючий CTA в primary-blue з frosted контакт-картками (телефон, години, адреса)
Результати
Відвантажений як live demo на /demo/vet-clinic у трьох локалях (англійська, російська, українська). Девʼять секцій editorial-скролу. Booking flow розрахований так, щоб вибір крісло-лікар-час уміщався менш ніж у 90 секунд. Самостійні brand-токени — нічого не витікає в портфельний сайт і назад.
Tech stack
What the client said.
Ми — це calm-кімнати, повільні консультації і екстрені прийоми у день уже девʼять років. Попередній сайт цього не показував. Новий — так. І ми можемо віддати URL новому пацієнту, знаючи, що сторінка договорить за нас до того, як вони зайдуть.