@*告诉他布局使用 _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;">
            Мы поможем вам найти технику по лучшим ценам.
            Ноутбуки, смартфоны, планшеты и наушники — всё в одном месте.
        </p>
        @* кнопка-призыв к действию — перейти в каталог *@
        @* asp-controller="Catalog" — ссылка на контроллер каталога *@
        <a asp-controller="Catalog" asp-action="Index" class="btn btn-light btn-lg px-4">
            Перейти в каталог &rarr;
        </a>
    </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>
            </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>
            </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>
            </div>
        </div>
    </div>
</section>