🚧 Switch to monorepo with Turbo

apps/website/src/routes/(site)/subscribe/+page.svelte

@@ -0,0 +1,99 @@
+<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/constants'
+    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 InteractiveGlobe from '$components/organisms/InteractiveGlobe.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="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"
+/>
+
+
+<PageTransition>
+    <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 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>
+
+        <InteractiveGlobe type="cropped" />
+    </main>
+</PageTransition>