Integrate more section in About page

src/routes/about.svelte

@@ -9,13 +9,14 @@
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
+    import Image from '$components/atoms/Image.svelte'
     import Button from '$components/atoms/Button.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
     export let data: any
-    export let photos: any[]
+    export let photos: PhotoGridAbout[]
 
     // console.log(data)
 
@@ -24,7 +25,7 @@
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
     let sectionsObserver: IntersectionObserver
 
-    $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight / 2, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.125, true)
+    $: 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]
@@ -37,16 +38,16 @@
                 target.classList.toggle('is-visible', isIntersecting)
 
                 // Run effect once
-                if (isIntersecting && target.dataset.keep) {
+                if (isIntersecting && target.dataset.stay) {
                     sectionsObserver.unobserve(target)
                 }
             })
         }, {
-            threshold: 0.2,
-            rootMargin: '-10% 0px -30%'
+            threshold: 0.3,
+            rootMargin: '0% 0px 0%'
         })
 
-        const sections = document.querySelectorAll('.about [data-section]')
+        const sections = document.querySelectorAll('.about [data-part]')
         sections.forEach(section => sectionsObserver.observe(section))
 
         // Destroy
@@ -75,7 +76,7 @@
         text={data.description}
     />
 
-    <section class="about__purpose" data-section data-keep="">
+    <section class="about__purpose" data-part data-stay="true">
         <div class="container-wide">
             <div class="text title-xl" role="heading">
                 {@html data.purpose_text}
@@ -92,12 +93,35 @@
         </div>
 
         <div class="steps container-wide">
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
+            {#each data.process_steps as { title, text, image }}
+                {@const imageRatio = image ? image.width / image.height : undefined}
+                <div class="step" data-part data-stay="true">
+                    {#if image}
+                        <Image
+                            class="image shadow-box-dark"
+                            id={image.id}
+                            sizeKey="photo-grid"
+                            sizes={{
+                                small: { width: 400 },
+                                medium: { width: 600 },
+                            }}
+                            ratio={imageRatio}
+                            alt={image.title}
+                        />
+                    {/if}
+                    <div class="step__content">
+                        <h3 class="text-label">{title}</h3>
+                        <div class="text">
+                            {@html text}
+                        </div>
+                    </div>
+                </div>
+            {/each}
+            <div class="step intention" data-part data-stay="true">
+                <p class="intention__text title-medium">
+                    {data.process_intention}
+                </p>
+            </div>
         </div>
     </section>
 

src/routes/about.ts

@@ -40,6 +40,16 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
 
                     process_title
                     process_subtitle
+                    process_steps {
+                        title
+                        text
+                        image {
+                            id
+                            title
+                            width, height
+                        }
+                    }
+                    process_intention
 
                     contact_title
                     contact_blocks