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/components/PageTransition.svelte

@@ -1,14 +1,28 @@
 <script lang="ts">
+    import { page } from '$app/stores'
+    import { onMount, tick } from 'svelte'
     import { fade } from 'svelte/transition'
+    import { scrollToTop } from '$utils/functions'
+    import { DURATION } from '$utils/contants'
 
-    export let path = ''
+    export let name: string
+
+    onMount(async () => {
+        // Disable when changing filters on /photos and shop?
+        if (!$page.query.get('country') && !$page.path.includes('/shop/poster')) {
+            await tick()
+            setTimeout(() => {
+                // Scroll back to top between page transitions
+                scrollToTop()
+            }, DURATION.PAGE_DELAY)
+        }
+    })
 </script>
 
-{#key path}
-<div
-    in:fade={{ duration: 400, delay: 500 }}
-    out:fade={{ duration: 400 }}
+
+<main class={name}
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_DELAY }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
 >
     <slot />
-</div>
-{/key}
+</main>