WIP

src/routes/choose.svelte

@@ -1,7 +1,11 @@
 <script>
+    import { onMount } from 'svelte'
     import { site, currentLocation } from '../store'
+    import * as fn from '../functions'
+    import AOS from 'aos'
 
     // Components
+    import IconArrow from '../atoms/IconArrow'
     import Globe from '../molecules/InteractiveGlobe'
     import Footer from '../molecules/Footer'
     import Locations from '../organisms/Locations'
@@ -10,6 +14,20 @@
     $: if ($currentLocation) {
         currentLocation.set()
     }
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        const titleHouses = document.getElementById('title-houses')
+        const titleWorld = document.getElementById('title-world')
+
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+    })
 </script>
 
 <svelte:head>
@@ -19,45 +37,36 @@
 <section class="explore">
     <div class="wrap">
         <div class="explore__top">
-            <a href="/" class="button-control button-control--pink">
-                <img src="/img/icons/arrow-white.svg" alt="">
+            <a href="/" class="button-control button-control--pink dir-left">
+                <IconArrow direction="left" color="#fff" className="icon" />
+                <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
             </a>
-            <h1 class="title-location">Houses <em>of the</em> World</h1>
+
+            <div class="title-location title-location--inline">
+                <div aria-label="Houses" data-aos="letters-translate-bottom">
+                    <div class="anim-mask">
+                        {@html fn.lettersToSpan('Houses')}
+                    </div>
+                </div>
+
+                <em>of the</em>
+
+                <div aria-label="World" data-aos="letters-translate-bottom">
+                    <div class="anim-mask">
+                        {@html fn.lettersToSpan('World')}
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <div class="description">
+        <div class="explore__description style-description">
             <p>{$site.explore_globe}</p>
         </div>
     </div>
 
     <Globe />
 
-     <Locations />
+    <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 The World</h1>
-        </div>
-    </div>
-</section>
-
-<div class="container">
-    <section class="section">
-        <h2 class="title is-4">Choose on globe</h2>
-		<div class="content">
-			<p>{$site.explore_globe}</p>
-			<p>[globe]</p>
-		</div>
-
-        <h2 class="title is-4">Choose from list</h2>
-        <div class="content">
-			<p>{$site.explore_list}</p>
-		</div>
-
-        <Locations />
-    </section>
-</div> -->