Integrate more section in About page
This commit is contained in:
14
src/app.d.ts
vendored
14
src/app.d.ts
vendored
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -20,7 +20,8 @@
|
||||
|
||||
// Text
|
||||
.text {
|
||||
max-width: 300px;
|
||||
width: 75%;
|
||||
max-width: 360px;
|
||||
margin: 40px auto 0;
|
||||
font-weight: 200;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user