Собрали демо Rockinvest: лендинг, каталог портфелей, воронка инвестирования и кабинет под инвестора и бизнес, плюс обучение и страхование на Next.js, TypeScript, Tailwind и Radix. Формы и сценарии с валидацией; продукт читается единым от витрины до кабинета.
Ключевой результат
14 дней до демо MVP
5
Ключевых зон продукта (лендинг, каталог, карточка, инвестирование, кабинет)
12+
Маршрутов с осмысленным layout и навигацией
2
Ролей в личном кабинете
5
Секций лендинга под сценарий «понял — доверяю — пошёл дальше»
Контекст
Rockinvest — витрина и рабочий контур для связи инвесторов и предпринимателей: публичная часть объясняет ценность и доверие, каталог даёт сравнение предложений, карточка портфеля раскрывает параметры, а кабинет закрепляет роль пользователя. Мы выстроили навигацию и плотность данных так, чтобы сложная тема читалась спокойно: таблицы на широком экране, понятные CTA, мобильные приоритеты без ломки сценария.
Инвестиционный продукт держится на ясной воронке: от объяснения ценности до шага «купить портфель» без скачков интерфейса.
Платформа связывает две стороны: инвестора, который сравнивает портфели и проходит воронку вложения, и бизнес, которому нужна витрина предложения и управление своими портфелями. Публичный контур — лендинг с доверием и объяснением ценности; рабочий — каталог, детальная карточка, пошаговое инвестирование и кабинет с вкладками под роль. Разделы обучения и страхования поддерживают сценарий «понял риски — уверенно двигаюсь дальше» без скачков между разными продуктами.
Цель — кликабельное демо MVP: единый визуальный язык от первого экрана до шага инвестирования и кабинета, без «слепых» маршрутов. До плотной вёрстки зафиксировали потоки инвестора и бизнеса, карту экранов (лендинг, каталог, карточка портфеля, инвестирование, профиль, обучение, страхование, авторизация), точки входа в регистрацию и кабинет и состав данных для демонстрации заказчику и стейкхолдерам.
Главная выстраивает сценарий «понял — доверяю — перешёл в каталог»: крупная типографика, сетка и лёгкий фоновый шум не конкурируют с текстом. Блоки ценности, «как это работает», доверие и призыв к действию идут в одном ритме; на мобильном сохраняется тот же порядок смысла, меняется только плотность.
Страница каталога объединяет фильтр по категориям, поиск по названию и сфере и таблицу с ключевыми полями: география, страхование, ожидаемый доход, рейтинг. На широком экране таблица раскрывается целиком; на узком остаётся читаемый минимум и явный переход к карточке — без потери сценария «сравнил — открыл деталь».
Карточка компании собирает описание, параметры риска и доходности, визуализацию динамики и понятный маршрут к инвестированию. Метаданные страницы завязаны на данные портфеля — демо готово к показу как реалистичный продуктовый экран, а не статичный макет.
Пошаговый сценарий ведёт от выбора суммы и условий к подтверждению: состояние шага видно в степпере, ошибки формы ловятся на клиенте через схему валидации. Так заказчик и инвестор видят цельный путь «каталог → деталь → инвестиция» без разрыва интерфейса.
После входа пользователь попадает в кабинет с вкладками профиля, активов и обучения. Для инвестора раздел активов показывает «мои инвестиции» в том же визуальном коде, что и публичная часть — ощущение одного приложения, а не внешней админки.
Для роли бизнеса те же вкладки переключают контент: акцент на «мои портфели», создание и управление предложениями. Один каркас навигации и разный смысл разделов упрощает сопровождение и дальнейшее подключение бэкенда под каждую роль.
Раздел обучения задаёт контекст для осторожного инвестора; блок про страхование вклада связывает каталог с юридически и психологически важной темой без перегруза формой на первом экране. Оба маршрута доступны из шапки и из смысловых ссылок в каталоге.
На узкой ширине навигация уходит в выдвижное меню, вертикальный ритм и крупные зоны нажатия сохраняют сценарий лендинга и доступ к разделам «Инвестиции», «Обучение», «Страхование». Пользователь не переучивает продукт при смене устройства.
Клиент собран на Next.js (App Router), React 19 и TypeScript; стили — Tailwind CSS 4 и компонентная база на Radix UI. Формы и пошаговые сценарии — React Hook Form и Zod; графики — Recharts. Публичные страницы используют Metadata API для заголовков и описаний. Авторизация в демо реализована на клиенте с разделением ролей для показа кабинета; вынос платежей и постоянного хранения на сервер задуман следующим этапом после UI-MVP.
Три этапа, которые превратили задачу в работающий продукт.
Предпроектная аналитика
01Зафиксировали потоки инвестора и бизнеса, карту экранов: лендинг, каталог, деталь портфеля, инвестирование, кабинет с вкладками, обучение, страхование, точки входа в авторизацию. Определили, что в демо идёт как наполнение данными, а что как интерактивный прототип для согласований с заказчиком.
Дизайн и фронтенд
02Единая сетка, фоновый шум и типографика под длинные тексты и таблицы; компоненты на Radix; адаптив без смены порядка действий. Формы на React Hook Form и Zod; графики на Recharts. Публичные маршруты получили осмысленные title и description через Metadata API.
Сборка сценариев и передача
03Связали каталог → карточку → инвестирование; кабинет с вкладками и разным контентом по роли; подготовили демо-данные портфелей для презентаций. Зафиксировали платёжный бэкенд и постоянное хранение как следующий этап после UI-MVP.
Стек
Next.jsTypeScriptReactTailwind CSSRadix UIReact Hook FormZodRechartsНапишите на почту или в Telegram — кратко опишите задачу, сроки и контекст. Вернёмся с понятным следующим шагом: оценкой, структурой работ или предложением по запуску.