upd

2024-02-01 16:20:40 +05:00
parent 42c7f15cdd
commit 7709cc6119
9 changed files with 180 additions and 83 deletions
@@ -2,7 +2,6 @@
 import "./App.css";
 import "react-rangeslider/lib/index.css";
 import "./components/RangeSlider.css";
-import { YMInitializer } from "react-yandex-metrika";
 import IProject from "./types/IProject";
 import api from "./utils/api";
 import { useEffect, useState } from "react";
@@ -34,6 +33,7 @@ function App() {
  const [projects, setProjects] = useState<IProject[]>([]);
  const [setModal] = useModalStore((state) => [state.setModal]);
  const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
+  const [isBuffering, setIsBuffering] = useState(true);

  async function getProjects() {
    try {
@@ -52,7 +52,7 @@ function App() {
  }, []);

  return (
-    <>
+    <div>
      <div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
        <div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
          <div className="flex justify-between py-6 2xl:mb-28 xl:mb-[88px] sm:mb-12 mb-14">
@@ -104,66 +104,86 @@ function App() {
          </div>
        </div>

-        <div className="2xl:mb-[200px] sm:mb-[120px] mb-20">
+        <div className="relative aspect-video w-full 2xl:mb-[200px] sm:mb-[120px] mb-20">
          <video
            src="/videos/showreel_1080p_4000k_h264.mp4"
            muted
            autoPlay
            loop
            playsInline
-            preload="metadata"
-            className="aspect-video w-full"
+            className="absolute aspect-video w-full"
+            onPlaying={() => setIsBuffering(false)}
+            onWaiting={() => setIsBuffering(true)}
          />
+
+          <div
+            className={`absolute aspect-video w-full h-full flex justify-center items-center bg-black bg-opacity-50 transition-opacity ${
+              isBuffering ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            <div className="flex gap-4 items-center">
+              <span>
+                <svg
+                  className="animate-spin h-5 w-5"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              </span>
+              <span className="font-gilroy">Загружаем шоурил...</span>
+            </div>
+          </div>
        </div>

        <div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
          <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
-            <div className="xl:grid flex flex-col xl:grid-cols-4 xl:gap-0 sm:gap-6 gap-4">
-              <Heading2 className="2xl:col-span-full col-span-3">
-                Помогаем <br className="sm:hidden" /> продавать{" "}
-                <br className="2xl:hidden" />{" "}
-                <span style={{ WebkitTextFillColor: "#fff" }}>
-                  проще <br className="sm:hidden" /> и{" "}
-                  <span
-                    style={{ WebkitTextFillColor: "#52587A" }}
-                    className="relative custom-line-through"
-                  >
+            <Heading2>
+              Продавайте недвижимость
+              <br />
+              <span style={{ WebkitTextFillColor: "#fff" }}>
+                проще и{" "}
+                <span className="relative">
+                  <span style={{ WebkitTextFillColor: "#52587A" }}>
                    быстрее
-                  </span>{" "}
-                  <br className="sm:hidden" />
-                  дороже
-                </span>
-              </Heading2>
+                  </span>
+                  <span className="absolute top-[55%] -left-[2.5%] 2xl:h-1.5 h-1 w-[105%] bg-white"></span>
+                </span>{" "}
+                дороже
+              </span>
+            </Heading2>

-              <p className="2xl:hidden 2xl:text-2xl text-sm">
-                Мы собрали статистику за 13 лет работы
+            <div className="relative xl:flex items-center gap-4 xl:max-h-[400px]">
+              <p className="2xl:text-2xl sm:text-xl font-gilroy min-w-fit">
+                Мы собрали статистику{" "}
+                <span className="text-gradient font-semibold">за 13 лет</span>{" "}
+                работы
                <br />
-                с застройщиками, реализовав 31 проект
+                с застройщиками,{" "}
+                <span className="text-gradient font-semibold">
+                  реализовав 31 проект
+                </span>
              </p>

-              <div className="2xl:flex hidden relative items-center gap-4 col-span-full h-[400px]">
-                <p className="2xl:text-2xl text-sm font-gilroy font-medium min-w-[496px] ">
-                  Мы собрали статистику{" "}
-                  <span className="text-gradient font-semibold">за 13 лет</span>{" "}
-                  работы
-                  <br />
-                  с застройщиками,{" "}
-                  <span className="text-gradient font-semibold">
-                    реализовав 31 проект
-                  </span>
-                </p>
-
-                <div className="2xl:block hidden">
-                  <img
-                    src="/images/Map.png"
-                    alt=""
-                    className="relative top-8 -z-10"
-                  />
-                </div>
+              <div className="2xl:ml-6 xl:ml-[14px] relative 2xl:-top-8 xl:-top-4 -z-10">
+                <img src="/images/Map.png" alt="" />
              </div>
            </div>

-            <p className="2xl:block hidden text-gradient font-gilroy font-medium text-5xl w-fit">
+            <p className="2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy font-medium w-fit leading-none">
              Graff.estate
            </p>

@@ -409,7 +429,7 @@ function App() {
                title="ЖК «Айвазовский City»"
                location="Россия, Тюмень"
                background="/images/stream/aivaz.jpg"
-                link="https://stream.graff.tech/?build=Ivazowsky&location=a1"
+                link="https://stream.graff.tech/?build=IvazowskyDev&location=a1"
              />
            </div>

@@ -754,19 +774,7 @@ function App() {
      </div>

      <ModalContainer />
-
-      <YMInitializer
-        accounts={[93606080]}
-        options={{
-          defer: true,
-          webvisor: true,
-          clickmap: true,
-          trackLinks: true,
-          accurateTrackBounce: true,
-        }}
-        version="2"
-      />
-    </>
+    </div>
  );
 }

@@ -7,6 +7,7 @@ import ArrowRightIcon from "./icons/ArrowRightIcon";
 import regionsData from "../assets/regionsData.json";
 import { useEffect, useState } from "react";
 import CloseIcon from "./icons/CloseIcon";
+import api from "../utils/api";

 interface Region {
  id: number;
@@ -17,9 +18,11 @@ interface Region {
 }

 function Calc() {
-  const [consultations, setConsultations] = useState<number>(100);
  const [selectedRegion, setSelectedRegion] = useState<Region>();
-  const [implementationPeriod, setImplementationPeriod] = useState<number>();
+  const [consultations, setConsultations] = useState<number>(100);
+  const [implementationPeriod, setImplementationPeriod] = useState<number>(
+    null!
+  );
  const [oldImplementationPeriod, setOldImplementationPeriod] =
    useState<number>();
  const [monthlyIncome, setMonthlyIncome] = useState<number>();
@@ -39,8 +42,23 @@ function Calc() {
  const [diffImplementationPeriodEnding, setDiffImplementationPeriodEnding] =
    useState<string>();

+  async function getRegionName() {
+    const result: any = await api.get("getRegionName").json();
+
+    if (result.error) {
+      setSelectedRegion(regionsData.find((region) => region.id === 11));
+      return;
+    }
+
+    const foundRegion =
+      regionsData.find((region) => region.name === result.regionName) ||
+      regionsData.find((region) => region.id === 11);
+
+    setSelectedRegion(foundRegion);
+  }
+
  useEffect(() => {
-    setSelectedRegion(regionsData.find((region) => region.id === 11));
+    getRegionName();
  }, []);

  useEffect(() => {
@@ -94,8 +112,6 @@ function Calc() {
  }, [monthlyIncome, oldMonthlyIncome]);

  useEffect(() => {
-    if (!implementationPeriod) return;
-
    if (implementationPeriod > 10 && implementationPeriod < 15) {
      setOldImplementationPeriodEnding("месяцев");
      return;
@@ -160,21 +176,23 @@ function Calc() {
    <div className="relative flex flex-col sm:gap-16 gap-8">
      <div className="grid xl:grid-cols-4 sm:grid-cols-3">
        <div className="xl:col-auto sm:col-span-full xl:block sm:grid grid-cols-2">
-          <CalcSelect
-            label="Регион"
-            placeholder="Выберите регион"
-            defaultOption={regionsData.find((region) => region.id === 11)?.name}
-            options={regionsData.map((regionItem) => regionItem.name)}
-            handleSelect={(option) => {
-              const foundRegion = regionsData.find(
-                (region) => region.name === option
-              );
+          {selectedRegion && (
+            <CalcSelect
+              label="Регион"
+              placeholder="Выберите регион"
+              defaultOption={selectedRegion.name}
+              options={regionsData.map((regionItem) => regionItem.name)}
+              handleSelect={(option) => {
+                const foundRegion = regionsData.find(
+                  (region) => region.name === option
+                );

-              if (foundRegion) {
-                setSelectedRegion(foundRegion);
-              }
-            }}
-          />
+                if (foundRegion) {
+                  setSelectedRegion(foundRegion);
+                }
+              }}
+            />
+          )}
          <div className="border xl:border-t-0 xl:border-l sm:border-l-0 sm:border-t border-t-0 border-[#3D425C] 2xl:p-6 p-4 flex items-center">
            <p className="text-[#52587A] text-xs leading-[120%]">
              Установлены усредненные показатели по региону.
@@ -6,7 +6,7 @@ import { useOnClickOutside } from "usehooks-ts";
 interface CalcSelectProps {
  label: string;
  placeholder: string;
-  defaultOption?: string;
+  defaultOption: string;
  options: string[];
  handleSelect: (option: string) => void;
 }