Improved main page.

src/MultiShop/Client/Pages/Index.razor

@@ -1,14 +1,25 @@
 @page "/"
+@inject NavigationManager NavigationManager
 
-<div>
-    <h1>Welcome to MultiShop!</h1>
+<div class="jumbotron">
+    <h1 class="display-4">MultiShop</h1>
+    <p class="lead">For all your cross shop searching needs! MultiShop is a simple shopping assistant that searches live for what you need.</p>
+    <div class="search mt-3">
+        <SearchBar SearchPlaceholder="Need to look for something?" OnSearchRequested="@((q) => NavigationManager.NavigateTo($"search/{q}"))">
+        </SearchBar>
+    </div>
 </div>
-<div>
+
+<div class="container">
+    <div>
         <h2>What is MultiShop?</h2>
         <p>MultiShop is an app that allows users to easily check multiple online retailers, primarily for electronic components. On request, the app searches, aggregates and sorts all the most important information about the products it finds while searching through sites for you! MultiShop is intended to be a small light-weight app the runs on the clients computer. Therefore, all actions and processes are actually reliant on your computer. Additionally, MultiShop does not crawl sites and save their products like a typical search engine. To provide the latest prices, all searches are performed (near) live on command.</p>
+    </div>
 </div>
 
-<div>
+<div class="container">
+    <div>
         <h2>How does it work?</h2>
         <p>MultiShop is a simple program that takes care of looking through product listings for you. That's all. As all tasks are executed locally on your computer MultiShop is like any other program, except that it is transient, and automatically loaded when you visit this website. The shop has a variety of modules meant to search different shops by essentially querying the shop as the user would normally, and then scanning the results.</p>
+    </div>
 </div>

src/MultiShop/Client/Pages/Index.razor.css

@@ -0,0 +1,3 @@
+.search {
+    max-width: 75%;
+}

src/MultiShop/Client/wwwroot/css/app.css

@@ -13,22 +13,27 @@ html, body {
 }
 
 .bg-dark {
-    background-color: #262626 !important;
+    background-color: #2E2E2E !important;
 }
 
 nav.bg-dark {
     background-color: #1A1A1A !important;
 }
 
+.bg-dark .card {
+    background-color: #1F1F1F;
+}
+
+.bg-dark .jumbotron {
+    background-color: #262626;
+}
+
 .content {
     padding-top: 1.5rem;
     padding-right: 2rem;
     padding-left: 2rem;
 }
 
-.bg-dark .card {
-    background-color: #1F1F1F;
-}
 
 #blazor-error-ui {
     background: lightyellow;