Конфиденциальная презентация
Неверный пароль
Для доступа введите пароль, предоставленный партнёром
Презентация Дизайн Техническая
Technical Specification

Техническая презентация

Детальная техническая документация для технических советников и партнёров

Ключевые метрики

Цифры проекта

95+

Lighthouse Performance

<1.5s

LCP загрузка

5

Языков (EN/RU/SR/AR/ZH)

39

Функциональных блоков

Технологии

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

Передний край 2026: Next.js 16, React 19, TypeScript 5 strict

Технология Версия Назначение Почему
Next.js 16.x Фреймворк App Router, Server Components, SSG/ISR
React 19.x UI-компоненты Concurrent features, Suspense
TypeScript 5.x strict Типобезопасность Zero any, compile-time safety
TailwindCSS 3.4.x Стилизация Utility-first, консистентность
Framer Motion latest Анимации Page transitions, scroll-reveal
GSAP latest Сложные анимации ScrollTrigger, parallax
next-intl latest i18n Полная поддержка RTL
Архитектура

Схема технологического стека

PRESENTATION LAYER React 19 + TypeScript 5 + TailwindCSS + Framer Motion / GSAP FRAMEWORK LAYER Next.js 16 (App Router, Server Components) SSG / ISR / Edge Runtime / Streaming INTEGRATION LAYER Bitrix24 API · Notion API · Claude API · Remotion Lambda INFRASTRUCTURE Vercel Edge Network · GitHub Actions · Sentry
Модули

6 модулей экосистемы

1. Имиджевый веб-портал

Q1

Структура сайта

  • / — Главная страница
  • /about — О компании
  • /projects — Каталог проектов
  • /projects/[slug] — Детальная страница
  • /calculator — Инвестиционный калькулятор
  • /blog — Блог и новости
  • /contact — Контакты + CRM-форма
  • /cabinet — Личный кабинет

Мультиязычность

  • 🇬🇧 English (en) — LTR
  • 🇷🇺 Русский (ru) — LTR
  • 🇷🇸 Српски (sr) — LTR
  • 🇸🇦 العربية (ar) — RTL
  • 🇨🇳 中文 (zh) — LTR

2. CRM Bitrix24

Q1

Воронка продаж

Новый лид → Контакт установлен → Показ/Встреча → Предложение → Переговоры → Бронь → Сделка закрыта

Автоматизации

  • • Авто-ответ при заполнении формы
  • • Назначение менеджера (round-robin)
  • • Напоминания при «зависании»
  • • Триггеры при смене этапа

3. AI-автоматизация

Q1

AI → PDF

Claude API генерирует персонализированный текст → форматирование в Word-шаблон → конвертация в PDF → автоотправка в WhatsApp

AI → Видео

Remotion (React → Video) + Lambda-рендер за 30-60 секунд. Персонализированное видео с именем клиента, цифрами ROI, контактами.

4. Notion CMS

Q2

Команда публикует контент без программистов. Блог, новости, мероприятия — ISR-обновление через webhook. Одна кнопка — статья на сайте.

5. Личный кабинет инвестора

Q3

Dashboard

Обзор портфеля, статусы проектов

Документы

Договоры, акты, отчёты

Выплаты

История, баланс, график доходности

6. Видеоконтент (Remotion)

Q1-Q4

Автоматическая генерация персонализированных видео. Шаблоны: персональная презентация, social media, прогресс строительства, отчёт инвестора.

Интеграции

Экосистема интеграций

AXOR GROUP WEB Next.js 16 Bitrix24 CRM Лиды · Сделки Open Lines Автоматизации Smart-процессы Notion CMS Блог · Новости Мероприятия ISR-обновление Webhooks Claude AI PDF-генерация Видео-скрипты Персонализация ROI-расчёты Омниканальность WhatsApp · Telegram Instagram · Email Телефония Remotion Lambda React → Video 30-60 сек рендер Персональные видео GA4 + GTM + Looker Studio Сквозная аналитика · Офлайн-конверсии
Дорожная карта

Детальный роадмап

Q1: Запуск + Wow
Месяцы 1-3
  • Фундамент: Next.js, TypeScript, Tailwind
  • Дизайн-система, компоненты
  • i18n: 5 языков + RTL
  • Все страницы + анимации
  • CRM-формы, mobile
  • SEO, CI/CD
  • Bitrix24 CRM, WhatsApp
  • AI → PDF → WhatsApp
  • AI → Видео → WhatsApp
  • Корпоративный портал + ДДС
  • GA4 + GTM
  • Обучение, стабилизация
Q2: Контент + Каналы
Месяцы 4-6
  • Notion CMS интеграция
  • Блог: список, статья, категории
  • Модуль мероприятий
  • +Telegram, +Instagram, +Facebook
  • Телефония
  • Email-интеграция
  • Инвестиционный калькулятор
  • Интерактивная карта
  • Smart-процессы каталогов
  • Синхронизация B24 → сайт
  • Hotjar продуктовая аналитика
  • AI-ассистент для контента
Q3: Личный кабинет
Месяцы 7-9
  • Авторизация: email, magic link, OAuth
  • Dashboard: обзор портфеля
  • Мои проекты
  • Трекинг выплат
  • Документы (Bitrix24 Disk)
  • Сквозная аналитика (офлайн-конверсии)
  • Пентест авторизации
Q4: Масштабирование
Месяцы 10-12
  • PWA: manifest, install prompt
  • Дашборды: Looker Studio
  • Bitrix24 BI: финансовые отчёты
  • A/B тестирование
  • Remotion: доп. шаблоны
  • Расширенные анимации
  • Push-уведомления
  • Документация, масштабирование
Сводка

39 функциональных блоков

# Функционал Q Приоритет
1100% Custom разработкаQ1Must-have
2Имиджевый веб-порталQ1Must-have
3Премиальные анимацииQ1Must-have
4Мультиязычность (5 языков + RTL)Q1Must-have
5Mobile ExcellenceQ1Must-have
6CRM-формы Bitrix24Q1Must-have
7Запись на встречуQ1Must-have
8SEO-оптимизацияQ1Must-have
9CI/CD + PreviewQ1Must-have
10GA4 + GTMQ1Must-have
11Bitrix24 CRMQ1Must-have
12WhatsApp-интеграцияQ1Must-have
13AI → PDF → WhatsAppQ1Must-have
14AI → Видео → WhatsAppQ1Must-have
15Корпоративный порталQ1Must-have
16Учёт расходов + ДДСQ1Must-have
17Обучение командыQ1Must-have
18Notion CMS + БлогQ2Must-have
19Модуль мероприятийQ2Must-have
20Полная омниканальностьQ2Must-have
21ТелефонияQ2Should-have
22Email-интеграцияQ2Should-have
23Инвестиционный калькуляторQ2Should-have
24Интерактивная картаQ2Should-have
25Smart-процессыQ2Should-have
26Синхронизация B24 ↔ сайтQ2Should-have
27Продуктовая аналитикаQ2Should-have
28AI-ассистент контентаQ2Could-have
29Личный кабинетQ3Must-have
30Трекинг выплатQ3Must-have
31Документы инвестораQ3Must-have
32Сквозная аналитикаQ3Should-have
33PWAQ4Should-have
34Дашборды BIQ4Should-have
35A/B тестированиеQ4Could-have
36Remotion доп. шаблоныQ4Could-have
37Расширенные анимацииQ4Could-have
38Push-уведомленияQ4Could-have
39МасштабированиеQ4Should-have
Процесс

Процесс работы

Единая точка контакта через Bitrix24. Прозрачность, сохранность истории.

Bitrix24

Чаты, задачи, документы, согласования

Онлайн-встречи

2 ч/день, 4 дня/нед
(Пн, Вт, Чт, Пт)

Оффлайн-встречи

Офис в Белграде
по согласованию

Утверждение

Письменно в Bitrix24
V1 → V2 → V3 → Prod

Важно: Устное «окей» на встрече не является утверждением. Все согласования фиксируются письменно.

Дизайн

Дизайн-процесс

Каждый этап утверждается до перехода к следующему

1. Moodboard

до 3 встреч

Обсуждение видения, предпочтений, референсов заказчика → Согласованное визуальное направление

2. Brand Guide

V1 → V2

Цвета, типографика, spacing, UI-компоненты, стиль фото, tone of voice

3. Главная страница

V1 → V2 → V3

Ключевая страница — задаёт стандарт для всего проекта

4. Последующие разделы

V1 → V2 → V3

Утверждается архитектура раздела, не каждая отдельная страница

Pipeline

Pipeline разработки

Каждый модуль проходит единый итерационный процесс

Бизнес-
требования
REQ
до 3 встреч
Видение
исполнителя
VIS
презентация
Версия 1
прототип
V1
Обратная
связь
FB
Версия 2
доработка
V2
Версия 3
финальная
V3
утверждение
PROD

Разделение ответственности

Заказчик утверждает ЧТО

  • Бизнес-результат
  • Поведение системы
  • Пользовательский опыт
  • Функциональные требования

Исполнитель решает КАК

  • Архитектура
  • Выбор библиотек
  • Структура кода
  • Оптимизация производительности

Технические решения в области архитектуры, безопасности, производительности и выбора инструментов принимаются исполнителем на основании отраслевых best practices.

Производительность

Целевые метрики

Core Web Vitals

LCP (Largest Contentful Paint)< 1.5s (desktop) / < 2.0s (mobile)
FID (First Input Delay)< 50ms (desktop) / < 100ms (mobile)
CLS (Cumulative Layout Shift)< 0.05 (desktop) / < 0.1 (mobile)
TTFB (Time to First Byte)< 200ms (desktop) / < 300ms (mobile)

Lighthouse Score

Performance≥ 95 (desktop) / ≥ 90 (mobile)
Accessibility≥ 90
Best Practices≥ 95
SEO100

Готовы обсудить детали?

К презентации Дизайн-исследование