Figma проект https://www.figma.com/design/O1ZFkM0Ugian1oUkMcq8qX/Untitled?node-id=1733-5461&t=uwr78V10NVNWzq6F-1
🔒 ТЕХНІЧНЕ ЗАВДАННЯ
ФРОНТЕНД-ВЕРСТКА ЗА МАКЕТОМ FIGMA
(БЕЗ БЕКЕНДА / БЕЗ ЛОГІКИ / БЕЗ ЗБЕРІГАННЯ)
1. Мета робіт
Сверстати користувацький інтерфейс сайту строго за макетами Figma (pixel-perfect)
❗ Виключно фронтенд-верстка, без реалізації серверної логіки, зберігання даних та бізнес-процесів.
Результат робіт має бути повністю готовим до подальшого підключення бекенда, але не містити його реалізації.
2. Джерело дизайну
Єдине джерело істини — макети Figma
Верстка виконується 1 в 1:
розміри
відступи
шрифти
кольори
стани елементів
Будь-які відхилення від Figma заборонені без погодження
3. Межі відповідальності фронтенда (КРИТИЧНО)
🚫 Фронтенд НЕ МАЄ ПРАВА:
Фронтенд ТОЛЬКИ відображає інтерфейс.
4. Форми (ОБОВ'ЯЗКОВО)
4.1 Поведінка форм
Усі форми:
верстаються строго за Figma
містять візуальну валідацію (required, error-state)
НЕ ЗБЕРІГАЮТЬ дані
НЕ ВІДПРАВЛЯЮТЬ дані на сервер
4.2 Відправка форми
При submit:
console.log('Form submit mock', formData);
❗ Використовується JS-заглушка, без fetch / axios / API.
5. Списки, картки, таблиці
5.1 Джерело даних
Усі списки верстаються статично
Дані захардкожені (mock-data)
Структура HTML має бути готова під API
Приклад:
<div class="items-list">
<!-- items from API later -->
</div>
❗ Жодної логіки завантаження даних.
6. Авторизація / реєстрація
6.1 Строго тільки UI
Верстка екранів входу / реєстрації
Поля, кнопки, стани помилок — тільки візуально
Жодної перевірки логіна/пароля
6.2 Поведінка
console.log('Auth UI only');
❗ НІ:
JWT
cookies
localStorage
ролей
доступу
7. Кнопки та дії
7.1 Усі кнопки
7.2 Поведінка кнопок
console.log('Button clicked');
8. Модальні вікна / попапи
9. Адаптивність
Обов'язкові брейкпоінти:
Верстка строго за адаптивними макетами Figma
Самовільні рішення заборонені.
10. Технічні вимоги
11. Підготовка під бекенд (АЛЕ БЕЗ ЙОГО РЕАЛІЗАЦІЇ)
Фронтенд зобов'язаний:
<!-- backend: data will be injected here -->
12. Критерії приймання
Робота приймається якщо:
Верстка візуально збігається з Figma
Немає мережевих запитів
Немає зберігання даних
Немає бізнес-логіки
Весь інтерактив — заглушки
Код готовий для підключення бекенда
13. Заборонено без погодження
❌ Самостійно:
ВСЕ МАЄ ПРАЦЮВАТИ І ВИГЛЯДАТИ ЯК У FIGMA!