Vendstore — Корпоративный сайт экосистемы микровендинга — дизайн и разработка с нуля

Vendstore — не «лендинг на один аппарат», а экосистема с несколькими аудиториями, продуктами и сценариями конверсии. Нужен сайт, который одновременно объясняет сложную бизнес-модель и ведёт к заявке.

Что было на старте:

• Бренд с чётким брендбуком (DEEP GREEN, типографика, тон коммуникации), но без готового цифрового продукта
• Два разных продуктовых профиля: HELPER+ (микроритейл) и Bloomy (парфюмерный вендинг) — разная логика, разные модели, разные SKU
• Три аудитории: B2B-партнёры, частные инвесторы (B2C), владельцы локаций
• Нужны украинская и русская версии с корректным SEO
• Формы заявок должны попадать в CRM (Odoo)
• Сайт должен выглядеть премиально и быстро работать на мобильных

Технические ограничения:

• Без CMS и конструктора — полная собственность кода клиента
• Сложная интерактивность: слайдеры моделей, калькуляторы дохода, анимации прокрутки, видео в блоке спецификаций
• SEO с нуля: canonical, hreflang, structured data, sitemap, llms.txt
• Core Web Vitals на мобильных — критично для рекламного трафика

Дизайн и дизайн-система

• Разработка UI на основе брендбука Vendstore: цвета, типографика Roboto, компоненты (кнопки, карточки, модалки, hero)
• Единый визуальный язык для HELPER+ (зелёный акцент) и Bloomy (тёмный профиль)
• Адаптив для всех breakpoints: от 320px до desktop wide
• Продуктовые карточки с «шторкой», spotlight-блоки, spread-layout моделей с анимированной «чистой прибылью»

Архитектура страниц (10 URL, 2 языка)

• Главная — обзор экосистемы, B2B/B2C, продукты, этапы сотрудничества
• HELPER+ — модели Box/Slim, галереи, калькулятор дохода, FAQ
• Bloomy — настенная модель, спецификация с видео, калькулятор
• B2B — White Label, партнёрство, форматы
• B2C — инвестиционное предложение для частных инвесторов
• Зеркальные страницы в /ru/ с одинаковой структурой

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

• Critical CSS синхронно в , основные стили и шрифты — async preload
• Локальные шрифты Roboto woff2, без Google Fonts CDN
• Hero с responsive srcset (отдельные mobile/desktop WebP)
• loading="lazy" для изображений ниже первого экрана
• content-visibility: auto на нижних секциях (mobile)
• Vendor-библиотеки локально: GSAP, Lenis, Swiper, noUiSlider

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

• Lenis smooth scroll + GSAP ScrollTrigger (desktop)
• Reveal-анимации секций при скролле
• Swiper-слайдеры моделей (fade, autoplay, пагинация)
• noUiSlider — калькуляторы дохода на HELPER+ и Bloomy
• Анимированная презентация «чистой прибыли» между карточками моделей
• Блок спецификации с синхронизацией видео и списка характеристик
• Вкладки аудитории B2B/B2C, варианты Slim (настенный / со стойкой)

Формы и CRM

• Модальные окна заявок (партнёр, callback, продукт)
• Валидация полей, маска телефона +38
• send.php — отправка на email + создание лида в Odoo CRM
• Google Tag Manager синхронно в для корректного трекинга

SEO и AI-доступность

• Canonical на https://www.vendstore.com.ua, редирект non-www → www, HTTPS
• Hreflang uk-UA / ru-UA + x-default на всех страницах
• JSON-LD: Organization, WebSite, WebPage, Product (на продуктовых)
• sitemap.xml с hreflang, robots.txt, llms.txt для AI-поисковиков
• Уникальные title, description, Open Graph, Twitter Cards на каждой странице
• Локальные SVG-иконки вместо icon-font

Доступность и UX

• Skip-link, семантический HTML5, ARIA на модалках и слайдерах
• Инпуты 16px — без автозума на iOS
• Модалки с hidden — без FOUC при перезагрузке
• Critical CSS для header — без «вспышки» шапки до загрузки стилей

Инфраструктура

• Конфиг nginx с кешированием статики и редиректами
• .htaccess для Apache-сред
• config.local.php — безопасное хранение CRM/SMTP настроек на сервере

Рабочий мультиязычный корпоративный сайт, готовый к рекламе и SEO.

Объём:

• 10 страниц (5 uk + 5 ru)
• 2 продуктовых профиля (HELPER+, Bloomy)
• 2 бизнес-сегмента (B2B, B2C)
• Калькуляторы дохода на продуктовых страницах
• Формы заявок → Odoo CRM + email

Технический результат:

• Сайт на чистом коде — полная собственность клиента, без ежегодной подписки на платформу
• Единая дизайн-система на всех страницах и языках
• SEO-архитектура с нуля: canonical, hreflang, JSON-LD, sitemap, llms.txt
• Оптимизация под Core Web Vitals: critical CSS, srcset hero, lazy images, async fonts

AI X-Ray после оптимизации (июль 2026): 95/100 — Performance 95, SEO 98, Security 95, Accessibility 95, Code Quality 100, Conversion 91. LCP 1.7s, PSI Mobile 95 / Desktop 98.

Что получил клиент:

• Сайт, который объясняет сложную экосистему простым языком
• Инструмент продаж: калькуляторы, CTA, формы с CRM
• Готовность к масштабированию: новые лендинги можно добавлять в той же архитектуре
• Публичный запуск: www.vendstore.com.ua