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

<div class="page-head">
    <h1>О системе</h1>
    <p class="text-muted">Зачем нужен ТехноМаркет и какие роли появятся в будущих лабораторных.</p>
</div>

<section class="info-card info-card--wide">
    <h2 class="info-card__title">Для кого сервис</h2>
    <div class="row g-3">
        <div class="col-12 col-md-6">
            <h3 class="info-card__subtitle">Частные покупатели</h3>
            <p>Люди, которые выбирают технику для дома: ноутбук для учёбы, смартфон на замену, телевизор в гостиную.</p>
        </div>
        <div class="col-12 col-md-6">
            <h3 class="info-card__subtitle">Небольшие компании</h3>
            <p>Организациям удобно закупать оргтехнику и бытовые приборы в одном месте с одним договором и счётом.</p>
        </div>
    </div>
</section>

<section class="roles-section">
    <h2 class="roles-section__title">Роли в системе</h2>
    <div class="row g-4">
        <div class="col-12 col-md-4">
            <div class="role-card">
                <div class="role-card__number">1</div>
                <h3 class="role-card__title">Покупатель</h3>
                <p class="role-card__text">Просматривает каталог, оставляет заявку или заказ, получает консультацию через форму обратной связи.</p>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="role-card">
                <div class="role-card__number">2</div>
                <h3 class="role-card__title">Менеджер</h3>
                <p class="role-card__text">Принимает заявки с сайта, связывается с клиентом, оформляет заказ и следит за его доставкой.</p>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="role-card">
                <div class="role-card__number">3</div>
                <h3 class="role-card__title">Администратор</h3>
                <p class="role-card__text">Ведёт каталог товаров, управляет заказами и учётными записями сотрудников.</p>
            </div>
        </div>
    </div>
</section>