Change ProcessStep access and displaying

- make if condition in page and not with visible prop in component
- don't use hash as it was bugging the step 4 for some reason and also was not scrolling to it with hash
- send event when switching a step

src/routes/about/+page.svelte

@@ -21,18 +21,18 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import ProcessStep from '$components/molecules/ProcessStep.svelte'
     import Banner from '$components/organisms/Banner.svelte'
+    import { sendEvent } from '$utils/analytics';
 
     export let data: PageData
     const { about, photos } = data
 
     let scrollY: number, innerWidth: number, innerHeight: number
     let photosGridEl: HTMLElement
-    let currentStep: number = 0
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
+    let currentStep: number = 0
     let emailCopied: string = null
     let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 
-    $: currentStep = $page.url.hash ? Number($page.url.hash.split('#step-')[1]) - 1 : 0
     $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
     $: fadedPhotosIndexes = innerWidth > 768
         ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
@@ -315,7 +315,12 @@
                     <ol>
                         {#each about.process_steps as { title }, index}
                             <li class:is-active={index === currentStep}>
-                                <a href="#step-{index + 1}" class="title-big">
+                                <a href="#step-{index + 1}" class="title-big"
+                                    on:click|preventDefault={() => {
+                                        currentStep = index
+                                        sendEvent({ action: 'aboutStepSwitch' })
+                                    }}
+                                >
                                     <span>{title}</span>
                                 </a>
                             </li>
@@ -325,15 +330,16 @@
 
                 <div class="steps">
                     {#each about.process_steps as { text, image, video_mp4, video_webm }, index}
-                        <ProcessStep
-                            {index} {text}
-                            image={image ?? undefined}
-                            video={video_mp4 && video_webm ? {
-                                mp4: video_mp4.id,
-                                webm: video_webm.id
-                            } : undefined}
-                            visible={index === currentStep}
-                        />
+                        {#if index === currentStep}
+                            <ProcessStep
+                                {index} {text}
+                                image={image ?? undefined}
+                                video={{
+                                    mp4: video_mp4?.id,
+                                    webm: video_webm?.id
+                                }}
+                            />
+                        {/if}
                     {/each}
                 </div>
             </div>