Front-end лабораторна робота

Плагін використовується в адмінці AdminLTE2 v.4 (побудована поверх bootstrap5) https://adminlte.io/ потрібно, щоб дропдаун коректно розфарбовувався в обох режимах data-bs-theme="light" і data-bs-theme="dark" тобто в чорному режимі був чорний фон і білий текст в атачі тестовий приклад Проблема виникла при переведенні проекту https://github.com/leon-mbs/zstore на новий бутстрап з вбудованою темною темою Попередня версія adminlte (з bs4) використовувала свій темний режим і там все само працювало Можна поміняти (або перескладати) css, головне, щоб було зрозуміло, які змінні або стилі потрібно змінити в реальному проекті. Для спрощення зміни можна вставити в тег в Може є якісь адекватні альтернативні рішення, що додають пошук в html select тег Виконавець повинен розуміти, що робить - ніякого ІІ-байдлокодингу

Сайт розроблений на: Backend: Java + Spring Boot База даних: MySQL Frontend: JavaScript, HTML, CSS Шаблонізатор: Thymeleaf Сервер: VPS (Linux Ubuntu) Reverse Proxy: Apache2 Архітектура: Монолітний додаток На даний момент на сайті реалізовано: Блог з адміністративною панеллю. Можливість створювати та редагувати статті через адмін-панель. Можливість додавати HTML-розмітку та контент через візуальний інтерфейс. Статичні сторінки сайту, які зараз створюються розробником вручну. ⸻ Мета завдання Необхідно реалізувати можливість створювати та управляти новими комерційними сторінками послуг через існуючу адміністративну панель аналогічно тому, як зараз створюються статті блогу. Після реалізації адміністратор повинен мати можливість самостійно створювати нові SEO-сторінки послуг без участі розробника. ⸻ Поточний стан Зараз через адмін-панель можна створювати тільки записи блогу. Приклад: Стаття 1 Стаття 2 Стаття 3 Кожна стаття має: Заголовок URL (slug) Контент SEO-параметри Зображення ⸻ Що необхідно реалізувати 1. Новий тип контенту «Послуги» Створити в адмін-панелі окремий розділ: «Послуги» Він повинен бути незалежним від розділу блогу. Приклад структури: Блог Послуги ⸻ 1. Створення сторінки послуги Адміністратор повинен мати можливість створити нову сторінку послуги через інтерфейс. Комерційні сторінки послуг складаються з 13 блоків, з яких 4 блоки динамічні та 9 статичних. Поля: Назва послуги URL (slug) H1 SEO Title Meta Description SEO Keywords Основний контент сторінки Зображення Статус публікації (Чернетка / Опубліковано) ⸻ 1. Контент сторінки Контент повинен підтримувати: HTML-розмітку Форматування тексту Заголовки H2-H6 Списки Зображення Посилання Бажано використовувати існуючий редактор, який вже застосовується в блозі. ⸻ 1. Генерація URL Кожна послуга повинна мати власний URL. Приклади: /visa/usa/business-visa-usa /visa/usa/business-visa-uk /visa/usa/business-visa-canada ⸻ 1. Відображення на сайті Після публікації сторінка повинна: автоматично ставати доступною за своїм URL; використовувати існуючий шаблон сторінок послуг або новий шаблон; коректно відображатися на всіх пристроях. ⸻ 1. SEO Для кожної послуги необхідно забезпечити можливість налаштування: Title Description H1 Canonical URL (бажано) Open Graph (бажано) Сторінки повинні індексуватися пошуковими системами аналогічно сторінкам блогу. ⸻ 1. Список послуг В адмін-панелі реалізувати: список всіх послуг; пошук; редагування; видалення; зміна статусу публікації. ⸻ 1. Важно Реалізувати можливість створювати нові типи SEO-сторінок без доопрацювання коду в майбутньому. через єдиний механізм управління контентом. ⸻ Що очікується від розробника Необхідно проаналізувати існуючу реалізацію блогу та максимально переиспользувати поточну архітектуру для створення нового розділу «Послуги». При відповіді прошу вказати: Яким чином буде реалізовано завдання. Які зміни знадобляться в БД. Оцінку по часу. Вартість робіт. Які технології повинен знати виконавець Обов'язково: Java Spring Boot MySQL Thymeleaf HTML/CSS JavaScript Робота з Linux Ubuntu Бажано: Spring Security SEO-оптимізація серверних сторінок Досвід роботи з CMS та CRUD-модулями Досвід підтримки монолітних Spring Boot проектів

Потрібно провести аудит існуючого сайту, виправити технічні помилки, покращити SEO, оптимізувати швидкість і поетапно доопрацьовувати функціонал. Редизайн не потрібен Що потрібно зробити: Провести технічний аудит сайту. Провести SEO-аудит і запропонувати план покращень. Знайти і усунути технічні помилки. Запропонувати покращення по UX/UI і дизайну. Оптимізувати швидкість завантаження. Виконувати доопрацювання сайту, за необхідності працювати з кодом. В подальшому — підтримка і розвиток сайту. В відповіді вкажіть: посилання на схожі проекти; досвід роботи з WordPress (якщо є); приблизну вартість роботи чи готові до довгострокової співпраці.

Потрібно розробити англомовний корпоративний сайт у тематиці fintech, ліцензованого бізнесу, M&A та юридичного супроводу. Є 10 готових дизайнів сторінок у PNG, а також окремі зображення та логотип. Figma-макетів немає. Не потрібне точне pixel-perfect відтворення, але важливо зберегти загальну стилістику, структуру, типографіку, кольори та логіку блоків. Сайт має бути повноцінно зверстаний, а не зібраний зі скріншотів чи зображень. Сторінки Головна; каталог оферів; сторінка окремого оферу; Legal Services — загальна сторінка послуг; сторінка окремої послуги; список статей; сторінка статті; About; Contact; Submit Inquiry / форма запиту. Що потрібно реалізувати кастомну WordPress-тему без Elementor, Divi, WPBakery та інших візуальних конструкторів; чисту HTML/CSS/JS-верстку; ACF / ACF Pro для зручного редагування контенту через адмінку; окремі типи записів для Offers, Legal Services, Articles; каталог оферів із пошуком, фільтрами, сортуванням і пагінацією; блоки featured offers, related offers, latest insights та related articles; форми звернень із надсиланням заявок на email і базовим захистом від спаму; редагування через адмінку контактів, CTA-блоків, меню, футера та інших повторюваних елементів; базову оптимізацію швидкості: WebP, lazy load, оптимізовані зображення. Mobile-версія Окремих mobile-макетів немає. Потрібно самостійно зробити логічну та зручну адаптацію на основі desktop-референсів. Особливо важливо коректно адаптувати меню, картки, каталог і фільтри оферів, форми, характеристики на сторінках оферів, CTA-блоки та футер. Не потрібен окремий складний mobile-дизайн з нуля, але це має бути не просто зменшена desktop-версія.

# Технічне завдання Потрібно оновити дизайн інтернет-магазину на WordPress/WooCommerce та виконати низку технічних доробок. ## 1. Редизайн сайту Поточний сайт: https://promo.doctor-magnesium.com.ua/ За основу нового дизайну використати: https://demo.templatemonster.com/demo/220581.html ### Вимоги 
Максимально наблизити зовнішній вигляд до референсу.
Адаптувати дизайн під існуючу структуру магазину.
Зберегти весь існуючий функціонал.
Повністю адаптивна верстка (ПК, планшет, мобільні пристрої).
Оптимізувати швидкість завантаження сторінок.
Не погіршити SEO (URL, метадані, індексацію).
 ## 2. WooCommerce Необхідно перевірити та виправити відображення статусів замовлень. На даний момент статуси працюють некоректно. Потрібно забезпечити правильне відображення та обробку стандартних статусів WooCommerce, зокрема: 
Оплачено
В обробці
Виконується
Завершено
Очікує оплату
Скасовано
Повернення коштів
Інші стандартні статуси
 Потрібно знайти причину проблеми (плагін, тема або кастомний код) та виправити її без втрати функціоналу. ## 3. Англійська версія сайту Необхідно реалізувати повноцінну англомовну версію сайту. Вимоги: 
можливість перемикання мов;
англійська версія всіх основних сторінок;
переклад інтерфейсу магазину;
переклад WooCommerce;
переклад картки товару;
коректна робота кошика та оформлення замовлення англійською мовою.
 Можна використовувати відповідний плагін (WPML, Polylang або інший), але бажано запропонувати оптимальне рішення. ## 4. Загальні вимоги 
Перед початком робіт зробити резервну копію сайту.
Усі зміни бажано виконувати спочатку на тестовій копії.
Код має бути акуратним та сумісним з майбутніми оновленнями WordPress і WooCommerce.
Після завершення надати короткий звіт про виконані роботи.
 ## При відповіді прошу вказати 
Орієнтовну вартість.
Терміни виконання.
Досвід роботи з WordPress/WooCommerce.
Приклади схожих проєктів (за наявності).
Який підхід буде використаний для реалізації англомовної версії.