Use PageTransition component on every route

- Scrolls back to top when mounting new page with a timeout of the delay
- Rename photo Viewer class
- Change Shop posters section text from p to label

src/routes/shop/__layout.svelte

@@ -6,6 +6,7 @@
     import type { AnimeTimelineInstance } from 'animejs'
     // Components
     import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
     import Image from '$components/atoms/Image.svelte'
     import ButtonCart from '$components/atoms/ButtonCart.svelte'
@@ -37,7 +38,7 @@
     /**
      * Transition: Anime timeline
      */
-     let timeline: AnimeTimelineInstance
+    let timeline: AnimeTimelineInstance
 
     if (browser) {
         requestAnimationFrame(() => {
@@ -103,7 +104,8 @@
     image=""
 />
 
-<main class="shop-page">
+
+<PageTransition name="shop-page">
     <Cart />
 
     <section class="shop-page__intro" bind:this={introEl}>
@@ -180,7 +182,9 @@
         </div>
     </section>
 
-    <slot />
+    {#key product}
+        <slot />
+    {/key}
 
     {#if posters}
         <section class="shop-page__posters grid">
@@ -195,12 +199,12 @@
                 {/each}
             </div>
             <div class="subscribe">
-                <p>Subscribe to be notified when new posters become available</p>
+                <label class="subscribe__text" for="SUB_EMAIL">Subscribe to be notified when new posters become available</label>
                 <EmailForm />
             </div>
         </section>
     {/if}
-</main>
+</PageTransition>
 
 
 <script context="module" lang="ts">