Add latest issue part on Subscribe page and Create component for Issue

src/routes/subscribe.svelte

@@ -5,21 +5,22 @@
 <script lang="ts">
     import { navigating } from '$app/stores'
     import { onMount } from 'svelte'
-    import dayjs from 'dayjs'
     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 Image from '$components/atoms/Image.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: any
     export let issues: any[]
 
+    const latestIssue = issues[0]
+
 
     onMount(() => {
         /**
@@ -27,7 +28,7 @@
          */
         const animation = timeline([
             // Elements
-            ['.heading .text, .subscribe__top .newsletter-form, .subscribe__issues', {
+            ['.heading .text, .subscribe__top .newsletter-form', {
                 y: [24, 0],
                 opacity: [0, 1],
             }, {
@@ -36,7 +37,7 @@
             }],
 
             // Reveal each issue
-            ['.subscribe__issues > ul > li', {
+            ['.subscribe__issues h2, .subscribe__issues > .issue-container, .subscribe__issues > ul', {
                 y: [16, 0],
                 opacity: [0, 1],
             }, {
@@ -59,7 +60,7 @@
 </script>
 
 <Metas
-    title="Subscribe"
+    title="Subscribe — Houses Of"
     description={data.newsletter_page_text}
     image=""
 />
@@ -74,30 +75,21 @@
     </div>
 
     <section class="subscribe__issues">
-        <h2 class="title-small">Past Issues</h2>
-        <ul>
-            {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
-                <li>
-                    <div class="issue">
-                        <a href={link} target="_blank" rel="external noreferrer noopener" tabindex="0">
-                            <Image
-                                id={id}
-                                sizeKey="issue-thumbnail-small"
-                                width={160} height={112}
-                                alt="Issue {issue} thumbnail"
-                            />
-                            <dl>
-                                <dt>Issue #{issue}</dt>
-                                <dd>
-                                    <p>{title}</p>
-                                    <time>{dayjs(date_sent).format('DD/MM/YYYY')}</time>
-                                </dd>
-                            </dl>
-                        </a>
-                    </div>
-                </li>
-            {/each}
-        </ul>
+        <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" />