💄 Add about images parallax

components/header/Header.jsx

@@ -74,6 +74,7 @@ const Header = () => {
                   className={clsx('header__link', {
                     ['is-active']: pathname === ROUTES.SCHEDULE.path,
                   })}
+                  aria-label={getLiteral('navigation:schedule')}
                 >
                   <IconCalendar />
                   <span className="header__link-text">
@@ -91,6 +92,7 @@ const Header = () => {
                   className={clsx('header__link', {
                     ['is-active']: pathname === ROUTES.LIBRARY.path,
                   })}
+                  aria-label={getLiteral('navigation:library')}
                 >
                   <IconBooks />
                   <span className="header__link-text">

components/home/about/About.jsx

@@ -1,19 +1,40 @@
 /* eslint-disable @next/next/no-img-element */
+import { useRef } from 'react'
+
 import md from 'markdown-it'
 
 import { getLiteral } from '../../../common/i18n'
+import useParallax from '../../../hooks/useParallax'
 
 const About = ({ title, content }) => {
+  const image1 = useRef(null)
+  const image2 = useRef(null)
+
+  const { translateY: image1TranslateY } = useParallax(image1, 0.01)
+  const { translateY: image2TranslateY } = useParallax(image2, 0.05)
+
   return (
     <section className="about">
       <div className="about__content">
         <div className="about__column">
           <h2 className="about__title">{title}</h2>
-          <img
-            className="about__image"
-            src={'/images/maintainer-detail.png'}
-            alt={getLiteral('hero:image-description')}
-          />
+
+          <div className="about__images">
+            <img
+              ref={image1}
+              style={{ transform: `translateY(-${image1TranslateY}px)` }}
+              className="about__image"
+              src={'/images/about1.png'}
+              alt={getLiteral('hero:image-description')}
+            />
+            <img
+              ref={image2}
+              style={{ transform: `translateY(-${image2TranslateY}px)` }}
+              className="about__image--layer"
+              src={'/images/about2.png'}
+              alt={getLiteral('hero:image-description')}
+            />
+          </div>
         </div>
 
         <div

components/home/about/about.scss

@@ -53,14 +53,32 @@
     }
   }
 
+  &__images {
+    position: relative;
+  }
+
   &__image {
+    position: relative;
+    top: 0;
+    left: 0;
     max-width: 100%;
     max-height: calc(var(--vh, 1vh) * 100);
 
+    transition: transform 1s $bezier-default;
+
     @media (min-width: $lg) {
       width: 100%;
       max-width: 360px;
     }
+
+    &--layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+
+      transition: transform 1s $bezier-default;
+    }
   }
 
   &__text {