diff --git a/web/components/src/Backgrounds/BackgroundContainer.tsx b/web/components/src/Backgrounds/BackgroundContainer.tsx
index 46edec8a3..ff24dd508 100644
--- a/web/components/src/Backgrounds/BackgroundContainer.tsx
+++ b/web/components/src/Backgrounds/BackgroundContainer.tsx
@@ -1,20 +1,47 @@
-import { forwardRef, HTMLAttributes } from 'react'
+import { forwardRef, HTMLAttributes, memo, useContext, useEffect } from 'react'
 import type { BackgroundColours, ImageBackground } from '../../../types/types'
 import { ColouredContainer } from './ColouredContainer'
 import { ImageBackgroundContainer } from './ImageBackgroundContainer'
+import { BackgroundContext } from './BackgroundContext'
+import { useInView } from 'react-intersection-observer'
+import styled from 'styled-components'
 
 export type BackgroundContainerProps = {
   background?: {
     backgroundColor?: BackgroundColours
     imageBackground?: ImageBackground
   }
+  isTrueComponent?: Boolean
 } & HTMLAttributes<HTMLDivElement>
 
+const Wrapper = styled.div<{ isTrueComponent: Boolean }>`
+  ${({ isTrueComponent }) =>
+    isTrueComponent
+      ? `
+   padding-top: 25vh;
+   padding-bottom: 25vh;
+   `
+      : ''}
+`
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
-  { background, style, children, className, ...rest },
+  { background, style, children, className, isTrueComponent = true, ...rest },
   ref,
 ) {
-  const Container = ({ children }: { children: React.ReactNode }) => {
+  const { setBackgroundContainerProps } = useContext(BackgroundContext)
+
+  const { ref: inViewRef, inView } = useInView({
+    rootMargin: '0px 0px',
+    threshold: 0.5,
+  })
+
+  useEffect(() => {
+    if (inView && isTrueComponent) {
+      console.log(background)
+      setBackgroundContainerProps({ background })
+    }
+  }, [background, inView, isTrueComponent])
+
+  const Container = memo(({ children }: { children: React.ReactNode }) => {
     return background?.imageBackground ? (
       <ImageBackgroundContainer
         ref={ref}
@@ -36,7 +63,11 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
         {children}
       </ColouredContainer>
     )
-  }
+  })
 
-  return <Container>{children}</Container>
+  return (
+    <Wrapper ref={inViewRef} isTrueComponent={isTrueComponent}>
+      <Container>{children}</Container>
+    </Wrapper>
+  )
 })
diff --git a/web/components/src/Backgrounds/BackgroundContext.tsx b/web/components/src/Backgrounds/BackgroundContext.tsx
new file mode 100644
index 000000000..1907b18d7
--- /dev/null
+++ b/web/components/src/Backgrounds/BackgroundContext.tsx
@@ -0,0 +1,30 @@
+import { BackgroundContainerProps } from '@components'
+import { createContext, useState } from 'react'
+
+type Props = {
+  backgroundContainerProps: BackgroundContainerProps | undefined
+  setBackgroundContainerProps: React.Dispatch<React.SetStateAction<BackgroundContainerProps | undefined>>
+}
+
+type ProviderProps = {
+  children: React.ReactNode
+}
+
+export const BackgroundContext = createContext<Props>({
+  backgroundContainerProps: undefined,
+  setBackgroundContainerProps: () => {
+    return
+  },
+})
+
+export const BackgroundContextProvider = ({ children }: ProviderProps) => {
+  const [backgroundContainerProps, setBackgroundContainerProps] = useState({
+    background: { backgroundColor: 'White' },
+  } as BackgroundContainerProps | undefined)
+
+  return (
+    <BackgroundContext.Provider value={{ backgroundContainerProps, setBackgroundContainerProps }}>
+      {children}
+    </BackgroundContext.Provider>
+  )
+}
diff --git a/web/components/src/Backgrounds/ColouredContainer.tsx b/web/components/src/Backgrounds/ColouredContainer.tsx
index bfbd255a7..e5551fba0 100644
--- a/web/components/src/Backgrounds/ColouredContainer.tsx
+++ b/web/components/src/Backgrounds/ColouredContainer.tsx
@@ -9,10 +9,11 @@ type ColouredContainerProps = {
 } & HTMLAttributes<HTMLDivElement>
 type ColourContainerProps = {
   isInverted: boolean
+  isTrueComponent: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 const ColourContainer = styled.div<ColourContainerProps>`
-  background-color: var(--background-color);
+  background-color: ${({ isTrueComponent }) => (isTrueComponent ? 'var(--background-color)' : 'transparent')};
   color: var(--color-on-background);
   ${({ isInverted }) => (isInverted ? inverted : normal)}
 `
diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
index aa4494ab5..37739931e 100644
--- a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
+++ b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
@@ -13,20 +13,19 @@ type ImageContainerProps = {
 } & HTMLAttributes<HTMLDivElement>
 
 const ImageContainer = styled.div<ImageContainerProps>`
-  position: relative;
+  /*position: relative;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: ${({ imageUrl }) => (imageUrl ? `url(${imageUrl})` : '')};
-  ${({ isInverted }) => (isInverted ? inverted : normal)}
+  ${({ isInverted }) => (isInverted ? inverted : normal)}*/
 `
 
 const DEFAULT_MAX_WIDTH = 1920
 
 const AnimationWrapper = styled.div`
   /* Create View Timeline */
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1) 70%);
   section {
     width: 40vw;
     margin-right: 0;
diff --git a/web/package.json b/web/package.json
index 54c51f370..b618664a5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -81,7 +81,8 @@
     "swiper": "^9.2.3",
     "swr": "^1.3.0",
     "uuid": "^9.0.0",
-    "xml2js": "^0.6.0"
+    "xml2js": "^0.6.0",
+    "react-intersection-observer": "^9.6.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.16.0",
diff --git a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
index 4ac74784e..67bd4b2f2 100644
--- a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
+++ b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
@@ -81,7 +81,7 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug, u
         {pageData?.hero.type !== HeroTypes.DEFAULT && title && (
           <SharedTitle sharedTitle={title} background={ingress.background} />
         )}
-        <BackgroundContainer background={ingress.background}>
+        <BackgroundContainer background={ingress.background} isTrueComponent={false}>
           <Intro>
             {ingress && (
               <IngressWrapper>
diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx
index a38d3a96e..5046eaa88 100644
--- a/web/pageComponents/pageTemplates/News.tsx
+++ b/web/pageComponents/pageTemplates/News.tsx
@@ -223,7 +223,7 @@ const NewsPage = ({ data: news }: ArticleProps) => {
       <main>
         <article>
           <NewsLayout>
-            <Header background={'Slate Blue 95'}>
+            <Header background={'Slate Blue 95'} isTrueComponent={false}>
               <HeaderInner>
                 <StyledHeading level="h1" size="3xl">
                   {title}
diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
index d0feff019..c7219c787 100644
--- a/web/pageComponents/pageTemplates/TopicPage.tsx
+++ b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -48,7 +48,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
         pageTitle={data?.title}
       />
       <TopicPageLayout>
-        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background} />
+        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
         {breadcrumbs && breadcrumbs?.enableBreadcrumbs && (
           <Breadcrumbs
             background={titleStyles.background}
diff --git a/web/pageComponents/pageTemplates/shared/FixedBackground.tsx b/web/pageComponents/pageTemplates/shared/FixedBackground.tsx
new file mode 100644
index 000000000..2f12216e2
--- /dev/null
+++ b/web/pageComponents/pageTemplates/shared/FixedBackground.tsx
@@ -0,0 +1,52 @@
+import { BackgroundContext } from '@components/Backgrounds/BackgroundContext'
+import { useSanityLoader } from 'lib/hooks/useSanityLoader'
+import { useContext, forwardRef, HTMLAttributes, useEffect, useState, memo } from 'react'
+import styled from 'styled-components'
+import { getContainerColor } from '@utils/backgroundColours'
+
+type ContainerProps = {
+  imageUrl?: string
+  backgroundColor: String
+}
+const ImageContainer = styled.div<ContainerProps>`
+  position: relative;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: ${({ color, imageUrl }) => `var(${color})`};
+  background-image: ${({ color, imageUrl }) =>
+    imageUrl ? `linear-gradient(to right, rgba(0, 0, 0, 0), var(${color}) 70%), url(${imageUrl})` : 'none'};
+  transition: all 0.5s ease-out;
+  //animation: reveal 5s;
+  /*@keyframes reveal {
+    from {
+      opacity: 0.2;
+    }
+    to {
+      opacity: 1;
+    }
+  }*/
+`
+
+export const FixedBackground = memo(
+  forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function FixedBackground(
+    { children, className, style, ...rest },
+    ref,
+  ) {
+    const { backgroundContainerProps } = useContext(BackgroundContext)
+    const background = backgroundContainerProps?.background
+
+    const styleVariant = getContainerColor(background?.backgroundColor || 'White')
+
+    let props = undefined
+    if (background?.imageBackground?.image) {
+      props = useSanityLoader(background?.imageBackground?.image, 1920, undefined)
+    }
+    return (
+      <ImageContainer imageUrl={props?.src} color={styleVariant}>
+        {children}
+      </ImageContainer>
+    )
+  }),
+)
diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
index 766fd7f64..b34c57c9f 100644
--- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
+++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
@@ -21,6 +21,8 @@ import VideoPlayer from '../../shared/VideoPlayer'
 import VideoPlayerCarousel from '../../shared/VideoPlayerCarousel'
 import TextTeaser from '../../shared/textTeaser/TextTeaser'
 import KeyNumbers from '../../topicPages/KeyNumbers/KeyNumbers'
+import { memo, useMemo } from 'react'
+
 import {
   AnchorLinkData,
   TopicPageSchema,
@@ -51,6 +53,9 @@ import {
   KeyNumbersData,
 } from '../../../types/types'
 
+import { FixedBackground } from './FixedBackground'
+import { BackgroundContextProvider } from '@components/Backgrounds/BackgroundContext'
+
 // How could we do this for several different component types?
 type ComponentProps =
   | TeaserData
@@ -136,5 +141,10 @@ export const PageContent = ({ data }: PageContentProps) => {
         return null
     }
   })
-  return <>{content}</>
+
+  return (
+    <BackgroundContextProvider>
+      <FixedBackground>{content}</FixedBackground>
+    </BackgroundContextProvider>
+  )
 }
diff --git a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
index 34e01d6b8..1728c8dcd 100644
--- a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
+++ b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
@@ -13,7 +13,7 @@ const StyledHeading = styled(TitleText)`
 
 const SharedTitle = ({ sharedTitle, background }: SharedTitleProps) => {
   return (
-    <BackgroundContainer background={background}>
+    <BackgroundContainer background={background} isTrueComponent={false}>
       <StyledHeading value={sharedTitle} level="h1" size="3xl" />
     </BackgroundContainer>
   )
diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
index 235577f24..e958e03c4 100644
--- a/web/pageComponents/shared/Header.tsx
+++ b/web/pageComponents/shared/Header.tsx
@@ -159,7 +159,7 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
     <HeaderRelative>
       <HeadTags slugs={slugs} />
       <TopbarOffset />
-      <BackgroundContainer>
+      <BackgroundContainer isTrueComponent={false}>
         <Topbar>
           <TopbarContainer>
             <LogoLinkInGrid />
diff --git a/web/pageComponents/shared/Hero/DefaultHero.tsx b/web/pageComponents/shared/Hero/DefaultHero.tsx
index 1e432a9ca..7631823f5 100644
--- a/web/pageComponents/shared/Hero/DefaultHero.tsx
+++ b/web/pageComponents/shared/Hero/DefaultHero.tsx
@@ -54,7 +54,7 @@ export const DefaultHero = ({ title, image, isBigTitle, bigTitle }: Props) => {
         </>
       )}
       {!isBigTitle && <HeroBanner>{title && <StyledHeading value={title} level="h1" size="3xl" />}</HeroBanner>}
-      <ImageWrapper>{image && <DefaulHeroImage data={image} />}</ImageWrapper>
+      <ImageWrapper isTrueComponent={false}>{image && <DefaulHeroImage data={image} />}</ImageWrapper>
     </>
   )
 }
diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
index adea6ae0f..edcfdb7ee 100644
--- a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
+++ b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -83,7 +83,7 @@ const HeroActionLink = ({ action, ...rest }: { action: LinkData }) => {
 export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBigTitle }: HeroType) => {
   return (
     <>
-      <StyledHero background={background}>
+      <StyledHero background={background} isTrueComponent={false}>
         <StyledMedia>
           {figure && (
             <Image
diff --git a/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx b/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx
index 6f01a3681..f5e4edd78 100644
--- a/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx
+++ b/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx
@@ -21,6 +21,7 @@ type Props = {
 export const TopbarDropdown = ({ isOpen, children, ...rest }: Props) => {
   return (
     <StyledTopbarDropdown
+      isTrueComponent={false}
       style={
         {
           '--display': isOpen ? 'block' : 'none',
diff --git a/web/pageComponents/topicPages/PromoTileArray.tsx b/web/pageComponents/topicPages/PromoTileArray.tsx
index 429f7160a..44e8eb193 100644
--- a/web/pageComponents/topicPages/PromoTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTileArray.tsx
@@ -109,7 +109,7 @@ const PromoTileArray = ({ data, anchor }: { data: PromoTileArrayData; anchor?: s
           )
 
         return (
-          <StyledBackgroundContainer background={background} key={id}>
+          <StyledBackgroundContainer background={background} key={id} isTrueComponent={false}>
             <StyledCard type="promo" textOnly={!image} style={{ '--card-height': '100%' } as CSSProperties}>
               {image && (
                 <Media>
diff --git a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
index 008817744..1ccd7793a 100644
--- a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
+++ b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
@@ -101,7 +101,7 @@ const MultipleEventCards = ({
         <Carousel horizontalPadding={true}>
           {data.map((item) => {
             return (
-              <StyledBackground key={item.id}>
+              <StyledBackground key={item.id} isTrueComponent={false}>
                 <StyledEventsCard data={item} hasSectionTitle={hasSectionTitle} key={item.id} />
               </StyledBackground>
             )
diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
index 14f417d61..ecebb8f17 100644
--- a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
+++ b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
@@ -103,20 +103,20 @@ const MultiplePromotions = ({
       case 'news':
       case 'localNews':
         return (
-          <StyledBackground key={data.id}>
+          <StyledBackground key={data.id} isTrueComponent={false}>
             <StyledNewsCard data={data as CardData} key={data.id} />
           </StyledBackground>
         )
       case 'topics':
       case 'magazine':
         return (
-          <StyledBackground key={data.id}>
+          <StyledBackground key={data.id} isTrueComponent={false}>
             <StyledTopicPageCard data={data as CardData} key={data.id} />
           </StyledBackground>
         )
       case 'people':
         return (
-          <StyledBackground key={data.id}>
+          <StyledBackground key={data.id} isTrueComponent={false}>
             <StyledPeopleCard data={data as PeopleCardData} hasSectionTitle={hasSectionTitle} key={data.id} />
           </StyledBackground>
         )
diff --git a/web/pages/[[...slug]].tsx b/web/pages/[[...slug]].tsx
index 4afc6ea83..f2667c13c 100644
--- a/web/pages/[[...slug]].tsx
+++ b/web/pages/[[...slug]].tsx
@@ -14,7 +14,7 @@ import getIntl from '../common/helpers/getIntl'
 import { getRoutePaths } from '../common/helpers/getPaths'
 import getPageSlugs from '../common/helpers/getPageSlugs'
 import { getComponentsData } from '../lib/fetchData'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import { PreviewContext } from '../lib/contexts/PreviewContext'
 
 const MagazinePage = dynamic(() => import('../pageComponents/pageTemplates/MagazinePage'))
@@ -33,7 +33,9 @@ export default function Page({ data, preview = false }: any) {
     setIsPreview(preview)
   }, [setIsPreview, preview])
 
-  const { pageData } = data
+  const { pageData } = useMemo(() => {
+    return data
+  }, [data])
 
   const slug = pageData?.slug
   if (!router.isFallback && !slug && !data?.queryParams?.id) {
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index b9d5681e4..fcd95eb1a 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -155,6 +155,9 @@ dependencies:
   react-instantsearch-router-nextjs:
     specifier: ^7.3.0
     version: 7.3.0(algoliasearch@4.16.0)(next@13.5.6)(react@18.2.0)
+  react-intersection-observer:
+    specifier: ^9.6.0
+    version: 9.6.0(react-dom@18.2.0)(react@18.2.0)
   react-intl:
     specifier: ^6.0.2
     version: 6.0.2(react@18.2.0)(typescript@4.8.4)
@@ -219,7 +222,7 @@ devDependencies:
     version: 7.0.6(typescript@4.8.4)(vite@4.2.2)
   '@storybook/nextjs':
     specifier: ^7.0.6
-    version: 7.0.6(@babel/core@7.21.4)(esbuild@0.17.19)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)(webpack@5.88.2)
+    version: 7.0.6(@babel/core@7.21.4)(esbuild@0.18.17)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)(webpack@5.88.2)
   '@storybook/react':
     specifier: ^7.0.6
     version: 7.0.6(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)
@@ -291,7 +294,7 @@ devDependencies:
     version: 4.2.2(@types/node@17.0.35)
   webpack:
     specifier: ^5.88.2
-    version: 5.88.2(esbuild@0.17.19)
+    version: 5.88.2(esbuild@0.18.17)
 
 packages:
 
@@ -3711,7 +3714,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/android-arm@0.17.19:
@@ -3729,7 +3731,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/android-x64@0.17.19:
@@ -3747,7 +3748,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/darwin-arm64@0.17.19:
@@ -3765,7 +3765,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/darwin-x64@0.17.19:
@@ -3783,7 +3782,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/freebsd-arm64@0.17.19:
@@ -3801,7 +3799,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/freebsd-x64@0.17.19:
@@ -3819,7 +3816,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-arm64@0.17.19:
@@ -3837,7 +3833,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-arm@0.17.19:
@@ -3855,7 +3850,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-ia32@0.17.19:
@@ -3873,7 +3867,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-loong64@0.17.19:
@@ -3891,7 +3884,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-mips64el@0.17.19:
@@ -3909,7 +3901,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-ppc64@0.17.19:
@@ -3927,7 +3918,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-riscv64@0.17.19:
@@ -3945,7 +3935,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-s390x@0.17.19:
@@ -3963,7 +3952,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-x64@0.17.19:
@@ -3981,7 +3969,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/netbsd-x64@0.17.19:
@@ -3999,7 +3986,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/openbsd-x64@0.17.19:
@@ -4017,7 +4003,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/sunos-x64@0.17.19:
@@ -4035,7 +4020,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/win32-arm64@0.17.19:
@@ -4053,7 +4037,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/win32-ia32@0.17.19:
@@ -4071,7 +4054,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/win32-x64@0.17.19:
@@ -4089,7 +4071,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@fal-works/esbuild-plugin-global-externals@2.1.2:
@@ -4735,7 +4716,7 @@ packages:
       react-refresh: 0.11.0
       schema-utils: 3.3.0
       source-map: 0.7.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /@polka/url@1.0.0-next.21:
@@ -5645,7 +5626,7 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-webpack5@7.0.6(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4):
+  /@storybook/builder-webpack5@7.0.6(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4):
     resolution: {integrity: sha512-V11LHz+hEkqxrsNkQEoPHfFr3eN7Uer4J/PD0SUeVrmpejzd3bQYcz6Nwp4ohm110zSZBSJR2/GNaf6ICOY8qg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5692,12 +5673,12 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       semver: 7.5.4
       style-loader: 3.3.3(webpack@5.88.2)
-      terser-webpack-plugin: 5.3.9(esbuild@0.17.19)(webpack@5.88.2)
+      terser-webpack-plugin: 5.3.9(esbuild@0.18.17)(webpack@5.88.2)
       ts-dedent: 2.2.0
       typescript: 4.8.4
       util: 0.12.5
       util-deprecate: 1.0.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
       webpack-dev-middleware: 5.3.3(webpack@5.88.2)
       webpack-hot-middleware: 2.25.4
       webpack-virtual-modules: 0.4.6
@@ -6021,7 +6002,7 @@ packages:
     resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
     dev: true
 
-  /@storybook/nextjs@7.0.6(@babel/core@7.21.4)(esbuild@0.17.19)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)(webpack@5.88.2):
+  /@storybook/nextjs@7.0.6(@babel/core@7.21.4)(esbuild@0.18.17)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)(webpack@5.88.2):
     resolution: {integrity: sha512-PvJRGHa4TdmdoIYvIzkymlx55P6X1mS4hJRwfLQXfbIL8g9CRzpWCvGAFPYIKuDKfgr6hquUdy4V2OkEWxOeKw==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -6058,10 +6039,10 @@ packages:
       '@babel/preset-typescript': 7.22.5(@babel/core@7.21.4)
       '@babel/runtime': 7.22.5
       '@storybook/addon-actions': 7.0.6(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/builder-webpack5': 7.0.6(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)
+      '@storybook/builder-webpack5': 7.0.6(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)
       '@storybook/core-common': 7.0.6
       '@storybook/node-logger': 7.0.6
-      '@storybook/preset-react-webpack': 7.0.6(@babel/core@7.21.4)(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)
+      '@storybook/preset-react-webpack': 7.0.6(@babel/core@7.21.4)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)
       '@storybook/preview-api': 7.0.6
       '@storybook/react': 7.0.6(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4)
       '@types/node': 16.18.36
@@ -6085,7 +6066,7 @@ packages:
       tsconfig-paths: 4.2.0
       tsconfig-paths-webpack-plugin: 3.5.2
       typescript: 4.8.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     transitivePeerDependencies:
       - '@swc/core'
       - '@types/webpack'
@@ -6119,7 +6100,7 @@ packages:
     resolution: {integrity: sha512-NDAA2I2LqDKXqnCMgnNNpwU87rNYmf5tjLg0MK9NFR79zSdjPryy+64oBWoNjGdub342Y9fyc3gTV7OIQdvH0Q==}
     dev: true
 
-  /@storybook/preset-react-webpack@7.0.6(@babel/core@7.21.4)(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4):
+  /@storybook/preset-react-webpack@7.0.6(@babel/core@7.21.4)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@4.8.4):
     resolution: {integrity: sha512-P89xpwjB8DXGLA1VGB5Z1W/2YViB0VIgthRetGYgSFm9b7U4hFf1zVCF4cb/repvcmIAcCTF6PnAf+z5YZMGug==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -6152,7 +6133,7 @@ packages:
       react-refresh: 0.11.0
       semver: 7.5.4
       typescript: 4.8.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     transitivePeerDependencies:
       - '@swc/core'
       - '@types/webpack'
@@ -6205,7 +6186,7 @@ packages:
       react-docgen-typescript: 2.2.2(typescript@4.8.4)
       tslib: 2.6.1
       typescript: 4.8.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7524,7 +7505,7 @@ packages:
       '@babel/core': 7.21.4
       find-cache-dir: 3.3.2
       schema-utils: 4.2.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /babel-plugin-add-react-displayname@0.0.5:
@@ -8389,7 +8370,7 @@ packages:
       postcss-modules-values: 4.0.0(postcss@8.4.31)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /css-select@4.3.0:
@@ -8481,7 +8462,7 @@ packages:
     dev: false
 
   /date-now@1.0.1:
-    resolution: {integrity: sha1-u30IZDjevkGCpIX7PfP7+5nWFTw=}
+    resolution: {integrity: sha512-yiizelQCqYLUEVT4zqYihOW6Ird7Qyc6fD3Pv5xGxk4+Jz0rsB1dMN2KyNV6jgOHYh5K+sPGCSOknQN4Upa3pg==}
     dev: false
 
   /debounce@1.0.0:
@@ -9026,7 +9007,6 @@ packages:
       '@esbuild/win32-arm64': 0.18.17
       '@esbuild/win32-ia32': 0.18.17
       '@esbuild/win32-x64': 0.18.17
-    dev: false
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -9508,7 +9488,7 @@ packages:
       semver: 7.5.4
       tapable: 2.2.1
       typescript: 4.8.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /form-data@3.0.1:
@@ -10125,7 +10105,7 @@ packages:
       lodash: 4.17.21
       pretty-error: 4.0.0
       tapable: 2.2.1
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /htmlparser2@6.1.0:
@@ -12887,7 +12867,7 @@ packages:
       jiti: 1.18.2
       postcss: 8.4.24
       semver: 7.5.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /postcss-modules-extract-imports@3.0.0(postcss@8.4.31):
@@ -13437,6 +13417,19 @@ packages:
       react-instantsearch-core: 7.3.0(algoliasearch@4.16.0)(react@18.2.0)
     dev: false
 
+  /react-intersection-observer@9.6.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ZJCi6aOY4kIulpUhWRNIFTyMUKOmSA25iw8sKH07fhlqWTaWD5CWvWarqH4N31EyjCFKsgetvr/amRpnuEWzRg==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-intl@6.0.2(react@18.2.0)(typescript@4.8.4):
     resolution: {integrity: sha512-SrVlPUYITOQA9s+yhePh2MtLwbJh1MRhO69PK+eOPX8N+0kF78h0kaiJaIF3ZEJCawAxrL5927qI22VCap0INw==}
     peerDependencies:
@@ -14073,7 +14066,7 @@ packages:
     dependencies:
       klona: 2.0.6
       neo-async: 2.6.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /sax@1.2.4:
@@ -14580,7 +14573,7 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /style-value-types@5.0.0:
@@ -14816,7 +14809,7 @@ packages:
       supports-hyperlinks: 2.3.0
     dev: true
 
-  /terser-webpack-plugin@5.3.9(esbuild@0.17.19)(webpack@5.88.2):
+  /terser-webpack-plugin@5.3.9(esbuild@0.18.17)(webpack@5.88.2):
     resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -14833,12 +14826,12 @@ packages:
         optional: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.18
-      esbuild: 0.17.19
+      esbuild: 0.18.17
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.1
       terser: 5.18.1
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /terser@5.18.1:
@@ -15528,7 +15521,7 @@ packages:
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.2.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2(esbuild@0.18.17)
     dev: true
 
   /webpack-hot-middleware@2.25.4:
@@ -15548,7 +15541,7 @@ packages:
     resolution: {integrity: sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==}
     dev: true
 
-  /webpack@5.88.2(esbuild@0.17.19):
+  /webpack@5.88.2(esbuild@0.18.17):
     resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==}
     engines: {node: '>=10.13.0'}
     hasBin: true
@@ -15579,7 +15572,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.9(esbuild@0.17.19)(webpack@5.88.2)
+      terser-webpack-plugin: 5.3.9(esbuild@0.18.17)(webpack@5.88.2)
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -15789,7 +15782,7 @@ packages:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
   /xregexp@2.0.0:
-    resolution: {integrity: sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM=}
+    resolution: {integrity: sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA==}
     dev: false
 
   /xtend@4.0.2: