List.cshtml

@model WebCoreLab.Models.ViewModel.Product.ProductListViewModel

@section topCSS {
    <style>
        .area-title {
            color: red;
        }
    </style>
}

<div class="container pt-3">
    <h2 class="area-title">商品區</h2>
    <div class="row latestProduct">
        <div class="col-12 col-md-4">
            <a href="/Product/Detail/@Model.MainProduct.Id" class="card text-white rounded-3 overflow-hidden h-100">
                <img src="@Model.MainProduct.Image" class="h-100" alt="">
                <div class="card-img-overlay d-flex flex-column justify-content-end">
                    <div class="card-title text-black bg-white p-2 rounded opacity-75">
                        <h3>@Model.MainProduct.Name</h3>
                        <p>@Model.MainProduct.Description</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-12 col-md-8 d-flex flex-wrap align-items-stretch g-1">
            @foreach(var product in @Model.SideProductList) {
                <div class="col-12 col-md-3">
                    <a href="/Product/Detail/@product.Id" class="card text-white rounded-3 overflow-hidden">
                        <img src="@product.Image" alt="">
                        <div class="card-img-overlay d-flex flex-column justify-content-end">
                            <h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>@product.Name</b></h5>
                        </div>
                    </a>
                </div>
            }
        </div>
    </div>
</div>