@{
    ViewData["Title"] = "О системе";
}

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

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

<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>
    <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>