upd

2023-12-15 20:06:48 +05:00
parent 4509450bad
commit bd44b4549c
3 changed files with 127 additions and 109 deletions
@@ -104,39 +104,46 @@ function App() {
              <BlendingHeader />
            </div>
          </div>
+        </div>

-          <div className="2xl:mb-40 sm:mb-[120px] mb-20">
-            <video
-              src="https://graff.estate/videos/showreel_1080p_4000k_h264.mp4"
-              muted
-              autoPlay
-              loop
-              playsInline
-              preload="metadata"
-              className="aspect-video"
-            />
-          </div>
+        <div className="2xl:mb-40 sm:mb-[120px] mb-20">
+          <video
+            src="https://graff.estate/videos/showreel_1080p_4000k_h264.mp4"
+            muted
+            autoPlay
+            loop
+            playsInline
+            preload="metadata"
+            className="aspect-video mx-auto"
+          />
+        </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-40 sm:mb-[120px] mb-20">
-            <div className="grid xl:grid-cols-4 xl:gap-0 sm:gap-6 gap-4">
-              <div className="col-span-full">
-                <Heading2>
-                  Помогаем <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"
-                    >
-                      быстрее
-                    </span>{" "}
-                    <br className="sm:hidden" />
-                    дороже
-                  </span>
-                </Heading2>
-              </div>
-              <div className="relative flex items-center gap-4 col-span-full h-[400px]">
+            <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"
+                  >
+                    быстрее
+                  </span>{" "}
+                  <br className="sm:hidden" />
+                  дороже
+                </span>
+              </Heading2>
+
+              <p className="2xl:hidden 2xl:text-2xl text-sm">
+                Мы собрали статистику за 13 лет работы
+                <br />
+                с застройщиками, реализовав 31 проект
+              </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>{" "}
@@ -148,7 +155,7 @@ function App() {
                  </span>
                </p>

-                <div className="">
+                <div className="2xl:block hidden">
                  <img
                    src="/images/Map.png"
                    alt=""
@@ -158,7 +165,7 @@ function App() {
              </div>
            </div>

-            <p className="text-gradient font-gilroy font-medium text-5xl w-fit">
+            <p className="2xl:block hidden text-gradient font-gilroy font-medium text-5xl w-fit">
              Graff.estate
            </p>

@@ -335,8 +342,8 @@ function App() {
          </div>

          <div className="relative 2xl:mb-40 sm:mb-[120px] mb-20">
-            <div className="grid grid-cols-2 gap-4 mb-16">
-              <div className="flex flex-col gap-8">
+            <div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">
+              <div className="flex flex-col gap-8 justify-between">
                <Heading2>
                  Graff.estate stream —
                  <br />
@@ -348,65 +355,31 @@ function App() {
                    жилого комплекса
                  </span>
                </Heading2>
-                <Button>Узнать больше</Button>
+                <Button className="sm:inline-block hidden">
+                  Узнать больше
+                </Button>
              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="flex flex-col gap-12">
-                  <p>
+              <div className="flex flex-col xl:gap-16 gap-6">
+                <div className="grid xl:grid-cols-2 xl:gap-4 gap-2">
+                  <p className="2xl:text-base text-sm">
                    Высокий уровень графики и полное погружение покупателя в
                    процесс выбора квартиры
                  </p>
-                  <img src="/images/Datamining.jpg" alt="" />
-                </div>
-                <div className="">
-                  <p>
+                  <p className="2xl:text-base text-sm">
                    Местоположение и устройство значения не имеют. Нужен только
                    интернет
                  </p>
                </div>
+                <div className="xl:grid grid-cols-2 gap-4">
+                  <img src="/images/Datamining.jpg" alt="" className="w-full" />
+                </div>
+                <Button className="sm:hidden inline-block">
+                  Узнать больше
+                </Button>
              </div>
            </div>

-            {/* <div className="grid grid-cols-4 mb-16">
-            <Heading2 className="col-span-3">
-              Graff.estate stream —{" "}
-              <span style={{ WebkitTextFillColor: "#fff" }}>
-                удаленная демонстрация жилого комплекса
-              </span>
-            </Heading2>
-
-            <p>
-              Высокий уровень графики и полное
-              <br />
-              погружение покупателя в процесс
-              <br />
-              выбора квартиры
-            </p>
-          </div>
-
-          <div className="relative mb-[120px]">
-            <img src="/images/Stream.jpg" alt="" />
-
-            <div className="absolute bottom-10 left-10">
-              <p className="flex flex-col gap-4 text-2xl font-gilroy font-medium">
-                <span>
-                  Местоположение и устройство
-                  <br />
-                  значения не имеют
-                </span>
-                <span>Нужен только интернет</span>
-              </p>
-            </div>
-          </div>
-
-          <div className="flex justify-between mb-16">
-            <p className="text-5xl font-gilroy font-medium">
-              Демонстрация технологии
-            </p>
-            <Button icon={<ArrowRightIcon />}>Узнать больше</Button>
-          </div> */}
-
-            <div>
+            <div className="border-t border-[#3D425C]">
              <StreamButton
                icon="/icons/Revolution.svg"
                title="МФК «Re:volution towers»"
@@ -435,9 +408,9 @@ function App() {
            </div>
          </div>

-          <div className="grid grid-cols-2 xl:gap-4 gap-3 2xl:mb-40 sm:mb-[120px] mb-20">
+          <div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
            <div className="flex flex-col justify-between">
-              <div className="flex flex-col gap-8">
+              <div className="flex flex-col xl:gap-8 sm:gap-6 gap-4">
                <Heading2>
                  Анализируем
                  <br />
@@ -453,63 +426,93 @@ function App() {
                  создания отчета, содержащего необходимые метрики
                </p>
              </div>
-              <div className="pb-8 border-b border-[#3D425C] -mt-0.5">
-                <p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium">
+              <div className="sm:block hidden xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
+                <p className="xl:w-4/5 2xl:text-xl font-gilroy font-medium leading-[120%]">
                  Полученный отчет позволяет сделать процесс демонстрации
                  жилого комплекса еще эффективнее
                </p>
              </div>
            </div>
-            <img src="/images/Analysis.jpg" alt="" className="w-full" />
+            <div
+              className="w-full 2xl:min-h-[600px] xl:min-h-[500px] min-h-[384px] bg-cover bg-center bg-no-repeat"
+              style={{ backgroundImage: "url('/images/Analysis.jpg')" }}
+            ></div>
+
+            <div className="sm:hidden block xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
+              <p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium leading-[120%]">
+                Полученный отчет позволяет сделать процесс демонстрации
+                жилого комплекса еще эффективнее
+              </p>
+            </div>
          </div>

-          <div className="grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
+          <div className="grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
            <div className="flex flex-col justify-between">
              <div className="flex flex-col gap-8">
                <Heading2>
-                  Экскурсия{" "}
+                  Экскурсия
+                  <br />
                  <span style={{ WebkitTextFillColor: "#fff" }}>
-                    в виртуальной реальности
+                    в виртуальной
+                    <br />
+                    реальности
                  </span>
                </Heading2>
-                <Button>Записаться в шоу-рум</Button>
+                <Button className="sm:block hidden">
+                  Записаться в шоу-рум
+                </Button>
              </div>
-              <p className="font-gilroy text-2xl">
+              <p className="xl:block hidden font-gilroy 2xl:text-2xl">
                Клиент полностью погружается в воссозданную реальность,
                чувствует удобство и уровень комфорта
              </p>
            </div>
            <div className="flex flex-col gap-10">
-              <div className="grid grid-cols-2 gap-4">
-                <p>
+              <div className="grid xl:grid-cols-2 xl:gap-4 gap-6">
+                <p className="2xl:text-base text-sm">
                  Достаточно надеть шлем виртуальной реальности, чтобы
                  прогуляться, оценить и ощутить пространство
                </p>
                <img
                  src="/images/VR.png"
                  alt=""
-                  className="px-6 pt-8 pb-5 border-t border-[#3D425C]"
+                  className="sm:px-6 sm:pt-8 sm:pb-5 p-4 pb-2 border-t border-[#3D425C] w-full"
                />
              </div>
-              <img src="/images/VR2.jpg" alt="" />
+              <img src="/images/VR2.jpg" alt="" className="xl:block hidden" />
+            </div>
+
+            <div className="col-span-full sm:mt-8 mt-4 flex flex-col sm:gap-12 gap-8">
+              <img src="/images/VR2.jpg" alt="" className="xl:hidden block" />
+              <p className="font-gilroy font-medium leading-[120%]">
+                Клиент полностью погружается
+                <br />
+                в воссозданную реальность, чувствует
+                <br />
+                удобство и уровень комфорта
+              </p>
+              <Button className="sm:hidden inline-block">
+                Записаться в шоу-рум
+              </Button>
            </div>
          </div>

-          <div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
-            <div className="flex flex-col gap-8">
+          <div className="relative flex flex-col 2xl:gap-16 xl:gap-10 sm:gap-12 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
+            <div className="flex flex-col sm:gap-8 gap-6">
              <Heading2>
-                Оцените эффективность интерактивного
+                Оцените эффективность <br className="xl:hidden block" />
+                интерактивного
                <br />
                <span style={{ WebkitTextFillColor: "#fff" }}>
                  инструмента продаж
                </span>
              </Heading2>
-              <div className="grid grid-cols-2 gap-4">
-                <p className="2xl:w-2/3 w-1/2 2xl:text-base text-sm">
+              <div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-2">
+                <p className="xl:w-2/3 2xl:text-base text-sm">
                  Мы изучили отраслевую аналитику на рынке продаж новых квартир
                  и на основе данных собрали калькулятор эффективности продукта
                </p>
-                <p className="2xl:w-2/3 w-1/2 2xl:text-base text-sm">
+                <p className="xl:w-2/3 2xl:text-base text-sm">
                  При использовании проектного финансирования, главное — это
                  время. Быстрее наполняются эскроу-счета — меньше процент за
                  использование заемных денег
@@ -524,7 +527,7 @@ function App() {
            </div>
          </div>

-          <div className="flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
+          <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
            <Heading2>Проекты</Heading2>
            <div className="grid xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6 gap-3">
              {projects.map((project, index) => (
@@ -533,7 +536,7 @@ function App() {
            </div>
          </div>

-          <div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
+          <div className="relative flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
            <Heading2>
              Наши клиенты{" "}
              <span style={{ WebkitTextFillColor: "#fff" }}>
@@ -579,7 +582,7 @@ function App() {

          <div className="mt-[104px] relative">
            <div className="absolute flex justify-center items-center w-full -top-8 left-32 blur-md">
-              <img src="/images/shapes/shape-2.svg" alt="" className="" />
+              {/* <img src="/images/shapes/shape-2.svg" alt="" className="" /> */}
            </div>

            <div className="relative grid lg:grid-cols-4 gap-4">
@@ -23,7 +23,7 @@ function Button({
    <button
      disabled={disabled}
      onClick={handleClick}
-      className={`group relative px-6 py-2 rounded-full ${
+      className={`group relative px-6 py-2 rounded-full min-w-fit ${
        (color === "primary" ? "bg-gradient" : "") ||
        (color === "secondary" ? "outline outline-1 outline-[#3D425C]" : "")
      } ${
@@ -1,4 +1,6 @@
+import Button from "./Button";
 import ArrowIcon from "./icons/ArrowIcon";
+import ArrowRightIcon from "./icons/ArrowRightIcon";

 interface StreamButton {
  icon: string;
@@ -46,9 +48,22 @@ function StreamButton({
        </div>
      </a>

-      <div className="xl:hidden grid grid-cols-2">
-        <div className="">test 1</div>
-        <div className="">test 2</div>
+      <div className="xl:hidden grid sm:grid-cols-2 sm:gap-3 gap-6 border-b border-[#3D425C] py-6">
+        <div className="flex items-center gap-6">
+          <img src={icon} alt="" />
+          <div className="">
+            <p className="xl:text-2xl text-xl font-gilroy font-medium">
+              {title}
+            </p>
+            <p className="text-sm sm:hidden block">{location}</p>
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm sm:block hidden">{location}</p>
+          <Button icon={<ArrowRightIcon />}>
+            <a href={link}>Демоверсия</a>
+          </Button>
+        </div>
      </div>
    </>
  );