updates

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<VideoSectionProps> = ({ onLaunchClick }) => {
   const { t } = useTranslation("translation", {
     keyPrefix: "landing",
   });
+  const isPhoneView = useIsPhoneView();
 
   return (
     <section className="landing-video-section">
+      <div className="landing-video-section__video-wrapper">
+        {!isPhoneView && (
+          <video
+            className="landing-video-section__video"
+            autoPlay
+            loop
+            muted
+            playsInline
+            poster={landingVideoPosterSrc}
+            preload="auto"
+          >
+            <source src={landingVideoSrc} type="video/mp4" />
+          </video>
+        )}
+      </div>
       <div className="landing-video-section__main-info">
         <h1 className="landing-video-section__main-info-title">
           {t("videoSection.title.part1")}

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 {