From 78006f79d04512fd413863c5de424fe538dbe414 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Mon, 31 May 2021 19:09:53 -0500
Subject: [PATCH] Improved main page.

---
 src/MultiShop/Client/Pages/Index.razor     | 29 +++++++++++++++-------
 src/MultiShop/Client/Pages/Index.razor.css |  3 +++
 src/MultiShop/Client/wwwroot/css/app.css   | 13 +++++++---
 3 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 src/MultiShop/Client/Pages/Index.razor.css

diff --git a/src/MultiShop/Client/Pages/Index.razor b/src/MultiShop/Client/Pages/Index.razor
index 48640f6..b7ca78b 100644
--- a/src/MultiShop/Client/Pages/Index.razor
+++ b/src/MultiShop/Client/Pages/Index.razor
@@ -1,14 +1,25 @@
 @page "/"
+@inject NavigationManager NavigationManager
 
-<div>
-    <h1>Welcome to MultiShop!</h1>
-</div>
-<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 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>
-    <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 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 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>
\ No newline at end of file
diff --git a/src/MultiShop/Client/Pages/Index.razor.css b/src/MultiShop/Client/Pages/Index.razor.css
new file mode 100644
index 0000000..fad5136
--- /dev/null
+++ b/src/MultiShop/Client/Pages/Index.razor.css
@@ -0,0 +1,3 @@
+.search {
+    max-width: 75%;
+}
\ No newline at end of file
diff --git a/src/MultiShop/Client/wwwroot/css/app.css b/src/MultiShop/Client/wwwroot/css/app.css
index 5240c8b..f1da7a9 100644
--- a/src/MultiShop/Client/wwwroot/css/app.css
+++ b/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;