93 lines
2.8 KiB
Svelte
93 lines
2.8 KiB
Svelte
<style lang="scss" src="../../../style/pages/subscribe.scss"></style>
|
||
|
||
<script lang="ts">
|
||
import { navigating } from '$app/stores'
|
||
import { onMount } from 'svelte'
|
||
import { stagger, timeline } from 'motion'
|
||
import { DELAY } from '$utils/constants'
|
||
import { quartOut } from '$animations/easings'
|
||
// Components
|
||
import Metas from '$components/Metas.svelte'
|
||
import Heading from '$components/molecules/Heading/Heading.svelte'
|
||
import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
|
||
import NewsletterIssue from '$components/molecules/NewsletterIssue/NewsletterIssue.svelte'
|
||
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
|
||
|
||
let { data } = $props()
|
||
|
||
const latestIssue = $derived(data.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="Subscribe to the Houses Of newsletter to be notified when new photos or locations are added to the site and when more prints are available on our shop"
|
||
/>
|
||
|
||
|
||
<main class="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 data.issues.length > 1}
|
||
<h2 class="title-small">Past Issues</h2>
|
||
<ul>
|
||
{#each data.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>
|
||
|
||
<InteractiveGlobe type="cropped" />
|
||
</main>
|