deleted points from mobile unit page, added video to unit type page

src/components/UnitTypeImageWithMarkers.tsx

@@ -22,7 +22,7 @@ function UnitTypeImageWithMarkers({
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
   // Фильтруем legend по floor
-  const filteredLegend = legend.filter(item => {
+  const filteredLegend = legend.filter((item) => {
     // Если у элемента нет поля floor, показываем всегда
     if (!item.floor) return true;
     // Если у элемента есть поле floor, показываем только если оно совпадает с переданным floor
@@ -58,7 +58,9 @@ function UnitTypeImageWithMarkers({
         height={1312}
         transform="scale(.5)"
         // xlinkHref={`/images/unit-types/${complexName}/${unitType}.png`}
-        xlinkHref={`/images/unit-types/${complexName}/${unitType}${floor ? `-${floor}` : ""}.jpg`}
+        xlinkHref={`/images/unit-types/${complexName}/${unitType}${
+          floor ? `-${floor}` : ""
+        }.jpg`}
         style={{
           isolation: "isolate",
         }}
@@ -73,7 +75,7 @@ function UnitTypeImageWithMarkers({
           width={16}
           height={16}
           rx={8}
-          className="stroke-white fill-[#00BED7] hover:fill-white transition-colors cursor-pointer"
+          className="stroke-white fill-[#00BED7] hover:fill-white transition-colors cursor-pointer max-md:hidden"
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         />
@@ -82,7 +84,7 @@ function UnitTypeImageWithMarkers({
       {filteredLegend.map((item, index) => (
         <g
           key={`tooltip-${index}`}
-          className={`transition-opacity pointer-events-none ${
+          className={`transition-opacity pointer-events-none max-md:hidden ${
             hoveredIndex === index ? "opacity-100" : "opacity-0"
           }`}
         >

src/components/UnitTypeItem.tsx

@@ -6,6 +6,9 @@ import UnitType from "../types/UnitType";
 import { useNavigate } from "react-router";
 import { useEffect, useState } from "react";
 import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
+import PlayIcon from "./icons/PlayIcon";
+import VideoModal from "./VideoModal";
+import useModalStore from "../stores/useModalStore";
 
 interface UnitTypeItemProps {
   project: Project;
@@ -30,6 +33,8 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
     }
   }, [type.slug]);
 
+  const { setModal } = useModalStore();
+
   return (
     <div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
       <div className="relative 2xl:w-full flex flex-col items-center justify-center bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl 2xl:p-[2.222vw] p-6 2xl:gap-[1.111vw] gap-4">
@@ -117,6 +122,22 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
             </div>
           </div>
           <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+          <button
+            onClick={() =>
+              setModal(
+                <VideoModal src="/videos/unit-types/marasi-drive/studio_flex.mp4" />
+              )
+            }
+            className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring ring-[#E2E2DC] cursor-pointer w-full"
+          >
+            <div className="lg:space-y-[0.278vw] space-y-1 flex-1">
+              <p className="text-h5 font-medium">ORI Cloud Bed</p>
+              <p className="text-s text-[#00BED7]">Live in the future, today</p>
+            </div>
+            <div className="2xl:size-[1.389vw] size-5">
+              <PlayIcon />
+            </div>
+          </button>
           {/* {type.video && (
             <div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.833vw] rounded-xl outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
               <div className="2xl:space-y-[0.278vw] space-y-1">