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

Загальні вимоги:

• Верстка має бути адаптивною (mobile-first).

• Використання HTML5, CSS3 (SCSS) та JavaScript (мінімально, тільки для необхідних інтерактивів).

• Чистий код із коментарями для полегшення підтримки.

• Оптимізація завантаження сторінок (Lazy Load для зображень, мінімізація CSS та JS).

• Використання семантичної верстки.

1. Верстка основного сайту

1.1. Головна сторінка

• Хедер (логотип, пошук, кошик, каталог товарів, кнопки авторизації/реєстрації).

• Сайдбар (список категорій товарів, відповідно до референсу).

• Банер (текст + кнопка, можливість редагування контенту).

• Блок "Популярні товари" (товари за категоріями, карточки товарів).

• Футер (посилання на соцмережі, інформація про компанію, підтримка).

1.2. Сторінки категорій

• Фільтри (бренд, рік випуску, ціна, сортування за популярністю, ціною, новизною тощо).

• Список товарів (зображення, назва, ціна, кнопка "В кошик").

• Футер (ідентичний головній сторінці).

1.3. Сторінка товару

• Фото товару (галерея зі слайдером).

• Опис товару, характеристики, відгуки покупців.

• Кнопки ("В кошик", "Оформити замовлення", "Залишити відгук").

• Футер.

1.4. Попапи (модальні вікна)

• Оформлення замовлення (форма, вибір способу оплати, підтвердження).

• Кошик (список доданих товарів, загальна сума, кнопки "Оформити замовлення" і "Продовжити покупки").

• Товар додано в кошик (кнопки "Перейти в кошик" і "Продовжити покупки").

1.5. Ховери

• Всі ховери мають відповідати загальному стилю.

• Кнопки – зміна кольору, ефект підсвічування.

• Товари – анімація збільшення або тінь.

2. Верстка адміністративної панелі

2.1. Головна сторінка адмін-панелі

• Меню з категоріями (Товари, Категорії, Імпорт бази, Налаштування цін, Лог змін).

• Дашборд з основною інформацією про магазин (загальна кількість товарів, статистика).

2.2. Управління товарами

• Таблиця зі списком товарів (назва, ціна, категорія, статус, кнопки "Редагувати"/"Видалити").

• Форма редагування товару (назва, опис, ціна, категорія, завантаження фото).

2.3. Управління категоріями

• Список категорій (можливість додавання, редагування, видалення).

• Вкладені категорії (деревовидна структура).

2.4. Імпорт бази товарів (Brain та Comel)

• Поле для завантаження файлів (CSV, XML).

• Прогрес-бар імпорту.

2.5. Налаштування цін

• Поле для введення націнки (% або фіксована сума).

• Поле для встановлення акційної ціни.

2.6. Лог змін

• Таблиця (дата, хто змінив, що змінилося).