ЛР 1: дизайн интернет-магазина, деплой и ответы на контрольные вопросы

2026-09-14 03:11:50 +05:00 · 2026-09-14 03:11:50 +05:00 · fb076b21d6
commit fb076b21d6
parent de01dbf78e
17 changed files with 1756 additions and 696 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,25 +1,6 @@
-# файлы, которые не нужно коммитить в Git
-# это стандартный .gitignore для ASP.NET Core проектов
-
-# папки с результатами сборки
-[Bb]in/
-[Oo]bj/
-
-# папки пакетов NuGet
-*.nuget/
-
-# файлы настроек IDE
+bin/
+obj/
 .vs/
-.idea/
-*.suo
 *.user
-*.userosscache
-*.sln.docstates
-
-# логи и временные файлы
-*.log
-*.tmp
-
-# файлы тестовой базы данных
-*.db
-*.db-journal
+*.suo
+appsettings.Development.json
--- a/Controllers/CatalogController.cs
+++ b/Controllers/CatalogController.cs
@ -1,20 +1,18 @@
-// подключаем базовые классы MVC
+
 using Microsoft.AspNetCore.Mvc;
-// подключаем модель ошибки
+
 using TechnoWorld.Models;

-// контроллер каталога — отвечает за страницу с карточками товаров
 namespace TechnoWorld.Controllers;

 public class CatalogController : Controller
 {
-    // метод Index — страница каталога
-    // вызывается когда пользователь заходит на /Catalog или /Catalog/Index
+
    public IActionResult Index()
    {
-        // ставим заголовок страницы
+
        ViewData["Title"] = "Каталог";
-        // рендерим представление Views/Catalog/Index.cshtml
+
        return View();
    }
 }
--- a/Controllers/HomeController.cs
+++ b/Controllers/HomeController.cs
@ -1,98 +1,81 @@
-// подключаем Activity — он нужен для Diagnosis-страницы (чтобы узнать ID запроса)
+
 using System.Diagnostics;
-// подключаем ASP.NET MVC — здесь Controller, IActionResult и другие классы
+
 using Microsoft.AspNetCore.Mvc;
-// подключаем наши модели — ErrorViewModel и ContactViewModel
+
 using TechnoWorld.Models;

-// пространство имён нашего проекта — все контроллеры лежат в папке Controllers
 namespace TechnoWorld.Controllers;

-// главный контроллер — отвечает за Most страниц: главную, о системе, контакты и ошибки
 public class HomeController : Controller
 {
-    // логгер — через него можно писать сообщения в консоль/логи для отладки
+
    private readonly ILogger<HomeController> _logger;

-    // конструктор — сюда ASP.NET сам подставит логгер (внедрение зависимостей, dependency injection)
    public HomeController(ILogger<HomeController> logger)
    {
        _logger = logger;
    }

-    // метод Index — это главная страница сайта
-    // когда кто-то заходит на localhost:5000/ — вызывается именно этот метод
    public IActionResult Index()
    {
-        // передаём в представление, что заголовок страницы — "Главная"
+
        ViewData["Title"] = "Главная";
-        // возвращаем представление (страницу Views/Home/Index.cshtml)
+
        return View();
    }

-    // метод About — страница "О системе"
    public IActionResult About()
    {
-        // ставим заголовок страницы
+
        ViewData["Title"] = "О системе";
-        // рендерим представление Views/Home/About.cshtml
+
        return View();
    }

-    // метод Contacts — страница "Контакты" с формой обратной связи
-    [HttpGet] // эта страница открывается обычным GET-запросом (просто открыли ссылку)
+    [HttpGet]
    public IActionResult Contacts()
    {
-        // заголовок страницы
+
        ViewData["Title"] = "Контакты";
-        // рендерим представление Views/Home/Contacts.cshtml
+
        return View();
    }

-    // перегрузка Contacts для POST — когда пользователь отправил форму
-    // атрибут [HttpPost] говорит: этот метод обрабатывает POST-запросы
    [HttpPost]
-    // принимаем модель формы — ContactViewModel (там имя, телефон, сообщение)
+
    public IActionResult Contacts(ContactViewModel model)
    {
-        // проверяем, заполнил ли пользователь все обязательные поля
+
        if (ModelState.IsValid)
        {
-            // если форма заполнена нормально — сохраняем сообщение в TempData
-            // TempData — это временная переменная, которая живёт один редирект
-            // потом покажем пользователю "Ваше сообщение принято"
+
            TempData["ContactSuccess"] = "Ваше сообщение принято! Мы свяжемся с вами в ближайшее время.";

-            // перенаправляем обратно на страницу Contacts (PRG-паттерн — Post/Redirect/Get)
-            // это нужно, чтобы при обновлении страницы форма не отправилась заново
            return RedirectToAction(nameof(Contacts));
        }

-        // если валидация не прошла — показываем форму снова с ошибками
        ViewData["Title"] = "Контакты";
        return View(model);
    }

-    // метод Error — страница ошибок (404, 500 и т.д.)
    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
-    // отключаем кеширование этой страницы — чтобы браузер не запоминал ошибку
+
    public IActionResult Error(int? statusCode = null)
    {
-        // создаём модель ошибки и передаём туда ID текущего запроса (чтобы можно было найти в логах)
+
        var model = new ErrorViewModel
        {
            RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier,
-            // передаём код ошибки (404, 500 и т.д.) — он приходит из UseStatusCodePagesWithReExecute
+
            StatusCode = statusCode
        };

-        // передаём заголовок в зависимости от кода ошибки
        if (statusCode == 404)
            ViewData["Title"] = "Страница не найдена";
        else
            ViewData["Title"] = "Ошибка";

-        // рендерим представление Views/Shared/Error.cshtml
        return View(model);
    }
 }
--- a/Models/ContactViewModel.cs
+++ b/Models/ContactViewModel.cs
@ -1,20 +1,16 @@
-// пространство имён моделей — все модели лежат в папке Models
+
 namespace TechnoWorld.Models;

-// модель для формы обратной связи
-// когда пользователь заполняет форму на странице "Контакты" — данные попадают сюда
 public class ContactViewModel
 {
-    // имя пользователя — обязательное поле
+
    [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите ваше имя")]
    public string Name { get; set; } = string.Empty;

-    // телефон — тоже обязательный, добавил атрибут телефона для валидации на клиенте
    [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите телефон")]
    [System.ComponentModel.DataAnnotations.Phone(ErrorMessage = "Некорректный номер телефона")]
    public string Phone { get; set; } = string.Empty;

-    // сообщение — обязательное поле
    [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите сообщение")]
    public string Message { get; set; } = string.Empty;
 }
--- a/Models/ErrorViewModel.cs
+++ b/Models/ErrorViewModel.cs
@ -1,16 +1,12 @@
-// пространство имён моделей
+
 namespace TechnoWorld.Models;

-// расширяем ErrorViewModel — добавляем код ошибки (404, 500 и т.д.)
-// этот класс наследуется от базового ErrorViewModel, который уже есть в шаблоне
 public class ErrorViewModel
 {
-    // ID запроса — нужен для отладки, чтобы найти конкретный запрос в логах
+
    public string? RequestId { get; set; }

-    // свойство — показывать ли ID запроса на странице (если не пустой, то показываем)
    public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);

-    // код HTTP-ошибки (404, 500 и т.д.) — передаётся из контроллера
    public int? StatusCode { get; set; }
 }
--- a/Program.cs
+++ b/Program.cs
@ -1,44 +1,32 @@
-// подключаем пространство имён Microsoft.AspNetCore для базовых классов
+
 using Microsoft.AspNetCore.Mvc;

-// создаём билдер — через него регистрируем сервисы и настраиваем приложение
 var builder = WebApplication.CreateBuilder(args);

-// регистрируем сервисы для MVC — контроллеры, представления, tag helpers
 builder.Services.AddControllersWithViews();

-// собираем приложение из зарегистрированных сервисов
 var app = builder.Build();

-// проверяем, не в продакшене ли мы
 if (!app.Environment.IsDevelopment())
 {
-    // в продакшене перенаправляем ошибки на страницу Error
+
    app.UseExceptionHandler("/Home/Error");
-    // HSTS — браузер будет ходить только по HTTPS (для безопасности)
+
    app.UseHsts();
 }

-// редирект с HTTP на HTTPS — чтобы всё шло по защищённому каналу
 app.UseHttpsRedirection();

-// раздаём статические файлы из папки wwwroot (css, js, картинки и т.д.)
 app.UseStaticFiles();

-// включаем маршрутизацию — приложение умеет понимать URL-ы
 app.UseRouting();

-// пока авторизации нет, но middleware уже на месте (по заданию она будет в ЛР 6)
 app.UseAuthorization();

-// описание страницы 404 — если страница не найдена, покажем красивую ошибку
 app.UseStatusCodePagesWithReExecute("/Home/Error", "?statusCode={0}");

-// задаём маршрут по умолчанию: /{controller}/{action}/{id?}
-// то есть localhost:5000/Home/Index → HomeController → метод Index
 app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

-// запускаем приложение — оно начинает слушать HTTP-запросы
 app.Run();
--- a/README.md
+++ b/README.md
@ -1,70 +1,101 @@
 # ТехноМир — Лабораторная работа №1

-## Информация об авторе
+ASP.NET Core MVC проект интернет-магазина техники.

- **ФИО:** Борисов Иван Сергеевич
- **Группа:** РПО 23/1
- **Год:** 2026
+**Автор:** Борисов Иван Сергеевич, РПО 23/1, 2026
+
+---

 ## Описание проекта

-Интернет-магазин техники «ТехноМир» — веб-приложение на ASP.NET Core MVC.
-Создано в рамках лабораторной работы №1 по дисциплине "Разработка программного обеспечения".
+Интернет-магазин «ТехноМир» — многостраничный сайт для продажи компьютерной и мобильной техники: ноутбуки, смартфоны, планшеты и наушники.

 ### Реализованные страницы

 | Страница       | Описание                                                        |
-|----------------|------------------------------------------------------------------|
-| **Главная**    | Баннер, описание сервиса, 3 преимущества, кнопка «Перейти в каталог» |
-| **Каталог**    | 4 карточки товаров-заглушки (ноутбук, смартфон, планшет, наушники) |
-| **О системе**  | Описание сервиса, роли пользователей (Гость, Покупатель, Админ)   |
-| **Контакты**   | Адрес, телефон, форма обратной связи с валидацией                 |
-| **404**        | Красивая страница ошибки с ссылкой на главную                     |
+|----------------|-----------------------------------------------------------------|
+| **Главная**    | Промо-баннер, преимущества магазина, хиты продаж, CTA           |
+| **Каталог**    | 4 карточки товаров с характеристиками и кнопкой «Купить»        |
+| **О системе**  | Описание сервиса, роли пользователей, план развития             |
+| **Контакты**   | Контактная информация, форма обратной связи с валидацией       |
+| **404**        | Страница ошибки с кнопкой возврата на главную                   |

-### Технологии
+### Технический стек

- ASP.NET Core 8.0 (MVC)
- Bootstrap 5.3 (CDN)
- Кастомная CSS-тема с переключением светлой/тёмной темы
- Tag Helpers
- TempData для сообщений
- Адаптивная вёрстка (1200 px и 375 px)
+- **ASP.NET Core MVC** (.NET 10)
+- **Bootstrap 5.3** (CDN) — сетка, меню, формы
+- **Bootstrap Icons** (CDN) — иконки интерфейса
+- HTML, CSS, JavaScript
+- Светлая / тёмная тема (localStorage)

-## Как запустить
+### Функциональность ЛР №1

-1. Установить [.NET 8 SDK](https://dotnet.microsoft.com/download/dotnet/8.0)
-2. Открыть терминал в папке проекта
-3. Выполнить команду:
+- Маршрутизация: `/{controller=Home}/{action=Index}/{id?}`
+- Tag Helpers: `asp-controller`, `asp-action`, `asp-for`, `asp-validation-for`, `asp-append-version`
+- Клиентская и серверная валидация формы `ContactViewModel` (`[Required]`, `[Phone]`)
+- PRG-паттерн + `TempData` для отображения результата POST-запроса
+- Переключение темы через `data-theme` на `<html>` с ранней блокировкой от мигания
+- Open Graph мета-теги, favicon
+- Кастомная страница ошибки через `UseStatusCodePagesWithReExecute`
+
+### Запуск

 ```bash
-dotnet run
+dotnet run --urls http://localhost:5000
 ```

-4. Открыть в браузере: `https://localhost:5000` или `http://localhost:5000`
+---

-## Структура проекта
+## Контрольные вопросы

+### 1. Чем ASP.NET Core отличается от классического ASP.NET Framework?
+
+ASP.NET Core — это полностью переписанный, модульный кросс-платформенный фреймворк, в то время как классический ASP.NET Framework работает только на Windows и зависит от IIS.
+
+Основные отличия:
+- **Кросс-платформенность:** ASP.NET Core запускается на Windows, Linux и macOS через встроенный Kestrel-сервер, не зависящий от IIS.
+- **Модульность:** каждая функция подключается как отдельный NuGet-пакет (Middleware), а не встроена в ядро. Вместо тяжёлого System.Web используется минимальный pipeline из компонентов.
+- **Производительность:** Kestrel оптимизирован под асинхронные сценарии и обрабатывает запросы значительно быстрее, чем IIS + ASP.NET.
+- **Среда выполнения:** приложение может быть self-contained (без установки .NET Runtime на целевой машине) или framework-dependent. Модель деплоя более гибкая: Docker-контейнеры, systemd-юниты, консоль.
+- **Конфигурация:** вместо web.config используется appsettings.json + environment variables, что упрощает управление параметрами в разных средах.
+
+### 2. Что такое middleware и в каком порядке они выполняются при обработке запроса?
+
+Middleware — это компоненты, образующие конвейер (pipeline), через который проходит каждый HTTP-запрос. Каждый middleware может обработать запрос, передать его дальше или вернуть ответ, не передавая дальше.
+
+Порядок важен. Типичный pipeline:
+
+1. **ExceptionHandler** — перехватывает необработанные исключения
+2. **HSTS** — принудительное HTTPS в продакшене
+3. **HttpsRedirection** — перенаправление HTTP на HTTPS
+4. **UseStaticFiles** — раздача статических файлов из `wwwroot`
+5. **Routing** — сопоставление URL с маршрутами
+6. **UseEndpoints** — вызов соответствующего контроллера/действия
+
+Для 404 используется `UseStatusCodePagesWithReExecute`: он перехватывает ответ с кодом 404/500 и перезапускает обработку, передавая код ошибки параметром.
+
+### 3. Зачем нужны `_ViewStart.cshtml` и `_ViewImports.cshtml`?
+
+**`_ViewStart.cshtml`** выполняется перед каждым представлением и задаёт общие настройки. Здесь он определяет, что все страницы автоматически используют макет `_Layout.cshtml`.
+
+**`_ViewImports.cshtml`** определяет общие `using`-директивы и подключает Tag Helpers для всех представлений в текущей папке. Здесь подключаются:
+- `@using TechnoWorld` — доступ к моделям без полного namespace.
+- `@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers` — включение Tag Helpers.
+
+### 4. Откуда берутся CSS/JS/изображения и как они подключаются через Razor?
+
+Файлы хранятся в `wwwroot/` проекта и подключаются через Razor:
+```html
+<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+<script src="~/js/site.js" asp-append-version="true"></script>
 ```
-TechnoWorld/
-├── Controllers/
-│   ├── HomeController.cs      — главная, о системе, контакты, ошибки
-│   └── CatalogController.cs   — каталог товаров
-├── Models/
-│   ├── ErrorViewModel.cs      — модель ошибки
-│   └── ContactViewModel.cs    — модель формы обратной связи
-├── Views/
-│   ├── Home/
-│   │   ├── Index.cshtml       — главная страница
-│   │   ├── About.cshtml       — о системе
-│   │   └── Contacts.cshtml    — контакты с формой
-│   ├── Catalog/
-│   │   └── Index.cshtml       — каталог товаров
-│   └── Shared/
-│       ├── _Layout.cshtml     — общий макет (навбар + футер)
-│       └── Error.cshtml       — страница ошибки 404
-├── wwwroot/
-│   ├── css/site.css           — кастомные стили + тёмная тема
-│   └── js/site.js             — скрипт переключения темы
-├── Program.cs                 — точка входа приложения
-└── TechnoWorld.csproj         — файл проекта
-```
+Тег `~` разрешается в корень `wwwroot`. Атрибут `asp-append-version` добавляет хеш для инвалидации кеша браузера. Библиотеки подключаются через CDN (Bootstrap) или локально из `wwwroot/lib/`.
+
+### 5. Что такое Tag Helper и почему он удобнее обычного HTML?
+
+Tag Helper — серверная замена HTML-тегов с атрибутами, начинающимися с `asp-`. Преимущества:
+- **Автоматическая генерация URL:** `<a asp-controller="Home" asp-action="Index">` вместо ручного прописывания пути.
+- **Валидация:** `<input asp-for="Name" />` автоматически генерирует атрибуты для клиентской валидации.
+- **Безопасность:** экранирование значений, защита от XSS.
+- **Инвалидация кеша:** `asp-append-version="true"` без написания хелпера.
+- **Читаемость:** разметка выглядит как чистый HTML с понятными серверными атрибутами.
--- a/Views/Catalog/Index.cshtml
+++ b/Views/Catalog/Index.cshtml
@ -1,100 +1,85 @@
-@{
+@{
    ViewData["Title"] = "Каталог";
 }

-@* заголовок страницы *@
-<h1 class="mb-4">Каталог товаров</h1>
+<div class="page-head">
+    <span class="section-overline">Каталог</span>
+    <h1 class="page-title">Каталог техники</h1>
+    <p class="page-subtitle">4 товара · Ноутбуки, смартфоны, планшеты, наушники</p>
+</div>

-@* описание — по заданию: 4 карточки-заглушки *@
-<p class="text-muted mb-4">
-    Выберите товар для подробной информации. Пока что это заглушки —
-    позже карточки будут заполняться данными из базы.
-</p>
+<div class="row g-3 g-md-4">

-@* строка с четырьмя карточками *@
-@* g-4 — отступы между колонками 1.5rem *@
-<div class="row g-4">
    
-    @* === КАРТОЧКА 1: НОУТБУК === *@
-    @* col-lg-3 — на больших экранах 4 карточки в ряд (3/12 = 25%) *@
-    @* col-md-6 — на средних — 2 в ряд *@
-    @* col-12 — на маленьких — 1 в ряд *@
    <div class="col-lg-3 col-md-6 col-12">
-        <div class="card h-100 shadow-sm product-card">
-            @* заглушка для картинки — вместо реального фото просто серый блок *@
-            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
-                <span class="fs-1">&#128187;</span>
-            </div>
-            <div class="card-body d-flex flex-column">
-                <h5 class="card-title fw-bold">Ноутбук ProBook 15</h5>
-                <p class="card-text text-muted small flex-grow-1">
-                    15.6", Intel Core i5, 8 ГБ RAM, 512 ГБ SSD
-                </p>
-                <div class="d-flex justify-content-between align-items-center mt-2">
-                    @* цена *@
-                    <span class="fw-bold fs-5 text-primary">45 990 &#8381;</span>
-                    @* кнопка "Подробнее" — заглушка *@
-                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
+        <article class="product-card">
+            <span class="product-card__badge badge-hit">Хит продаж</span>
+            <div class="product-card__media"><i class="bi bi-laptop"></i></div>
+            <div class="product-card__body">
+                <h5 class="product-card__name">Ноутбук Pro 15</h5>
+                <div class="product-card__specs">
+                    <span>Экран 15.6" · 8 ГБ RAM · SSD 512 ГБ</span>
                </div>
+                <div class="product-card__footer">
+                    <span class="product-card__price">89 990 &#8381;</span>
+                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
+        </article>
    </div>

-    @* === КАРТОЧКА 2: СМАРТФОН === *@
+    
    <div class="col-lg-3 col-md-6 col-12">
-        <div class="card h-100 shadow-sm product-card">
-            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
-                <span class="fs-1">&#128241;</span>
-            </div>
-            <div class="card-body d-flex flex-column">
-                <h5 class="card-title fw-bold">Смартфон Nova X</h5>
-                <p class="card-text text-muted small flex-grow-1">
-                    6.5", AMOLED, 128 ГБ, 48 Мп камера
-                </p>
-                <div class="d-flex justify-content-between align-items-center mt-2">
-                    <span class="fw-bold fs-5 text-primary">29 990 &#8381;</span>
-                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
+        <article class="product-card">
+            <span class="product-card__badge badge-hit">Хит продаж</span>
+            <div class="product-card__media"><i class="bi bi-phone"></i></div>
+            <div class="product-card__body">
+                <h5 class="product-card__name">Смартфон Nova X</h5>
+                <div class="product-card__specs">
+                    <span>Экран 6.7" · Камера 108 Мп · 128 ГБ</span>
                </div>
+                <div class="product-card__footer">
+                    <span class="product-card__price">29 990 &#8381;</span>
+                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
+        </article>
    </div>

-    @* === КАРТОЧКА 3: ПЛАНШЕТ === *@
+    
    <div class="col-lg-3 col-md-6 col-12">
-        <div class="card h-100 shadow-sm product-card">
-            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
-                <span class="fs-1">&#128246;</span>
-            </div>
-            <div class="card-body d-flex flex-column">
-                <h5 class="card-title fw-bold">Планшет Tab Lite</h5>
-                <p class="card-text text-muted small flex-grow-1">
-                    10.1", 64 ГБ, Wi-Fi, идеален для учёбы
-                </p>
-                <div class="d-flex justify-content-between align-items-center mt-2">
-                    <span class="fw-bold fs-5 text-primary">18 490 &#8381;</span>
-                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
+        <article class="product-card">
+            <span class="product-card__badge badge-new">Новинка</span>
+            <div class="product-card__media"><i class="bi bi-tablet"></i></div>
+            <div class="product-card__body">
+                <h5 class="product-card__name">Планшет Tab Lite</h5>
+                <div class="product-card__specs">
+                    <span>Экран 11" · 4 ГБ RAM · 128 ГБ</span>
                </div>
+                <div class="product-card__footer">
+                    <span class="product-card__price">18 490 &#8381;</span>
+                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
+        </article>
    </div>

-    @* === КАРТОЧКА 4: НАУШНИКИ === *@
+    
    <div class="col-lg-3 col-md-6 col-12">
-        <div class="card h-100 shadow-sm product-card">
-            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
-                <span class="fs-1">&#127911;</span>
-            </div>
-            <div class="card-body d-flex flex-column">
-                <h5 class="card-title fw-bold">Наушники SoundMax</h5>
-                <p class="card-text text-muted small flex-grow-1">
-                    Накладные, Bluetooth 5.0, шумоподавление, 40 ч
-                </p>
-                <div class="d-flex justify-content-between align-items-center mt-2">
-                    <span class="fw-bold fs-5 text-primary">3 990 &#8381;</span>
-                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
+        <article class="product-card">
+            <span class="product-card__badge badge-hot">Выгодно</span>
+            <div class="product-card__media"><i class="bi bi-headphones"></i></div>
+            <div class="product-card__body">
+                <h5 class="product-card__name">Наушники SoundMax</h5>
+                <div class="product-card__specs">
+                    <span>Bluetooth 5.3 · ANC · 40 ч автономной работы</span>
                </div>
+                <div class="product-card__footer">
+                    <span class="product-card__price">3 990 &#8381;</span>
+                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
+        </article>
    </div>

 </div>
--- a/Views/Home/About.cshtml
+++ b/Views/Home/About.cshtml
@ -1,61 +1,92 @@
-@{
+@{
    ViewData["Title"] = "О системе";
 }

-@* заголовок страницы *@
-<h1 class="mb-4">О системе «ТехноМир»</h1>
+<div class="page-head">
+    <span class="section-overline">О системе</span>
+    <h1 class="page-title">О системе «ТехноМир»</h1>
+    <p class="page-subtitle">
+        Интернет-магазин компьютерной и мобильной техники.
+        Проект развивается в рамках учебных лабораторных работ.
+    </p>
+</div>

-@* описание для кого сервис *@
-<section class="mb-4">
-    <h3>Для кого этот сервис?</h3>
-    <p>
-        «ТехноМир» — это интернет-магазин компьютерной и мобильной техники.
-        Сервис предназначен для всех, кто хочет купить качественную технику
-        по доступным ценам: от обычных покупателей до компаний, которые закупают
+<section class="mb-5">
+    <div class="about-panel">
+        <p class="about-text">
+            «ТехноМир» предназначен для всех, кто хочет купить качественную технику
+            по честным ценам: от обычных покупателей до компаний, которые закупают
            технику для сотрудников.
        </p>
+    </div>
 </section>

-@* описание ролей *@
-<section class="mb-4">
-    <h3>Роли пользователей</h3>
-    @* таблица с ролями — сделана через Bootstrap table *@
-    <table class="table table-bordered table-hover">
-        @* шапка таблицы *@
-        <thead class="table-primary">
-            <tr>
-                <th>Роль</th>
-                <th>Описание</th>
-            </tr>
-        </thead>
-        <tbody>
-            @* строка — Гость *@
-            <tr>
-                <td><strong>Гость</strong></td>
-                <td>Пользователь без аккаунта. Может смотреть каталог и главную страницу.</td>
-            </tr>
-            @* строка — Покупатель *@
-            <tr>
-                <td><strong>Покупатель</strong></td>
-                <td>Зарегистрированный пользователь. Может добавлять товары в корзину и оформлять заказы.</td>
-            </tr>
-            @* строка — Администратор *@
-            <tr>
-                <td><strong>Администратор</strong></td>
-                <td>Управляет каталогом: добавляет, редактирует и удаляет товары. Управляет заказами.</td>
-            </tr>
-        </tbody>
-    </table>
+<section class="mb-5">
+    <h2 class="block-title">Роли пользователей</h2>
+
+    <div class="row g-3 g-md-4">
+        
+        <div class="col-md-4">
+            <div class="role">
+                <span class="role__icon"><i class="bi bi-person"></i></span>
+                <h3 class="role__title">Гость</h3>
+                <p class="role__text">Просмотр каталога и главной страницы без регистрации.</p>
+            </div>
+        </div>
+        
+        <div class="col-md-4">
+            <div class="role">
+                <span class="role__icon"><i class="bi bi-bag"></i></span>
+                <h3 class="role__title">Покупатель</h3>
+                <p class="role__text">Работа с товарами и заказами после регистрации.</p>
+            </div>
+        </div>
+        
+        <div class="col-md-4">
+            <div class="role">
+                <span class="role__icon"><i class="bi bi-shield-lock"></i></span>
+                <h3 class="role__title">Администратор</h3>
+                <p class="role__text">Управление каталогом, товарами и заказами.</p>
+            </div>
+        </div>
+    </div>
 </section>

-@* дополнительная информация *@
 <section>
-    <h3>Что планируется</h3>
-    <ul>
-        <li>Каталог товаров с фильтрацией и сортировкой (уже готово в базовой форме)</li>
-        <li>Корзина и оформление заказов</li>
-        <li>Личный кабинет покупателя</li>
-        <li>Панель администратора для управления товарами</li>
-        <li>Система авторизации и аутентификации (ЛР 6)</li>
+    <h2 class="block-title">План развития</h2>
+
+    <ul class="steps">
+        
+        <li class="steps__item">
+            <span class="steps__num">01</span>
+            <div>
+                <div class="steps__name">Авторизация</div>
+                <div class="steps__desc">Вход и регистрация с ролями пользователей</div>
+            </div>
+        </li>
+        
+        <li class="steps__item">
+            <span class="steps__num">02</span>
+            <div>
+                <div class="steps__name">Личный кабинет</div>
+                <div class="steps__desc">Профиль покупателя и история обращений</div>
+            </div>
+        </li>
+        
+        <li class="steps__item">
+            <span class="steps__num">03</span>
+            <div>
+                <div class="steps__name">Заказы</div>
+                <div class="steps__desc">Корзина и оформление заказов</div>
+            </div>
+        </li>
+        
+        <li class="steps__item">
+            <span class="steps__num">04</span>
+            <div>
+                <div class="steps__name">Администрирование</div>
+                <div class="steps__desc">Панель управления каталогом</div>
+            </div>
+        </li>
    </ul>
 </section>
--- a/Views/Home/Contacts.cshtml
+++ b/Views/Home/Contacts.cshtml
@ -1,73 +1,108 @@
-@* подключаем модель ContactViewModel — она нужна для Tag Helpers (asp-for) *@
+
@model ContactViewModel
@{
    ViewData["Title"] = "Контакты";
 }

-@* заголовок страницы *@
-<h1 class="mb-4">Контакты</h1>
+<div class="page-head">
+    <span class="section-overline">Контакты</span>
+    <h1 class="page-title">Свяжитесь с нами</h1>
+    <p class="page-subtitle">Ответим в ближайшее время в рабочие часы.</p>
+</div>

-@* === КОНТАКТНАЯ ИНФОРМАЦИЯ (адрес, телефон) === *@
-<section class="mb-4">
-    <div class="row">
-        @* левая колонка — адрес и телефон *@
-        <div class="col-md-6 mb-3">
-            <h3>Наш адрес</h3>
-            <p>г. Москва, ул. Примерная, д. 42, офис 101</p>
-            <h3>Телефон</h3>
-            <p>+7 (999) 123-45-67</p>
-            <h3>Электронная почта</h3>
-            <p>info@technomir.ru</p>
+<div class="contacts-panel">
+    <div class="row g-4">
+
+        
+        <div class="col-md-5">
+            <h2 class="form-heading">Наши контакты</h2>
+
+            
+            <div class="contact-row">
+                <span class="contact-row__icon"><i class="bi bi-geo-alt"></i></span>
+                <div>
+                    <div class="contact-row__label">Адрес</div>
+                    <p class="contact-row__value">г. Москва, ул. Примерная, д. 42, офис 101</p>
+                </div>
            </div>
-        @* правая колонка — форма обратной связи *@
-        <div class="col-md-6">
-            <h3>Напишите нам</h3>

-            @* проверяем, есть ли сообщение об успехе в TempData *@
-            @* TempData доступен только один раз — после чтения он удаляется *@
+            
+            <div class="contact-row">
+                <span class="contact-row__icon"><i class="bi bi-telephone"></i></span>
+                <div>
+                    <div class="contact-row__label">Телефон</div>
+                    <p class="contact-row__value">
+                        <a href="tel:+79991234567">+7 (999) 123-45-67</a>
+                    </p>
+                </div>
+            </div>
+
+            
+            <div class="contact-row">
+                <span class="contact-row__icon"><i class="bi bi-envelope"></i></span>
+                <div>
+                    <div class="contact-row__label">Почта</div>
+                    <p class="contact-row__value">
+                        <a href="mailto:info@technomir.ru">info@technomir.ru</a>
+                    </p>
+                </div>
+            </div>
+
+            
+            <div class="contact-row">
+                <span class="contact-row__icon"><i class="bi bi-clock"></i></span>
+                <div>
+                    <div class="contact-row__label">Режим работы</div>
+                    <p class="contact-row__value">Пн–Вс: 10:00 — 20:00</p>
+                </div>
+            </div>
+        </div>
+
+        
+        <div class="col-md-7">
+            <h2 class="form-heading">Напишите нам</h2>
+
+            
            @if (TempData["ContactSuccess"] != null)
            {
-                @* показываем зелёное уведомление об успехе *@
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    @TempData["ContactSuccess"]
-                    @* кнопка закрытия уведомления (крестик) *@
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
                </div>
            }

-            @* форма обратной связи *@
-            @* asp-action="Contacts" — при отправке данные уйдут на метод Contacts (POST) контроллера Home *@
-            @* method="post" — данные отправляются POST-запросом (не в URL, а в теле запроса) *@
+            
            <form asp-action="Contacts" method="post">
-                @* поле "Имя" *@
+                
                <div class="mb-3">
-                    @* label with asp-for — Tag Helper, который генерирует <label for="Name"> *@
                    <label asp-for="Name" class="form-label">Ваше имя</label>
-                    @* input with asp-for — генерирует <input id="Name" name="Name" ...> *@
-                    @* class="form-control" — стиль Bootstrap для полей ввода *@
                    <input asp-for="Name" class="form-control" placeholder="Иван Иванов" />
-                    @* span для отображения ошибки валидации (если имя не заполнено) *@
-                    <span asp-validation-for="Name" class="text-danger"></span>
+                    
+                    <span asp-validation-for="Name" class="field-validation-error"></span>
                </div>

-                @* поле "Телефон" *@
+                
                <div class="mb-3">
                    <label asp-for="Phone" class="form-label">Телефон</label>
                    <input asp-for="Phone" class="form-control" placeholder="+7 (999) 123-45-67" />
-                    <span asp-validation-for="Phone" class="text-danger"></span>
+                    <span asp-validation-for="Phone" class="field-validation-error"></span>
                </div>

-                @* поле "Сообщение" *@
+                
                <div class="mb-3">
                    <label asp-for="Message" class="form-label">Сообщение</label>
-                    @* textarea — многострочное поле ввода *@
-                    <textarea asp-for="Message" class="form-control" rows="4" placeholder="Напишите ваше сообщение..."></textarea>
-                    <span asp-validation-for="Message" class="text-danger"></span>
+                    <textarea asp-for="Message" class="form-control" rows="4" placeholder="Ваш вопрос или пожелание..."></textarea>
+                    <span asp-validation-for="Message" class="field-validation-error"></span>
                </div>

-                @* кнопка отправки формы *@
                <button type="submit" class="btn btn-primary">Отправить сообщение</button>
            </form>
        </div>
    </div>
-</section>
+</div>
+
+@section Scripts {
+    <script src="~/lib/jquery/dist/jquery.min.js"></script>
+    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
+    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
+}
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@ -1,75 +1,153 @@
-@*告诉他布局使用 _Layout.cshtml*@
-@{
+@{
    ViewData["Title"] = "Главная";
 }

-@* === ГЛАВНЫЙ БАННЕР (JUMBOTRON) === *@
-@* jumbotron — большой блок-баннер вверху страницы *@
-<section class="hero-section text-center text-white py-5 mb-5 rounded-3">
-    <div class="container py-4">
-        @* главное заголовок сайта *@
-        <h1 class="display-4 fw-bold">Добро пожаловать в ТехноМир!</h1>
-        @* короткое описание — о чём этот сайт *@
-        <p class="lead mt-3 mb-4 mx-auto" style="max-width: 650px;">
-            Мы поможем вам найти технику по лучшим ценам.
-            Ноутбуки, смартфоны, планшеты и наушники — всё в одном месте.
+<section class="promo-banner">
+    <div>
+        <h1 class="promo-banner__title">ТехноМир — техника по честным ценам</h1>
+        <p class="promo-banner__text">
+            Ноутбуки, смартфоны, планшеты и наушники.
+            Бесплатная доставка от 5 000 &#8381; по всей России.
        </p>
-        @* кнопка-призыв к действию — перейти в каталог *@
-        @* asp-controller="Catalog" — ссылка на контроллер каталога *@
-        <a asp-controller="Catalog" asp-action="Index" class="btn btn-light btn-lg px-4">
-            Перейти в каталог &rarr;
-        </a>
+        <a asp-controller="Catalog" asp-action="Index" class="btn btn-primary">Перейти в каталог</a>
+    </div>
+    
+    <div class="promo-banner__icon">
+        <i class="bi bi-laptop"></i>
    </div>
 </section>

-@* === ТРИ ПРЕИМУЩЕСТВА === *@
-@* по заданию: 3 преимущества сервиса *@
-<section class="mb-5">
-    <h2 class="text-center mb-4">Почему выбирают нас?</h2>
-    @* row — строка Bootstrap, col-md-4 — три колонки по 4/12 = по трети экрана *@
-    @* на мобильных они встанут друг под друга (автоматически) *@
-    <div class="row g-4">
-        @* === ПРЕИМУЩЕСТВО 1 === *@
-        <div class="col-md-4">
-            <div class="card h-100 text-center border-0 shadow-sm advantage-card">
-                <div class="card-body py-4">
-                    @* эмодзи-иконка *@
-                    <div class="fs-1 mb-3">&#128293;</div>
-                    @* заголовок карточки *@
-                    <h5 class="card-title fw-bold">Низкие цены</h5>
-                    @* описание *@
-                    <p class="card-text text-muted">
-                        Мы предлагаем лучшие цены на рынке.
-                        Сравнивайте и убеждайтесь сами!
-                    </p>
+<div class="advantages">
+    
+    <div class="advantage">
+        <span class="advantage__icon tint-blue"><i class="bi bi-truck"></i></span>
+        <div>
+            <p class="advantage__title">Доставка от 1 дня</p>
+            <p class="advantage__text">По Москве и области</p>
        </div>
    </div>
-        </div>
-        @* === ПРЕИМУЩЕСТВО 2 === *@
-        <div class="col-md-4">
-            <div class="card h-100 text-center border-0 shadow-sm advantage-card">
-                <div class="card-body py-4">
-                    <div class="fs-1 mb-3">&#128666;</div>
-                    <h5 class="card-title fw-bold">Быстрая доставка</h5>
-                    <p class="card-text text-muted">
-                        Доставим ваш заказ за 1-3 дня по всей России.
-                        Бесплатно при заказе от 5000 рублей.
-                    </p>
+
+    
+    <div class="advantage">
+        <span class="advantage__icon tint-green"><i class="bi bi-shield-check"></i></span>
+        <div>
+            <p class="advantage__title">Гарантия на весь товар</p>
+            <p class="advantage__text">Официальная гарантия</p>
        </div>
    </div>
-        </div>
-        @* === ПРЕИМУЩЕСТВО 3 === *@
-        <div class="col-md-4">
-            <div class="card h-100 text-center border-0 shadow-sm advantage-card">
-                <div class="card-body py-4">
-                    <div class="fs-1 mb-3">&#128736;</div>
-                    <h5 class="card-title fw-bold">Гарантия и сервис</h5>
-                    <p class="card-text text-muted">
-                        На всю технику действует гарантия от 12 месяцев.
-                        Официальный сервисный центр.
-                    </p>
+
+    
+    <div class="advantage">
+        <span class="advantage__icon tint-amber"><i class="bi bi-arrow-return-left"></i></span>
+        <div>
+            <p class="advantage__title">Возврат 14 дней</p>
+            <p class="advantage__text">Без вопросов</p>
        </div>
    </div>
+
+    
+    <div class="advantage">
+        <span class="advantage__icon tint-violet"><i class="bi bi-credit-card"></i></span>
+        <div>
+            <p class="advantage__title">Удобная оплата</p>
+            <p class="advantage__text">Картой, наличными, рассрочка</p>
+        </div>
+    </div>
+</div>
+
+<section class="home-section">
+    <div class="section-head">
+        <div>
+            <span class="section-overline">Популярное</span>
+            <h2 class="section-title">Хиты продаж</h2>
+        </div>
+        <a class="section-link" asp-controller="Catalog" asp-action="Index">Все товары &rarr;</a>
+    </div>
+
+    <div class="row g-3 g-md-4">
+        
+        <div class="col-lg-3 col-md-6 col-12">
+            <article class="product-card">
+                
+                <span class="product-card__badge badge-hit">Хит продаж</span>
+                
+                <div class="product-card__media"><i class="bi bi-laptop"></i></div>
+                <div class="product-card__body">
+                    <h5 class="product-card__name">Ноутбук Pro 15</h5>
+                    
+                    <div class="product-card__specs">
+                        <span>Экран 15.6" · 8 ГБ RAM · SSD 512 ГБ</span>
+                    </div>
+                    <div class="product-card__footer">
+                        <span class="product-card__price">89 990 &#8381;</span>
+                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
+                    </div>
+                </div>
+            </article>
+        </div>
+
+        
+        <div class="col-lg-3 col-md-6 col-12">
+            <article class="product-card">
+                <span class="product-card__badge badge-hit">Хит продаж</span>
+                <div class="product-card__media"><i class="bi bi-phone"></i></div>
+                <div class="product-card__body">
+                    <h5 class="product-card__name">Смартфон Nova X</h5>
+                    <div class="product-card__specs">
+                        <span>Экран 6.7" · Камера 108 Мп · 128 ГБ</span>
+                    </div>
+                    <div class="product-card__footer">
+                        <span class="product-card__price">29 990 &#8381;</span>
+                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
+                    </div>
+                </div>
+            </article>
+        </div>
+
+        
+        <div class="col-lg-3 col-md-6 col-12">
+            <article class="product-card">
+                <span class="product-card__badge badge-new">Новинка</span>
+                <div class="product-card__media"><i class="bi bi-tablet"></i></div>
+                <div class="product-card__body">
+                    <h5 class="product-card__name">Планшет Tab Lite</h5>
+                    <div class="product-card__specs">
+                        <span>Экран 11" · 4 ГБ RAM · 128 ГБ</span>
+                    </div>
+                    <div class="product-card__footer">
+                        <span class="product-card__price">18 490 &#8381;</span>
+                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
+                    </div>
+                </div>
+            </article>
+        </div>
+
+        
+        <div class="col-lg-3 col-md-6 col-12">
+            <article class="product-card">
+                <span class="product-card__badge badge-hot">Выгодно</span>
+                <div class="product-card__media"><i class="bi bi-headphones"></i></div>
+                <div class="product-card__body">
+                    <h5 class="product-card__name">Наушники SoundMax</h5>
+                    <div class="product-card__specs">
+                        <span>Bluetooth 5.3 · ANC · 40 ч</span>
+                    </div>
+                    <div class="product-card__footer">
+                        <span class="product-card__price">3 990 &#8381;</span>
+                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
+                    </div>
+                </div>
+            </article>
        </div>
    </div>
 </section>
+
+<section class="home-section">
+    <div class="cta">
+        <h2 class="cta__title">Не нашли нужное?</h2>
+        <p class="cta__text">
+            Напишите нам — поможем выбрать технику под ваши задачи и бюджет.
+        </p>
+        <a asp-controller="Home" asp-action="Contacts" class="btn btn-primary">Перейти к контактам</a>
+    </div>
+</section>
--- a/Views/Shared/Error.cshtml
+++ b/Views/Shared/Error.cshtml
@ -1,48 +1,42 @@
-@* подключаем модель ErrorViewModel — она нужна чтобы вывести ID ошибки *@
+
@model ErrorViewModel
@{
-    // ставим заголовок страницы — "Ошибка" (или "Страница не найдена", зависит от контроллера)
    ViewData["Title"] = "Ошибка";
 }

-@* === СТРАНИЦА ОШИБКИ 404 / ДРУГИЕ ОШИБКИ === *@
+<div class="error-page">

-<div class="text-center py-5">
-    @* большая эмодзи-иллюстрация *@
-    <div class="fs-1 mb-3">&#128533;</div>
    
-    @* проверяем, есть ли код ошибки и равен ли он 404 *@
    @if (Model?.StatusCode == 404)
    {
-        @* если 404 — показываем сообщение "Страница не найдена" *@
-        <h1 class="display-5 fw-bold mb-3">404 — Страница не найдена</h1>
-        <p class="lead text-muted mb-4">
-            К сожалению, такой страницы на нашем сайте нет.
+        <div class="error-code">404</div>
+        <h1 class="error-title">Страница не найдена</h1>
+        <p class="error-text">
+            Такой страницы нет на сайте.
            Возможно, она была перемещена или удалена.
        </p>
-        @* кнопка возврата на главную *@
-        <a asp-controller="Home" asp-action="Index" class="btn btn-primary btn-lg">
-            &larr; Вернуться на главную
-        </a>
    }
    else
    {
-        @* для всех остальных ошибок (500 и т.д.) *@
-        <h1 class="display-5 fw-bold mb-3">Что-то пошло не так</h1>
-        <p class="lead text-muted mb-4">
-            Произошла ошибка при обработке вашего запроса.
-            Попробуйте вернуться на главную или повторить попытку позже.
+        
+        <div class="error-code">Ошибка</div>
+        <h1 class="error-title">Что-то пошло не так</h1>
+        <p class="error-text">
+            Попробуйте вернуться на главную
+            или повторить попытку позже.
        </p>
-        <a asp-controller="Home" asp-action="Index" class="btn btn-primary btn-lg">
-            &larr; Вернуться на главную
-        </a>
    }

-    @* показываем ID запроса — полезно при обращении в поддержку *@
+    
+    <a asp-controller="Home" asp-action="Index" class="btn btn-primary">
+        Вернуться на главную
+    </a>
+
+    
    @if (Model?.ShowRequestId == true)
    {
-        <p class="text-muted mt-3 small">
-            ID запроса: <code>@Model.RequestId</code>
+        <p class="error-request-id">
+            Request ID: <code>@Model.RequestId</code>
        </p>
    }
 </div>
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@ -1,124 +1,217 @@
-<!DOCTYPE html>
+
+@{
+    var currentController = ViewContext.RouteData.Values["controller"]?.ToString();
+    var currentAction = ViewContext.RouteData.Values["action"]?.ToString();
+}
+
+@{
+    string ActiveClass(string controller, string action)
+    {
+        return (currentController == controller && currentAction == action) ? "nav-link--active" : "";
+    }
+}
+
+<!DOCTYPE html>
 <html lang="ru">
 <head>
-    @* кодировка UTF-8 — чтобы русские буквы отображались корректно *@
+    
    <meta charset="utf-8" />
-    @* viewport — чтобы сайт нормально смотрелся на телефонах *@
-    @* width=device-width — ширина = ширина экрана, initial-scale=1.0 — без масштабирования *@
+
+    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-    @* Open Graph — чтобы при ссылке в соцсети показывалось красивое превью *@
+    
    <meta property="og:title" content="ТехноМир — Интернет-магазин техники" />
-    <meta property="og:description" content="Лучшие цены на ноутбуки, смартфоны, планшеты и наушники" />
+    <meta property="og:description" content="Ноутбуки, смартфоны, планшеты и наушники по честным ценам" />
    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ru_RU" />
+
+    
+    <title>@(ViewData["Title"] ?? "ТехноМир") — ТехноМир</title>

-    @* заголовок страницы — берётся из ViewData["Title"], который задаётся в каждом представлении *@
-    <title>@ViewData["Title"] — ТехноМир</title>
    
-    @* подключаем Bootstrap 5 через CDN (Content Delivery Network) *@
-    @* это значит что CSS-файл подгружается с сервера Bootstrap, а не лежит у нас *@
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YcnS/1p0KQLI8apkWKaIl2pCeM0oG6mDcK0h"
          crossorigin="anonymous" />

-    @* подключаем наш кастомный CSS — он лежит в wwwroot/css/site.css *@
-    @* asp-append-version="true" — добавляет хеш к файлу, чтобы браузер перезагружал CSS при изменениях *@
+    
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

-    @* иконка сайта (favicon) — маленькая картинка во вкладке браузера *@
-    <link rel="icon" type="image/x-icon" href="~/favicon.ico" />
-</head>
-@* data-theme — атрибут для переключения темы (светлая/тёмная) *@
-<body data-theme="light">
    
-    @* === ШАПКА САЙТА (HEADER) === *@
-    <header>
-        @* навигационная панель Bootstrap — сверху сайта *@
-        @* navbar-expand-sm — на маленьких экранах схлопывается в бургер *@
-        @* navbar-dark — тёмный стиль навбара (белый текст на тёмном фоне) *@
-        @* bg-primary — фон навбара — наш акцентный цвет *@
-        <nav class="navbar navbar-expand-sm navbar-dark bg-primary shadow-sm mb-3">
-            <div class="container">
-                @* логотип / название сайта — ссылка на главную *@
-                @* asp-controller="Home" asp-action="Index" — Tag Helper, который генерирует href="/" *@
-                <a class="navbar-brand fw-bold" asp-controller="Home" asp-action="Index">
-                    ТехноМир
+    <link rel="icon" type="image/x-icon" href="~/favicon.ico" />
+
+    
+    <script>
+        (function () {
+            var saved = localStorage.getItem('theme');
+            if (saved === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
+        })();
+    </script>
+</head>
+
+<body>
+
+    
+    
+    <div class="topbar">
+        <div class="container topbar__inner">
+            
+            <span class="topbar__item">
+                <i class="bi bi-telephone"></i> +7 (999) 123-45-67
+            </span>
+            <span class="topbar__item topbar__item--hide-mobile">
+                <i class="bi bi-clock"></i> Пн–Вс: 10:00–20:00
+            </span>
+
+            
+            <div class="topbar__nav">
+                
+                <a asp-controller="Home" asp-action="About">О системе</a>
+                <a asp-controller="Home" asp-action="Contacts">Контакты</a>
+            </div>
+        </div>
+    </div>
+
+    
+    
+    <header class="site-header">
+        <div class="container header-main">
+            
+            <a class="navbar-brand" asp-controller="Home" asp-action="Index">
+                
+                <span class="brand-badge"><i class="bi bi-lightning-charge-fill"></i></span>
+                <span>ТехноМир</span>
            </a>

-                @* кнопка-бургер — появляется на маленьких экранах *@
-                @* data-bs-target="#mainNav" — ссылается на ID меню, которое нужно свернуть/развернуть *@
-                <button class="navbar-toggler" type="button"
-                        data-bs-toggle="collapse" data-bs-target="#mainNav"
-                        aria-controls="mainNav" aria-expanded="false" aria-label="Меню">
-                    @* иконка-бургер (три полоски) *@
-                    <span class="navbar-toggler-icon"></span>
+            
+            <form class="header-search" asp-controller="Catalog" asp-action="Index" method="get">
+                <input class="header-search__input" type="search" name="q"
+                       placeholder="Найти: ноутбук, смартфон..." aria-label="Поиск" />
+                <button class="header-search__btn" type="submit" aria-label="Искать">
+                    <i class="bi bi-search"></i>
+                </button>
+            </form>
+
+            
+            <div class="header-actions">
+                
+                <button id="themeToggle" class="theme-toggle"
+                        type="button" title="Переключить тему" aria-label="Переключить тему">
+                    <span id="themeIcon">☾</span>
                </button>

-                @* само меню — сворачивается на маленьких экранах *@
-                <div class="collapse navbar-collapse" id="mainNav">
-                    @* список ссылок навигации *@
-                    <ul class="navbar-nav me-auto">
-                        @* Главная *@
-                        <li class="nav-item">
-                            <a class="nav-link" asp-controller="Home" asp-action="Index">Главная</a>
-                        </li>
-                        @* Каталог *@
-                        <li class="nav-item">
-                            <a class="nav-link" asp-controller="Catalog" asp-action="Index">Каталог</a>
-                        </li>
-                        @* О системе *@
-                        <li class="nav-item">
-                            <a class="nav-link" asp-controller="Home" asp-action="About">О системе</a>
-                        </li>
-                        @* Контакты *@
-                        <li class="nav-item">
-                            <a class="nav-link" asp-controller="Home" asp-action="Contacts">Контакты</a>
-                        </li>
-                    </ul>
                
-                    @* кнопка переключения темы — справа в навбаре *@
-                    <button id="themeToggle" class="btn btn-outline-light btn-sm" title="Переключить тему">
-                        @* по умолчанию показываем луну (переключиться на тёмную) *@
-                        <span id="themeIcon">&#9790;</span>
-                    </button>
+                <a href="#" class="header-action">
+                    <i class="bi bi-person header-action__icon"></i>
+                    <span class="header-action__label">Войти</span>
+                </a>
+
+                
+                <a href="#" class="header-action">
+                    <i class="bi bi-cart3 header-action__icon"></i>
+                    <span class="header-action__label">Корзина</span>
+                </a>
            </div>
        </div>
-        </nav>
    </header>

-    @* === ОСНОВНОЕ СОДЕРЖИМОЕ СТРАНИЦЫ === *@
-    @* контейнер — ограничивает ширину контента, чтобы на широком экране не растягивался *@
+    
+    
+    <nav class="category-nav" aria-label="Категории товаров">
+        <div class="container category-nav__inner">
+            
+            <a class="category-nav__all @ActiveClass("Catalog", "Index")"
+               asp-controller="Catalog" asp-action="Index">
+                <i class="bi bi-list"></i> Все товары
+            </a>
+            
+            <a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Ноутбуки</a>
+            <a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Смартфоны</a>
+            <a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Планшеты</a>
+            <a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Наушники</a>
+            <a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Аксессуары</a>
+        </div>
+    </nav>
+
+    
+    <main class="site-main">
        <div class="container">
-        @* main — основной блок, сюда подставляется содержимое текущей страницы *@
-        @* RenderBody() — вот сюда вставляется то, что написано в Index.cshtml, About.cshtml и т.д. *@
-        <main role="main" class="pb-4">
            @RenderBody()
+        </div>
    </main>
+
+    
+    
+    <footer class="site-footer">
+        <div class="container">
+            <div class="row g-4">
+                
+                <div class="col-lg-4 col-md-6">
+                    <span class="footer-logo">
+                        <span class="brand-badge"><i class="bi bi-lightning-charge-fill"></i></span>
+                        <span>ТехноМир</span>
+                    </span>
+                    <p class="footer-desc">
+                        Интернет-магазин техники: ноутбуки, смартфоны,
+                        планшеты и наушники по честным ценам.
+                    </p>
                </div>

-    @* === ПОДВАЛ (FOOTER) === *@
-    @* footer — самый низ сайта *@
-    <footer class="footer mt-auto py-3 bg-dark text-light">
-        <div class="container text-center">
-            @* группа, ФИО и год — как просили в задании *@
-            <span class="text-muted">
-                РПО 23/1 &mdash; Борисов Иван Сергеевич &mdash; 2026
-            </span>
+                
+                <div class="col-6 col-lg-2">
+                    <h6 class="footer-heading">Разделы</h6>
+                    <ul class="footer-links">
+                        <li><a asp-controller="Home" asp-action="Index">Главная</a></li>
+                        <li><a asp-controller="Catalog" asp-action="Index">Каталог</a></li>
+                        <li><a asp-controller="Home" asp-action="About">О системе</a></li>
+                        <li><a asp-controller="Home" asp-action="Contacts">Контакты</a></li>
+                    </ul>
+                </div>
+
+                
+                <div class="col-6 col-lg-3">
+                    <h6 class="footer-heading">Каталог</h6>
+                    <ul class="footer-links">
+                        <li><a asp-controller="Catalog" asp-action="Index">Ноутбуки</a></li>
+                        <li><a asp-controller="Catalog" asp-action="Index">Смартфоны</a></li>
+                        <li><a asp-controller="Catalog" asp-action="Index">Планшеты</a></li>
+                        <li><a asp-controller="Catalog" asp-action="Index">Наушники</a></li>
+                        <li><a asp-controller="Catalog" asp-action="Index">Аксессуары</a></li>
+                    </ul>
+                </div>
+
+                
+                <div class="col-md-6 col-lg-3">
+                    <h6 class="footer-heading">Контакты</h6>
+                    <ul class="footer-links">
+                        <li>+7 (999) 123-45-67</li>
+                        <li>info@technomir.ru</li>
+                        <li>г. Москва, ул. Примерная, д. 42</li>
+                    </ul>
+                </div>
+            </div>
+
+            
+            <div class="footer-bottom">
+                <span>&copy; 2026 ТехноМир</span>
+                <span>Борисов Иван Сергеевич · РПО 23/1</span>
+            </div>
        </div>
    </footer>

-    @* === СКРИПТЫ === *@
-    @* подключаем Bootstrap JS-бандл (включает Popper.js — нужен для выпадающих меню и тултипов) *@
+    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>

-    @* наш скрипт — переключение темы *@
+    
    <script src="~/js/site.js" asp-append-version="true"></script>

-    @* рендерим дополнительные скрипты, если они нужны конкретной странице *@
-    @* required: false — секция необязательная, страницы без неё не ошибутся *@
+    
    @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
--- a/Views/_ViewImports.cshtml
+++ b/Views/_ViewImports.cshtml
@ -1,8 +1,6 @@
-@* подключаем пространства имён проекта — чтобы в представлениях не писать полное имя классов *@
-@* например ErrorViewModel вместо TechnoWorld.Models.ErrorViewModel *@
+
+
@using TechnoWorld
@using TechnoWorld.Models

-@* подключаем Tag Helpers — они нужны для asp-controller, asp-action, asp-for и других атрибутов *@
-@* Tag Helpers — это специальные атрибуты, которые превращаются в HTML на сервере *@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
--- a/Views/_ViewStart.cshtml
+++ b/Views/_ViewStart.cshtml
@ -1,5 +1,5 @@
-@* этот файл говорит всем представлениям: используй макет _Layout *@
-@* то есть каждый .cshtml автоматически обёрнётся в _Layout.cshtml *@
+
+
@{
    Layout = "_Layout";
 }
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
--- a/wwwroot/js/site.js
+++ b/wwwroot/js/site.js
@ -1,52 +1,32 @@
-// ============================================
-// СКРИПТ ПЕРЕКЛЮЧЕНИЯ ТЁМЫ (СВЕТЛАЯ / ТЁМНАЯ)
-// Борисов Иван Сергеевич, РПО 23/1, 2026
-// ============================================
-
-// ждём пока вся страница загрузится
+
 document.addEventListener('DOMContentLoaded', function () {

-    // находим кнопку переключения темы по её ID
    var btn = document.getElementById('themeToggle');
-    // находим элемент body чтобы менять атрибут data-theme
-    var body = document.body;
-    // находим иконку внутри кнопки (луна/солнце)
    var icon = document.getElementById('themeIcon');

-    // при загрузке страницы — проверяем в localStorage, какую тему выбрал пользователь раньше
-    // если там ничего нет — ставим "light" (светлая по умолчанию)
+    if (!btn || !icon) return;
+
+    var root = document.documentElement;
+
    var savedTheme = localStorage.getItem('theme') || 'light';

-    // применяем сохранённую тему — ставим атрибут data-theme на body
-    body.setAttribute('data-theme', savedTheme);
+    root.setAttribute('data-theme', savedTheme);

-    // обновляем иконку: если тёмная тема — показываем солнце, если светлая — луну
    updateIcon(savedTheme);

-    // вешаем обработчик клика на кнопку
    btn.addEventListener('click', function () {
-        // читаем текущую тему из атрибута data-theme
-        var current = body.getAttribute('data-theme');
-        // переключаем: было light → станет dark, было dark → станет light
+        var current = root.getAttribute('data-theme');
        var next = current === 'light' ? 'dark' : 'light';
-        // ставим новую тему
-        body.setAttribute('data-theme', next);
-        // сохраняем выбор в localStorage — чтобы при обновлении страницы тема осталась
+        root.setAttribute('data-theme', next);
        localStorage.setItem('theme', next);
-        // обновляем иконку
        updateIcon(next);
    });

-    // функция обновления иконки на кнопке
-    // если тема тёмная — показываем солнце (чтобы переключить на светлую)
-    // если тема светлая — показываем луну (чтобы переключить на тёмную)
    function updateIcon(theme) {
        if (theme === 'dark') {
-            // HTML-код солнца (☀)
-            icon.innerHTML = '&#9788;';
+            icon.textContent = '☀';
        } else {
-            // HTML-код луны (☽)
-            icon.innerHTML = '&#9790;';
+            icon.textContent = '☾';
        }
    }
 });