🚧 Switch to monorepo with Turbo

apps/website/src/routes/+page.svelte

@@ -0,0 +1,170 @@
+<style lang="scss">
+    @import "../style/pages/homepage";
+</style>
+
+<script lang="ts">
+    import { navigating, page } from '$app/stores'
+    import type { PageData } from './$types'
+    import { getContext, onMount } from 'svelte'
+    import { timeline, stagger } from 'motion'
+    import { DELAY } from '$utils/constants'
+    import { smoothScroll } from '$utils/stores'
+    import { getAssetUrlKey } from '$utils/api'
+    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 InteractiveGlobe from '$components/organisms/InteractiveGlobe.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
+
+    const { photos } = data
+    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_title}
+    description={settings.seo_description}
+    image={getAssetUrlKey(settings.seo_image.id, 'share-image')}
+/>
+
+
+<PageTransition>
+    <main class="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={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
+                    <IconEarth animate={true} />
+                </Button>
+            </div>
+        </section>
+
+        <section class="homepage__photos">
+            <Collage {photos} />
+        </section>
+
+        <div class="homepage__ctas">
+            <DiscoverText />
+
+            <ListCTAs>
+                <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>
+                <li>
+                    <BoxCTA
+                        url="/about"
+                        icon="compass"
+                        label="Learn about the project"
+                        alt="Compass"
+                    />
+                </li>
+            </ListCTAs>
+        </div>
+
+        <section class="homepage__locations" id="locations">
+            <InteractiveGlobe />
+
+            <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>
+    </main>
+</PageTransition>