upd

client/public/images/vr-mask.svg

@@ -0,0 +1,3 @@
+<svg width="1013" height="550" viewBox="0 0 1013 550" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M436.203 99.5744C337.258 103.911 245.403 120.879 192.146 144.659C171.71 153.783 163.971 159.122 148.577 174.724C133.636 189.866 128.501 196.218 120.975 208.871C114.654 219.496 109.859 231.33 105.878 246.124C103.09 256.487 102.632 260.165 102.145 276.11C101.496 297.33 102.952 309.442 108.072 325.424C112.654 339.73 117.43 349.749 125.144 361.239C138.026 380.428 142.382 384.733 165.464 401.104C192.347 420.172 231.631 426.55 284.576 420.446C306.063 417.969 310.751 417.188 356.236 408.513C410.349 398.193 425.859 395.739 458.532 392.326C479.044 390.185 530.161 389.891 548.931 391.807C584.626 395.452 622.323 401.609 673.552 412.161C704.601 418.558 729.116 421.483 757.632 422.197C777.662 422.697 782.097 422.501 793.588 420.605C823.512 415.665 845.067 404.833 866.848 383.787C887.86 363.484 901.181 339.347 907.362 310.382C910.321 296.515 910.049 266.652 906.833 252.285C896.429 205.807 868.494 170.201 825.7 148.872C800.987 136.556 766.128 125.665 724.305 117.194C710.658 114.43 701.778 112.938 671.953 108.401C659.866 106.562 614.037 102.108 591.466 100.58C569.941 99.1227 462.404 98.4258 436.203 99.5744Z" fill="#D9D9D9"/>
+</svg>

client/src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import { FormEvent, useRef, useState } from "react";
+import { FormEvent, useEffect, useRef, useState } from "react";
 import PieChart from "./components/PieChart/PieChart";
 import Calc from "./components/Calc";
 import { motion } from "framer-motion";
@@ -48,6 +48,10 @@ function App() {
     alert("Заявка отправлена!");
   }
 
+  useEffect(() => {
+    console.log(navigator);
+  }, []);
+
   return (
     <div className="bg-[#131317] text-white">
       <div
@@ -91,13 +95,23 @@ function App() {
       <div className="relative xl:space-y-48 lg:space-y-40 sm:space-y-28 space-y-20 overflow-hidden">
         <div className="px-4">
           <video
-            autoPlay={true}
-            muted={true}
-            loop={true}
-            playsInline={true}
+            autoPlay
+            muted
+            loop
+            playsInline
             className="aspect-video w-full 2xl:rounded-2xl xl:rounded-xl lg:rounded-lg rounded"
           >
-            <source src="/videos/showreel.mp4" type="video/mp4" />
+            {navigator.maxTouchPoints > 1 ? (
+              <source
+                src="/videos/showreel_720p_3000k_h264.mp4"
+                type="video/mp4"
+              />
+            ) : (
+              <source
+                src="/videos/showreel_1080p_4000k_h264.mp4"
+                type="video/mp4"
+              />
+            )}
           </video>
         </div>
         <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
@@ -281,8 +295,22 @@ function App() {
               </button>
             </div>
 
-            <div className="col-span-2 xl:static lg:absolute static -right-[35%]">
-              <img src="/images/vr-helmet.png" alt="" className="" />
+            <div className="col-span-2 flex flex-col items-center justify-center h-full">
+              <div className="relative">
+                <video
+                  muted
+                  autoPlay
+                  playsInline
+                  loop
+                  src="/videos/vr.mp4"
+                  className="vr-mask absolute top-[0.5%] left-[2%] w-[96.2%]"
+                ></video>
+                <img
+                  src="/images/vr-helmet-2.png"
+                  alt=""
+                  className="relative"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -749,7 +777,11 @@ function App() {
               <motion.div
                 initial={{ backgroundPositionX: "0%" }}
                 animate={{ backgroundPositionX: "10000%" }}
-                transition={{ repeat: Infinity, ease: "linear", duration: 2400 }}
+                transition={{
+                  repeat: Infinity,
+                  ease: "linear",
+                  duration: 2400,
+                }}
                 className="absolute top-32 left-0 h-[200px] w-full bg-repeat-x"
                 style={{ backgroundImage: "url('/images/logos.svg')" }}
               />

client/src/components/Calc.tsx

@@ -117,6 +117,8 @@ function Calc() {
     if (implementationTime) {
       const lastIndex = Number(implementationTime.toString().at(-1));
 
+      console.log("lastIndex", lastIndex);
+
       if (lastIndex === 1) {
         setImplementationTimeCase("месяц");
       } else if (lastIndex > 1 && lastIndex < 5) {

client/src/index.css

@@ -125,3 +125,10 @@ input:checked + div svg {
 .swiper-pagination-bullet-active {
   background-color: #fff;
 }
+
+.vr-mask {
+  mask: url("/images/vr-mask.svg");
+  mask-repeat: no-repeat;
+  mask-position: bottom;
+  mask-size: cover;
+}

server/app.js

@@ -30,6 +30,8 @@ app.get("/regions", async (req, res) => {
       }
     });
 
+  console.log(regions);
+
   res.send(regions);
 });