[wip] Create About page

2022-08-02 00:07:46 +02:00
parent 2215b1329c
commit 42742bcba3
10 changed files with 663 additions and 29 deletions
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
    "@typescript-eslint/parser": "^5.31.0",
    "browserslist": "^4.21.3",
    "cssnano": "^5.1.12",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "postcss": "^8.4.14",
    "postcss-focus-visible": "^7.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ specifiers:
  cssnano: ^5.1.12
  dayjs: ^1.11.4
  embla-carousel: ^6.2.0
-  eslint: ^8.20.0
+  eslint: ^8.21.0
  eslint-plugin-svelte3: ^4.0.0
  focus-visible: ^5.2.0
  ogl: ^0.0.97
@@ -50,12 +50,12 @@ devDependencies:
  '@sveltejs/adapter-vercel': 1.0.0-next.66
  '@sveltejs/kit': 1.0.0-next.401_svelte@3.49.0+vite@3.0.4
  '@types/animejs': 3.1.5
-  '@typescript-eslint/eslint-plugin': 5.31.0_d5zwcxr4bwkhmuo464cb3a2puu
-  '@typescript-eslint/parser': 5.31.0_he2ccbldppg44uulnyq4rwocfa
+  '@typescript-eslint/eslint-plugin': 5.31.0_jnss7dz76sznncvpyatba5hbxa
+  '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
  browserslist: 4.21.3
  cssnano: 5.1.12_postcss@8.4.14
-  eslint: 8.20.0
-  eslint-plugin-svelte3: 4.0.0_piwa6j2njmnknm35bh3wz5v52y
+  eslint: 8.21.0
+  eslint-plugin-svelte3: 4.0.0_a7wk4ghvg4hia4trwaglu7p6cq
  postcss: 8.4.14
  postcss-focus-visible: 7.1.0_postcss@8.4.14
  postcss-normalize: 10.0.1_bujjonwylnebbx3cl7qckr3eti
@@ -232,8 +232,8 @@ packages:
      - supports-color
    dev: true

-  /@humanwhocodes/config-array/0.9.5:
-    resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
+  /@humanwhocodes/config-array/0.10.4:
+    resolution: {integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==}
    engines: {node: '>=10.10.0'}
    dependencies:
      '@humanwhocodes/object-schema': 1.2.1
@@ -243,6 +243,10 @@ packages:
      - supports-color
    dev: true

+  /@humanwhocodes/gitignore-to-minimatch/1.0.2:
+    resolution: {integrity: sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==}
+    dev: true
+
  /@humanwhocodes/object-schema/1.2.1:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true
@@ -435,7 +439,7 @@ packages:
      '@types/node': 18.6.3
    dev: true

-  /@typescript-eslint/eslint-plugin/5.31.0_d5zwcxr4bwkhmuo464cb3a2puu:
+  /@typescript-eslint/eslint-plugin/5.31.0_jnss7dz76sznncvpyatba5hbxa:
    resolution: {integrity: sha512-VKW4JPHzG5yhYQrQ1AzXgVgX8ZAJEvCz0QI6mLRX4tf7rnFfh5D8SKm0Pq6w5PyNfAWJk6sv313+nEt3ohWMBQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@@ -446,12 +450,12 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.31.0_he2ccbldppg44uulnyq4rwocfa
+      '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
      '@typescript-eslint/scope-manager': 5.31.0
-      '@typescript-eslint/type-utils': 5.31.0_he2ccbldppg44uulnyq4rwocfa
-      '@typescript-eslint/utils': 5.31.0_he2ccbldppg44uulnyq4rwocfa
+      '@typescript-eslint/type-utils': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/utils': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
      debug: 4.3.4
-      eslint: 8.20.0
+      eslint: 8.21.0
      functional-red-black-tree: 1.0.1
      ignore: 5.2.0
      regexpp: 3.2.0
@@ -462,7 +466,7 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/parser/5.31.0_he2ccbldppg44uulnyq4rwocfa:
+  /@typescript-eslint/parser/5.31.0_qugx7qdu5zevzvxaiqyxfiwquq:
    resolution: {integrity: sha512-UStjQiZ9OFTFReTrN+iGrC6O/ko9LVDhreEK5S3edmXgR396JGq7CoX2TWIptqt/ESzU2iRKXAHfSF2WJFcWHw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@@ -476,7 +480,7 @@ packages:
      '@typescript-eslint/types': 5.31.0
      '@typescript-eslint/typescript-estree': 5.31.0_typescript@4.7.4
      debug: 4.3.4
-      eslint: 8.20.0
+      eslint: 8.21.0
      typescript: 4.7.4
    transitivePeerDependencies:
      - supports-color
@@ -490,7 +494,7 @@ packages:
      '@typescript-eslint/visitor-keys': 5.31.0
    dev: true

-  /@typescript-eslint/type-utils/5.31.0_he2ccbldppg44uulnyq4rwocfa:
+  /@typescript-eslint/type-utils/5.31.0_qugx7qdu5zevzvxaiqyxfiwquq:
    resolution: {integrity: sha512-7ZYqFbvEvYXFn9ax02GsPcEOmuWNg+14HIf4q+oUuLnMbpJ6eHAivCg7tZMVwzrIuzX3QCeAOqKoyMZCv5xe+w==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@@ -500,9 +504,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/utils': 5.31.0_he2ccbldppg44uulnyq4rwocfa
+      '@typescript-eslint/utils': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
      debug: 4.3.4
-      eslint: 8.20.0
+      eslint: 8.21.0
      tsutils: 3.21.0_typescript@4.7.4
      typescript: 4.7.4
    transitivePeerDependencies:
@@ -535,7 +539,7 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/utils/5.31.0_he2ccbldppg44uulnyq4rwocfa:
+  /@typescript-eslint/utils/5.31.0_qugx7qdu5zevzvxaiqyxfiwquq:
    resolution: {integrity: sha512-kcVPdQS6VIpVTQ7QnGNKMFtdJdvnStkqS5LeALr4rcwx11G6OWb2HB17NMPnlRHvaZP38hL9iK8DdE9Fne7NYg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@@ -545,9 +549,9 @@ packages:
      '@typescript-eslint/scope-manager': 5.31.0
      '@typescript-eslint/types': 5.31.0
      '@typescript-eslint/typescript-estree': 5.31.0_typescript@4.7.4
-      eslint: 8.20.0
+      eslint: 8.21.0
      eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.20.0
+      eslint-utils: 3.0.0_eslint@8.21.0
    transitivePeerDependencies:
      - supports-color
      - typescript
@@ -1276,13 +1280,13 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /eslint-plugin-svelte3/4.0.0_piwa6j2njmnknm35bh3wz5v52y:
+  /eslint-plugin-svelte3/4.0.0_a7wk4ghvg4hia4trwaglu7p6cq:
    resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
    peerDependencies:
      eslint: '>=8.0.0'
      svelte: ^3.2.0
    dependencies:
-      eslint: 8.20.0
+      eslint: 8.21.0
      svelte: 3.49.0
    dev: true

@@ -1302,13 +1306,13 @@ packages:
      estraverse: 5.3.0
    dev: true

-  /eslint-utils/3.0.0_eslint@8.20.0:
+  /eslint-utils/3.0.0_eslint@8.21.0:
    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
    peerDependencies:
      eslint: '>=5'
    dependencies:
-      eslint: 8.20.0
+      eslint: 8.21.0
      eslint-visitor-keys: 2.1.0
    dev: true

@@ -1322,13 +1326,14 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /eslint/8.20.0:
-    resolution: {integrity: sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==}
+  /eslint/8.21.0:
+    resolution: {integrity: sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    hasBin: true
    dependencies:
      '@eslint/eslintrc': 1.3.0
-      '@humanwhocodes/config-array': 0.9.5
+      '@humanwhocodes/config-array': 0.10.4
+      '@humanwhocodes/gitignore-to-minimatch': 1.0.2
      ajv: 6.12.6
      chalk: 4.1.2
      cross-spawn: 7.0.3
@@ -1336,16 +1341,19 @@ packages:
      doctrine: 3.0.0
      escape-string-regexp: 4.0.0
      eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.20.0
+      eslint-utils: 3.0.0_eslint@8.21.0
      eslint-visitor-keys: 3.3.0
      espree: 9.3.3
      esquery: 1.4.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
      file-entry-cache: 6.0.1
+      find-up: 5.0.0
      functional-red-black-tree: 1.0.1
      glob-parent: 6.0.2
      globals: 13.17.0
+      globby: 11.1.0
+      grapheme-splitter: 1.0.4
      ignore: 5.2.0
      import-fresh: 3.3.0
      imurmurhash: 0.1.4
@@ -1459,6 +1467,14 @@ packages:
      to-regex-range: 5.0.1
    dev: true

+  /find-up/5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
  /flat-cache/3.0.4:
    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
    engines: {node: ^10.12.0 || >=12.0.0}
@@ -1577,6 +1593,10 @@ packages:
    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
    dev: true

+  /grapheme-splitter/1.0.4:
+    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
+    dev: true
+
  /has-flag/4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}
@@ -1712,6 +1732,13 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /locate-path/6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
  /lodash.memoize/4.1.2:
    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
    dev: true
@@ -1921,6 +1948,20 @@ packages:
      word-wrap: 1.2.3
    dev: true

+  /p-limit/3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-locate/5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
  /parent-module/1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
@@ -1928,6 +1969,11 @@ packages:
      callsites: 3.1.0
    dev: true

+  /path-exists/4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
  /path-is-absolute/1.0.1:
    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
    engines: {node: '>=0.10.0'}
@@ -3214,3 +3260,8 @@ packages:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}
    dev: true
+
+  /yocto-queue/0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
--- a/src/components/atoms/AboutGridPhoto.svelte
+++ b/src/components/atoms/AboutGridPhoto.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Image from './Image.svelte'
+
+    export let id: string
+    export let alt: string
+    export let disabled: boolean = false
+
+    let hovering: boolean = false
+    let timer: ReturnType<typeof setTimeout> | number = null
+
+    $: classes = [
+        hovering ? 'is-hovered' : undefined,
+        $$props.class
+    ].join(' ').trim()
+
+    // Hovering functions
+    const handleMouseEnter = () => {
+        clearTimeout(timer)
+        hovering = true
+    }
+    const handleMouseLeave = () => {
+        // Reset hovering to false after a delay
+        timer = setTimeout(() => hovering = false, 800)
+    }
+</script>
+
+<figure class={classes}
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+>
+    <Image
+        class={disabled ? 'is-disabled' : null}
+        {id}
+        sizeKey="photo-list"
+        sizes={{
+            small: { width: 250 },
+            medium: { width: 400 },
+            large: { width: 600 },
+        }}
+        ratio={1.5}
+        {alt}
+    />
+</figure>
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -0,0 +1,142 @@
+<style lang="scss">
+    @import "../style/pages/about";
+</style>
+
+<script lang="ts">
+    import { onMount, afterUpdate } from 'svelte'
+    import { map } from '$utils/functions'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import AboutGridPhoto from '$components/atoms/AboutGridPhoto.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[]
+
+    // console.log(data)
+
+    let scrollY: number, innerWidth: number, innerHeight: number
+    let photosGridEl: HTMLElement
+    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)
+    $: fadedPhotosIndexes = innerWidth > 768
+        ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
+        : [0]
+
+
+    onMount(() => {
+        // Sections observer
+        sectionsObserver = new IntersectionObserver(entries => {
+            entries.forEach(({ isIntersecting, target }: { target: HTMLElement } & IntersectionObserverEntry) => {
+                target.classList.toggle('is-visible', isIntersecting)
+
+                // Run effect once
+                if (isIntersecting && target.dataset.keep) {
+                    sectionsObserver.unobserve(target)
+                }
+            })
+        }, {
+            threshold: 0.2,
+            rootMargin: '-10% 0px -30%'
+        })
+
+        const sections = document.querySelectorAll('.about [data-section]')
+        sections.forEach(section => sectionsObserver.observe(section))
+
+        // Destroy
+        return () => {
+            sectionsObserver && sectionsObserver.disconnect()
+        }
+    })
+
+    afterUpdate(() => {
+        // Update photos grid top offset
+        photosGridOffset = photosGridEl.offsetTop
+    })
+</script>
+
+<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+
+<Metas
+    title="About the project – Houses Of"
+    description=""
+    image=""
+/>
+
+
+<PageTransition name="about">
+    <Heading
+        text={data.description}
+    />
+
+    <section class="about__purpose" data-section data-keep="">
+        <div class="container-wide">
+            <div class="text title-xl" role="heading">
+                {@html data.purpose_text}
+            </div>
+
+            <div class="background" />
+        </div>
+    </section>
+
+    <section class="about__process">
+        <div class="title">
+            <h2 class="title-big">{data.process_title}</h2>
+            <p class="text-normal">{data.process_subtitle}</p>
+        </div>
+
+        <div class="steps container-wide">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    </section>
+
+    <section class="about__photos" bind:this={photosGridEl}>
+        <div class="container-wide">
+            <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
+                {#each photos as { image: { id }, title }, index}
+                    <AboutGridPhoto class="about-grid-photo"
+                        {id}
+                        alt={title}
+                        disabled={fadedPhotosIndexes.includes(index)}
+                    />
+                {/each}
+            </div>
+        </div>
+    </section>
+
+    <div class="about__bottom container grid">
+        <section class="about__interest grid">
+            <h2 class="title-xl">{data.contact_title}</h2>
+
+            <div class="blocks">
+                {#each data.contact_blocks as { title, text, link, button }}
+                    <div class="block">
+                        <h3 class="text-label">{title}</h3>
+                        <p class="text-normal">{text}</p>
+                        {#if link}
+                            <Button size="small" url={link} text={button} />
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        </section>
+
+        <section class="grid-modules">
+            <div class="wrap">
+                <ShopModule />
+                <NewsletterModule />
+            </div>
+        </section>
+    </div>
+</PageTransition>
--- a/src/routes/about.ts
+++ b/src/routes/about.ts
@@ -0,0 +1,85 @@
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { fetchAPI } from '$utils/api'
+import { getRandomItems } from '$utils/functions'
+
+export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
+    try {
+        // Get data and total of published photos
+        const res = await fetchAPI(`
+            query {
+                photos: photo (
+                    filter: {
+                        favorite: { _eq: true },
+                        status: { _eq: "published" },
+                    },
+                    limit: -1,
+                ) {
+                    id
+                }
+
+                about {
+                    description
+                    intro_firstphoto {
+                        id
+                        title
+                    }
+                    intro_portraits {
+                        id
+                        title
+                    }
+                    intro_text
+                    intro_firstlocation {
+                        slug
+                        country {
+                            flag { id }
+                            slug
+                        }
+                    }
+
+                    purpose_text
+
+                    process_title
+                    process_subtitle
+
+                    contact_title
+                    contact_blocks
+                }
+            }
+        `)
+        const { data: { about, photos: photosIds }} = res
+
+        // Get random photos
+        const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id)
+
+        // Query these random photos from IDs
+        const photosRes = await fetchAPI(`
+            query {
+                photo (filter: { id: { _in: [${randomPhotosIds}] }}) {
+                    id
+                    title
+                    slug
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data: { photo: photos }} = photosRes
+
+        console.log(about)
+
+        return {
+            body: {
+                data: about,
+                photos,
+            }
+        }
+    } catch (error) {
+        return {
+            status: 404,
+            body: error,
+        }
+    }
+}
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -43,6 +43,18 @@
    }
 }

+// X-Large
+.title-xl {
+    font-family: $font-serif;
+    font-size: rem(34px);
+    line-height: 1.2;
+    letter-spacing: -0.025em;
+
+    @include bp (sm) {
+        font-size: clamp(#{rem(34px)}, 4vw, #{rem(60px)});
+    }
+}
+
 // Big
 .title-big {
    font-family: $font-serif;
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -60,6 +60,7 @@
    &--small {
        height: 40px;
        padding: 0 16px;
+        font-size: rem(16px);

        @include bp (md) {
            height: 40px;
--- a/src/style/molecules/_heading.scss
+++ b/src/style/molecules/_heading.scss
@@ -28,5 +28,21 @@
            max-width: 600px;
            margin-top: 72px;
        }
+
+        :global(a) {
+            position: relative;
+            color: currentColor;
+            text-decoration: none;
+            display: inline-block;
+            background-image: linear-gradient(rgba($color-tertiary, 0.3), rgba($color-tertiary, 0.3));
+            background-position: 0 100%;
+            background-size: 100% 1px;
+            background-repeat: no-repeat;
+            transition: color 0.6s var(--ease-quart);
+
+            &:hover {
+                color: $color-secondary-light;
+            }
+        }
    }
 }
--- a/src/style/pages/_about.scss
+++ b/src/style/pages/_about.scss
@@ -0,0 +1,272 @@
+.about {
+    /*
+    ** Purpose
+    */
+    &__purpose {
+        text-align: center;
+
+        .container-wide {
+            position: relative;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            justify-content: center;
+            min-height: calc(100vh - var(--sides));
+            color: #fff;
+            padding: 0 8%;
+            box-shadow: inset 0 0 0 2px $color-primary-tertiary20;
+            border-radius: 16px;
+
+            @include bp (sm) {
+                padding: 0 18%;
+            }
+        }
+
+        // Text
+        .text {
+            max-width: 1024px;
+
+            :global(strong) {
+                color: $color-secondary-light;
+                font-weight: inherit;
+            }
+        }
+
+        // Background
+        .background {
+            position: absolute;
+            z-index: -1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            background-color: $color-primary-tertiary20;
+            transition: opacity 1.2s var(--ease-quart);
+        }
+
+
+        // Visible state
+        &:global(.is-visible) {
+            .background {
+                opacity: 1;
+            }
+        }
+    }
+
+
+    /*
+    ** Process
+    */
+    &__process {
+        @include bp (sm) {
+            margin: 128px 0 0;
+        }
+
+        .title {
+            max-width: 400px;
+            margin: 0 auto 48px;
+            padding: 0 16px;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-bottom: 80px;
+            }
+
+            h2 {
+                margin-bottom: 24px;
+                color: $color-secondary;
+            }
+            p {
+                color: $color-tertiary;
+                font-weight: 300;
+            }
+        }
+
+        .steps {
+            display: grid;
+            gap: 8px;
+
+            @include bp (sm) {
+                grid-template-columns: repeat(16, 1fr);
+                gap: 12px;
+            }
+
+            div {
+                background: $color-primary-darker;
+                border-radius: 8px;
+                height: 600px;
+
+                @include bp (sm) {
+                    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;
+                }
+            }
+        }
+    }
+
+
+    /*
+    ** Photos grid
+    */
+    &__photos {
+        position: relative;
+        z-index: 1;
+        margin-top: 48px;
+
+        @include bp (sm) {
+            margin-top: 80px;
+        }
+
+        .container-wide {
+            overflow: hidden;
+            border-radius: 8px;
+        }
+
+        .photos-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 12px;
+            margin: -5% -5% 0;
+            transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
+            transition: transform 0.8s var(--ease-quart);
+        }
+
+        :global(picture) {
+            width: 100%;
+            height: auto;
+            border-radius: 8px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: opacity 1s var(--ease-quart);
+
+            :global(img) {
+                display: block;
+                width: 100%;
+                height: auto;
+                user-select: none;
+                pointer-events: none;
+            }
+        }
+
+        $opacity-off: 0.2;
+
+        // States
+        :global(.is-disabled) {
+            opacity: $opacity-off;
+        }
+        :global(.is-hovered picture) {
+            opacity: 1;
+        }
+        :global(.is-hovered picture:not(.is-disabled)) {
+            opacity: $opacity-off;
+        }
+
+        // Mask
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: 2;
+            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));
+            pointer-events: none;
+        }
+    }
+
+
+    /*
+    ** Bottom
+    */
+    &__bottom {
+        @include bp (sm) {
+            margin-top: calc(-1 * clamp(160px, 14vw, 240px));
+        }
+
+        // Modules
+        .grid-modules {
+            @include bp (sm) {
+                grid-column: 2 / span calc(var(--columns) - 2);
+            }
+        }
+    }
+
+    // Interest
+    &__interest {
+        position: relative;
+        z-index: 2;
+        background: $color-primary-tertiary20;
+        border-radius: 12px;
+        box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
+
+        @include bp (sm) {
+            grid-column: 2 / span calc(var(--columns) - 2);
+            margin-bottom: 48px;
+            padding: 120px 0;
+        }
+
+        h2 {
+            grid-column: span var(--columns);
+            margin-bottom: 56px;
+            color: #fff;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-bottom: 88px;
+            }
+        }
+        .blocks {
+            @include bp (sm) {
+                grid-column: 4 / span calc(var(--columns) - 6);
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                column-gap: 11.5%;
+            }
+        }
+        .block {
+            text-align: center;
+
+            h3 {
+                margin-bottom: 12px;
+                color: $color-secondary-light;
+                font-weight: 600;
+            }
+            p {
+                margin-bottom: 32px;
+                font-weight: 300;
+            }
+        }
+    }
+}
--- a/src/style/tools/_helpers.scss
+++ b/src/style/tools/_helpers.scss
@@ -17,4 +17,16 @@
    @include bp (sm) {
        padding: 0;
    }
+}
+
+// Wide wrap (close to sides)
+.container-wide {
+    --sides: 16px;
+    width: calc(100% - var(--sides));
+    max-width: var(--container-width);
+    margin: 0 auto;
+
+    @include bp (sm) {
+        --sides: 24px;
+    }
 }