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

Vendstore — не «лендінг на один апарат», а екосистема з кількома аудиторіями, продуктами і сценаріями конверсії. Потрібен сайт, який одночасно пояснює складну бізнес-модель і веде до заявки.

Що було на старті:

• Бренд із чітким брендбуком (DEEP GREEN, типографіка, тон комунікації), але без готового цифрового продукту
• Два різні продуктові профілі: HELPER+ (мікроритейл) і Bloomy (парфумерний вендинг) — різна логіка, різні моделі, різні SKU
• Три аудиторії: B2B-партнери, приватні інвестори (B2C), власники локацій
• Потрібна українська та російська версії з коректним SEO, а не «переклад через Google Translate»
• Форми заявок мають потрапляти в CRM (Odoo), а не просто на пошту
• Висока конкуренція за увагу — сайт має виглядати преміально і працювати швидко на мобільних

Технічні обмеження:

• Без CMS і конструктора — повна власність коду клієнта
• Складна інтерактивність: слайдери моделей, калькулятори доходу, анімації прокрутки, відео в блоці специфікацій
• SEO з нуля: canonical, hreflang, structured data, sitemap, AI-доступність (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