🚧 Migrate to new SvelteKit routing system

A bit annoying but for the best I guess?

src/routes/about/+page.svelte

@@ -0,0 +1,164 @@
+<style lang="scss">
+    @import "../../style/pages/about";
+</style>
+
+<script lang="ts">
+    import { onMount, afterUpdate } from 'svelte'
+    import type { PageData, Errors } from './$types'
+    import { map } from '$utils/functions'
+    import { scroll, animate, inView, type ScrollOptions } from 'motion'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
+    import Button from '$components/atoms/Button.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+    import ProcessStep from '$components/molecules/ProcessStep.svelte'
+    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+
+    export let data: PageData
+    export let errors: Errors
+
+    // console.log(data)
+
+    let scrollY: number, innerWidth: number, innerHeight: number
+    let purposeEl: HTMLElement
+    let stepsEl: HTMLElement
+    let photosGridEl: HTMLElement
+    let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
+
+    $: 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]
+        : [0]
+
+    onMount(() => {
+        /**
+         * Purpose reveal
+         */
+        inView(purposeEl, ({ target, isIntersecting }) => {
+            target.classList.toggle('is-visible', isIntersecting)
+        }, { amount: 0.75 })
+
+
+        /**
+         * Steps scroll animation
+         */
+        const cards = stepsEl.querySelectorAll('.step')
+        const cardsAmount = data.about.process_steps.length
+
+        cards.forEach((card: HTMLElement, i: number) => {
+            const index = i + 1
+            const reverseIndex = cardsAmount - index
+            const overlay = card.querySelector('.overlay')
+            const scrollOptions: ScrollOptions = {
+                target: stepsEl,
+                offset: [`${i / cardsAmount * 100}%`, `${index / cardsAmount * 100}%`],
+            }
+
+            // Card scale
+            scroll(animate(card, {
+                scale: [1, 1 - (0.02 * reverseIndex)]
+            }), scrollOptions)
+
+            // Overlay opacity
+            scroll(animate(overlay, {
+                opacity: [0, 0.2 + (0.05 * reverseIndex)]
+            }), scrollOptions)
+        })
+    })
+
+
+    afterUpdate(() => {
+        // Update photos grid top offset
+        photosGridOffset = photosGridEl.offsetTop
+    })
+</script>
+
+<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+
+<Metas
+    title="About the project – Houses Of"
+    description=""
+    image=""
+/>
+
+
+<PageTransition name="about">
+    <Heading
+        text={data.about.description}
+    />
+
+    <section class="about__purpose" bind:this={purposeEl}>
+        <div class="container-wide">
+            <div class="text title-xl" role="heading">
+                {@html data.about.purpose_text}
+            </div>
+
+            <div class="background" />
+        </div>
+    </section>
+
+    <section class="about__process">
+        <div class="container grid">
+            <div class="title">
+                <h2 class="title-big">{data.about.process_title}</h2>
+                <p class="text-normal">{data.about.process_subtitle}</p>
+            </div>
+
+            <div class="steps" bind:this={stepsEl}
+                style:--cards-amount={data.about.process_steps.length}
+            >
+                {#each data.about.process_steps as step, index}
+                    <ProcessStep {...step} index={index} />
+                {/each}
+            </div>
+
+            <div class="intention">
+                <p class="intention__content title-medium">
+                    {data.about.process_intention}
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <section class="about__photos" bind:this={photosGridEl}>
+        <div class="container-wide">
+            <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
+                {#each data.photos as { image: { id }, title }, index}
+                    <AboutGridPhoto class="about-grid-photo"
+                        {id}
+                        alt={title}
+                        disabled={fadedPhotosIndexes.includes(index)}
+                    />
+                {/each}
+            </div>
+        </div>
+    </section>
+
+    <div class="about__bottom container grid">
+        <section class="about__interest grid">
+            <h2 class="title-xl">{data.about.contact_title}</h2>
+
+            <div class="blocks">
+                {#each data.about.contact_blocks as { title, text, link, button }}
+                    <div class="block">
+                        <h3 class="text-label">{title}</h3>
+                        <p class="text-normal">{text}</p>
+                        {#if link}
+                            <Button size="small" url={link} text={button} />
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        </section>
+
+        <section class="grid-modules">
+            <div class="wrap">
+                <ShopModule />
+                <NewsletterModule />
+            </div>
+        </section>
+    </div>
+</PageTransition>