Homepage

src/routes/index.svelte

@@ -1,29 +1,37 @@
 <script>
-	import { slide } from 'svelte/transition'
-	import { locations, countries, site } from '../store'
-	import * as fn from '../functions'
+	// Svelte
+	import { fade, slide } from 'svelte/transition'
+	import { site, currentLocation } from '../store'
+
+	// Components
+	import Locations from '../components/Locations.svelte'
+
+	// Reset current location
+	currentLocation.set(undefined)
 </script>
 
-<svelte:head>
-	<title>Houses Of - Beautiful houses of planet Earth</title>
-</svelte:head>
-
-<div class="container" in:slide out:slide>
+<div class="container" in:fade out:slide>
 	<section class="section">
 		<h1 class="title is-2">Houses Of</h1>
-		<article class="message is-dark">
+		<div class="message is-link">
 			<div class="message-body">{$site.description}</div>
-		</article>
+		</div>
 	</section>
 
-	<section class="section">
-		<h3 class="title is-3">Locations</h3>
-		<ul>
-			{#each $locations as location}
-			<li>
-				<a href="/location/{fn.slug(location.name)}">{location.name}</a>
-			</li>
-			{/each}
-		</ul>
-	</section>
+	<div class="section">
+		<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>