Improve Careers hero, new assets

src/components/sections/careers/values/index.tsx

@@ -1,4 +1,6 @@
-// import { Arrow } from '~/components/icons/arrow'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -13,46 +15,78 @@ interface Props {
     valuesPoint01Image: {
       url: string
     }
+    valuesPoint01ImageLight: {
+      url: string
+    }
     valuesPoint02Head: string
     valuesPoint02Line: string
     valuesPoint02Image: {
       url: string
     }
+    valuesPoint02ImageLight: {
+      url: string
+    }
     valuesPoint03Head: string
     valuesPoint03Line: string
     valuesPoint03Image: {
       url: string
     }
+    valuesPoint03ImageLight: {
+      url: string
+    }
     valuesPoint04Head: string
     valuesPoint04Line: string
     valuesPoint04Image: {
       url: string
     }
+    valuesPoint04ImageLight: {
+      url: string
+    }
   }
 }
 
 const Values = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [value01Img, setValue01Img] = useState('')
+  const [value02Img, setValue02Img] = useState('')
+  const [value03Img, setValue03Img] = useState('')
+  const [value04Img, setValue04Img] = useState('')
+
+  useEffect(() => {
+    setValue01Img(
+      theme === 'dark'
+        ? data?.valuesPoint01Image?.url
+        : data?.valuesPoint01ImageLight?.url
+    )
+    setValue02Img(
+      theme === 'dark'
+        ? data?.valuesPoint02Image?.url
+        : data?.valuesPoint02ImageLight?.url
+    )
+    setValue03Img(
+      theme === 'dark'
+        ? data?.valuesPoint03Image?.url
+        : data?.valuesPoint03ImageLight?.url
+    )
+    setValue04Img(
+      theme === 'dark'
+        ? data?.valuesPoint04Image?.url
+        : data?.valuesPoint04ImageLight?.url
+    )
+  }, [theme, data])
+
   return (
     <Section className={s['section']}>
       <Container className={s['container']}>
         <div>
-          {/* <img
-            className={s.network__img__mobile}
-            src="/images/products/network-mobile.jpg"
-            alt="network"
-          />
-          <img
-            className={s.network__img}
-            src="/images/products/network.jpg"
-            alt="network"
-          /> */}
           <div>
             <Heading as="h2" variant="lg">
               {data?.valuesHeading}
             </Heading>
             <div className={s.features}>
               <div>
-                <img src={data?.valuesPoint01Image?.url} alt="detail" />
+                <img src={value01Img} alt="detail" />
                 <div>
                   <Heading as="h3" variant="sm">
                     {data?.valuesPoint01Head}
@@ -61,7 +95,7 @@ const Values = ({ data }: Props) => {
                 </div>
               </div>
               <div>
-                <img src={data?.valuesPoint02Image?.url} alt="detail" />
+                <img src={value02Img} alt="detail" />
                 <div>
                   <Heading as="h3" variant="sm">
                     {data?.valuesPoint02Head}
@@ -70,7 +104,7 @@ const Values = ({ data }: Props) => {
                 </div>
               </div>
               <div>
-                <img src={data?.valuesPoint03Image?.url} alt="detail" />
+                <img src={value03Img} alt="detail" />
                 <div>
                   <Heading as="h3" variant="sm">
                     {data?.valuesPoint03Head}
@@ -79,7 +113,7 @@ const Values = ({ data }: Props) => {
                 </div>
               </div>
               <div>
-                <img src={data?.valuesPoint04Image?.url} alt="detail" />
+                <img src={value04Img} alt="detail" />
                 <div>
                   <Heading as="h3" variant="sm">
                     {data?.valuesPoint04Head}

src/components/sections/careers/values/values.module.scss

@@ -149,7 +149,6 @@
 [data-theme='light'] {
   .features {
     img {
-      filter: invert(100%) saturate(50%) hue-rotate(180deg);
       mix-blend-mode: darken !important;
     }
   }

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

@@ -31,7 +31,8 @@
 
     display: flex;
     place-content: center;
-    margin-top: tovw(-190px, 'default', -190px);
+    margin-top: tovw(-210px, 'default', -220px);
+    margin-bottom: tovw(-60px, 'default', -70px);
     min-height: tovw(925px, 'default', 485px);
 
     .hero {

src/lib/cms/queries/careers.js

@@ -17,21 +17,33 @@ const CareersValues = {
                 valuesPoint01Image {
                     url
                 }
+                valuesPoint01ImageLight {
+                    url
+                }
                 valuesPoint01Line
                 valuesPoint02Head
                 valuesPoint02Image {
                     url
                 }
+                valuesPoint02ImageLight {
+                    url
+                }
                 valuesPoint02Line
                 valuesPoint03Head
                 valuesPoint03Image {
                     url
                 }
+                valuesPoint03ImageLight {
+                    url
+                }
                 valuesPoint03Line
                 valuesPoint04Head
                 valuesPoint04Image {
                     url
                 }
+                valuesPoint04ImageLight {
+                    url
+                }
                 valuesPoint04Line
             }
         }`