diff --git a/src/app.d.ts b/src/app.d.ts index 7a4ab1f..d967425 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -19,4 +19,18 @@ declare namespace svelte.JSX { onswipe?: (event: CustomEvent & { target: EventTarget & T }) => any, ontap?: (event: CustomEvent & { target: EventTarget & T }) => any, } +} + + +/** + * Custom Types + */ +declare type PhotoGridAbout = { + id: string + title: string + slug: string + image: { + id: string + title: string + } } \ No newline at end of file diff --git a/src/routes/about.svelte b/src/routes/about.svelte index 5eb741b..c120f9b 100644 --- a/src/routes/about.svelte +++ b/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} /> -
+
{@html data.purpose_text} @@ -92,12 +93,35 @@
-
-
-
-
-
-
+ {#each data.process_steps as { title, text, image }} + {@const imageRatio = image ? image.width / image.height : undefined} +
+ {#if image} + {image.title} + {/if} +
+

{title}

+
+ {@html text} +
+
+
+ {/each} +
+

+ {data.process_intention} +

+
diff --git a/src/routes/about.ts b/src/routes/about.ts index 6680915..af8cd1c 100644 --- a/src/routes/about.ts +++ b/src/routes/about.ts @@ -40,6 +40,16 @@ export async function GET ({}: RequestEvent): Promise { process_title process_subtitle + process_steps { + title + text + image { + id + title + width, height + } + } + process_intention contact_title contact_blocks diff --git a/src/style/molecules/_heading.scss b/src/style/molecules/_heading.scss index cd5bb72..48cbc14 100644 --- a/src/style/molecules/_heading.scss +++ b/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; diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss index 3cb21b6..576487a 100644 --- a/src/style/pages/_about.scss +++ b/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; - border-radius: 8px; - height: 600px; + & > * { + --delay: 150ms; + opacity: 0; + 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) { - grid-column: span 10; + h3 { + margin-bottom: 8px; + color: #fff; + font-weight: 600; } - &: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; + .text { + line-height: 1.4; + font-weight: 300; + color: $color-secondary-light; + + @include bp (sm) { + font-size: rem(18px); + } } } } + + // 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; - background: linear-gradient(to top, rgba($color-primary, 0), $color-primary); - 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)); + height: 100%; + 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; } }