HENNLICH Україна — Специфікація для розробників

Розділ 00. Головна сторінка (Main Page) — еталонний опис

Що це. Покроковий опис кожного блоку дизайну для команди розробки, що втілюватиме сайт. Мета — щоб розробник зрозумів що це за блок, з чого складається, які розміри/відступи, як поводиться на мобільному, які стани й інтерактив, звідки беруться дані — без додаткових запитань до дизайнера.

Джерело істини — Figma. Текст нижче доповнює макет, а не замінює. За числами (відступи, розміри, кольори конкретного елемента) завжди звіряйтесь із Figma через Dev Mode (Inspect). Файл: Hennlich → сторінка Design. Пряме посилання на екран: Main Page (desktop) · Main Page (mobile)

Це еталонний розділ: за цим самим форматом будуть описані решта сторінок (Каталог/Картка товару, Кошик/Оформлення, Авторизація/Кабінет, інфо-сторінки).

🖼️ Скріншоти блоків вставлені під кожним розділом (рендер з Figma @2x, тека images/). Це довідкове зображення — пікселі/відступи беріть з Figma Dev Mode.

Загальний вигляд: desktop (1440) та mobile (375)

Mobile overview

(повний рендер desktop див. у Figma за посиланням вище; нижче кожен блок окремо)

A. Глобальні домовленості (читати перед версткою)

Стосуються усіх сторінок, не лише головної.

A.1. Сітка та контейнер

Параметр Desktop Mobile
Ширина макета (artboard) 1440 px 375 px
Контейнер контенту 1320 px повна ширина мінус бокові поля
Бокові поля секцій (padding-left/right) 60 px 16 px (за макетом mobile)
Вертикальний padding секцій здебільшого 60 px зверху/знизу зменшений (≈32–40 px)
Брейкпойнт макети надані для 1440 і 375. Проміжні ширини (планшет ~768) — гумова адаптація за тими ж правилами (контейнер тягнеться, бокові поля зберігаються, грід-колонки зменшуються)

Більшість секцій побудовані як Auto Layout (Flex): вертикальна колонка із заголовком + сіткою карток, центрована, з внутрішнім контейнером 1320 px.

A.2. Кольори (design tokens)

Беруться з макета; рекомендую завести як CSS-змінні / Tailwind-токени.

Токен HEX Призначення
--brand #00A870 основний зелений (CTA-кнопки, акценти, активні стани)
--brand-2 #00AC6C зелений варіант (декор-фігура в hero, дрібні акценти) — фактично той самий бренд-зелений
--ink #202529 / #212529 основний текст, заголовки
--ink-soft #344054 / #475467 вторинний текст
--muted #808080 / #8E8E93 підписи, неактивний текст
--surface #F3F4F4 (та дубль #F3F4F3) фон більшості секцій
--surface-2 #F2F2F7 світлі плашки / поля
--line #DBDBDB / #E9E9E9 / #DFDFDF бордери, роздільники, неактивні кнопки
--dark #3C4147 темні блоки (форма «Не знаєте що обрати?», футер)
--white #FFFFFF картки, текст на темному

⚠️ Цвіт-аномалії, які треба узгодити перед версткою (схоже на дефолти з UI-бібліотеки, не з бренду): - #6941C6 (фіолетовий) трапляється ~27 разів — найімовірніше це непокручений дефолт з компонент-кіта (лінки/фокус). За брендом має бути зелений --brand. Уточнити в дизайнера, де саме він використовується (швидше за все — текстові лінки «Learn more»). - дублі майже однакових сірих (#F3F4F4 vs #F3F4F3, #202529 vs #212529) — звести до одного значення кожен.

A.3. Типографіка

Основний шрифт — Proxima Vara (variable). Усі заголовки й текст на ньому.

Роль Розмір / line-height / вага
Hero H1 68px / 74 / 700 (на mobile зменшується)
H2 секцій («Каталог продукції» тощо) 44px / 52 / 600
H2 альт 56px / 70 / 600 та 36px / 43 / 600 (де менші заголовки)
H3 / назви карток 24px / 29 / 500–600
Підзаголовок / lead 20px / 30 / 500; 18px / 28 / 500
Body 16px / 24 / 400
Body small / підписи 14px / 20 / 400–500
Caption 12px / 15 / 400

⚠️ У макеті трапляються випадкові вкраплення Inter та 42dot Sans (поодинокі вузли) — це залишки дефолтних компонентів. Весь текст має бути Proxima Vara. Замінити при верстці, не тягнути зайві шрифти.

A.4. Скруглення (border-radius)

Основне значення — 8 px (картки, кнопки, поля). Подекуди 6 px і 10 px; 100 px (pill) для круглих елементів. За замовчуванням — 8 px.

A.5. Спільні компоненти (повторюються на всіх сторінках)

Описані детально наприкінці розділу (Header, Footer) і будуть винесені в окремий розділ «UI Kit». Ключові: - Buttons (основна зелена #00A870, вторинна сіра #DBDBDB) — іконка + лейбл + стрілка, padding 15/24, висота 48; компактна версія 40px (header). - Button (текстовий лінк «Learn more / See more / Explore product» зі стрілкою arrow-right). - Tag (мітка категорії, напр. «Пружини»). - Input (поле форми), Checkbox base, Dropdown (chevron-down), Social Icons, placeholder (контейнер під зображення/іконку).

A.6. ⚠️ Плейсхолдери та неузгодженості тексту (НЕ верстати «як є»)

У макеті лишилися службові/англійські плейсхолдери з бібліотеки. Це не фінальний контент — перед версткою замінити на реальні UA-рядки (або взяти з CMS): - кнопки-лінки: Learn more, See more, Explore product → укр. («Детальніше», «Дивитись», «Перейти») — узгодити єдиний варіант; - Step 1 (мітки в блоці «Чому обирають нас») — службовий лейбл, прибрати; - Helper text goes here., шт, Марія Гриневич, Олександр — плейсхолдери полів форми; - друкарська помилка: Подукція igus → Продукція igus (у списку напрямків форми); - тексти відгуків/новин/кейсів — демо-контент, фінал бере з CMS.

B. Структура головної сторінки (зверху вниз)

13 блоків у порядку слідування. Кожен — окрема секція на всю ширину (1440), контент центрований у 1320.

# Блок Figma Висота (desktop)
0 Hero + Header ↗ 800
1 Смуга показників (stats) ↗ 308
2 Каталог продукції ↗ 928
3 Чому обирають нас ↗ 910
4 Рішення для різних галузей ↗ 760
5 Реалізовані кейси ↗ 910
6 Наші партнери ↗ 488
7 Відгуки клієнтів ↗ 1097
8 FAQ + блок консультації ↗ 874
9 Офіційні підтвердження (сертифікати) ↗ 751
10 Новини ↗ 910
11 Форма «Не знаєте що обрати?» ↗ 634
12 Footer ↗ 545

Блок 0 — Hero + Header

00-hero Figma ↗

Призначення. Перший екран: позиціювання компанії + два головні CTA. Хедер «приклеєний» поверх hero.

Склад (desktop, секція 1440×800): - Фонове зображення на всю ширину (промислове фото труб/комплектуючих), зверху зелена декоративна фігура #00AC6C (кутовий блок зліва) + легкий градієнт-затемнення для читабельності тексту. - Контентний блок (ліворуч, ширина ≈737): - H1 «Промислові комплектуючі та інженерні рішення» — Proxima Vara 700 / 68px, білий. - Підзаголовок «Підбираємо, постачаємо та консультуємо — від стандартних компонентів до індивідуальних рішень.» — 16px/400, білий. - Кнопки (Actions, gap 12): Переглянути каталог (основна, зелена #00A870, висота 48, padding 15/24, іконка-стрілка справа) + Отримати консультацію (вторинна, сіра #DBDBDB).

Header (компонент, 1440×80, padding 0/60/8/60) — деталі див. розділ «Спільні компоненти → Header». Коротко: логотип + навігація (Каталог продукції ▾, Новини, Контакти, Про нас, Бібліотека, Кейси) + дії (пошук, кошик, мова UK ▾, «Увійти»).

Стани / інтерактив: - Кнопки: hover/active/focus (див. компонент Buttons). - Іконка пошуку в хедері відкриває стан hero з пошуковим полем — це окремі макети: hero block_search і з нещодавніми запитами. Тобто пошук — це не окреме поле в hero, а оверлей, що розкривається з хедера. - Хедер при скролі — є окремий стан header_scroll (mobile): зменшується/ущільнюється. Реалізувати sticky-хедер зі зміною стану на скрол.

Адаптив (mobile 375): хедер → логотип + іконки (пошук, кошик, мова, профіль) + бургер (відкриває menu_mobile). H1 зменшується, кнопки стають на всю ширину (стек, одна під одною).

Дані: статичний контент (керований через CMS-блок «Hero»: заголовок, підзаголовок, фон, 2 CTA з посиланнями).

Блок 1 — Смуга показників (Stats)

01-stats Figma ↗ · секція 1440×308, Auto Layout row, padding 60, контейнер 1320

Призначення. Соціальний доказ — 4 ключові цифри.

Склад: 4 однакові колонки в ряд: | Цифра | Підпис | |---|---| | 5 000+ | клієнтів в Україні | | 20+ | років досвіду на ринку | | 10 000+ | товарів у каталозі | | 98% | клієнтів задоволені співпрацею |

Адаптив (mobile): 2×2 (дві колонки), див. mobile-рендер.

Дані: статичні числа (CMS, 4 пари «значення + підпис» + опційне посилання).

Блок 2 — Каталог продукції

02-catalog Figma ↗ · 1440×928, Auto Layout col, gap 40, padding 60, фон #F3F4F4

Призначення. Вхід у каталог — плитки головних товарних категорій.

Склад: - H2 «Каталог продукції» (44/600). - Сітка карток категорій (контейнер 1320, col gap 20): 9 карток у grid. - Категорії: Ущільнення, Продукція igus, Інжиніринг, Лінійне переміщення, Пружини, Гідротехнічне обладнання, Автоматизація та роботизація, Власне виробництво, Продукція igus. - Картка категорії: зображення/іконка продукту (контейнер placeholder) + назва + лінк-кнопка Explore product (плейсхолдер → «Перейти»). Скруглення 8. - За візуалом: верхній ряд — 4 широкі картки, далі ряд дрібніших — звіряйте точний грід у Figma (картки різного розміру = bento-розкладка).

Стани: hover картки (підняття/тінь/зміна стрілки — перевірити в компоненті).

Адаптив (mobile): 2 колонки.

Дані: список категорій з CMS/каталогу (назва, зображення, URL категорії). Кількість карток — динамічна.

Блок 3 — Чому обирають нас

03-why-us Figma ↗ · 1440×910, фон #F3F4F4

Призначення. 4 переваги компанії з фото-картками.

Склад: H2 «Чому обирають нас» + сітка 4 карток (за візуалом 2×2, кожна з фоновим фото): | Заголовок | Опис | |---|---| | Прямі поставки | Європейські виробники без посередників. | | Технічна експертиза | Підбір під умови вашого виробництва. | | Індивідуальний підбір рішень | Оптимально за параметрами і бюджетом. | | Швидка доставка по Україні | Оперативні поставки по всій Україні. |

Адаптив (mobile): 1 колонка (картки одна під одною).

Дані: статичний/CMS-блок (4 елементи: іконка, заголовок, опис, посилання).

Блок 4 — Рішення для різних галузей

04-industries Figma ↗ · 1440×760, фон #F3F4F4

Призначення. Галузеві напрямки застосування продукції.

Склад: H2 «Рішення для різних галузей» + сітка 5 карток (іконка + заголовок + опис + Learn more). Одна картка візуально виділена темним (акцент — за макетом центральна). | Галузь | Опис (скорочено) | |---|---| | Енергетика | безперебійна робота систем, надійність інфраструктури | | Харчова промисловість | відповідність санітарним нормам | | Промислове виробництво | стабільна робота обладнання, ефективність | | Агропромисловий сектор | надійні компоненти для складних умов | | Хімічна промисловість | стійкість до агресивних середовищ |

Адаптив (mobile): 1 колонка. Дані: CMS (іконка, назва галузі, опис, посилання).

Блок 5 — Реалізовані кейси

05-cases Figma ↗ · 1440×910, фон #F3F4F4

Призначення. Портфоліо реалізованих проєктів — карусель/слайдер.

Склад: - H2 «Реалізовані кейси». - Слайдер карток кейсів (5 карток): фото + Tag категорії (Пружини / Автоматизація та роботизація / Ущільнення) + назва («Монтаж на СЦМ на 2 палетизатора») + короткий опис. - Елементи навігації слайдера (стрілки) — є інстанси arrow-right; перевірити прев/некст у Figma. - Кнопка під блоком: Переглянути усі кейси (основна зелена) → веде на сторінку списку кейсів.

Стани: перемикання слайдів (стрілки + свайп на mobile). Адаптив (mobile): 1 картка у в'юпорті, горизонтальний свайп. Дані: список кейсів з CMS (фото, категорія, назва, опис, URL кейсу).

Блок 6 — Наші партнери

06-partners Figma ↗ · 1440×488, фон #F3F4F3

Призначення. Логотипи партнерів/брендів.

Склад: H2 «Наші партнери» + сітка з 10 логотипів (компонент Fictional company logo — у макеті демо-логотипи, замінити реальними). Кожен — у комірці-плашці.

Адаптив (mobile): сітка 2–3 в ряд (звірити). Дані: CMS-список логотипів (зображення + опційне посилання). У макеті — 10 заглушок.

Блок 7 — Що кажуть наші клієнти (відгуки)

07-reviews Figma ↗ · 1440×1097, фон #F3F4F4

Призначення. Відгуки клієнтів — слайдер.

Склад: H2 «Що кажуть наші клієнти» + картки відгуків (за макетом 2 видимі): - велика лапка ", текст відгуку, лінк Читати більше (для довгих), автор (ім'я + посада/компанія), логотип компанії. - Приклади: Катерина Приходько — Керівник відділу закупівель, AgroSteel Trade Group; Ігор Коваленко — Технічний директор, Industrial Supply Partners Ltd (демо-контент). - Навігація слайдера (стрілки).

Стани: перемикання; Читати більше розкриває повний текст (модалка або експанд — уточнити; за замовчуванням — обрізка тексту + розкриття). Адаптив (mobile): 1 картка, свайп. Дані: CMS (текст, автор, посада, компанія, логотип).

Блок 8 — FAQ + блок консультації

08-faq Figma ↗ · 1440×874, фон #F3F4F4, Auto Layout row, gap 88

Призначення. Часті запитання (акордеон) + бічна картка заклику до консультації.

Склад — дві колонки: 1. Ліва картка «Потрібна консультація?» (вузька, ≈515): заголовок + опис «Допоможемо підібрати рішення під ваші виробничі задачі…» + ілюстрація + кнопка Отримати консультацію (зелена). 2. Права колонка — акордеон FAQ (≈717): H2 «Відповіді на ключові запитання» + список питань (chevron-down/up): - Які терміни постачання продукції? (перший — розкритий, з повною відповіддю) - Чи працюєте ви з індивідуальними технічними запитами? - Які умови оплати доступні для корпоративних клієнтів? - Чи здійснюєте ви доставку по всій території України та за кордон? - Чи надаєте ви гарантію на продукцію? - Чи можна отримати консультацію щодо підбору обладнання під виробничі потреби?

Стани: акордеон — один/кілька відкритих елементів (за макетом перший відкритий, іконка chevron-up); решта закриті (chevron-down). Анімація розкриття. Адаптив (mobile): колонки в стек (картка консультації зверху або знизу — звірити), акордеон на всю ширину. Дані: CMS (пари питання/відповідь) + статична картка консультації.

Блок 9 — Наші офіційні підтвердження (сертифікати)

09-certificates Figma ↗ · 1440×751, Auto Layout col, gap 40, padding 60

Призначення. Сертифікати/підтвердження якості.

Склад: H2 «Наші офіційні підтвердження» + ряд 4 карток сертифікатів (зображення сертифіката + підпис «European Agro & Industrial Safety Certification» + лінк Learn more) + кнопка Переглянути усі сертифікати (зелена).

Стани: клік по сертифікату — перегляд (модалка/лайтбокс або PDF) — уточнити. Адаптив (mobile): слайдер/2 колонки. Дані: CMS (зображення сертифіката, підпис, файл/посилання).

Блок 10 — Новини

10-news Figma ↗ · 1440×910, фон #F3F4F4

Призначення. Останні новини/статті блогу.

Склад: H2 «Новини» + картки новин (слайдер/сітка, за макетом 1 велика + дрібніші): - фото + Tag категорії (Пружини) + дата (14 квітня 2026) + заголовок + анонс. - Приклад: «Як правильно вибирати пружину стиснення для промислового обладнання». - Кнопка Переглянути усі новини (зелена) → сторінка Новини.

Адаптив (mobile): 1 колонка / свайп. Дані: CMS-блог (фото, категорія, дата, заголовок, анонс, URL статті). Сторінка статті: Стаття ↗.

Блок 11 — Форма «Не знаєте що обрати?»

11-form Figma ↗ · 1440×634, Auto Layout row, padding 60

Призначення. Лід-форма зворотного зв'язку (головна конверсія сторінки).

Склад — дві колонки: 1. Ліва (біла картка, 523, padding 40): H2 «Не знаєте що обрати?» + опис «Заповніть форму, і наші фахівці зв'яжуться…» + блок «Наші контакти:» (телефон +38 044 500 58 73, email office@hennlich.ua). 2. Права (темна картка #3C4147, 793, padding 40) — сама форма: - Ваше ім'я — текстове поле (placeholder «Олександр»). - Телефон — поле з префіксом +380, маска (XX) XXX XX XX. - Ваш email — текстове поле (placeholder «your.email@example.com»). - Напрямок — група чекбоксів (7 шт., компонент _Checkbox base): Гідротехнічне обладнання, Ущільнення, Пружини, Продукція igus (у макеті помилка «Подукція»), Обладнання для верстатів, Лінійне переміщення, Інжиніринг. - Кнопка Надіслати заявку (зелена, на всю ширину). - Під полями Helper text goes here. — плейсхолдер хелпера/помилки валідації.

Стани: валідація полів (порожнє ім'я/невалідний телефон/email → стан помилки + helper text червоним), стан кнопки (disabled поки невалідно / loading при відправці), success/error після сабміту. Адаптив (mobile): колонки в стек, форма на всю ширину. Є окрема Modal_consultation (mobile) та Modal_consultation (desktop) — той самий набір полів у модалці (відкривається кнопками «Отримати консультацію» по сайту). Дані / інтеграція: сабміт → лід у CRM (узгодити ендпоінт; за стеком SEOK зазвичай KeyCRM). Обов'язкові поля, антиспам, повідомлення про успіх/помилку — узгодити.

12-footer Figma ↗ · компонент, 1440×545, фон #3C4147, padding 88/60/48/60

Призначення. Підвал — навігація + контакти + правове.

Склад (4 колонки + нижній рядок): - Користувачу: Доставка та оплата, Умови використання сайту, Обмін та повернення товару, Договір публічної оферти, Про компанію, Бібліотека. - Товари: Ущільнення, Продукція igus, Інжиніринг, Лінійне переміщення, Пружини, Гідротехнічне обладнання, Роботизація та автоматизація виробництва. - Послуги: Виробництво ущільнень, Виробництво гофрозахисту. - Геннліх Україна: графік «Пн - Пт: 9:00 - 17:00», адреса «м. Київ, вул. Вінстона Черчилля 59», телефон +38 044 500 58 73, email office@hennlich.ua, соц-іконки (Social Icons ×4). - Нижній рядок: © HENNLICH UKRAINE, 2026 + способи оплати (LiqPay, Visa, Mastercard — іконки).

Адаптив (mobile): колонки згортаються (акордеони або стек), див. mobile-рендер. Дані: меню з CMS/конфіга, контакти — глобальні налаштування сайту.

C. Спільні компоненти

header Figma ↗ (інстанс у hero) · 1440×80, padding 0/60/8/60, контейнер 1320×72

Структура (зліва направо): - Логотип Hennlich (72×72, на білій підкладці). - Навігація (gap 24): Каталог продукції (з chevron-down ▾ — відкриває мегаменю/дропдаун категорій), Новини, Контакти, Про нас, Бібліотека, Кейси. Текст 16px/500. - Дії (Actions, gap 24): - іконка пошуку (відкриває пошуковий оверлей, див. Блок 0); - іконка кошика (mdi:cart) — кнопка 40×40 на фоні #F3F4F4; - перемикач мови UK ▾ (dropdown; на сайті 2+ мови — узгодити перелік); - кнопка Увійти (іконка профілю + лейбл) → авторизація.

Стани: дефолтний / sticky при скролі (ущільнений — є header_scroll); активний пункт меню; відкритий дропдаун «Каталог продукції»; авторизований стан (замість «Увійти» — профіль/кабінет). Mobile: логотип + іконки (пошук/кошик/мова/профіль) + бургер → menu_mobile, пошук → mobile_search focused.

Buttons / Button

Поля форми (Input / Checkbox / Dropdown)

D. Що уточнити в дизайнера/замовника перед стартом (чек-лист)

  1. #6941C6 (фіолетовий) — де використовується і чи це баг (має бути зелений)?
  2. Єдиний текст лінків-кнопок замість Learn more / See more / Explore product.
  3. Прибрати службові мітки Step 1, плейсхолдери Helper text, шт, демо-імена.
  4. Виправити «Подукція igus» → «Продукція igus» (і перевірити по всьому макету).
  5. Перелік мов у перемикачі (UK + ?).
  6. Поведінка слайдерів (кейси/відгуки/новини/сертифікати): автопрокрутка? скільки видимих карток на breakpoint?
  7. Читати більше у відгуках і перегляд сертифіката — модалка чи окрема сторінка?
  8. Інтеграція форм (CRM-ендпоінт, обов'язкові поля, антиспам, повідомлення успіх/помилка).
  9. Зведення дубль-токенів кольорів і заміна випадкових Inter/42dot Sans на Proxima Vara.
  10. Експорт асетів (іконки — SVG; зображення — формати/розміри; логотип) — підготувати окрему теку.

Версія документа: еталон (Головна). Після підтвердження формату — за цим шаблоном описуються решта розділів: Каталог/Картка товару, Кошик/Оформлення, Авторизація/Кабінет, інфо-сторінки (Про компанію, Контакти, Бібліотека, Новини/Стаття, Кейси, 404, Gallery).