Convert multiple pages into SPA

svelte/src/home_page/FeatureTable.svelte

@@ -15,7 +15,7 @@ import OtherPlans from "./OtherPlans.svelte";
 	</p>
 </section>
 
-<div class="vertical_scroll">
+<div class="horizontal_scroll">
 	<div class="grid">
 		<div></div>
 		<div class="top_row free_feat">
@@ -271,20 +271,21 @@ import OtherPlans from "./OtherPlans.svelte";
 	font-weight: bold;
 }
 
-.vertical_scroll {
+.horizontal_scroll {
 	overflow-x: scroll;
 	overflow-y: hidden;
 	width: 100%;
+	padding: 10px;
 }
 
 .grid {
-	display: inline-grid;
+	display: grid;
 	grid-auto-flow: row;
 	grid-template-columns: 9em 1fr 1fr 1fr;
-	min-width: 40em;
+	min-width: 50em;
 	max-width: 70em;
 	gap: 5px;
-	margin: 10px;
+	margin: auto;
 }
 .grid > div {
 	justify-content: center;

svelte/src/home_page/HomePage.svelte

@@ -5,6 +5,7 @@ import { drop_target } from "lib/DropTarget";
 import AddressReputation from "./AddressReputation.svelte";
 import FeatureTable from "./FeatureTable.svelte";
 import GetStarted from "./GetStarted.svelte";
+import Pricing from "./Pricing.svelte";
 
 let upload_widget
 </script>
@@ -50,6 +51,7 @@ let upload_widget
 				Bullet lists
 			</li>
 		</ul>
+		<Pricing/>
 	</section>
 </div>
 
@@ -141,26 +143,18 @@ let upload_widget
 	<FeatureTable/>
 </div>
 
-<Footer nobg/>
-
+<svelte:head>
+	<style>
+		body {
+			background-image: url("/res/img/catspaw.webp");
+			background-repeat: no-repeat;
+			background-attachment: fixed;
+			background-position: center;
+			background-size: cover;
+		}
+	</style>
+</svelte:head>
 <style>
-:global(.page_body) {
-	background-image: url("/res/img/inflating_star.webp");
-	background-repeat: no-repeat;
-	background-attachment: fixed;
-	background-position: center;
-	background-size: cover;
-}
-.page_content {
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-@media (max-width: 1100px) {
-	.page_content {
-		margin-top: 0;
-	}
-}
-
 header {
 	padding-top: 20px;
 	padding-bottom: 20px;