From 351061dc617bb4f16188addf05ed91954e91f8fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 7 Sep 2022 22:47:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Rework=20About=20page=20Process=20s?=
 =?UTF-8?q?ection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/animations/transitions.ts               |  25 +++++
 src/components/molecules/ProcessStep.svelte |  79 +++++++------
 src/routes/about/+page.svelte               |  66 +++++------
 src/style/molecules/_process-step.scss      | 116 ++++++--------------
 src/style/pages/_about.scss                 |  54 ++++-----
 5 files changed, 148 insertions(+), 192 deletions(-)
 create mode 100644 src/animations/transitions.ts

diff --git a/src/animations/transitions.ts b/src/animations/transitions.ts
new file mode 100644
index 0000000..350c4e4
--- /dev/null
+++ b/src/animations/transitions.ts
@@ -0,0 +1,25 @@
+import { animate } from 'motion'
+import { quartOut } from './easings'
+
+export const scaleFade = (node: HTMLElement, {
+    delay = 0,
+    duration = 1,
+    scale = [0.7, 1],
+    opacity = [1, 0],
+    x = null,
+}) => {
+    return {
+        css: () => {
+            animate(node, {
+                scale,
+                opacity,
+                x,
+                z: 0,
+            }, {
+                easing: quartOut,
+                duration,
+                delay,
+            })
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/molecules/ProcessStep.svelte b/src/components/molecules/ProcessStep.svelte
index c18a362..9652a3e 100644
--- a/src/components/molecules/ProcessStep.svelte
+++ b/src/components/molecules/ProcessStep.svelte
@@ -3,53 +3,60 @@
 </style>
 
 <script lang="ts">
+    import { scaleFade } from '$animations/transitions'
+
     // Components
     import Image from '$components/atoms/Image.svelte'
     import { getAssetUrlKey } from '$utils/api'
 
     export let index: number
-    export let title: string
     export let text: string
     export let image: any = undefined
     export let video: any = undefined
+    export let visible: boolean = false
+
+    let videoEl: HTMLVideoElement
 
     const imageRatio = image ? image.width / image.height : undefined
+
+    // Toggle video playback if step is visible
+    $: if (videoEl) {
+        visible ? videoEl.play() : videoEl.pause()
+    }
 </script>
 
-<div class="step" style:--index={index}>
-    <div class="step__card grid">
-        {#if image || video}
-        <div class="media">
-            {#if image}
-                <Image
-                    class="image shadow-box-dark"
-                    id={image.id}
-                    sizeKey="product"
-                    sizes={{
-                        small: { width: 400 },
-                        medium: { width: 600 },
-                        large: { width: 800 },
-                    }}
-                    ratio={imageRatio}
-                    alt={image.title}
-                />
-            {:else if video}
-                <video muted loop playsinline allow="autoplay">
-                    <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
-                    <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
-                    <track kind="captions" />
-                </video>
-            {/if}
-        </div>
+{#if visible}
+<div class="step grid" style:--index={index}
+    in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
+    out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
+>
+    {#if image || video}
+    <div class="media">
+        {#if image}
+            <Image
+                class="image shadow-box-dark"
+                id={image.id}
+                sizeKey="product"
+                sizes={{
+                    small: { width: 400 },
+                    medium: { width: 600 },
+                    large: { width: 800 },
+                }}
+                ratio={imageRatio}
+                alt={image.title}
+            />
+        {:else if video}
+            <video muted loop playsinline autoplay allow="autoplay" bind:this={videoEl}>
+                <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
+                <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
+                <track kind="captions" />
+            </video>
         {/if}
-
-        <div class="content">
-            <h3 class="title-medium">{title}</h3>
-            <div class="text text-small">
-                {@html text}
-            </div>
-        </div>
-
-        <div class="overlay" />
     </div>
-</div>
\ No newline at end of file
+    {/if}
+
+    <div class="text text-small">
+        {@html text}
+    </div>
+</div>
+{/if}
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 9455f0c..3e089c5 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -3,10 +3,10 @@
 </style>
 
 <script lang="ts">
-    import { navigating } from '$app/stores'
+    import { navigating, page } from '$app/stores'
     import { onMount, afterUpdate } from 'svelte'
     import type { PageData } from './$types'
-    import { scroll, animate, inView, type ScrollOptions, timeline } from 'motion'
+    import { scroll, animate, inView, timeline } from 'motion'
     import { map } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
@@ -27,11 +27,12 @@
     const { about, photos } = data
 
     let scrollY: number, innerWidth: number, innerHeight: number
-    let purposeEl: HTMLElement, stepsEl: HTMLElement, photosGridEl: HTMLElement
+    let purposeEl: HTMLElement, photosGridEl: HTMLElement
+    let currentStep: number = 0
     let photoFirstEl: HTMLElement, photoUsEl: HTMLElement
-    let videosObserver: IntersectionObserver
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
 
+    $: 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]
@@ -282,37 +283,36 @@
 
     <section class="about__process">
         <div class="container grid">
-            <div class="title">
-                <h2 class="title-big">{about.process_title}</h2>
-                <p class="text-normal">{about.process_subtitle}</p>
-            </div>
+            <aside>
+                <div class="heading">
+                    <h2 class="title-medium">{about.process_title}</h2>
+                    <p class="text-normal">{about.process_subtitle}</p>
+                </div>
 
-            <div class="steps grid" bind:this={stepsEl}
-                style:--cards-amount={about.process_steps.length}
-            >
-                {#each about.process_steps as { title, text, image, video_mp4, video_webm }, index}
+                <ol>
+                    {#each about.process_steps as { title }, index}
+                        <li class:is-active={index === currentStep}>
+                            <a href="#step-{index + 1}" class="title-big">
+                                <span>{title}</span>
+                            </a>
+                        </li>
+                    {/each}
+                </ol>
+            </aside>
+
+            <div class="steps">
+                {#each about.process_steps as { text, image, video_mp4, video_webm }, index}
                     <ProcessStep
-                        {index} {title} {text}
+                        {index} {text}
                         image={image ?? undefined}
                         video={video_mp4 && video_webm ? {
                             mp4: video_mp4.id,
                             webm: video_webm.id
                         } : undefined}
+                        visible={index === currentStep}
                     />
                 {/each}
             </div>
-
-            <div class="intention">
-                <InteractiveGlobe2
-                    enableMarkers={false}
-                    speed={0.005}
-                    pane={false}
-                    width={200}
-                />
-                <p class="intention__content title-medium">
-                    {about.process_intention}
-                </p>
-            </div>
         </div>
     </section>
 
@@ -330,10 +330,9 @@
         </div>
     </section>
 
-    <div class="about__bottom container grid">
-        <section class="about__interest grid">
+    <section class="about__interest grid">
+        <div class="container grid">
             <h2 class="title-xl">{about.contact_title}</h2>
-
             <div class="blocks">
                 {#each about.contact_blocks as { title, text, link, button }}
                     <div class="block">
@@ -345,13 +344,6 @@
                     </div>
                 {/each}
             </div>
-        </section>
-
-        <section class="grid-modules">
-            <div class="wrap">
-                <ShopModule />
-                <NewsletterModule />
-            </div>
-        </section>
-    </div>
+        </div>
+    </section>
 </PageTransition>
\ No newline at end of file
diff --git a/src/style/molecules/_process-step.scss b/src/style/molecules/_process-step.scss
index f59bfd2..dc7d489 100644
--- a/src/style/molecules/_process-step.scss
+++ b/src/style/molecules/_process-step.scss
@@ -1,23 +1,20 @@
 // About page Step
 .step {
-    // Card
-    &__card {
-        position: relative;
-        display: block;
-        overflow: hidden;
-        padding: 56px 32px 32px;
-        background: $color-primary-darker;
-        border-radius: 12px;
-        transform: translateZ(0);
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: 56px 32px 32px;
+    background: $color-primary-darker;
+    border-radius: 12px;
+    transform: translateZ(0);
 
-        @include bp (sm) {
-            --columns: 18;
-            display: grid;
-            grid-template-rows: repeat(2, 1fr);
-            padding: 5.5% 0;
-            min-height: min(45vw, 720px);
-            border-radius: 16px;
-        }
+    @include bp (sm) {
+        --columns: 11;
+        display: grid;
+        grid-template-rows: repeat(2, 1fr);
+        padding: 8% 0;
+        min-height: clamp(400px, 75vh, 800px);
+        border-radius: 16px;
     }
 
     // Image
@@ -27,87 +24,36 @@
         display: block;
         overflow: hidden;
         width: 70%;
-        max-height: 580px;
-        margin: 0 auto 64px;
+        max-height: 550px;
+        margin-bottom: 48px;
         border-radius: 6px;
 
         @include bp (sm) {
-            grid-column: 11 / -2;
+            grid-column: 2 / span 6;
             grid-row: 1 / -1;
             width: 100%;
-            height: 100%;
-            margin-bottom: 0;
+            height: auto;
         }
 
-        video, :global(.image) {
-            display: block;
-            height: 100%;
-            width: 100%;
-            object-fit: cover;
-        }
         :global(.image) {
-            :global(img) {
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
+            // width: 100%;
+            // height: 100%;
+        }
+        :global(.image img), video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
     // Content
-    .content {
+    .text {
         position: relative;
         z-index: 2;
-
-        @include bp (sm) {
-            grid-column: 2 / span 7;
-            grid-row: 2;
-            align-self: flex-end;
-        }
-
-        h3 {
-            margin-bottom: 8px;
-            color: #fff;
-
-            @include bp (sm) {
-                margin-bottom: 16px;
-            }
-        }
-        .text {
-            line-height: 1.5;
-            font-weight: 300;
-            color: $color-secondary-light;
-        }
-    }
-
-    // Overlay
-    .overlay {
-        content: "";
-        display: block;
-        position: absolute;
-        z-index: 0;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: #000;
-        opacity: 0;
-        pointer-events: none;
-        transform: translateZ(0);
-    }
-
-    // Alternate content order
-    &:nth-child(even) {
-        .media {
-            @include bp (sm) {
-                grid-column: 2 / span 7;
-            }
-        }
-        .content {
-            @include bp (sm) {
-                grid-column: 11 / -2;
-            }
-        }
+        line-height: 1.5;
+        font-weight: 300;
+        color: $color-secondary-light;
+        grid-column: 2 / -2;
     }
 }
\ No newline at end of file
diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss
index 32892b9..a28b1ef 100644
--- a/src/style/pages/_about.scss
+++ b/src/style/pages/_about.scss
@@ -356,10 +356,10 @@
     &__photos {
         position: relative;
         z-index: 1;
-        margin-top: -64px;
+        // margin-top: -64px;
 
         @include bp (sm) {
-            margin-top: -120px;
+            // margin-top: -120px;
         }
 
         .container-wide {
@@ -434,41 +434,27 @@
         }
     }
 
-
-    /*
-    ** Bottom
-    */
-    &__bottom {
-        @include bp (sm) {
-            margin-top: calc(-1 * clamp(160px, 14vw, 240px));
-        }
-
-        // Modules
-        .grid-modules {
-            grid-column: 1 / -1;
-
-            @include bp (sm) {
-                grid-column: 2 / -2;
-            }
-        }
-    }
-
     // Interest
     &__interest {
-        position: relative;
-        z-index: 2;
-        display: block;
-        margin-bottom: 20px;
-        padding: 72px 32px;
-        background: $color-primary-tertiary20;
-        border-radius: 12px;
-        box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
+        margin-top: calc(-1 * clamp(160px, 14vw, 256px));
 
-        @include bp (sm) {
-            display: grid;
-            grid-column: 2 / -2;
-            margin-bottom: 48px;
-            padding: clamp(72px, 8vw, 160px) 0;
+        & > .container {
+            position: relative;
+            z-index: 2;
+            display: block;
+            margin-bottom: 20px;
+            padding: 72px 32px;
+            background: $color-primary-tertiary20;
+            border-radius: 12px;
+            box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
+
+            @include bp (sm) {
+                --columns: 22;
+                display: grid;
+                grid-column: 2 / -2;
+                margin-bottom: 64px;
+                padding: clamp(72px, 8vw, 160px) 0;
+            }
         }
 
         h2 {