diff --git a/public/images/benefit-mobile-01-light.png b/public/images/benefit-mobile-01-light.png new file mode 100644 index 0000000..569af63 Binary files /dev/null and b/public/images/benefit-mobile-01-light.png differ diff --git a/public/images/benefit-mobile-02-light.png b/public/images/benefit-mobile-02-light.png new file mode 100644 index 0000000..5ae7699 Binary files /dev/null and b/public/images/benefit-mobile-02-light.png differ diff --git a/public/videos/banner-about-light.mp4 b/public/videos/banner-about-light.mp4 index f50c67f..badf9e6 100644 Binary files a/public/videos/banner-about-light.mp4 and b/public/videos/banner-about-light.mp4 differ diff --git a/public/videos/banner-about-light.webm b/public/videos/banner-about-light.webm index f004de5..3b526b9 100644 Binary files a/public/videos/banner-about-light.webm and b/public/videos/banner-about-light.webm differ diff --git a/public/videos/banner-careers.mp4 b/public/videos/banner-careers.mp4 new file mode 100644 index 0000000..02fb90c Binary files /dev/null and b/public/videos/banner-careers.mp4 differ diff --git a/public/videos/banner-careers.webm b/public/videos/banner-careers.webm new file mode 100644 index 0000000..c43d0d6 Binary files /dev/null and b/public/videos/banner-careers.webm differ diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss index ba08146..85780b2 100644 --- a/src/components/sections/about/hero/hero.module.scss +++ b/src/components/sections/about/hero/hero.module.scss @@ -43,7 +43,7 @@ position: relative; align-self: center; - width: 102%; + width: 101%; min-height: tovw(875px, 'default', 414px); margin-top: tovw(-165px, 'default'); padding-top: tovw(30px, 'default', 20px); diff --git a/src/components/sections/about/hero/index.tsx b/src/components/sections/about/hero/index.tsx index a78774e..b2933dd 100644 --- a/src/components/sections/about/hero/index.tsx +++ b/src/components/sections/about/hero/index.tsx @@ -28,6 +28,8 @@ const Hero = ({ data }: Props) => { const [mp4Source, setMp4Source] = useState('') useEffect(() => { + if (!theme) return + if (theme === 'dark') { setWebmSource('/videos/banner-about.webm') setMp4Source('/videos/banner-about.mp4') diff --git a/src/components/sections/careers/hero/hero.module.scss b/src/components/sections/careers/hero/hero.module.scss index dace632..71bb21b 100644 --- a/src/components/sections/careers/hero/hero.module.scss +++ b/src/components/sections/careers/hero/hero.module.scss @@ -33,6 +33,7 @@ min-height: tovw(790px, 'default', 380px); margin-top: tovw(-30px, 'default'); padding-top: tovw(30px, 'default', 20px); + mix-blend-mode: lighten; video { @include respond-to('mobile') { @@ -52,12 +53,12 @@ background: radial-gradient( ellipse, rgb(3 3 3 / 0) 40%, - rgb(3 3 3 / 1) 62%, + rgb(3 3 3 / 1) 70%, rgb(3 3 3 / 1) 100% ); - transform: translateX(-25%); - width: 200%; - height: 100%; + transform: translateX(-20%) translateY(-3%); + width: 400%; + height: 102%; content: ''; } } @@ -204,6 +205,7 @@ rgb(251 251 251 / 1) 62%, rgb(251 251 251 / 1) 100% ); + transform: translateX(-20%); } } diff --git a/src/components/sections/careers/hero/index.tsx b/src/components/sections/careers/hero/index.tsx index 8ba056b..1e8c69f 100644 --- a/src/components/sections/careers/hero/index.tsx +++ b/src/components/sections/careers/hero/index.tsx @@ -24,8 +24,8 @@ const Hero = ({ data }: Props) => { useEffect(() => { if (theme === 'dark') { - setWebmSource('/videos/banner-careers-light.webm') - setMp4Source('/videos/banner-careers-light.mp4') + setWebmSource('/videos/banner-careers.webm') + setMp4Source('/videos/banner-careers.mp4') } if (theme === 'light') { diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss index d5a05df..5891e73 100644 --- a/src/components/sections/homepage/benefits/benefits.module.scss +++ b/src/components/sections/homepage/benefits/benefits.module.scss @@ -243,7 +243,6 @@ .benefit { &__image { - filter: invert(100%) saturate(0%); mix-blend-mode: darken; } } diff --git a/src/components/sections/homepage/benefits/icons.tsx b/src/components/sections/homepage/benefits/icons.tsx index 57ab571..6a907af 100644 --- a/src/components/sections/homepage/benefits/icons.tsx +++ b/src/components/sections/homepage/benefits/icons.tsx @@ -10,18 +10,18 @@ const Icon01 = ({ className, fill }: { className?: string; fill?: string }) => { cx="12.5" cy="12.5" r="9.5" - stroke={fill || 'var(--color-white)'} + stroke={fill || 'var(--color-accent-boke)'} strokeWidth="2" /> @@ -41,19 +41,19 @@ const Icon02 = ({ className, fill }: { className?: string; fill?: string }) => { cx="16" cy="16" r="12" - stroke={fill || 'var(--color-white)'} + stroke={fill || 'var(--color-accent-boke)'} strokeWidth="2" /> - - - + + + ) } @@ -69,22 +69,27 @@ const Icon03 = ({ className, fill }: { className?: string; fill?: string }) => { - + @@ -108,13 +113,13 @@ const Icon04 = ({ className, fill }: { className?: string; fill?: string }) => { > @@ -132,19 +137,19 @@ const Icon05 = ({ className, fill }: { className?: string; fill?: string }) => { > @@ -162,7 +167,7 @@ const Icon06 = ({ className, fill }: { className?: string; fill?: string }) => { > { width="4" height="13" rx="2" - stroke={fill || 'var(--color-white)'} + stroke={fill || 'var(--color-accent-boke)'} strokeWidth="2" /> { width="4" height="13" rx="2" - stroke={fill || 'var(--color-white)'} + stroke={fill || 'var(--color-accent-boke)'} strokeWidth="2" /> @@ -203,10 +208,10 @@ const Icon07 = ({ className, fill }: { className?: string; fill?: string }) => { cx="16.001" cy="14.143" r="1.857" - fill={fill || 'var(--color-white)'} + fill={fill || 'var(--color-accent-boke)'} /> @@ -214,12 +219,12 @@ const Icon07 = ({ className, fill }: { className?: string; fill?: string }) => { cx="16" cy="16" r="12" - stroke={fill || 'var(--color-white)'} + stroke={fill || 'var(--color-accent-boke)'} strokeWidth="2" /> @@ -236,17 +241,17 @@ const Icon08 = ({ className, fill }: { className?: string; fill?: string }) => { > - - + + ) } @@ -261,14 +266,14 @@ const Icon09 = ({ className, fill }: { className?: string; fill?: string }) => { > { > { > @@ -330,12 +335,12 @@ const Icon12 = ({ className, fill }: { className?: string; fill?: string }) => { > diff --git a/src/components/sections/homepage/benefits/index.tsx b/src/components/sections/homepage/benefits/index.tsx index 34eb523..b0cf2aa 100644 --- a/src/components/sections/homepage/benefits/index.tsx +++ b/src/components/sections/homepage/benefits/index.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx' +import { useTheme } from 'next-themes' import * as React from 'react' import { Arrow } from '~/components/icons/arrow' @@ -54,6 +55,25 @@ interface Props { } const Benefits = ({ data }: Props) => { + const { theme } = useTheme() + + const mobileImg01Ref = React.useRef(null) + const mobileImg02Ref = React.useRef(null) + + React.useEffect(() => { + if (!mobileImg01Ref.current) return + if (!mobileImg02Ref.current) return + + mobileImg01Ref.current.src = + theme === 'dark' + ? '/images/benefit-mobile-01.jpg' + : '/images/benefit-mobile-01-light.png' + mobileImg02Ref.current.src = + theme === 'dark' + ? '/images/benefit-mobile-02.jpg' + : '/images/benefit-mobile-02-light.png' + }, [theme]) + const ballRef = React.useRef(null) const gridRef = React.useRef(null) const userRef = React.useRef(null) @@ -110,9 +130,9 @@ const Benefits = ({ data }: Props) => { s['benefit__image--01'], 'hide-on-desktop' )} + ref={mobileImg01Ref} alt="Benefit" loading="lazy" - src="/images/benefit-mobile-01.jpg" />
@@ -139,9 +159,9 @@ const Benefits = ({ data }: Props) => { s['benefit__image--02'], 'hide-on-desktop' )} + ref={mobileImg02Ref} alt="Benefit" loading="lazy" - src="/images/benefit-mobile-02.jpg" /> diff --git a/src/css/global.scss b/src/css/global.scss index e51de60..90b4da1 100644 --- a/src/css/global.scss +++ b/src/css/global.scss @@ -16,6 +16,7 @@ // Colors &[data-theme='dark'] { --color-accent: #0000f4; + --color-accent-boke: #fbfbfb; --color-black: #040404; --color-white: #fbfbfb; --color-grey: #565656; @@ -25,6 +26,7 @@ &[data-theme='light'] { --color-accent: #0000f4; + --color-accent-boke: #0000f4; --color-black: #fbfbfb; --color-white: #040404; --color-grey: #565656;