WIP React > Svelte

Put most of the developed design into Svelte

src/routes/index.svelte

@@ -5,16 +5,70 @@
 
     // Dependencies
     // import anime from 'animejs/lib/anime.es.js'
+    // import * as basicScroll from 'basicscroll'
 
     // Components
-    import Locations from '../components/Locations'
-    import Footer from '../parts/Footer'
+    import Button from '../atoms/Button'
+    import IconGlobeSmall from '../atoms/IconGlobeSmall'
+    import IconGlobe from '../atoms/IconGlobe'
+    import InteractiveGlobe from '../molecules/InteractiveGlobe'
+    import Carousel from '../organisms/Carousel'
+    import Locations from '../organisms/Locations'
+    import Footer from '../molecules/Footer'
 
-    // Reset current location
-    currentLocation.set(undefined)
+    // Reset current location if existing
+    $: if ($currentLocation) {
+        currentLocation.set()
+    }
 </script>
 
-<section class="hero is-medium is-danger has-text-centered">
+<svelte:head>
+	<title>Houses Of - Beautiful houses of planet Earth</title>
+</svelte:head>
+
+<section class="intro">
+    <h1 class="title-massive title-parallax">Houses</h1>
+    <!-- <MassiveTitle
+        text="Houses"
+        scrollFrom="0" scrollTo={window.innerHeight * 0.6}
+        effectFrom="-5vw" effectTo="-20vw"
+    /> -->
+
+    <div class="wrap">
+        <div class="description">
+            <p>{$site.description}</p>
+
+            <Button href="/choose" type="button" text="Explore locations">
+                <IconGlobeSmall width="22" color="#666" />
+            </Button>
+        </div>
+    </div>
+
+    <Carousel />
+</section>
+
+<section class="explore explore--homepage">
+    <p class="of">of</p>
+
+    <div class="description">
+        <p>{$site.explore_list}</p>
+    </div>
+
+    <InteractiveGlobe />
+
+    <!-- <MassiveTitle
+        text="World"
+        scrollFrom="0" scrollTo={window.innerHeight * 0.6}
+        effectFrom="-5vw" effectTo="-20vw"
+    /> -->
+    <h1 class="title-massive title-parallax">World</h1>
+
+    <Locations />
+</section>
+
+<Footer />
+
+<!-- <section class="hero is-medium is-danger has-text-centered">
     <div class="hero-body">
         <div class="container">
             <h1 class="title">Houses Of</h1>
@@ -26,6 +80,10 @@
 <div class="section">
     <div class="container">
         <h2 class="title is-4">Choose on globe</h2>
+
+        <IconGlobeSmall width="14" color="red" />
+        <IconGlobe />
+
         <div class="content">
             <p>{$site.explore_globe}</p>
             <p>[globe]</p>
@@ -40,4 +98,4 @@
     </div>
 </div>
 
-<Footer />
+<!-- <Footer /> -->