Технічне завдання на верстку та інтеграцію
1. Загальні вимоги
Pixel Perfect відносно макетів Figma.
Не змінювати та не спрощувати дизайн без погодження.
Усі візуальні ефекти (градієнти, тіні, світіння, прозорості, рамки тощо) реалізувати максимально близько до макета.
У разі виникнення технічних обмежень будь-які зміни попередньо узгоджуються.
2. Верстка
Семантична HTML5.
Адаптивна та кросбраузерна верстка.
Індивідуальна класична тема WordPress з нуля, без використання готових тем.
3. Адаптив
Макети розроблено для Desktop і Mobile.
На проміжних роздільна здатність (роздільних здатностях) адаптація виконується за рахунок масштабування та перебудови елементів без порушення дизайн-концепції. (Примітка: в офіційному технічному стилі частіше використовують «На проміжних брейкпойнтах» або «Для проміжних екранів»).
Кращий варіант: На проміжних значеннях ширини екрана адаптація виконується за рахунок масштабування та перебудови елементів без порушення дизайн-концепції.
Перехід на мобільну версію виконується лише у погодженій точці адаптації (брейкпойнті).
Якщо для окремих роздільних здатностей знадобиться зміна композиції або додатковий дизайн-макет, це попередньо узгоджується.
4. Оптимізація
Конвертація зображень у WebP (або AVIF, де це можливо).
Оптимальне стиснення зображень.
Адаптивні зображення (srcset, sizes).
Lazy Loading (відкладене завантаження).
Мініфікація CSS та JavaScript.
Максимально можлива оптимізація швидкості завантаження сайту.
5. Інтерактивність
Реалізувати:
стани Hover / Active / Focus;
анімації кнопок, посилань і карток;
стани полів пошуку та елементів форм;
плавне відкриття зображень із мініатюр (Lightbox / Fancybox або аналог);
плавні переходи між станами інтерфейсу.
Якщо поведінка елемента відсутня в макеті, реалізувати її відповідно до стилістики проєкту.
6. Завершення робіт
Розмістити повністю готовий сайт на сервері замовника.
Передати вихідний код, тему WordPress та всі файли проєкту.
Виправити зауваження, виявлені під час приймання, якщо вони пов'язані з невідповідністю макету або цьому ТЗ.
Посилання на макет
https://www.figma.com/design/MngyP8sAZP3titWFpDivT1/Rugby--Original-?node-id=3284-2242&t=MJ7cFzBpFZPXzq4b-1
