diff --git a/public/assets/images/landing-mobile-poster.jpg b/public/assets/images/landing-mobile-poster.jpg new file mode 100644 index 0000000000..4ff0d06e68 Binary files /dev/null and b/public/assets/images/landing-mobile-poster.jpg differ diff --git a/public/assets/images/landing-poster.jpeg b/public/assets/images/landing-poster.jpeg deleted file mode 100644 index 72a4f41aa1..0000000000 Binary files a/public/assets/images/landing-poster.jpeg and /dev/null differ diff --git a/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx b/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx index 562c4d0f6c..6f9928c589 100644 --- a/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx +++ b/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx @@ -1,5 +1,9 @@ import React, { FC } from "react"; import { useTranslation } from "react-i18next"; +import landingMobilePosterSec from "@/shared/assets/images/landing-mobile-poster.jpg"; +import landingVideoPosterSrc from "@/shared/assets/images/landing-video-poster.jpg"; +import landingVideoSrc from "@/shared/assets/videos/landing-video.mp4"; +import { useIsPhoneView } from "@/shared/hooks/viewport"; import { Button, ButtonVariant } from "@/shared/ui-kit"; import "./index.scss"; @@ -11,9 +15,25 @@ const VideoSection: FC = ({ onLaunchClick }) => { const { t } = useTranslation("translation", { keyPrefix: "landing", }); + const isPhoneView = useIsPhoneView(); return (
+
+ {!isPhoneView && ( + + )} +

{t("videoSection.title.part1")} diff --git a/src/pages/Landing/components/LandingContainer/VideoSection/index.scss b/src/pages/Landing/components/LandingContainer/VideoSection/index.scss index 9dacebe050..3812bfc121 100644 --- a/src/pages/Landing/components/LandingContainer/VideoSection/index.scss +++ b/src/pages/Landing/components/LandingContainer/VideoSection/index.scss @@ -6,11 +6,29 @@ $viewport-breakpoint: 1000px; .landing-video-section { position: relative; - background-image: url("/assets/images/landing-poster.jpeg"); - background-size: cover; - background-position: center; + + // width: 100%; + // height: 37.125rem; + + @include big-phone { + background-image: url("/assets/images/landing-mobile-poster.jpg"); + background-size: cover; + background-position: center; + height: 37.125rem; + } +} + +.landing-video-section__video-wrapper { + display: flex; + justify-content: center; + align-items: center; + opacity: 0.8; +} + +.landing-video-section__video { width: 100%; height: 37.125rem; + object-fit: cover; } .landing-video-section__main-info { diff --git a/src/shared/assets/images/landing-video-poster.jpg b/src/shared/assets/images/landing-video-poster.jpg new file mode 100644 index 0000000000..9ec203d64f Binary files /dev/null and b/src/shared/assets/images/landing-video-poster.jpg differ diff --git a/src/shared/assets/videos/landing-video.mp4 b/src/shared/assets/videos/landing-video.mp4 new file mode 100644 index 0000000000..b07cb41d20 Binary files /dev/null and b/src/shared/assets/videos/landing-video.mp4 differ