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 новому пациенту, зная, что страница договорит за нас до того, как они зайдут.