172 lines
4.9 KiB
Svelte
172 lines
4.9 KiB
Svelte
<style lang="scss">
|
|
@import "../style/pages/homepage";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { navigating } from '$app/stores'
|
|
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 SplitText from '$components/SplitText.svelte'
|
|
import Button from '$components/atoms/Button/Button.svelte'
|
|
import IconEarth from '$components/atoms/IconEarth.svelte'
|
|
import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
|
|
import BoxCTA from '$components/atoms/BoxCTA/BoxCTA.svelte'
|
|
import DiscoverText from '$components/atoms/DiscoverText.svelte'
|
|
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
|
|
import Collage from '$components/organisms/Collage/Collage.svelte'
|
|
import Locations from '$components/organisms/Locations/Locations.svelte'
|
|
import ListCTAs from '$components/organisms/ListCTAs.svelte'
|
|
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
|
|
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
|
|
|
|
export let data
|
|
|
|
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')}
|
|
/>
|
|
|
|
|
|
<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
|
|
size="medium"
|
|
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>
|