housesof/src/routes/+page.svelte

<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/contants'
    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="{$page.url.origin}/images/share_image.jpg"
/>
<!-- 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>