01 — Кейс · Сайты

Сайт продакшн-студии Vespera для масштабирования блогеров и моделей

Мы разработали сайт для продакшн-студии Vespera — команды, которая масштабирует блогеров и моделей через системный продакшн и маркетинг. На сайте работают система отбора талантов, портфолио реализованных кейсов и интерактивные анимации, которые делают подачу студии живой и запоминающейся. Проект собрала команда полного цикла на Next.js и Payload CMS в контейнерах Docker за 2 месяца — от структуры разделов до продакшена и запуска живого сайта.

2 месяцаПерейти на сайт

Обновлено: 14 июля 2026 г.

Смотреть кейс

срок проекта: 2 месяца
функциональных модулей: 7
этапов разработки: 6
ключевых технологий: 3

Сайт продакшн-студии Vespera для масштабирования блогеров и моделей

02 — Контекст

Задача проекта

Исходная ситуация, ограничения и проблемы, которые должна была решить новая система.

Продакшн-студия работает на стыке двух аудиторий: с одной стороны — блогеры и модели, которые ищут команду для системного роста, с другой — бренды и рекламодатели, которым важны понятные кейсы и результат. Сайт для такой студии обязан говорить с обеими группами сразу: показывать уровень работ, объяснять подход к масштабированию и давать удобный вход в диалог. Витрина «просто красивого лендинга» здесь не срабатывает — нужен инструмент, который отбирает подходящих людей и подтверждает экспертизу студии реальными проектами.

Отдельная задача — поток входящих заявок. К студии, которая обещает рост, приходит много желающих, но не все подходят под её формат и требования. Без структурированного отбора команда тонет в переписках и тратит время на нецелевые обращения. Сайту нужна была система отбора, которая собирает нужную информацию о кандидате уже на входе и передаёт студии готовые, отсортированные заявки, а не хаотичный поток сообщений из разных каналов.

Наконец, продакшн — это про визуальное впечатление. Сайт студии сам является демонстрацией того, как команда умеет работать с формой и вниманием. Статичная страница подорвала бы доверие: если студия обещает эффектный контент, её собственный ресурс должен быть таким же выразительным. Поэтому в основу легли интерактивные анимации и продуманная подача кейсов, а не шаблонная вёрстка.

Две разные аудитории

Сайту нужно одновременно убеждать блогеров и моделей присоединиться к студии и показывать брендам качество работ. Один общий текст под всех не закрывает ни один из этих сценариев и размывает позиционирование команды.

Хаотичный поток заявок

Обращения приходят из разных каналов без структуры: студия вручную отсеивает нецелевых кандидатов и теряет время на переписки. Нужен отбор, который собирает данные на входе и отдаёт готовые заявки.

Доверие через визуал

Продакшн-студия продаёт умение работать с картинкой и вниманием. Статичный шаблонный сайт противоречит этому обещанию, поэтому подача кейсов и анимации напрямую влияют на доверие к команде.

03 — Возможности

Что делает система

Ключевые сценарии и рабочие модули, собранные в единую систему.

Система отбора талантов

Ключевой раздел сайта: кандидат заполняет структурированную анкету, где студия собирает нужную информацию — направление, площадки, аудиторию, ожидания. Форма ведёт человека по шагам, а не просит написать всё в свободном сообщении. На выходе студия получает готовую отсортированную заявку вместо разрозненной переписки, а нецелевые обращения отсеиваются ещё на входе.

Портфолио кейсов

Витрина реализованных проектов студии: подборки работ с блогерами и моделями, оформленные как отдельные истории. Каждый кейс раскрывает подход команды к продакшену и масштабированию, показывает результат в наглядной форме. Портфолио закрывает главный вопрос доверия — оно подтверждает экспертизу студии не словами, а готовыми проектами, которые можно рассмотреть.

Интерактивные анимации

Движение и отклик заложены в подачу по всему сайту: элементы реагируют на скролл и наведение, переходы между блоками плавные, акценты появляются в нужный момент. Анимации не украшение ради украшения — они удерживают внимание, ведут пользователя по странице и делают ресурс студии таким же выразительным, как контент, который она производит для клиентов.

Презентация подхода студии

Смысловой блок, который объясняет, как студия масштабирует блогеров и моделей через системный продакшн и маркетинг. Здесь раскрывается методология работы, этапы сотрудничества и ценность для тех, кто хочет расти. Раздел переводит абстрактное обещание роста в понятную схему и готовит кандидата к следующему шагу — заполнению анкеты отбора.

Управление контентом на Payload

Административный контур на Payload CMS: студия сама редактирует кейсы, тексты разделов и данные заявок без обращения к разработчикам. Контент хранится структурированно, а сайт получает его через API. Такой headless-подход разделяет управление наполнением и отображение, поэтому команда обновляет портфолио и разделы в удобном интерфейсе, а фронтенд остаётся быстрым.

Адаптивная вёрстка

Аудитория продакшн-студии живёт в смартфонах: блогеры, модели и рекламодатели заходят на сайт с мобильных чаще, чем с десктопа. Мы собрали интерфейс так, чтобы портфолио, анимации и форма отбора одинаково хорошо работали на любом экране — от телефона до широкого монитора, — сохраняя выразительность подачи и удобство заполнения анкеты.

Обработка и хранение заявок

За формой отбора стоит серверная логика: заполненная анкета валидируется, сохраняется и становится доступной команде студии в структурированном виде. Данные каждого кандидата собраны в одном месте, их удобно просматривать и сортировать. Это превращает сайт из витрины в рабочий инструмент подбора, который экономит время на первичной обработке обращений.

04 — Архитектура

Технологический стек

Технологии выбраны под нагрузку, интеграции и дальнейшее развитие продукта.

Next.js

Основа сайта. Next.js даёт серверный рендеринг и статику там, где это важно для скорости и индексации, и при этом позволяет строить богатую интерактивность с анимациями. Быстрая первая отрисовка критична для сайта, который встречает блогеров и рекламодателей с мобильных, а гибкость фреймворка помогла собрать нестандартную подачу кейсов без компромиссов по производительности.

Payload CMS

Headless-система управления контентом. Payload держит кейсы портфолио, тексты разделов и данные заявок в структурированном виде и отдаёт их сайту через API. Мы выбрали его за гибкую модель данных, современный TypeScript-стек, органично сочетающийся с Next.js, и удобную админку: студия обновляет наполнение сама, без участия разработчиков.

Docker

Контейнеризация проекта. Docker упаковывает фронтенд Next.js, Payload CMS и их окружение в изолированные контейнеры, поэтому сайт одинаково ведёт себя при локальной разработке, в тестах и на продакшене. Это упрощает деплой, снимает проблему «у меня работает» и позволяет обновлять сайт предсказуемо, без ручной настройки сервера при каждом релизе.

Payload CMS
Next.js
Docker

05 — Процесс

Как шла разработка

Последовательность работ от исследования задачи до запуска и проверки результата.

Первым делом развели два сценария использования сайта: путь блогера или модели, которые хотят присоединиться к студии, и путь бренда, оценивающего работы. Под каждый определили нужный контент и целевое действие. Эта карта задала структуру разделов и логику навигации ещё до первой строки кода.

Проработали визуальный язык и сценарии анимаций одновременно: подача кейсов, реакции на скролл и наведение, ритм появления блоков. Для продакшн-студии движение — часть смысла, поэтому анимации закладывались в макет с самого начала, а не добавлялись поверх готовой вёрстки как украшение.

Спроектировали структуры данных в Payload CMS под кейсы портфолио, разделы и заявки отбора. Заложили поля так, чтобы студия могла наполнять и править контент самостоятельно, а фронтенд получал предсказуемые данные через API. Аккуратная модель на этом шаге избавила от переделок при росте числа кейсов.

Собрали фронтенд на Next.js: адаптивные разделы, портфолио, интерактивные анимации и многошаговую форму отбора. Компоненты подключались к данным Payload через API, поэтому вёрстка сразу работала на живом контенте. Особое внимание уделили плавности движения и скорости загрузки на мобильных устройствах.

Довели систему отбора до рабочего состояния: валидация анкеты, сохранение заявок, их структурированное представление для команды. Проверили путь кандидата от первого шага формы до подтверждения отправки и убедились, что студия получает данные в удобном для разбора виде, а не разрозненные сообщения.

Упаковали фронтенд и CMS в Docker-контейнеры и настроили предсказуемый деплой. Прогнали сайт на разных устройствах, выверили анимации и скорость, проверили сохранность заявок. Через 2 месяца после старта сайт Vespera вышел в прод и доступен по адресу vesperaprod.com.

06 — Итог

Результаты

Что создано в рамках проекта: рабочий контур, реализованные возможности и подтверждённые факты.

У продакшн-студии Vespera появился сайт, который работает на две аудитории сразу: блогеры и модели проходят через систему отбора и оставляют структурированные заявки, а бренды видят экспертизу студии в портфолио реализованных кейсов. Интерактивные анимации и продуманная подача делают ресурс таким же выразительным, как контент, который студия производит для клиентов, — сайт сам становится аргументом в пользу команды. Проект собран за 2 месяца и работает по адресу vesperaprod.com.

Технически проект выстроен на связке Next.js и Payload CMS в Docker-контейнерах. Headless-архитектура отделяет управление контентом от отображения, поэтому студия сама редактирует кейсы и разделы, а фронтенд остаётся быстрым и хорошо индексируемым. Контейнеризация делает деплой предсказуемым, а структурированная модель данных легко масштабируется под новые кейсы и разделы — сайт готов расти вместе со студией без переработки основы.

2 месяца

от старта проекта до запуска сайта

Next.js + Payload

фронтенд и headless CMS в одной связке

Docker

предсказуемый деплой в контейнерах

3 опоры

отбор, портфолио и анимации

FAQ

Вопросы о проекте

Эта связка закрывает обе стороны задачи. Next.js даёт быструю отрисовку и хорошую индексацию, но при этом позволяет реализовать богатую интерактивность и анимации подачи. Payload CMS хранит кейсы, разделы и заявки в структурированном виде и отдаёт их сайту через API. Оба построены на TypeScript, поэтому фронтенд и CMS работают как единое целое, а студия редактирует контент сама через удобную админку.

Это многошаговая анкета, которая ведёт кандидата по вопросам и собирает нужную студии информацию — направление, площадки, аудиторию, ожидания. Данные валидируются и сохраняются в структурированном виде, доступном команде для просмотра и сортировки. Такой подход отсеивает нецелевые обращения ещё на входе и отдаёт студии готовые заявки вместо разрозненной переписки из разных каналов.

Анимации заложены во фронтенд на Next.js и работают на реакции интерфейса: элементы отвечают на скролл и наведение, блоки появляются в заданном ритме, переходы остаются плавными. Мы проектировали движение вместе с макетом, а не добавляли поверх готовой вёрстки, поэтому оно ведёт пользователя по странице и не мешает скорости загрузки — это особенно важно на мобильных устройствах, откуда заходит основная аудитория.

Да, для этого и выбрана headless-архитектура на Payload CMS. Кейсы, тексты разделов и данные заявок хранятся в удобной админке, а сайт получает их через API. Студия добавляет новый кейс или правит текст самостоятельно, без обращения к разработчикам, и изменения отображаются на сайте. Управление контентом отделено от отображения, поэтому наполнение растёт, а фронтенд остаётся быстрым.

Мы развели два сценария в структуре сайта. Блогеры и модели ведутся к системе отбора: презентация подхода студии объясняет ценность и подводит к заполнению анкеты. Бренды и рекламодатели получают портфолио кейсов, которое подтверждает экспертизу реальными проектами. Навигация и целевые действия для каждой аудитории продуманы отдельно, поэтому одна страница не размывает позиционирование, а закрывает оба запроса.

Docker упаковывает фронтенд Next.js, Payload CMS и их окружение в изолированные контейнеры, поэтому сайт ведёт себя одинаково при локальной разработке, в тестах и на продакшене. Это снимает проблему различий сред, делает деплой предсказуемым и позволяет обновлять сайт без ручной настройки сервера на каждый релиз. Для проекта, который студия будет развивать со временем, это надёжная и удобная в сопровождении основа.

Да, архитектура рассчитана на рост. Структурированная модель данных в Payload легко расширяется под новые типы кейсов, разделы и поля анкеты отбора. Разделение контента и отображения через API позволяет добавлять страницы и сценарии, не переписывая основу, а контейнеризация делает выкладку обновлений безопасной и повторяемой. Сайт спроектирован так, чтобы масштабироваться вместе со студией, а не упираться в потолок первой версии.