Integrate more section in About page

src/app.d.ts

@@ -20,3 +20,17 @@ declare namespace svelte.JSX {
         ontap?: (event: CustomEvent<boolean> & { target: EventTarget & T }) => any,
     }
 }
+
+
+/**
+ * Custom Types
+ */
+declare type PhotoGridAbout = {
+    id: string
+    title: string
+    slug: string
+    image: {
+        id: string
+        title: string
+    }
+}

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,
+            threshold: 0.3,
-            rootMargin: '-10% 0px -30%'
+            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>
+            {#each data.process_steps as { title, text, image }}
-            <div></div>
+                {@const imageRatio = image ? image.width / image.height : undefined}
-            <div></div>
+                <div class="step" data-part data-stay="true">
-            <div></div>
+                    {#if image}
-            <div></div>
+                        <Image
-            <div></div>
+                            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

src/style/molecules/_heading.scss

@@ -20,7 +20,8 @@
 
     // Text
     .text {
-        max-width: 300px;
+        width: 75%;
+        max-width: 360px;
         margin: 40px auto 0;
         font-weight: 200;
 

src/style/pages/_about.scss

@@ -59,6 +59,9 @@
     ** Process
     */
     &__process {
+        position: relative;
+        z-index: 2;
+
         @include bp (sm) {
             margin: 128px 0 0;
         }
@@ -83,44 +86,129 @@
             }
         }
 
+        // Steps grid
         .steps {
-            display: grid;
+            // gap: 8px;
-            gap: 8px;
 
             @include bp (sm) {
+                display: grid;
                 grid-template-columns: repeat(16, 1fr);
                 gap: 12px;
             }
 
-            div {
+            & > * {
-                background: $color-primary-darker;
+                --delay: 150ms;
-                border-radius: 8px;
+                opacity: 0;
-                height: 600px;
+                transform: translate3d(0, 40px, 0);
+                transition-property: opacity, transform;
+                transition-duration: 1.6s;
+                transition-timing-function: var(--ease-quart);
+
+                // Add reveal delay for every second item
+                &:nth-child(2n) {
+                    transition-delay: var(--delay);
+                }
+            }
+
+            // Visible step state
+            :global(.is-visible) {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+            }
+        }
+
+        // Each Step
+        .step {
+            display: flex;
+            flex-direction: column;
+            padding: 48px;
+            background: $color-primary-darker;
+            border-radius: 8px;
+
+            @include bp (sm) {
+                min-height: 480px;
+                border-radius: 16px;
+            }
+
+            &:nth-child(1) {
+                grid-column: span 10;
+            }
+            &:nth-child(2) {
+                grid-column: span 6;
+            }
+            &:nth-child(3) {
+                grid-column: span 6;
+            }
+            &:nth-child(4) {
+                grid-column: span 10;
+            }
+            &:nth-child(5) {
+                grid-column: span 8;
+            }
+            &:nth-child(6) {
+                grid-column: span 8;
+            }
+
+            // Image
+            :global(.image) {
+                display: block;
+                margin-right: auto;
+                width: 60%;
+                max-width: 600px;
+                max-height: 364px;
+                overflow: hidden;
+                border-radius: 6px;
+
+                :global(img) {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+
+            // Content
+            &__content {
+                max-width: 568px;
+                width: 80%;
+                margin-top: 40px;
 
                 @include bp (sm) {
-                    border-radius: 16px;
+                    margin-top: auto;
+                    padding-top: 40px;
                 }
 
-                &:nth-child(1) {
+                h3 {
-                    grid-column: span 10;
+                    margin-bottom: 8px;
+                    color: #fff;
+                    font-weight: 600;
                 }
-                &:nth-child(2) {
+                .text {
-                    grid-column: span 6;
+                    line-height: 1.4;
-                }
+                    font-weight: 300;
-                &:nth-child(3) {
+                    color: $color-secondary-light;
-                    grid-column: span 6;
+
-                }
+                    @include bp (sm) {
-                &:nth-child(4) {
+                        font-size: rem(18px);
-                    grid-column: span 10;
+                    }
-                }
-                &:nth-child(5) {
-                    grid-column: span 8;
-                }
-                &:nth-child(6) {
-                    grid-column: span 8;
                 }
             }
         }
+
+        // Intention block
+        .intention {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: $color-tertiary;
+            text-align: center;
+
+            &__text {
+                width: 75%;
+                max-width: 512px;
+            }
+        }
     }
 
 
@@ -130,15 +218,14 @@
     &__photos {
         position: relative;
         z-index: 1;
-        margin-top: 48px;
+        margin-top: -32px;
 
         @include bp (sm) {
-            margin-top: 80px;
+            margin-top: -80px;
         }
 
         .container-wide {
             overflow: hidden;
-            border-radius: 8px;
         }
 
         .photos-grid {
@@ -189,19 +276,8 @@
             top: 0;
             left: 0;
             width: 100%;
-            height: 20vw;
+            height: 100%;
-            background: linear-gradient(to top, rgba($color-primary, 0), $color-primary);
+            background: linear-gradient(0deg, rgba($color-primary, 1) 0%, rgba($color-primary, 0) 25%, rgba($color-primary, 0) 75%, rgba($color-primary, 1) 100%);
-            pointer-events: none;
-        }
-        &:after {
-            content: "";
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 30vw;
-            background: linear-gradient(to top, $color-primary, rgba($color-primary, 0));
             pointer-events: none;
         }
     }