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

Обновлено:
Сайты2 месяцаПерейти на сайт

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

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Next.js

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

Payload CMS

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

Docker

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

Payload CMSNext.jsDocker

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

Разбор аудиторий

Готово

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

Дизайн и движение

Готово

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

Модель контента в Payload

Готово

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

Сборка интерфейса

Готово

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

Логика заявок

Готово

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

Контейнеры и запуск

Готово

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

Результаты

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

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

2 месяца

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

Next.js + Payload

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

Docker

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

3 опоры

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

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

Обсудим похожий проект?

Расскажите о задачах вашего бизнеса — предложим архитектуру и оценим сроки

Посмотреть сайт