Add home page.

Aaru.Server.New/Aaru.Server.New.csproj

@@ -19,4 +19,8 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.4"/>
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\assets\"/>
+  </ItemGroup>
+
 </Project>

Aaru.Server.New/Components/Layout/MainLayout.razor

@@ -6,11 +6,7 @@
     </div>
 
     <main>
-        <div class="px-4 top-row">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
+        <article class="content">
             @Body
         </article>
     </main>

Aaru.Server.New/Components/Layout/MainLayout.razor.css

@@ -70,7 +70,7 @@ main {
     width: 0;
   }
 
-  .top-row, article {
+  .top-row, article:not(.content) {
     padding-left: 2rem !important;
     padding-right: 1.5rem !important;
   }

Aaru.Server.New/Components/Pages/Home.razor

@@ -1,7 +1,23 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>Aaru: Home</PageTitle>
 
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
+<section class="cover show" style="background: linear-gradient(to left bottom, hsl(100, 100%, 85%) 0%,hsl(124, 100%, 85%) 100%)">
+    <div class="mask"></div>
+    <div class="cover-main">
+        <p>
+            <img alt="logo" data-origin="assets/img/aaru.png" src="/assets/img/aaru.png" width="300">
+        </p>
+        <h1 id="aaru-data-preservation-suite">
+            <span>Aaru Data Preservation Suite</span>
+        </h1>
+        <blockquote>
+            <p>A fully-featured media dump management solution</p>
+        </blockquote>
+        <p>
+            <a href="https://github.com/aaru-dps/aaru/" rel="noopener" target="_blank">GitHub</a>
+            <a href="https://aaru.app/Stats" rel="noopener" target="_blank">Statistics</a>
+            <a href="/quickstart.md">Getting Started</a>
+        </p>
+    </div>
+</section>

Aaru.Server.New/wwwroot/app.css

@@ -167,4 +167,130 @@ body {
   color: var(--theme-color, #E18FDC);
   font-size: 16px;
   font-weight: 600;
-}
+}
+
+section.cover {
+  -ms-flex-align: center;
+  align-items: center;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+  display: none;
+  background: linear-gradient(
+      to bottom,
+      #E18FDC 0%,
+      #222222 100%
+  ) !important;
+}
+
+article {
+  padding: 0rem !important;
+}
+
+section.cover.show {
+  display: -ms-flexbox;
+  display: flex;
+}
+
+section.cover.has-mask .mask {
+  background-color: #FFFFFF;
+  opacity: 0.8;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+section.cover .cover-main {
+  -ms-flex: 1;
+  flex: 1;
+  margin: -20px 16px 0;
+  text-align: center;
+  z-index: 1;
+}
+
+section.cover a {
+  color: inherit;
+}
+
+section.cover a,
+section.cover a:hover {
+  text-decoration: none;
+}
+
+section.cover p {
+  line-height: 1.5rem;
+  margin: 1em 0;
+}
+
+section.cover h1 {
+  color: inherit;
+  font-size: 2.5rem;
+  font-weight: 300;
+  margin: 0.625rem 0 2.5rem;
+  position: relative;
+  text-align: center;
+}
+
+section.cover h1 a {
+  display: block;
+}
+
+section.cover h1 small {
+  bottom: -0.4375rem;
+  font-size: 1rem;
+  position: absolute;
+}
+
+section.cover blockquote {
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+section.cover ul {
+  line-height: 1.8;
+  list-style-type: none;
+  margin: 1em auto;
+  max-width: 500px;
+  padding: 0;
+}
+
+section.cover .cover-main > p:last-child a {
+  border: 1px solid var(--theme-color, #847A84);
+  border-radius: 2rem;
+  box-sizing: border-box;
+  color: var(--theme-color, #FFFFFF);
+  display: inline-block;
+  font-size: 1.05rem;
+  letter-spacing: 0.1rem;
+  margin: 0.5rem 1rem;
+  padding: 0.75em 2rem;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  font-weight: bold;
+}
+
+section.cover .cover-main > p:last-child a:last-child {
+  background-color: var(--theme-color, #847A84);
+  color: #E5E5E5;
+}
+
+section.cover .cover-main > p:last-child a:last-child:hover {
+  color: inherit;
+  opacity: 0.8;
+  color: #E5E5E5;
+}
+
+section.cover .cover-main > p:last-child a:hover {
+  color: inherit;
+}
+
+section.cover blockquote > p > a {
+  border-bottom: 2px solid var(--theme-color, #E18FDC);
+  transition: color 0.3s;
+}
+
+section.cover blockquote > p > a:hover {
+  color: var(--theme-color, #E18FDC);
+}

Aaru.Server.New/wwwroot/assets/img/github.svg

@@ -0,0 +1,5 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+        transform="scale(64)" fill="#1B1F23"/>
+</svg>