Проект сайта
Алдан: сайт продукта
Продуктовый сайт с интерактивным знакомством с прибором и управляемым контентом. Визуальная презентация соединена с CMS и серверной частью.
Задача
Что нужно
было решить
Показать внешний вид прибора и сделать его функции понятными без длинной инструкции
Моя работа
От идеи
до реализации
Frontend на Next.js и React, типизированные интерактивные блоки, настройка Payload CMS и модели контента, адаптивная версия и серверное окружение.
Возможности
Что есть в проекте
Основные сценарии и функции, которые можно увидеть в интерфейсе.
Интерактивный прибор
Точки на изображении и раскрывающиеся описания связывают функцию с конкретной деталью устройства.
Сравнение и применение
Блоки характеристик, сравнения и отраслевых сценариев помогают изучить продукт.
Медиа и документы
Видеоматериалы, галереи, комплект поставки и документы собраны в одном месте.
Управление контентом
Редактор меняет страницы и общие элементы через Payload Admin без правок компонентов.
Техническая основа
Стек и его роль
Технологии выбираются под данные, интерфейс и способ работы продукта.
- Next.js · React · TypeScript
- Публичный сайт, адаптивные блоки, интерактивные состояния и серверные страницы.
- Payload CMS
- Редактирование страниц, медиатеки, меню и подвала; черновики, версии и предпросмотр контента.
- PostgreSQL
- Хранение контента и данных CMS.
- Docker · Nginx
- Воспроизводимое окружение и публикация сайта на сервере.
Реализация
Как это
устроено
- 01
Крупное изображение прибора и точки на нём связывают описание с конкретной деталью
- 02
Функции собраны в раскрывающийся список: антенны, питание, управление и обновление
- 03
Фотография детали дополняет текст выбранной функции
- 04
Боковая навигация связывает разделы презентации
- 05
Страницы собираются из редактируемых CMS-блоков; медиатека и общие меню отделены от верстки
Результат
Что получилось
Работающий сайт продукта: презентация устройства, интерактивные функции, медиа, документы и самостоятельное редактирование контента через CMS.