Change some layout on Homepage

src/routes/index.svelte

@@ -3,6 +3,9 @@
 	import { fade, slide } from 'svelte/transition'
 	import { site, currentLocation } from '../store'
 
+	// Dependencies
+	// import anime from 'animejs/lib/anime.es.js'
+
 	// Components
 	import Locations from '../components/Locations.svelte'
 
@@ -10,28 +13,27 @@
 	currentLocation.set(undefined)
 </script>
 
-<div class="container" in:fade out:slide>
-	<section class="section">
-		<h1 class="title is-2">Houses Of</h1>
-		<div class="message is-link">
-			<div class="message-body">{$site.description}</div>
+<section class="hero is-medium is-danger has-text-centered" in:fade out:slide>
+	<div class="hero-body">
+		<div class="container">
+			<h1 class="title">Houses Of</h1>
+			<h2 class="subtitle">{$site.description}</h2>
 		</div>
-	</section>
+	</div>
+</section>
 
-	<div class="section">
+<div class="section" in:fade out:slide>
+	<div class="container">
 		<h2 class="title is-4">Choose on globe</h2>
 		<div class="content">
 			<p>{$site.explore_globe}</p>
 			<p>[globe]</p>
 		</div>
-	</div>
 
-	<div class="section">
 		<h2 class="title is-4">Choose from list</h2>
 		<div class="content">
 			<p>{$site.explore_list}</p>
 		</div>
-
 		<Locations />
 	</div>
 </div>