fix

2024-03-21 18:16:42 +05:00
parent 2c2e512c39
commit a2a503d5d5
9 changed files with 394 additions and 21 deletions
@@ -0,0 +1,248 @@
+import { createRef, useEffect, useLayoutEffect, useState } from "react";
+import { useSwipeable } from "react-swipeable";
+import ArrowLeftIcon from "./icons/ArrowLeftIcon";
+import ArrowRightIcon from "./icons/ArrowRightIcon";
+import { Transition } from "react-transition-group";
+
+const CARD_COUNT = 3;
+const videos = [
+  {
+    id: 1,
+    src: "videos/video.mp4",
+    title: "Вся информация о жилом комплексе на одном экране",
+    desc: "Инструмент продаж graff.estate для проекта LIFE RESIDENCE: новый подход к презентации недвижимости",
+  },
+  {
+    id: 2,
+    src: "videos/video.mp4",
+    title: "Говно",
+    desc: "Жопа",
+  },
+  {
+    id: 3,
+    src: "videos/video.mp4",
+    title: "И в",
+    desc: "прод",
+  },
+];
+
+const Histories = () => {
+  const [offset, setOffset] = useState(0);
+  const [videoRefs, setVideoRefs] = useState<
+    React.RefObject<HTMLVideoElement>[]
+  >([]);
+  const [videoProgress, setVideoProgress] = useState(0);
+  const [cardWidth, setCardWidth] = useState(0);
+  const handlers = useSwipeable({
+    onSwipedLeft: handleOnRightMove,
+    onSwipedRight: handleOnLeftMove,
+    trackMouse: true,
+  });
+  const [selectedVideo, setSelectedVideo] = useState<number>(0);
+  const [_document, setDocument] = useState<Document>();
+
+  function handleOnLeftMove(): void {
+    if (offset < 0) {
+      setOffset((prev) => prev + 1);
+    }
+  }
+
+  function handleOnRightMove(): void {
+    if (offset > -2) {
+      setOffset((prev) => prev - 1);
+    }
+  }
+
+  useEffect(() => {
+    setDocument(document);
+
+    setVideoRefs((elRefs) =>
+      Array.from({ length: CARD_COUNT }, (_, index) => index).map(
+        (_, i) => elRefs[i] || createRef()
+      )
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!_document) return;
+
+    const clientWidth = _document.children[0].clientWidth;
+
+    if (clientWidth >= 1600) {
+      setCardWidth(420);
+    } else if (clientWidth >= 1280) {
+      setCardWidth(379);
+    } else if (clientWidth >= 640) {
+      setCardWidth(370);
+    } else {
+      setCardWidth(344);
+    }
+  }, [_document]);
+
+  useEffect(() => {
+    if (offset !== 0) {
+      setSelectedVideo(offset * -1);
+    } else {
+      setSelectedVideo(0);
+    }
+  }, [offset]);
+
+  useEffect(() => {
+    videoRefs.forEach((video, index) => {
+      if (!video.current) return;
+      if (index === selectedVideo) {
+        video.current.play();
+      } else {
+        video.current.pause();
+      }
+    });
+  }, [videoRefs, selectedVideo]);
+
+  useEffect(() => {
+    const currentVideoRef = videoRefs[selectedVideo];
+    if (!currentVideoRef || !currentVideoRef.current) return;
+
+    const progress = Math.round(
+      (100 / currentVideoRef.current.duration) *
+        currentVideoRef.current.currentTime
+    );
+    setVideoProgress(progress);
+
+    const interval = setInterval(() => {
+      if (!currentVideoRef || !currentVideoRef.current) return;
+      const progress =
+        (100 / currentVideoRef.current.duration) *
+        currentVideoRef.current.currentTime;
+
+      setVideoProgress(progress);
+      if (progress === 100) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [selectedVideo, videoRefs]);
+
+  return (
+    <div className="container mx-auto 2xl:max-w-screen-2xl flex flex-col justify-center 2xl:mb-[200px] sm:mb-[120px] mb-20">
+      <div className="sm:border-b border-b-[#3D425C] 2xl:h-[760px] xl:h-[687px] sm:h-[656px] h-full">
+        <div className="flex sm:h-full h-fit sm:flex-row flex-col sm:w-full sm:mx-0 mx-auto">
+          <div className=" flex flex-col justify-between 2xl:min-w-[384px] xl:min-w-[308px] sm:min-w-[263px] sm:pb-6 xl:pb-10 sm:h-full">
+            <div className="2xl:pr-10 xl:pr-8 sm:pr-[37px]">
+              <h2 className="font-medium  2xl:text-[64px] xl:text-5xl text-[40px] leading-10 sm:mb-10 mb-6 font-gilroy">
+                <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
+                  Истории
+                </p>
+                <p>graff.estate</p>
+              </h2>
+
+              {videos.map((item, index) => (
+                <Transition
+                  key={index}
+                  in={Boolean(index === selectedVideo)}
+                  timeout={300}
+                >
+                  {(state) => (
+                    <div
+                      className={`absolute 2xl:w-[344px] xl:w-[276px] sm:w-[226px] w-[280px] transition-opacity duration-300 ${state}`}
+                    >
+                      <p className="font-semibold mb-4 2xl:text-xl xl:text-[16px] sm:block hidden">
+                        {item.title}
+                      </p>
+                      <p className="font-normal 2xl:text-[16px] xl:text-[14px] sm:block hidden">
+                        {item.desc}
+                      </p>
+                    </div>
+                  )}
+                </Transition>
+              ))}
+            </div>
+            <div className="gap-2 sm:flex hidden">
+              <button
+                className="p-4 border border-[#3D425C] rounded-full"
+                onClick={handleOnLeftMove}
+              >
+                <ArrowLeftIcon />
+              </button>
+              <button
+                className="p-4 border border-[#3D425C] rounded-full"
+                onClick={handleOnRightMove}
+              >
+                <ArrowRightIcon />
+              </button>
+            </div>
+          </div>
+          <div className="relative sm:border-l border-l-[#3D425C] sm:h-full h-[548px] w-full">
+            <div className="absolute overflow-x-clip h-full ">
+              <div {...handlers} className="absolute h-full w-full z-10" />
+              <div
+                className="flex gap-4 w-full h-full transition-all duration-300 ease-in-out 2xl:pl-10 xl:pl-8 sm:pl-3 xl:pb-10 sm:pb-[25px] "
+                style={{
+                  transform: `translateX(${offset * cardWidth}px)`,
+                }}
+              >
+                {videos.map((video, index) => (
+                  <div
+                    key={video.id}
+                    className={`relative 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px] 2xl:h-[720px] xl:h-[647px] sm:h-[632px] h-[546px]`}
+                  >
+                    <video
+                      ref={videoRefs[index]}
+                      src={video.src}
+                      muted
+                      loop
+                      playsInline
+                      preload="metadata"
+                      className="w-full h-full object-cover touch-none"
+                    />
+
+                    <div
+                      className={`absolute bottom-0 w-full h-1 bg-[#52587A] sm:block hidden transition-opacity duration-500 ${
+                        offset === -1 * index ? "opacity-100" : "opacity-0"
+                      }`}
+                    >
+                      <div
+                        className="w-0 bg-white h-1 transition-[width] duration-500"
+                        style={{ width: `${videoProgress}%` }}
+                      ></div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="bg-[#212431] p-6 block sm:hidden mb-6">
+            <h2 className="font-semibold text-sm leading-[18px] pb-2">
+              Вся информация о жилом комплексе на одном экране
+            </h2>
+            <p className="text-[12px] leading-[18px]">
+              Инструмент продаж graff.estate для проекта LIFE RESIDENCE: новый
+              подход к презентации недвижимости
+            </p>
+          </div>
+          <div className="mx-auto flex gap-2 h-2 sm:hidden">
+            <div className="bg-[#a1a2a6] w-10 h-full rounded-full overflow-hidden">
+              <div
+                className="bg-white w-0 h-full rounded-full transition-all duration-500"
+                style={{ width: `${videoProgress}%` }}
+              ></div>
+            </div>
+            {videos.map((video, index) => (
+              <div
+                key={video.id}
+                className="h-full w-2 rounded-full transition-all duration-300"
+                style={{
+                  background: `${
+                    selectedVideo === index ? "white" : "#a1a2a6"
+                  }`,
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Histories;
@@ -63,15 +63,9 @@ function VideoSliderMobile() {
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const videoRefs = items.map(() => useRef<HTMLVideoElement>(null));
  const handlers = useSwipeable({
-    onSwiped: (e) => {
-      if (e.dir === "Left") {
-        handleClickNext();
-      }
-
-      if (e.dir === "Right") {
-        handleClickPrev();
-      }
-    },
+    trackMouse: true,
+    onSwipedLeft: handleClickNext,
+    onSwipedRight: handleClickPrev,
  });

  function handleClickPrev() {
@@ -0,0 +1,38 @@
+import InsertArrowIcon from "../icons/InsertArrowIcon";
+
+const Winners = () => {
+  return (
+    <div className="sm:px-10 px-4 flex justify-center items-center sm:flex-row flex-col-reverse ">
+      <div className="flex justify-center items-center sm:w-1/2 xl:h-[607px] p-5">
+        <img src="images/award.png" alt="awards" className="h-full" />
+      </div>
+      <div className="flex flex-col justify-between sm:w-1/2 2xl:pl-[128px] xl:pl-[111px] sm:pl-[28px] pl-0 text-white 2xl:h-[469px] xl:h-[404px] sm:h-[400px] h-[377px] sm:pt-0 xl:p-8 py-8">
+        <div>
+          <h2 className="2xl:text-[64px] 2xl:leading-[64px] xl:text-5xl xl:leading-[48px] text-[40px] leading-10 xl:mb-8 sm:mb-6 mb-4">
+            <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
+              Победители <br /> BuildUP 2023
+            </p>
+            в номинации IT
+          </h2>
+          <p className="font-semibold 2xl:text-xl 2xl:leading-6 text-[16px] leading-[19.2px] 2xl:max-w-[448px] xl:max-w-[395px] sm:max-w-[311px] max-w-[288px] text-wrap">
+            В 2023 году наш продукт для застройщиков graff.estate был признан
+            лучшим в категории IT на Акселераторе технологических стартапов от
+            лидеров в строительстве и девелопменте Build UP от Фонда «Сколково»
+          </p>
+        </div>
+        <div className="border-b border-b-[#52587A] w-fit">
+          <a
+            href="https://graff.tech/tpost/tsksafhgm1-mi-pobedili-na-buildup-2023-ot-fonda-sko"
+            target="_blank"
+            className="flex justify-center items-center gap-2 text-sm py-1"
+          >
+            <div>КАК ЭТО БЫЛО</div>
+            <InsertArrowIcon />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Winners;