97 lines
2.8 KiB
Svelte
97 lines
2.8 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/pages/subscribe";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { navigating } from '$app/stores'
|
|
import type { PageData } from './$types'
|
|
import { onMount } from 'svelte'
|
|
import { stagger, timeline } from 'motion'
|
|
import { DELAY } from '$utils/contants'
|
|
import { quartOut } from '$animations/easings'
|
|
// Components
|
|
import Metas from '$components/Metas.svelte'
|
|
import PageTransition from '$components/PageTransition.svelte'
|
|
import Heading from '$components/molecules/Heading.svelte'
|
|
import EmailForm from '$components/molecules/EmailForm.svelte'
|
|
import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
|
|
import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
|
|
|
|
export let data: PageData
|
|
|
|
const { issues } = data
|
|
const latestIssue = issues[0]
|
|
|
|
|
|
onMount(() => {
|
|
/**
|
|
* Animations
|
|
*/
|
|
const animation = timeline([
|
|
// Elements
|
|
['.heading .text, .subscribe__top .newsletter-form', {
|
|
y: [24, 0],
|
|
opacity: [0, 1],
|
|
}, {
|
|
at: 0.5,
|
|
delay: stagger(0.35),
|
|
}],
|
|
|
|
// Reveal each issue
|
|
['.subscribe__issues h2, .subscribe__issues > .issue-container, .subscribe__issues > ul', {
|
|
y: [16, 0],
|
|
opacity: [0, 1],
|
|
}, {
|
|
duration: 1,
|
|
at: 1.5,
|
|
delay: stagger(0.15),
|
|
}],
|
|
], {
|
|
delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
|
|
defaultOptions: {
|
|
duration: 1.6,
|
|
easing: quartOut,
|
|
},
|
|
})
|
|
animation.stop()
|
|
|
|
// Run animation
|
|
requestAnimationFrame(animation.play)
|
|
})
|
|
</script>
|
|
|
|
<Metas
|
|
title="Subscribe — Houses Of"
|
|
description={data.newsletter_page_text}
|
|
image=""
|
|
/>
|
|
|
|
<PageTransition name="subscribe">
|
|
<div class="subscribe__top">
|
|
<Heading
|
|
text={data.newsletter_page_text}
|
|
/>
|
|
|
|
<EmailForm />
|
|
</div>
|
|
|
|
<section class="subscribe__issues">
|
|
<h2 class="title-small">Latest Issue</h2>
|
|
<div class="issue-container">
|
|
<NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
|
|
</div>
|
|
|
|
{#if issues.length > 1}
|
|
<h2 class="title-small">Past Issues</h2>
|
|
<ul>
|
|
{#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
|
|
<li class="issue-container">
|
|
<NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</section>
|
|
|
|
<InteractiveGlobe2 type="cropped" />
|
|
</PageTransition> |