🚧 Migrate to new SvelteKit routing system

A bit annoying but for the best I guess?

src/routes/+page.svelte

@@ -0,0 +1,167 @@
+<style lang="scss">
+    @import "../style/pages/homepage";
+</style>
+
+<script lang="ts">
+    import { navigating } from '$app/stores'
+    import type { PageData, Errors } from './$types'
+    import { getContext, onMount } from 'svelte'
+    import { timeline, stagger } from 'motion'
+    import { DELAY } from '$utils/contants'
+    import { smoothScroll } from '$utils/functions'
+    import reveal from '$animations/reveal'
+    import { quartOut } from '$animations/easings'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import SplitText from '$components/SplitText.svelte'
+    import Button from '$components/atoms/Button.svelte'
+    import IconEarth from '$components/atoms/IconEarth.svelte'
+    import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import DiscoverText from '$components/atoms/DiscoverText.svelte'
+    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
+    import Collage from '$components/organisms/Collage.svelte'
+    import Locations from '$components/organisms/Locations.svelte'
+    import ListCTAs from '$components/organisms/ListCTAs.svelte'
+    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+
+    export let data: PageData
+    export let errors: Errors
+
+    const { settings, locations }: any = getContext('global')
+
+    let scrollY: number, innerHeight: number
+
+
+    onMount(() => {
+        /**
+         * Animations
+         */
+        const animation = timeline([
+            // Reveal text
+            ['.homepage__headline', {
+                y: [16, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.75,
+            }],
+
+            // Animate collage photos
+            ['.collage .photo-card', {
+                y: ['33.33%', 0],
+                rotate: [-4, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0,
+                duration: 1.2,
+                delay: stagger(0.075),
+            }]
+        ], {
+            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
+            },
+        })
+        animation.stop()
+
+        // Run animation
+        requestAnimationFrame(animation.play)
+    })
+</script>
+
+<svelte:window bind:scrollY bind:innerHeight />
+
+<Metas
+    title="{settings.seo_name} — {settings.seo_title}"
+    description={settings.seo_description}
+    image=""
+/>
+
+<PageTransition name="homepage">
+    <section class="homepage__intro"
+        use:reveal={{
+            animation: { opacity: [0, 1] },
+            options: {
+                duration: 1,
+            },
+        }}
+    >
+        <ScrollingTitle
+            tag="h1"
+            class="title-houses"
+            label="Houses of the World"
+            offsetStart={-300}
+            offsetEnd={400}
+        >
+            <SplitText text="Houses" mode="chars" />
+        </ScrollingTitle>
+
+        <div class="homepage__headline">
+            <p class="text-medium">
+                {settings.description}
+            </p>
+
+            <Button url="#locations" text="Explore locations" on:click={event => smoothScroll({ hash: 'locations', event })}>
+                <IconEarth animate={true} />
+            </Button>
+        </div>
+    </section>
+
+    <section class="homepage__photos">
+        <Collage photos={data.photos} />
+    </section>
+
+    <div class="homepage__ctas">
+        <DiscoverText />
+
+        <ListCTAs>
+            <li>
+                <BoxCTA
+                    url="#locations"
+                    icon="globe"
+                    label="Discover locations"
+                    alt="Globe"
+                    on:click={() => smoothScroll({ hash: 'locations' })}
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/photos"
+                    icon="photos"
+                    label="Browse all photos"
+                    alt="Photos"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/shop"
+                    icon="bag"
+                    label="Shop our products"
+                    alt="Shopping bag"
+                />
+            </li>
+        </ListCTAs>
+    </div>
+
+    <section class="homepage__locations" id="locations">
+        <InteractiveGlobe2 />
+
+        <ScrollingTitle tag="p" class="title-world mask">
+            <SplitText text="World" mode="chars" />
+        </ScrollingTitle>
+
+        <Locations {locations} />
+    </section>
+
+    <div class="grid-modules">
+        <div class="container grid">
+            <div class="wrap">
+                <ShopModule />
+                <NewsletterModule />
+            </div>
+        </div>
+    </div>
+</PageTransition>