What Others Say (#8)

2026-01-16 17:34:09 +00:00 · 2022-04-04 12:28:11 -03:00 · 2022-04-04 12:28:11 -03:00 · c5efb3d192
commit c5efb3d192
parent c9278a1075
12 changed files with 523 additions and 53 deletions
--- a/public/images/head.png
+++ b/public/images/head.png
--- a/public/images/testimonial-01.jpg
+++ b/public/images/testimonial-01.jpg
--- a/src/components/icons/arrow.tsx
+++ b/src/components/icons/arrow.tsx
@ -65,6 +65,31 @@ const ArrowLink = ({
  )
 }

+const ArrowGreater = ({
+  className,
+  fill,
+  inverted
+}: {
+  className?: string
+  fill?: string
+  inverted?: boolean
+}) => {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 14 9"
+      fill="none"
+      style={{ transform: inverted ? 'rotate(180deg)' : 'rotate(0deg)' }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 8.5v-8l14 4.01216L0 8.5Z"
+        fill={fill || 'var(--color-white)'}
+      />
+    </svg>
+  )
+}
+
 const ArrowSlider = ({
  className,
  fill,
@ -98,4 +123,4 @@ const ArrowSlider = ({
  )
 }

-export { Arrow, ArrowDotted, ArrowLink, ArrowSlider }
+export { Arrow, ArrowDotted, ArrowGreater, ArrowLink, ArrowSlider }
--- a/src/components/sections/homepage/what-others-say/index.tsx
+++ b/src/components/sections/homepage/what-others-say/index.tsx
@ -0,0 +1,137 @@
+import 'keen-slider/keen-slider.min.css'
+
+import clsx from 'clsx'
+import { useKeenSlider } from 'keen-slider/react'
+import { useRealViewport } from 'next-real-viewport'
+import { useEffect, useRef } from 'react'
+
+import { ArrowGreater } from '~/components/icons/arrow'
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+import { CUSTOM_EASE, DURATION, gsap, Observer } from '~/lib/gsap'
+
+import Item from './item'
+import { testimonials } from './testimonials'
+import s from './what-others-say.module.scss'
+
+const WhatOthersSay = () => {
+  const carouselRef = useRef<HTMLDivElement>(null)
+  const { vw } = useRealViewport()
+  const [ref] = useKeenSlider<HTMLDivElement>({
+    // loop: true,
+    mode: 'free-snap',
+    slides: {
+      perView: 1.2,
+      spacing: 12
+    }
+  })
+
+  useEffect(() => {
+    if (!vw) return
+    const images = carouselRef.current?.querySelectorAll(
+      '.carousel__item'
+    ) as NodeListOf<HTMLDivElement>
+    const radius = 44 * vw
+    const progress = {
+      value: 0
+    }
+
+    Observer.create({
+      target: carouselRef.current,
+      type: 'wheel,pointer',
+      onPress: (_self) => {
+        if (!carouselRef.current) return
+        carouselRef.current.style.cursor = 'grabbing'
+      },
+      onRelease: (_self) => {
+        if (!carouselRef.current) return
+        carouselRef.current.style.cursor = 'grab'
+      },
+      onChange: (self) => {
+        gsap.killTweensOf(progress)
+        const p =
+          self.event.type === 'wheel'
+            ? self.deltaY * -0.0005
+            : self.deltaX * 0.0025
+        gsap.to(progress, {
+          duration: DURATION * 2,
+          ease: CUSTOM_EASE,
+          value: `+=${p}`
+        })
+      }
+    })
+
+    const animate = () => {
+      images.forEach((image, index) => {
+        const theta = index / images.length - progress.value
+        const x = -Math.sin(theta * Math.PI * 2) * radius
+        const y = Math.cos(theta * Math.PI * 2) * radius
+        image.style.transform = `translate3d(${x}px, 0px, ${y}px) rotateY(${
+          360 * -theta
+        }deg)`
+      })
+    }
+    gsap.ticker.add(animate)
+  }, [vw])
+
+  return (
+    <Section className={s['section']}>
+      <Container>
+        <div className={s['header']}>
+          <span>34°35'59″S 58°22'</span>
+          <Heading as="h2" variant="md" centered>
+            What <br className="hide-on-mobile" /> others say
+          </Heading>
+          <span>
+            <ArrowGreater className={s['arrow']} />
+            {testimonials.length} testimonials
+            <ArrowGreater className={s['arrow']} inverted />
+          </span>
+        </div>
+
+        <div className={s['carousel']} ref={carouselRef}>
+          <div className={s['image']}>
+            <img src="/images/head.png" alt="" />
+          </div>
+
+          {testimonials.map((testimonial, index) => {
+            return (
+              <Item
+                className="carousel__item"
+                image={testimonial.image}
+                key={index}
+                logo={testimonial.logo}
+                name={testimonial.name}
+                position={testimonial.position}
+              >
+                {testimonial.text}
+              </Item>
+            )
+          })}
+        </div>
+      </Container>
+      <div ref={ref} className={clsx('keen-slider', s['slider'])}>
+        <div className={s['image']}>
+          <img src="/images/head.png" alt="" />
+        </div>
+        {testimonials.map((testimonial, index) => {
+          return (
+            <Item
+              className="keen-slider__slide"
+              image={testimonial.image}
+              key={index}
+              logo={testimonial.logo}
+              name={testimonial.name}
+              position={testimonial.position}
+            >
+              {testimonial.text}
+            </Item>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
+export default WhatOthersSay
--- a/src/components/sections/homepage/what-others-say/item/index.tsx
+++ b/src/components/sections/homepage/what-others-say/item/index.tsx
@ -0,0 +1,43 @@
+import clsx from 'clsx'
+import * as React from 'react'
+
+import s from './item.module.scss'
+
+type ItemProps = {
+  children: React.ReactNode
+  className?: string
+  image: string
+  logo: React.ReactNode
+  name: string
+  position: string
+}
+
+const Item = ({
+  children,
+  className,
+  image,
+  logo,
+  name,
+  position
+}: ItemProps) => {
+  return (
+    <div className={clsx(s['item'], className)}>
+      <div className={s['item__header']}>
+        <div>
+          <img src={image} alt="" />
+          <div>
+            <p>
+              {name}
+              <br />
+              <span>{position}</span>
+            </p>
+          </div>
+        </div>
+        <div className={s['item__header__logo']}>{logo}</div>
+      </div>
+      <p>{children}</p>
+    </div>
+  )
+}
+
+export default Item
--- a/src/components/sections/homepage/what-others-say/item/item.module.scss
+++ b/src/components/sections/homepage/what-others-say/item/item.module.scss
@ -0,0 +1,75 @@
+@import '~/css/helpers';
+
+.item {
+  position: absolute;
+  z-index: 5;
+  top: 50%;
+  left: 50%;
+  width: tovw(420px);
+  margin: tovw(-210px) 0 0 tovw(-210px);
+  padding: tovw(24px, 'default', 22px);
+  transform: translate3d(0, 0, tovw(-10px));
+  transform-origin: 50% 50%;
+  color: var(--color-white);
+  border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
+  border-radius: tovw(8px, 'default', 8px);
+  background-color: rgb(0 0 0 / 0.9);
+
+  @media screen and (max-width: 800px) {
+    position: relative;
+    top: initial;
+    left: initial;
+    width: max-content;
+    height: max-content !important;
+    min-height: auto !important;
+    margin: 0;
+    transform: none;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: tovw(24px, 'default', 20px);
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    p {
+      font-family: var(--font-dm-mono);
+      font-size: tovw(12px, 'default', 12px);
+      line-height: 1.1;
+      margin: 0;
+      letter-spacing: tovw(-0.6px, 'default', -0.6px);
+      text-transform: uppercase;
+
+      span {
+        letter-spacing: tovw(-1px, 'default', -1px);
+        color: #a0a0a0;
+      }
+    }
+
+    &__logo {
+      width: tovw(48px, 'default', 48px);
+      height: tovw(48px, 'default', 48px);
+    }
+  }
+
+  img {
+    overflow: hidden;
+    width: tovw(48px, 'default', 48px);
+    height: tovw(48px, 'default', 48px);
+    margin-right: tovw(16px, 'default', 16px);
+    border-radius: 100%;
+  }
+
+  p {
+    font-size: tovw(16px, 'default', 16px);
+    margin: 0;
+    @media screen and (max-width: 800px) {
+      line-height: 1.6;
+    }
+  }
+}
--- a/src/components/sections/homepage/what-others-say/testimonials.tsx
+++ b/src/components/sections/homepage/what-others-say/testimonials.tsx
@ -0,0 +1,88 @@
+import Square from '~/components/logos/square'
+
+export const testimonials = [
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  },
+  {
+    image: '/images/testimonial-01.jpg',
+    name: 'JAYDON BATOR',
+    position: 'CO-Founder',
+    logo: <Square />,
+    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+  }
+]
--- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss
+++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
@ -0,0 +1,106 @@
+@import '~/css/helpers';
+
+.section {
+  position: relative;
+  margin-top: tovw(24px, 'default', 16px);
+  padding: tovw(104px, 'default', 72px) 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: tovw(1076px, 'default', 700px);
+  margin: 0 auto;
+  text-transform: capitalize;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+    margin-bottom: tovw(24px, 'mobile');
+    gap: tovw(24px, 'mobile');
+  }
+
+  span {
+    font-family: var(--font-dm-mono);
+    font-size: tovw(18px, 'default', 16px);
+    letter-spacing: tovw(-0.8px, 'default', -0.8px);
+    text-transform: uppercase;
+
+    @media screen and (max-width: 800px) {
+      &:first-of-type {
+        display: none;
+      }
+    }
+  }
+
+  .arrow {
+    display: inline-block;
+    width: tovw(14px, 'default', 14px);
+    height: tovw(8px, 'default', 8px);
+    margin: 0 tovw(12px, 'default', 12px);
+    vertical-align: middle;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
+
+.carousel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  cursor: grab;
+  user-select: none;
+  transform: rotateX(-15deg) scale(0.85) translateY(0%);
+  transform-style: preserve-3d;
+  perspective: tovw(3000px);
+
+  @media screen and (max-width: 800px) {
+    display: none;
+  }
+}
+
+.image {
+  position: relative;
+  z-index: -1;
+  width: tovw(531px, 'default', 336px);
+  height: tovw(817px, 'default', 518px);
+  user-select: none;
+  transform: scale(1.18);
+  pointer-events: none;
+}
+
+.slider {
+  height: tovw(636px, 'mobile');
+  padding-left: tovw(16px, 'mobile');
+  align-items: center;
+  @media screen and (min-width: 800px) {
+    display: none !important;
+  }
+
+  .image {
+    position: absolute;
+    z-index: -1;
+    width: 85%;
+    height: auto;
+    user-select: none;
+    transform: none;
+    left: tovw(10px, 'mobile');
+    pointer-events: none;
+
+    img {
+      width: 100%;
+      opacity: 0.7;
+      height: auto;
+      margin: 0 auto;
+    }
+  }
+}
--- a/src/lib/gsap/gsap-bonus.tgz
+++ b/src/lib/gsap/gsap-bonus.tgz
--- a/src/lib/gsap/index.tsx
+++ b/src/lib/gsap/index.tsx
@ -1,6 +1,7 @@
 import gsap from 'gsap'
 import { CSSRulePlugin } from 'gsap/dist/CSSRulePlugin'
 import { CustomEase } from 'gsap/dist/CustomEase'
+import { Observer } from 'gsap/dist/Observer'
 import { ScrollSmoother } from 'gsap/dist/ScrollSmoother'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 import { SplitText } from 'gsap/dist/SplitText'
@ -8,6 +9,7 @@ import { SplitText } from 'gsap/dist/SplitText'
 gsap.registerPlugin(
  CSSRulePlugin,
  CustomEase,
+  Observer,
  ScrollSmoother,
  ScrollTrigger,
  SplitText
@ -161,6 +163,7 @@ export {
  CUSTOM_EASE,
  DURATION,
  gsap,
+  Observer,
  ScrollSmoother,
  ScrollTrigger,
  SplitText
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -4,6 +4,7 @@ import Benefits from '~/components/sections/homepage/benefits'
 import Hero from '~/components/sections/homepage/hero'
 import SeenIn from '~/components/sections/homepage/seen-in'
 import TrustedBy from '~/components/sections/homepage/trusted-by'
+import WhatOthersSay from '~/components/sections/homepage/what-others-say'

 import { Page } from './_app'

@ -15,6 +16,7 @@ const HomePage: Page = () => {
      <TrustedBy />
      <Benefits />
      <SeenIn />
+      <WhatOthersSay />
    </PageLayout>
  )
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -205,9 +205,9 @@
  integrity sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==

 "@types/json-schema@^7.0.9":
-  version "7.0.10"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.10.tgz#9b05b7896166cd00e9cbd59864853abf65d9ac23"
-  integrity sha512-BLO9bBq59vW3fxCpD4o0N4U+DXsvwvIcl+jofw0frQo/GrBFC+/jRZj1E7kgp6dvTyNmA4y6JCV5Id/r3mNP5A==
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==

 "@types/json5@^0.0.29":
  version "0.0.29"
@ -251,16 +251,7 @@
  dependencies:
    "@types/react" "*"

-"@types/react@*":
-  version "17.0.42"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.42.tgz#8242b9219bf8a911c47f248e327206fea3f4ee5a"
-  integrity sha512-nuab3x3CpJ7VFeNA+3HTUuEkvClYHXqWtWd7Ud6AZYW7Z3NH9WKtgU+tFB0ZLcHq+niB/HnzLcaZPqMJ95+k5Q==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17.0.43":
+"@types/react@*", "@types/react@^17.0.43":
  version "17.0.43"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@ -528,7 +519,7 @@ aria-query@^4.2.2:
    "@babel/runtime" "^7.10.2"
    "@babel/runtime-corejs3" "^7.10.2"

-array-includes@^3.1.3, array-includes@^3.1.4:
+array-includes@^3.1.4:
  version "3.1.4"
  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
@ -646,7 +637,7 @@ brace-expansion@^1.1.7:
    balanced-match "^1.0.0"
    concat-map "0.0.1"

-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@ -700,9 +691,9 @@ camelcase@^5.3.1:
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

 caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317:
-  version "1.0.30001320"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz#8397391bec389b8ccce328636499b7284ee13285"
-  integrity sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==
+  version "1.0.30001323"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz#a451ff80dec7033016843f532efda18f02eec011"
+  integrity sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA==

 chalk@^2.0.0:
  version "2.4.2"
@ -1018,9 +1009,9 @@ eastasianwidth@^0.2.0:
  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==

 electron-to-chromium@^1.4.84:
-  version "1.4.92"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.92.tgz#88996e9aceb3a500710fd439abfa89b6cc1ac56c"
-  integrity sha512-YAVbvQIcDE/IJ/vzDMjD484/hsRbFPW2qXJPaYTfOhtligmfYEYOep+5QojpaEU9kq6bMvNeC2aG7arYvTHYsA==
+  version "1.4.103"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz#abfe376a4d70fa1e1b4b353b95df5d6dfd05da3a"
+  integrity sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg==

 emoji-regex@^8.0.0:
  version "8.0.0"
@ -1062,9 +1053,9 @@ error-ex@^1.3.1:
    is-arrayish "^0.2.1"

 es-abstract@^1.19.0, es-abstract@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
-  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.2.tgz#8f7b696d8f15b167ae3640b4060670f3d054143f"
+  integrity sha512-gfSBJoZdlL2xRiOCy0g8gLMryhoe1TlimjzU99L/31Z8QEGIhVQI+EWwt5lT+AuU9SnorVupXFqqOGqGfsyO6w==
  dependencies:
    call-bind "^1.0.2"
    es-to-primitive "^1.2.1"
@ -1072,15 +1063,15 @@ es-abstract@^1.19.0, es-abstract@^1.19.1:
    get-intrinsic "^1.1.1"
    get-symbol-description "^1.0.0"
    has "^1.0.3"
-    has-symbols "^1.0.2"
+    has-symbols "^1.0.3"
    internal-slot "^1.0.3"
    is-callable "^1.2.4"
-    is-negative-zero "^2.0.1"
+    is-negative-zero "^2.0.2"
    is-regex "^1.1.4"
    is-shared-array-buffer "^1.0.1"
    is-string "^1.0.7"
-    is-weakref "^1.0.1"
-    object-inspect "^1.11.0"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.0"
    object-keys "^1.1.1"
    object.assign "^4.1.2"
    string.prototype.trimend "^1.0.4"
@ -1686,8 +1677,8 @@ graceful-fs@^4.2.4:
  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==

 gsap@./src/lib/gsap/gsap-bonus.tgz:
-  version "3.10.1"
-  resolved "./src/lib/gsap/gsap-bonus.tgz#5944b8890bd789667abe9529b13db2d1732dfc22"
+  version "3.10.2"
+  resolved "./src/lib/gsap/gsap-bonus.tgz#d9fd1256bcf1a3001a195506c9b43510fc6d9ad6"

 gzip-size@^6.0.0:
  version "6.0.0"
@ -1917,7 +1908,7 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
  dependencies:
    is-extglob "^2.1.1"

-is-negative-zero@^2.0.1:
+is-negative-zero@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
@ -1981,7 +1972,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
  dependencies:
    has-symbols "^1.0.2"

-is-weakref@^1.0.1:
+is-weakref@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
@ -2039,11 +2030,11 @@ json5@^1.0.1:
    minimist "^1.2.0"

 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
-  integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.2.tgz#6ab1e52c71dfc0c0707008a91729a9491fe9f76c"
+  integrity sha512-HDAyJ4MNQBboGpUnHAVUNJs6X0lh058s6FuixsFGP7MgJYpD6Vasd6nzSG5iIfXu1zAYlHJ/zsOKNlrenTUBnw==
  dependencies:
-    array-includes "^3.1.3"
+    array-includes "^3.1.4"
    object.assign "^4.1.2"

 keen-slider@^6.6.5:
@ -2237,12 +2228,12 @@ merge2@^1.3.0, merge2@^1.4.1:
  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==

 micromatch@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
-  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.2.3"
+    braces "^3.0.2"
+    picomatch "^2.3.1"

 mimic-fn@^2.1.0:
  version "2.1.0"
@ -2306,9 +2297,9 @@ ms@^2.1.1:
  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==

 nanoid@^3.1.30, nanoid@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
-  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
+  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==

 napi-build-utils@^1.0.1:
  version "1.0.2"
@ -2453,7 +2444,7 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=

-object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
+object-inspect@^1.12.0, object-inspect@^1.9.0:
  version "1.12.0"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
@ -2636,7 +2627,7 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -2667,9 +2658,9 @@ postcss-scss@^4.0.2:
  integrity sha512-j4KxzWovfdHsyxwl1BxkUal/O4uirvHgdzMKS1aWJBAV0qh2qj5qAZqpeBfVUYGWv+4iK9Az7SPyZ4fyNju1uA==

 postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
-  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
  dependencies:
    cssesc "^3.0.0"
    util-deprecate "^1.0.2"
@ -3434,9 +3425,9 @@ supports-color@^7.0.0, supports-color@^7.1.0:
    has-flag "^4.0.0"

 supports-color@^9.2.1:
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891"
-  integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ==
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.2.tgz#502acaf82f2b7ee78eb7c83dcac0f89694e5a7bb"
+  integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==

 supports-hyperlinks@^2.2.0:
  version "2.2.0"