Use Heading component on Credits and Subscribe page

Adapt the entering animation as well, SiteTitle was fading

src/components/molecules/Heading.svelte

@@ -11,7 +11,7 @@
 <section class="heading">
     <SiteTitle variant="inline" />
 
-    <p class="text-medium">
+    <div class="text text-medium">
         {@html text}
-    </p>
+    </div>
 </section>

src/routes/credits.svelte

@@ -8,9 +8,9 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
-    import SiteTitle from '$components/atoms/SiteTitle.svelte'
-    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
     import Image from '$components/atoms/Image.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
 
     export let data: any
 
@@ -26,7 +26,7 @@
             autoplay: false,
         })
 
-        anime.set('.credits__heading > *, .credits__category > ul > li', {
+        anime.set('.heading .text, .credits__category > ul > li', {
             opacity: 0,
             translateY: 24,
         })
@@ -36,7 +36,7 @@
 
         // Elements
         timeline.add({
-            targets: '.credits__heading > *, .credits__category',
+            targets: '.heading .text, .credits__category',
             opacity: 1,
             translateY: 0,
             delay: anime.stagger(350),
@@ -63,10 +63,9 @@
 
 
 <PageTransition name="credits">
-    <section class="credits__heading">
-        <SiteTitle variant="inline" />
-        <p class="text-medium">{data.credits.text}</p>
-    </section>
+    <Heading
+        text={data.credits.text}
+    />
 
     <section class="credits__list">
         <div class="grid container">

src/routes/subscribe.svelte

@@ -29,14 +29,14 @@
             autoplay: false,
         })
 
-        anime.set('.subscribe__top > *, .subscribe__issues', {
+        anime.set('.heading .text, .subscribe__top .newsletter-form, .subscribe__issues', {
             opacity: 0,
             translateY: 24,
         })
 
         // Elements
         timeline.add({
-            targets: '.subscribe__top > *, .subscribe__issues',
+            targets: '.heading .text, .subscribe__top .newsletter-form, .subscribe__issues',
             opacity: 1,
             translateY: 0,
             delay: anime.stagger(200),

src/style/molecules/_heading.scss

@@ -19,7 +19,7 @@
     }
 
     // Text
-    :global(p) {
+    .text {
         max-width: 300px;
         margin: 40px auto 0;
         font-weight: 200;

src/style/pages/_credits.scss

@@ -1,28 +1,5 @@
 // Credits Page
 .credits {
-    // Intro Section
-    &__heading {
-        margin: 56px 0 72px;
-        color: $color-tertiary;
-        text-align: center;
-
-        @include bp (md) {
-            margin: 160px 0;
-        }
-
-        // Text
-        p {
-            max-width: 320px;
-            margin: 50px auto 0;
-            font-weight: 200;
-
-            @include bp (sm) {
-                margin: 72px auto 0;
-                max-width: 450px;
-            }
-        }
-    }
-
     // List
     &__list {
         padding-bottom: 96px;