diff --git a/public/videos/banner-about-light.mp4 b/public/videos/banner-about-light.mp4 index 13ac86b..6d2bd11 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 2aba6dd..07a0245 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-about.mp4 b/public/videos/banner-about.mp4 index 48155fa..30c606f 100644 Binary files a/public/videos/banner-about.mp4 and b/public/videos/banner-about.mp4 differ diff --git a/public/videos/banner-about.webm b/public/videos/banner-about.webm index f748303..cfa09a6 100644 Binary files a/public/videos/banner-about.webm and b/public/videos/banner-about.webm differ diff --git a/public/videos/banner-careers-light.mp4 b/public/videos/banner-careers-light.mp4 index 67ae100..85eed88 100644 Binary files a/public/videos/banner-careers-light.mp4 and b/public/videos/banner-careers-light.mp4 differ diff --git a/public/videos/banner-careers-light.webm b/public/videos/banner-careers-light.webm index 3e4d1ac..b942049 100644 Binary files a/public/videos/banner-careers-light.webm and b/public/videos/banner-careers-light.webm differ diff --git a/public/videos/banner-careers.mp4 b/public/videos/banner-careers.mp4 index 02fb90c..46642fd 100644 Binary files a/public/videos/banner-careers.mp4 and b/public/videos/banner-careers.mp4 differ diff --git a/public/videos/banner-careers.webm b/public/videos/banner-careers.webm index c43d0d6..4e19883 100644 Binary files a/public/videos/banner-careers.webm and b/public/videos/banner-careers.webm differ diff --git a/public/videos/banner-contact-light.mp4 b/public/videos/banner-contact-light.mp4 new file mode 100644 index 0000000..5b14a62 Binary files /dev/null and b/public/videos/banner-contact-light.mp4 differ diff --git a/public/videos/banner-contact-light.webm b/public/videos/banner-contact-light.webm new file mode 100644 index 0000000..eafdcae Binary files /dev/null and b/public/videos/banner-contact-light.webm differ diff --git a/public/videos/banner-contact.mp4 b/public/videos/banner-contact.mp4 new file mode 100644 index 0000000..289ad7b Binary files /dev/null and b/public/videos/banner-contact.mp4 differ diff --git a/public/videos/banner-contact.webm b/public/videos/banner-contact.webm new file mode 100644 index 0000000..6a8e113 Binary files /dev/null and b/public/videos/banner-contact.webm differ diff --git a/public/videos/banner-partners-light.mp4 b/public/videos/banner-partners-light.mp4 new file mode 100644 index 0000000..75704e7 Binary files /dev/null and b/public/videos/banner-partners-light.mp4 differ diff --git a/public/videos/banner-partners-light.webm b/public/videos/banner-partners-light.webm new file mode 100644 index 0000000..2873bd8 Binary files /dev/null and b/public/videos/banner-partners-light.webm differ diff --git a/public/videos/banner-partners.mp4 b/public/videos/banner-partners.mp4 new file mode 100644 index 0000000..0dddf93 Binary files /dev/null and b/public/videos/banner-partners.mp4 differ diff --git a/public/videos/banner-partners.webm b/public/videos/banner-partners.webm new file mode 100644 index 0000000..3ee7ed7 Binary files /dev/null and b/public/videos/banner-partners.webm differ diff --git a/public/videos/banner-press-light.mp4 b/public/videos/banner-press-light.mp4 index 9a3e3b6..a9665d4 100644 Binary files a/public/videos/banner-press-light.mp4 and b/public/videos/banner-press-light.mp4 differ diff --git a/public/videos/banner-press-light.webm b/public/videos/banner-press-light.webm index 4310ab1..182c646 100644 Binary files a/public/videos/banner-press-light.webm and b/public/videos/banner-press-light.webm differ diff --git a/public/videos/banner-press.mp4 b/public/videos/banner-press.mp4 index be4add6..2d8e510 100644 Binary files a/public/videos/banner-press.mp4 and b/public/videos/banner-press.mp4 differ diff --git a/public/videos/banner-press.webm b/public/videos/banner-press.webm index f5b29a7..f2fe9f9 100644 Binary files a/public/videos/banner-press.webm and b/public/videos/banner-press.webm differ diff --git a/public/videos/banner-products-light.mp4 b/public/videos/banner-products-light.mp4 index e9dba55..5a3680b 100644 Binary files a/public/videos/banner-products-light.mp4 and b/public/videos/banner-products-light.mp4 differ diff --git a/public/videos/banner-products-light.webm b/public/videos/banner-products-light.webm index 88c6465..18fe499 100644 Binary files a/public/videos/banner-products-light.webm and b/public/videos/banner-products-light.webm differ diff --git a/public/videos/banner-products.mp4 b/public/videos/banner-products.mp4 index 05f1e17..6b8b61e 100644 Binary files a/public/videos/banner-products.mp4 and b/public/videos/banner-products.mp4 differ diff --git a/public/videos/banner-products.webm b/public/videos/banner-products.webm index a4bccf5..ad411db 100644 Binary files a/public/videos/banner-products.webm and b/public/videos/banner-products.webm differ diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss index 06d61c2..7e1435f 100644 --- a/src/components/sections/about/hero/hero.module.scss +++ b/src/components/sections/about/hero/hero.module.scss @@ -43,11 +43,10 @@ position: relative; align-self: center; - width: 101%; - min-height: tovw(875px, 'default', 414px); - margin-top: tovw(-180px, 'default'); - margin-bottom: tovw(-165px, 'default'); + width: 115%; + max-height: tovw(380px, 'default', 180px); padding-top: tovw(30px, 'default', 20px); + margin-bottom: 50px; mix-blend-mode: lighten; video { @@ -69,11 +68,11 @@ background: radial-gradient( ellipse, rgb(3 3 3 / 0) 50%, - rgb(3 3 3 / 1) 72%, + rgb(3 3 3 / 1) 70%, rgb(3 3 3 / 1) 100% ); width: 101%; - height: 100%; + height: tovw(390px, 'default', 200px); content: ''; } } diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss index 23d833b..c399491 100644 --- a/src/components/sections/blog/hero/hero.module.scss +++ b/src/components/sections/blog/hero/hero.module.scss @@ -10,10 +10,9 @@ rgb(0 0 244 / 0.9) 1.63%, rgb(0 0 244 / 0) 65.89% ); - padding-top: tovw(185px, 'default', 104px); - padding-bottom: tovw(92px, 'default', 40px); + padding-top: tovw(220px, 'default', 160px); + padding-bottom: tovw(40px, 'default', 20px); max-width: 100%; - min-height: calc(var(--vh) * 100); text-align: center; @media screen and (max-width: 800px) { diff --git a/src/components/sections/blog/search/search.module.scss b/src/components/sections/blog/search/search.module.scss index 2e7988b..2e2875c 100644 --- a/src/components/sections/blog/search/search.module.scss +++ b/src/components/sections/blog/search/search.module.scss @@ -4,7 +4,7 @@ display: flex; align-items: flex-end; justify-content: space-between; - padding-top: tovw(108px, 'default', 64px); + padding-top: tovw(70px, 'default', 30px); @media screen and (max-width: 800px) { flex-direction: column-reverse; diff --git a/src/components/sections/careers/hero/hero.module.scss b/src/components/sections/careers/hero/hero.module.scss index 0d0ee69..62d34f8 100644 --- a/src/components/sections/careers/hero/hero.module.scss +++ b/src/components/sections/careers/hero/hero.module.scss @@ -28,11 +28,9 @@ position: relative; align-self: center; - width: 75%; - margin-left: tovw(165px, 'default', 125px); - min-height: tovw(790px, 'default', 380px); - margin-top: tovw(-45px, 'default'); - padding-top: tovw(30px, 'default', 20px); + width: 105%; + max-height: tovw(470px, 'default', 210px); + margin-bottom: tovw(50px, 'default', 40px); mix-blend-mode: lighten; video { @@ -56,9 +54,9 @@ rgb(3 3 3 / 1) 70%, rgb(3 3 3 / 1) 100% ); - transform: translateX(-20%) translateY(-3%); - width: 400%; - height: 102%; + transform: translateX(-30%) translateY(-3%); + width: 650%; + height: tovw(495px, 'default', 200px); content: ''; } } diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss index 0d3cd6b..3ca5bdf 100644 --- a/src/components/sections/community/hero/hero.module.scss +++ b/src/components/sections/community/hero/hero.module.scss @@ -18,6 +18,7 @@ gap: tovw(155px, 'default', 80px) tovw(130px, 'default', 30px); grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); + padding-bottom: tovw(115px, 'default', 55px); .hero__container { @include respond-to('mobile') { @@ -49,9 +50,9 @@ } position: absolute; - right: tovw(630px, 'default', 80px); + right: tovw(570px, 'default', 80px); z-index: -3; - padding-top: tovw(250px, 'default', 90px); + padding-top: tovw(150px, 'default', 90px); video { @include respond-to('mobile') { @@ -59,9 +60,15 @@ } z-index: -1; - width: tovw(1750px, 'default', 800px); + width: tovw(1900px, 'default', 800px); pointer-events: none; user-select: none; + mask-image: radial-gradient( + ellipse, + rgb(3 3 3 / 1) 5%, + rgb(3 3 3 / 1) 30%, + rgb(3 3 3 / 0) 60% + ); } &::after { @@ -78,19 +85,19 @@ height: 100%; } - position: absolute; - bottom: 0; - left: 0; - z-index: 1; - background: radial-gradient( - ellipse, - rgb(3 3 3 / 0) 25%, - rgb(3 3 3 / 0.9648) 60%, - rgb(3 3 3 / 1) 95% - ); - width: 100%; - height: 80%; - content: ''; + // position: absolute; + // bottom: 0; + // left: 0; + // z-index: 1; + // background: radial-gradient( + // ellipse, + // rgb(3 3 3 / 0) 25%, + // rgb(3 3 3 / 0.9648) 60%, + // rgb(3 3 3 / 1) 95% + // ); + // width: 100%; + // height: 100%; + // content: ''; } } diff --git a/src/components/sections/contact/hero/hero.module.scss b/src/components/sections/contact/hero/hero.module.scss index 9fa3b46..b1facd2 100644 --- a/src/components/sections/contact/hero/hero.module.scss +++ b/src/components/sections/contact/hero/hero.module.scss @@ -24,16 +24,49 @@ justify-content: center; } - .hero__container { + .video_container { @include respond-to('mobile') { - min-height: tovw(400px, 'mobile', 510px); + min-height: unset; } - display: flex; - place-content: center; - margin-top: tovw(-210px, 'default', -220px); - margin-bottom: tovw(-60px, 'default', -70px); - min-height: tovw(925px, 'default', 485px); + position: relative; + align-self: center; + width: 120%; + max-height: tovw(650px, 'default', 320px); + margin-bottom: tovw(240px, 'default', 180px); + margin-top: tovw(-175px, 'default', -185px); + mix-blend-mode: lighten; + + video { + @include respond-to('mobile') { + display: none; + } + + width: 100%; + margin: auto; + z-index: 1; + mask-size: 250% 100%; + mask-position: center center; + mask-repeat: no-repeat; + mask-image: radial-gradient( + ellipse, + rgb(3 3 3 / 1) 40%, + rgb(3 3 3 / 0) 85%, + rgb(3 3 3 / 0) 100% + ); + } + } + + .hero__container { + @include respond-to('mobile') { + display: flex; + place-content: center; + margin-top: tovw(-210px, 'default', -220px); + margin-bottom: tovw(-60px, 'default', -70px); + min-height: tovw(925px, 'default', 485px); + } + + display: none; .hero { @include respond-to('mobile') { diff --git a/src/components/sections/contact/hero/index.tsx b/src/components/sections/contact/hero/index.tsx index 3c53a36..3067b1f 100644 --- a/src/components/sections/contact/hero/index.tsx +++ b/src/components/sections/contact/hero/index.tsx @@ -1,5 +1,5 @@ import { useTheme } from 'next-themes' -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import { Arrow } from '~/components/icons/arrow' import Line from '~/components/icons/line' @@ -24,17 +24,26 @@ interface Props { const Hero = ({ data }: Props) => { const { theme } = useTheme() - const contactHeroRef = useRef(null) + const [webmSource, setWebmSource] = useState('') + const [mp4Source, setMp4Source] = useState('') + + useEffect(() => { + if (theme === 'dark') { + setWebmSource('/videos/banner-contact.webm') + setMp4Source('/videos/banner-contact.mp4') + } + + if (theme === 'light') { + setWebmSource('/videos/banner-contact-light.webm') + setMp4Source('/videos/banner-contact-light.mp4') + } + }, [theme]) + const contactHeroMobileRef = useRef(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' @@ -44,13 +53,20 @@ const Hero = ({ data }: Props) => { return (
+
+ +
- hero { + const { theme } = useTheme() + + const [webmSource, setWebmSource] = useState('') + const [mp4Source, setMp4Source] = useState('') + + useEffect(() => { + if (theme === 'dark') { + setWebmSource('/videos/banner-partners.webm') + setMp4Source('/videos/banner-partners.mp4') + } + + if (theme === 'light') { + setWebmSource('/videos/banner-partners-light.webm') + setMp4Source('/videos/banner-partners-light.mp4') + } + }, [theme]) + + const partnersHeroMobileRef = useRef(null) + + useEffect(() => { + if (!partnersHeroMobileRef.current) return + + partnersHeroMobileRef.current.src = + theme === 'dark' + ? '/images/partners/partners.png' + : '/images/partners/partners.png' + }, [theme]) + return (
+
+ +
- hero hero
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss index fad1baa..d6d2cc2 100644 --- a/src/components/sections/products/hero/hero.module.scss +++ b/src/components/sections/products/hero/hero.module.scss @@ -28,11 +28,9 @@ align-self: center; position: relative; - width: 82%; - min-height: tovw(925px, 'default', 435px); - margin-top: tovw(-175px, 'default'); - margin-bottom: tovw(-180px, 'default'); - padding-top: tovw(30px, 'default', 20px); + width: 102%; + max-height: tovw(380px, 'default', 210px); + margin-bottom: tovw(110px, 'default', 20px); mix-blend-mode: lighten; video { @@ -42,22 +40,6 @@ width: 100%; } - - &::after { - position: absolute; - top: 0; - left: 0; - z-index: 1; - background: radial-gradient( - ellipse, - rgb(3 3 3 / 0) 60%, - rgb(3 3 3 / 1) 75%, - rgb(3 3 3 / 1) 100% - ); - width: 100%; - height: 100%; - content: ''; - } } .hero__mobile {