Add the catalog eshop css styles, views and a basic controller with autogenerated data

src/Web/WebMonolithic/eShopWeb/Controllers/CatalogController.cs

@@ -0,0 +1,91 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using eShopWeb.Models.CatalogViewModels;
+using eShopWeb.Models;
+using eShopWeb.Models.Pagination;
+using Microsoft.AspNetCore.Mvc.Rendering;
+
+// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
+
+namespace eShopWeb.Controllers
+{
+    public class CatalogController : Controller
+    {
+        // GET: /<controller>/
+        public IActionResult Index(int? BrandFilterApplied, int? TypesFilterApplied, int? page)
+        {
+            var itemsPage = 10;
+            //var catalog = await _catalogSvc.GetCatalogItems(page ?? 0, itemsPage, BrandFilterApplied, TypesFilterApplied);
+
+            var catalog = new List<CatalogItem>();
+            var vm = new IndexViewModel()
+            {
+                CatalogItems = GetPreconfiguredItems(),
+                Brands = GetPreconfiguredCatalogBrands(),
+                Types = GetPreconfiguredCatalogTypes(),
+                BrandFilterApplied = BrandFilterApplied ?? 0,
+                TypesFilterApplied = TypesFilterApplied ?? 0,
+                PaginationInfo = new PaginationInfo()
+                {
+                    ActualPage = page ?? 0,
+                    ItemsPerPage = (catalog.Count < itemsPage) ? catalog.Count : itemsPage,
+                    TotalItems = catalog.Count,
+                    TotalPages = int.Parse(Math.Ceiling(((decimal)catalog.Count / itemsPage)).ToString())
+                }
+            };
+
+            vm.PaginationInfo.Next = (vm.PaginationInfo.ActualPage == vm.PaginationInfo.TotalPages - 1) ? "is-disabled" : "";
+            vm.PaginationInfo.Previous = (vm.PaginationInfo.ActualPage == 0) ? "is-disabled" : "";
+
+            return View(vm);
+        }
+
+
+        static IEnumerable<SelectListItem> GetPreconfiguredCatalogBrands()
+        {
+            return new List<SelectListItem>()
+            {
+                new SelectListItem() { Value = null, Text="All", Selected= true},
+                new SelectListItem() { Value = null, Text = "Azure", Selected= true},
+                new SelectListItem() { Value = null, Text = ".NET", Selected= true },
+                new SelectListItem() { Value = null, Text = "Visual Studio", Selected= true },
+                new SelectListItem() { Value = null, Text = "SQL Server", Selected= true },
+                new SelectListItem() { Value = null, Text = "Other", Selected= true }
+            };
+        }
+
+        static IEnumerable<SelectListItem> GetPreconfiguredCatalogTypes()
+        {
+            return new List<SelectListItem>()
+            {
+                new SelectListItem() { Value = null, Text="All", Selected= true},
+                new SelectListItem() { Value = null, Text = "Mug", Selected= true },
+                new SelectListItem() { Value = null, Text = "T-Shirt", Selected= true },
+                new SelectListItem() { Value = null, Text = "Sheet", Selected= true },
+                new SelectListItem() { Value = null, Text = "USB Memory Stick", Selected= true }
+            };
+        }
+
+        static IEnumerable<CatalogItem> GetPreconfiguredItems()
+        {
+            return new List<CatalogItem>()
+            {
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = 19.5M, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/1" },
+                new CatalogItem() { CatalogTypeId=1,CatalogBrandId=2, Description = ".NET Black & White Mug", Name = ".NET Black & White Mug", Price= 8.50M, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/2" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=5, Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/3" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = ".NET Foundation Sweatshirt", Name = ".NET Foundation Sweatshirt", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/4" },
+                new CatalogItem() { CatalogTypeId=3,CatalogBrandId=5, Description = "Roslyn Red Sheet", Name = "Roslyn Red Sheet", Price = 8.5M, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/5" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = ".NET Blue Sweatshirt", Name = ".NET Blue Sweatshirt", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/6" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=5, Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/7"  },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=5, Description = "Kudu Purple Sweatshirt", Name = "Kudu Purple Sweatshirt", Price = 8.5M, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/8" },
+                new CatalogItem() { CatalogTypeId=1,CatalogBrandId=5, Description = "Cup<T> White Mug", Name = "Cup<T> White Mug", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/9" },
+                new CatalogItem() { CatalogTypeId=3,CatalogBrandId=2, Description = ".NET Foundation Sheet", Name = ".NET Foundation Sheet", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/10" },
+                new CatalogItem() { CatalogTypeId=3,CatalogBrandId=2, Description = "Cup<T> Sheet", Name = "Cup<T> Sheet", Price = 8.5M, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/11" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=5, Description = "Prism White TShirt", Name = "Prism White TShirt", Price = 12, PictureUri = "http://externalcatalogbaseurltobereplaced/api/v1/pic/12" }
+            };
+        }
+    }
+}

src/Web/WebMonolithic/eShopWeb/Models/Catalog.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace eShopWeb.Models
+{
+    public class Catalog
+    {
+        public int PageIndex { get; set; }
+        public int PageSize { get; set; }
+        public int Count { get; set; }
+        public List<CatalogItem> Data { get; set; }
+    }
+}

src/Web/WebMonolithic/eShopWeb/Models/CatalogItem.cs

@@ -0,0 +1,18 @@
+using System;
+
+namespace eShopWeb.Models
+{
+    public class CatalogItem
+    {
+        public string Id { get; set; }
+        public string Name { get; set; }
+        public string Description { get; set; }
+        public decimal Price { get; set; }
+        public string PictureUri { get; set; }
+        public int CatalogBrandId { get; set; }
+        public string CatalogBrand { get; set; }
+        public int CatalogTypeId { get; set; }
+        public string CatalogType { get; set; }
+
+    }
+}

src/Web/WebMonolithic/eShopWeb/Models/CatalogViewModels/IndexViewModel.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Mvc.Rendering;
+using eShopWeb.Models.Pagination;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace eShopWeb.Models.CatalogViewModels
+{
+    public class IndexViewModel
+    {
+        public IEnumerable<CatalogItem> CatalogItems { get; set; }
+        public IEnumerable<SelectListItem> Brands { get; set; }
+        public IEnumerable<SelectListItem> Types { get; set; }
+        public int? BrandFilterApplied { get; set; }
+        public int? TypesFilterApplied { get; set; }
+        public PaginationInfo PaginationInfo { get; set; }
+    }
+}

src/Web/WebMonolithic/eShopWeb/Models/Pagination/PaginationInfo.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace eShopWeb.Models.Pagination
+{
+    public class PaginationInfo
+    {
+        public int TotalItems { get; set; }
+        public int ItemsPerPage { get; set; }
+        public int ActualPage { get; set; }
+        public int TotalPages { get; set; }
+        public string Previous { get; set; }
+        public string Next { get; set; }
+    }
+}

src/Web/WebMonolithic/eShopWeb/Startup.cs

@@ -53,7 +53,7 @@ namespace eShopWeb
             {
                 routes.MapRoute(
                     name: "default",
-                    template: "{controller=Home}/{action=Index}/{id?}");
+                    template: "{controller=Catalog}/{action=Index}/{id?}");
             });
         }
     }

src/Web/WebMonolithic/eShopWeb/Views/Catalog/Index.cshtml

@@ -0,0 +1,48 @@
+@{
+    ViewData["Title"] = "Catalog";
+    @model eShopWeb.Models.CatalogViewModels.IndexViewModel
+}
+<section class="esh-catalog-hero">
+    <div class="container">
+        <img class="esh-catalog-title" src="../images/main_banner_text.png" />
+    </div>
+</section>
+
+<section class="esh-catalog-filters">
+    <div class="container">
+        <form asp-action="Index" asp-controller="Catalog" method="post">
+            <label class="esh-catalog-label" data-title="brand">
+                <select asp-for="@Model.BrandFilterApplied" asp-items="@Model.Brands" class="esh-catalog-filter"></select>
+            </label>
+            <label class="esh-catalog-label" data-title="type">
+                <select asp-for="@Model.TypesFilterApplied" asp-items="@Model.Types" class="esh-catalog-filter"></select>
+            </label>
+            <input class="esh-catalog-send" type="image" src="images/arrow-right.svg" />
+        </form>
+    </div>
+</section>
+
+<div class="container">
+
+    @if (Model.CatalogItems.Count() > 0)
+    {
+        @Html.Partial("_pagination", Model.PaginationInfo)
+
+        <div class="esh-catalog-items row">
+            @foreach (var catalogItem in Model.CatalogItems)
+            {
+                <div class="esh-catalog-item col-md-4">
+                    @Html.Partial("_product", catalogItem)
+                </div>
+            }
+        </div>
+
+        @Html.Partial("_pagination", Model.PaginationInfo)
+    }
+    else
+    {
+        <div class="esh-catalog-items row">
+            THERE ARE NO RESULTS THAT MATCH YOUR SEARCH
+        </div>
+    }
+</div>

src/Web/WebMonolithic/eShopWeb/Views/Catalog/_pagination.cshtml

@@ -0,0 +1,28 @@
+@model eShopWeb.Models.Pagination.PaginationInfo
+
+<div class="esh-pager">
+    <div class="container">
+        <article class="esh-pager-wrapper row">
+            <nav>
+                <a class="esh-pager-item esh-pager-item--navigable @Model.Previous"
+                      id="Previous"
+                      href="@Url.Action("Index","Catalog", new { page = Model.ActualPage -1 })"
+                      aria-label="Previous">
+                    Previous
+                </a>
+
+                <span class="esh-pager-item">
+                    Showing @Html.DisplayFor(modelItem => modelItem.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.TotalItems) products - Page @(Model.ActualPage + 1) - @Html.DisplayFor(x => x.TotalPages)
+                </span>
+
+                <a class="esh-pager-item esh-pager-item--navigable @Model.Next"
+                      id="Next"
+                      href="@Url.Action("Index","Catalog", new { page = Model.ActualPage + 1 })"
+                      aria-label="Next">
+                    Next
+                </a>
+            </nav>
+        </article>
+    </div>
+</div>
+

src/Web/WebMonolithic/eShopWeb/Views/Catalog/_product.cshtml

@@ -0,0 +1,24 @@
+@model eShopWeb.Models.CatalogItem
+
+
+<form asp-controller="Cart" asp-action="AddToCart">
+
+    <img class="esh-catalog-thumbnail" src="@Model.PictureUri" />
+    <input class="esh-catalog-button @((!User.Identity.IsAuthenticated) ? "is-disabled" : "")" type="submit" value="[ ADD TO CART ]" />
+
+    <div class="esh-catalog-name">
+        <span>@Model.Name</span>
+    </div>
+    <div class="esh-catalog-price">
+        <span>@Model.Price.ToString("N2")</span>
+    </div>
+    <input type="hidden" asp-for="@Model.CatalogBrand" name="brand" />
+    <input type="hidden" asp-for="@Model.CatalogBrandId" name="brandId" />
+    <input type="hidden" asp-for="@Model.CatalogType" name="type" />
+    <input type="hidden" asp-for="@Model.CatalogTypeId" name="typeId" />
+    <input type="hidden" asp-for="@Model.Description" name="description" />
+    <input type="hidden" asp-for="@Model.Id" name="id" />
+    <input type="hidden" asp-for="@Model.Name" name="name" />
+    <input type="hidden" asp-for="@Model.PictureUri" name="pictureUri" />
+    <input type="hidden" asp-for="@Model.Price" name="price" />
+</form>

src/Web/WebMonolithic/eShopWeb/Views/Shared/_HomeLayout.cshtml

@@ -0,0 +1,73 @@
+@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ViewData["Title"] - eShopWeb</title>
+
+    <environment names="Development">
+        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
+        <link rel="stylesheet" href="~/css/site.css" />
+    </environment>
+    <environment names="Staging,Production">
+        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
+              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
+              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
+        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
+    </environment>
+    @Html.Raw(JavaScriptSnippet.FullScript)
+</head>
+<body>
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">eShopWeb</a>
+            </div>
+            <div class="navbar-collapse collapse">
+                <ul class="nav navbar-nav">
+                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
+                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
+                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container body-content">
+        @RenderBody()
+        <hr />
+        <footer>
+            <p>&copy; 2017 - eShopWeb</p>
+        </footer>
+    </div>
+
+    <environment names="Development">
+        <script src="~/lib/jquery/dist/jquery.js"></script>
+        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
+        <script src="~/js/site.js" asp-append-version="true"></script>
+    </environment>
+    <environment names="Staging,Production">
+        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
+                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
+                asp-fallback-test="window.jQuery"
+                crossorigin="anonymous"
+                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
+        </script>
+        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
+                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
+                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
+                crossorigin="anonymous"
+                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
+        </script>
+        <script src="~/js/site.min.js" asp-append-version="true"></script>
+    </environment>
+
+    @RenderSection("Scripts", required: false)
+</body>
+</html>

src/Web/WebMonolithic/eShopWeb/Views/Shared/_Layout.cshtml

@@ -1,51 +1,65 @@
-@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - eShopWeb</title>
+    <title>@ViewData["Title"] - Microsoft.eShopOnContainers.WebMVC</title>
 
     <environment names="Development">
         <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
-        <link rel="stylesheet" href="~/css/site.css" />
+        <link rel="stylesheet" href="~/css/app.css" />
+        <link rel="stylesheet" href="~/css/app.component.css" />
+        <link rel="stylesheet" href="~/css/shared/components/header/header.css" />
+        <link rel="stylesheet" href="~/css/shared/components/identity/identity.css" />
+        <link rel="stylesheet" href="~/css/shared/components/pager/pager.css" />
+        <link rel="stylesheet" href="~/css/basket/basket.component.css" />
+        <link rel="stylesheet" href="~/css/basket/basket-status/basket-status.component.css" />
+        <link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
+        <link rel="stylesheet" href="~/css/orders/orders.component.css" />
+        <link rel="stylesheet" href="~/css/orders/orders-detail/orders-detail.component.css" />
+        <link rel="stylesheet" href="~/css/orders/orders-new/orders-new.component.css" />
     </environment>
     <environment names="Staging,Production">
-        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
               asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
               asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
-        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
+        <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" />
     </environment>
-    @Html.Raw(JavaScriptSnippet.FullScript)
 </head>
 <body>
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <header class="navbar navbar-light navbar-static-top">
         <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">eShopWeb</a>
-            </div>
-            <div class="navbar-collapse collapse">
-                <ul class="nav navbar-nav">
-                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
-                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
-                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
-                </ul>
-            </div>
+            <article class="row">
+
+                <section class="col-lg-7 col-md-6 col-xs-12">
+                    <a class="navbar-brand" routerLink="catalog">
+                        <a asp-area="" asp-controller="Catalog" asp-action="Index">
+                            <img src="../images/brand.png" />
+                        </a>
+                </section>
+          
+            </article>
+        </div>
+    </header>
+
+    @RenderBody()
+
+
+    <footer class="esh-app-footer">
+        <div class="container">
+            <article class="row">
+
+                <section class="col-sm-6">
+                    <img class="esh-app-footer-brand" src="../images/brand_dark.png" />
+                </section>
+
+                <section class="col-sm-6">
+                    <div class="esh-app-footer-text hidden-xs"> e-ShoponContainers. All right reserved </div>
+                </section>
+
+            </article>
         </div>
-    </nav>
-    <div class="container body-content">
-        @RenderBody()
-        <hr />
-        <footer>
-            <p>&copy; 2017 - eShopWeb</p>
-        </footer>
-    </div>
+    </footer>
 
     <environment names="Development">
         <script src="~/lib/jquery/dist/jquery.js"></script>
@@ -55,19 +69,15 @@
     <environment names="Staging,Production">
         <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                 asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
-                asp-fallback-test="window.jQuery"
-                crossorigin="anonymous"
-                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
+                asp-fallback-test="window.jQuery">
         </script>
-        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
+        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                 asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
-                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
-                crossorigin="anonymous"
-                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
+                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
         </script>
         <script src="~/js/site.min.js" asp-append-version="true"></script>
     </environment>
 
-    @RenderSection("Scripts", required: false)
+    @RenderSection("scripts", required: false)
 </body>
 </html>

src/Web/WebMonolithic/eShopWeb/eShopWeb.csproj

@@ -22,5 +22,11 @@
   <ItemGroup>
     <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0-msbuild3-final" />
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Models\" />
+    <Folder Include="Views\Catalog\" />
+    <Folder Include="wwwroot\css\catalog\" />
+    <Folder Include="wwwroot\fonts\" />
+  </ItemGroup>
 
 </Project>

src/Web/WebMonolithic/eShopWeb/wwwroot/css/app.css

@@ -0,0 +1,86 @@
+@font-face {
+    font-family: Montserrat;
+    font-weight: 400;
+    src: url(".../fonts/Montserrat-Regular.eot?") format("eot"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.ttf") format("truetype"), url("../fonts/Montserrat-Regular.svg#Montserrat") format("svg");
+}
+
+@font-face {
+    font-family: Montserrat;
+    font-weight: 700;
+    src: url("../fonts/Montserrat-Bold.eot?") format("eot"), url("../fonts/Montserrat-Bold.woff") format("woff"), url("../fonts/Montserrat-Bold.ttf") format("truetype"), url("../fonts/Montserrat-Bold.svg#Montserrat") format("svg");
+}
+
+html,
+body {
+    font-family: Montserrat, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    z-index: 10;
+}
+
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
+
+.preloading {
+    color: #00A69C;
+    display: block;
+    font-size: 1.5rem;
+    left: 50%;
+    position: fixed;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+@media screen and (min-width: 992px) {
+    .form-input {
+        max-width: 360px;
+        width: 360px;
+    }
+}
+
+.form-input {
+    border-radius: 0;
+    height: 45px;
+    padding: 10px;
+}
+
+.form-input-small {
+    max-width: 100px !important;
+}
+
+.form-input-medium {
+    width: 150px !important;
+}
+
+.alert {
+    padding-left: 0;
+}
+
+.alert-danger {
+    background-color: transparent;
+    border: 0;
+    color: #FB0D0D;
+    font-size: 12px;
+}
+
+a,
+a:active,
+a:hover,
+a:visited {
+    color: #000;
+    text-decoration: none;
+    transition: color 0.35s;
+}
+
+    a:hover,
+    a:active {
+        color: #75B918;
+        transition: color 0.35s;
+    }

src/Web/WebMonolithic/eShopWeb/wwwroot/css/catalog/catalog.component.css

@@ -0,0 +1,147 @@
+.esh-catalog-hero {
+    background-image: url("../../images/main_banner.png");
+    background-size: cover;
+    height: 260px;
+    width: 100%;
+}
+
+.esh-catalog-title {
+    position: relative;
+    top: 74.28571px;
+}
+
+.esh-catalog-filters {
+    background-color: #00A69C;
+    height: 65px;
+}
+
+.esh-catalog-filter {
+    background-color: transparent;
+    border-color: #00d9cc;
+    color: #FFFFFF;
+    cursor: pointer;
+    margin-right: 1rem;
+    margin-top: .5rem;
+    outline-color: #83D01B;
+    padding-bottom: 0;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 1.5rem;
+    min-width: 140px;
+    -webkit-appearance: none;
+}
+
+    .esh-catalog-filter option {
+        background-color: #00A69C;
+    }
+
+.esh-catalog-label {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+}
+
+    .esh-catalog-label::before {
+        color: rgba(255, 255, 255, 0.5);
+        content: attr(data-title);
+        font-size: 0.65rem;
+        margin-top: 0.65rem;
+        margin-left: 0.5rem;
+        position: absolute;
+        text-transform: uppercase;
+        z-index: 1;
+    }
+
+    .esh-catalog-label::after {
+        background-image: url("../../images/arrow-down.png");
+        height: 7px;
+        content: '';
+        position: absolute;
+        right: 1.5rem;
+        top: 2.5rem;
+        width: 10px;
+        z-index: 1;
+    }
+
+.esh-catalog-send {
+    background-color: #83D01B;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 1rem;
+    transform: translateY(.5rem);
+    padding: 0.5rem;
+    transition: all 0.35s;
+}
+
+    .esh-catalog-send:hover {
+        background-color: #4a760f;
+        transition: all 0.35s;
+    }
+
+.esh-catalog-items {
+    margin-top: 1rem;
+}
+
+.esh-catalog-item {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    width: 33%;
+    display: inline-block;
+    float: none !important;
+}
+
+@media screen and (max-width: 1024px) {
+    .esh-catalog-item {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .esh-catalog-item {
+        width: 100%;
+    }
+}
+
+.esh-catalog-thumbnail {
+    max-width: 370px;
+    width: 100%;
+}
+
+.esh-catalog-button {
+    background-color: #83D01B;
+    border: none;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 1rem;
+    height: 3rem;
+    margin-top: 1rem;
+    transition: all 0.35s;
+    width: 80%;
+}
+    .esh-catalog-button.is-disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+
+    .esh-catalog-button:hover {
+        background-color: #4a760f;
+        transition: all 0.35s;
+    }
+
+.esh-catalog-name {
+    font-size: 1rem;
+    font-weight: 300;
+    margin-top: .5rem;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.esh-catalog-price {
+    text-align: center;
+    font-weight: 900;
+    font-size: 28px;
+}
+
+    .esh-catalog-price::before {
+        content: '$';
+    }

src/Web/WebMonolithic/eShopWeb/wwwroot/images/arrow-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Слой_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M21.698,15.286l-9.002-8.999  c-0.395-0.394-1.035-0.394-1.431,0c-0.395,0.394-0.395,1.034,0,1.428L19.553,16l-8.287,8.285c-0.395,0.394-0.395,1.034,0,1.429  c0.395,0.394,1.036,0.394,1.431,0l9.002-8.999C22.088,16.325,22.088,15.675,21.698,15.286z" fill="#FFFFFF" fill-rule="evenodd" id="Chevron_Right"/><g/><g/><g/><g/><g/><g/></svg>

src/Web/WebMonolithic/eShopWeb/wwwroot/images/refresh.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 259.244 259.244" style="enable-background:new 0 0 259.244 259.244;" xml:space="preserve">
+<g>
+	<path style="fill:#3DB39E;" d="M248.348,129.3h-15.849C232.41,65.277,180.831,13.394,117.202,13.394
+		c-31.841,0-60.661,12.998-81.534,33.996C14.017,68.549,0.25,97.092,0.036,129.3H0l0.018,0.331L0,130.033h0.036
+		c0.393,63.853,51.758,115.816,115.19,115.816c31.841,0,60.661-13.007,81.534-34.049l-25.852-24.931
+		c-14.178,14.303-34.058,23.027-55.682,23.135c-44.401,0.206-79.201-36.49-79.201-80.122c-0.107-22.893,10.092-42.908,25.486-57.595
+		c14.186-14.285,34.058-23.001,55.691-23.108c44.41-0.206,79.201,36.445,79.201,79.997v0.125h-15.661
+		c-9.708,0-13.668,6.499-8.814,14.41l33.799,33.433c7.732,7.732,9.967,7.661,17.646,0l33.799-33.433
+		C262.025,135.781,258.056,129.3,248.348,129.3z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>