Розробка інтернет магазину

<b>Загальні вимоги:</b><ul><li><p>Верстка має бути адаптивною (mobile-first).</p></li><li><p>Використання HTML5, CSS3 (SCSS) та JavaScript (мінімально, тільки для необхідних інтерактивів).</p></li><li><p>Чистий код із коментарями для полегшення підтримки.</p></li><li><p>Оптимізація завантаження сторінок (Lazy Load для зображень, мінімізація CSS та JS).</p></li><li><p>Використання семантичної верстки.</p></li></ul><b>1. Верстка основного сайту</b><b>1.1. Головна сторінка</b><ul><li><p><b>Хедер</b> (логотип, пошук, кошик, каталог товарів, кнопки авторизації/реєстрації).</p></li><li><p><b>Сайдбар</b> (список категорій товарів, відповідно до референсу).</p></li><li><p><b>Банер</b> (текст + кнопка, можливість редагування контенту).</p></li><li><p><b>Блок "Популярні товари"</b> (товари за категоріями, карточки товарів).</p></li><li><p><b>Футер</b> (посилання на соцмережі, інформація про компанію, підтримка).</p></li></ul><b>1.2. Сторінки категорій</b><ul><li><p><b>Фільтри</b> (бренд, рік випуску, ціна, сортування за популярністю, ціною, новизною тощо).</p></li><li><p><b>Список товарів</b> (зображення, назва, ціна, кнопка "В кошик").</p></li><li><p><b>Футер</b> (ідентичний головній сторінці).</p></li></ul><b>1.3. Сторінка товару</b><ul><li><p><b>Фото товару</b> (галерея зі слайдером).</p></li><li><p><b>Опис товару, характеристики, відгуки покупців</b>.</p></li><li><p><b>Кнопки</b> ("В кошик", "Оформити замовлення", "Залишити відгук").</p></li><li><p><b>Футер</b>.</p></li></ul><b>1.4. Попапи (модальні вікна)</b><ul><li><p><b>Оформлення замовлення</b> (форма, вибір способу оплати, підтвердження).</p></li><li><p><b>Кошик</b> (список доданих товарів, загальна сума, кнопки "Оформити замовлення" і "Продовжити покупки").</p></li><li><p><b>Товар додано в кошик</b> (кнопки "Перейти в кошик" і "Продовжити покупки").</p></li></ul><b>1.5. Ховери</b><ul><li><p>Всі ховери мають відповідати загальному стилю.</p></li><li><p><b>Кнопки</b> – зміна кольору, ефект підсвічування.</p></li><li><p><b>Товари</b> – анімація збільшення або тінь.</p></li></ul><b>2. Верстка адміністративної панелі</b><b>2.1. Головна сторінка адмін-панелі</b><ul><li><p><b>Меню з категоріями</b> (Товари, Категорії, Імпорт бази, Налаштування цін, Лог змін).</p></li><li><p><b>Дашборд</b> з основною інформацією про магазин (загальна кількість товарів, статистика).</p></li></ul><b>2.2. Управління товарами</b><ul><li><p><b>Таблиця зі списком товарів</b> (назва, ціна, категорія, статус, кнопки "Редагувати"/"Видалити").</p></li><li><p><b>Форма редагування товару</b> (назва, опис, ціна, категорія, завантаження фото).</p></li></ul><b>2.3. Управління категоріями</b><ul><li><p><b>Список категорій</b> (можливість додавання, редагування, видалення).</p></li><li><p><b>Вкладені категорії</b> (деревовидна структура).</p></li></ul><b>2.4. Імпорт бази товарів (Brain та Comel)</b><ul><li><p><b>Поле для завантаження файлів</b> (CSV, XML).</p></li><li><p><b>Прогрес-бар імпорту</b>.</p></li></ul><b>2.5. Налаштування цін</b><ul><li><p><b>Поле для введення націнки</b> (% або фіксована сума).</p></li><li><p><b>Поле для встановлення акційної ціни</b>.</p></li></ul><b>2.6. Лог змін</b><ul><li><p><b>Таблиця</b> (дата, хто змінив, що змінилося).</p></li></ul>