diff --git a/public/videos/banner-press.mp4 b/public/videos/banner-press.mp4 new file mode 100644 index 0000000..033a37c Binary files /dev/null and b/public/videos/banner-press.mp4 differ diff --git a/src/components/sections/newsroom/hero/hero.module.scss b/src/components/sections/newsroom/hero/hero.module.scss index e1657bc..c747a73 100644 --- a/src/components/sections/newsroom/hero/hero.module.scss +++ b/src/components/sections/newsroom/hero/hero.module.scss @@ -21,14 +21,57 @@ } } + .video_container { + @include respond-to('mobile') { + min-height: unset; + } + + position: relative; + align-self: center; + width: 70%; + min-height: tovw(780px, 'default', 370px); + margin-top: tovw(-50px, 'default'); + padding-top: tovw(30px, 'default', 20px); + mix-blend-mode: lighten; + + video { + @include respond-to('mobile') { + display: none; + } + + width: 100%; + margin: auto; + z-index: 1; + } + + &::after { + position: absolute; + top: tovw(10px, 'default', 10px); + left: 0; + z-index: 1; + mix-blend-mode: overlay; + background: radial-gradient( + ellipse, + rgb(3 3 3 / 0) 50%, + rgb(3 3 3 / 1) 72%, + rgb(3 3 3 / 1) 100% + ); + width: 101%; + height: 90%; + content: ''; + } + } + .hero__container { @include respond-to('mobile') { min-height: tovw(360px, 'mobile', 460px); + display: flex; + place-content: center; } - display: flex; - place-content: center; - min-height: tovw(650px, 'default', 350px); + display: none; + + // min-height: tovw(650px, 'default', 350px); .hero { @include respond-to('mobile') { diff --git a/src/components/sections/newsroom/hero/index.tsx b/src/components/sections/newsroom/hero/index.tsx index 5c4aa18..0d999f0 100644 --- a/src/components/sections/newsroom/hero/index.tsx +++ b/src/components/sections/newsroom/hero/index.tsx @@ -20,13 +20,20 @@ const Hero = ({ data }: Props) => { return (
+
+ +
- hero