New assets

src/components/sections/contact/hero/hero.module.scss

@@ -188,4 +188,8 @@
       filter: invert(100%);
     }
   }
+
+  .hero__container {
+    mix-blend-mode: darken;
+  }
 }

src/components/sections/contact/hero/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
 import { Discord } from '~/components/icons/socials'
@@ -19,21 +22,40 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const contactHeroRef = useRef<HTMLImageElement>(null)
+  const contactHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!contactHeroRef.current) return
+    if (!contactHeroMobileRef.current) return
+
+    contactHeroRef.current.src =
+      theme === 'dark'
+        ? '/images/contact/banner-contact.png'
+        : '/images/contact/banner-contact-light.png'
+    contactHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/contact/banner-contact.png'
+        : '/images/contact/banner-contact-light.png'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
       <div className={s.hero__container}>
         <img
+          ref={contactHeroRef}
           className={s.hero}
           loading="eager"
           alt="hero"
-          src="/images/contact/banner-contact.png"
         />
         <img
+          ref={contactHeroMobileRef}
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/contact/banner-contact.png"
         />
       </div>
       <Container className={s['container']}>