Необхідно розробити повноцінний сайт за дизайном з Figma
https://www.figma.com/design/18hr8KoOHlIEB1XQSzkdkT/Untitled?node-id=0-1&p=f
Сайт має бути реалізований на Next.js з пріоритетом максимальної швидкості завантаження, SEO та чистої архітектури.
Цільові показники:
PageSpeed Insights Mobile: 95–100
PageSpeed Insights Desktop: 98–100
Core Web Vitals — зелена зона
Загальні вимоги
Проект має включати:
Сайт має бути готовий до подальшого масштабування та SEO-просування.
Технології та архітектура
Frontend реалізується на Next.js (бажано App Router) з використанням SSR / SSG / ISR за необхідності. Звичайний SPA на React не допускається.
Backend обов'язковий і має забезпечувати управління контентом без редагування frontend-коду. Допускається використання Headless CMS (Strapi, Directus) або backend на Node.js (Express / Nest), або вбудованих API Routes / Server Actions Next.js. Backend не має погіршувати показники PageSpeed.
Архітектура проекту має спочатку проектуватися під швидкість, а не оптимізуватися постфактум.
Верстка та UI
Верстка виконується за макетом Figma. Pixel Perfect бажаний. Використовувати Flexbox / Grid, семантичну HTML-розмітку, мінімальний DOM, без зайвих обгорток і важких анімацій, що впливають на продуктивність.
Сайт має бути адаптивним для desktop, tablet та mobile без горизонтального скролу, ламаючоїся сітки та стрибків контенту.
Продуктивність (ключова вимога)
Сайт має показувати PageSpeed не нижче вказаних значень на обох мовних версіях. Обов'язково:
мінімальний JS-бандл
code splitting
dynamic imports
lazy loading компонентів та зображень
використання next/image (WebP / AVIF)
оптимізація шрифтів через next/font
кешування (ISR / CDN)
відсутність зайвих сторонніх скриптів
Якщо цільові показники PageSpeed не досягнуті — робота вважається невиконаною.
Мультимовність
Сайт має бути реалізований як SEO-правильний мультимовний проект з окремими URL для кожної мови:
/ua
/ru
Українська мова — основна, російська — додаткова. Контент, заголовки, мета-теги та SEO-настройки мають зберігатися окремо за мовами в backend. Переключення мови має відбуватися через URL, без завантаження контенту другої мови на першому рендері.
Обов'язково реалізувати hreflang, коректні canonical, унікальні Title / Description / H1 для кожної мовної версії, а також коректний атрибут lang для документа.
Контент та реальні дані
В задачу входить наповнення сайту реальними текстами та зображеннями. Контент надається. Усі дані мають підгружатися динамічно з backend та коректно відображатися на frontend.
Аналітика
Обов'язково підключити:
Google Tag Manager
Google Analytics 4
Підключення має бути асинхронним і не погіршувати показники PageSpeed. Реалізувати базові події (відправка форми, ключові кліки — за узгодженням).
SEO-база
Сайт має мати:
семантичну HTML-структуру
коректну ієрархію H1–H6
можливість управління title та description
SEO-дружні URL
готовність до масштабування під нові сторінки
Важливо
Якщо в процесі розробки виявляються помилки в макеті або спірні технічні / UX-моменти, узгоджувати до реалізації, а не приймати рішення самостійно.
