upd

client/src/App.tsx

@@ -4,30 +4,14 @@ import { FormEvent, Suspense, useEffect, useRef, useState } from "react";
 import PieChart from "./components/PieChart/PieChart";
 import { Model } from "./components/VRHemlet";
 import Calc from "./components/Calc";
-import Slider from "./components/Slider/Slider";
-import Map from "./components/Map";
-import { delay, motion, useInView } from "framer-motion";
+import { motion, useInView } from "framer-motion";
 import InputMask from "react-input-mask";
 import api from "./utils/api";
-import { OrbitControls, PerspectiveCamera, Wireframe } from "@react-three/drei";
-import ComplexCard from "./components/ComplexCard";
-import Map2 from "./components/Map2";
 import FeatureCard from "./components/FeatureCard";
+import RelevantExpCard from "./components/RelevantExpCard";
+import Title from "./components/Title";
 
 function App() {
-  function getAccel() {
-    DeviceMotionEvent.requestPermission().then((response) => {
-      if (response == "granted") {
-        console.log("accelerometer permission granted");
-        alert("1");
-      }
-    });
-  }
-
-  useEffect(() => {
-    getAccel();
-  }, []);
-
   const parallaxRef = useRef<HTMLDivElement>(null);
 
   const [fullname, setFullname] = useState<string>("");
@@ -38,7 +22,7 @@ function App() {
   const [mapPosition, setMapPosition] = useState<string>("29% 100%");
   const [mapCity, setMapCity] = useState<string>("Тюмень");
 
-  const [isShowMoreComplexCards, setIsShowMoreComplexCards] =
+  const [isShowRelevantExpCards, setIsShowRelevantExpCards] =
     useState<boolean>(false);
 
   const helmetRef = useRef(null);
@@ -171,11 +155,11 @@ function App() {
           </div>
         </div>
         <div className="absolute top-0 right-0 ">
-          <img src="/images/shapes/1.svg" alt="" className="" />
+          <img src="/images/shapes/1.svg" alt="" />
         </div>
       </div>
 
-      <div className="relative 2xl:space-y-48 md:space-y-28 space-y-20">
+      <div className="relative xl:space-y-48 lg:space-y-40 sm:space-y-28 space-y-20">
         <div
           className="max-w-screen h-screen bg-cover bg-no-repeat bg-center rounded-xl overflow-hidden"
           style={{ backgroundImage: "url('/images/content.jpg')" }}
@@ -183,69 +167,97 @@ function App() {
         <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <div className="space-y-32">
             <div className="space-y-8">
-              <p className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
+              <Title>
                 Эффективность инстумента
                 <br />
                 продаж в цифрах
-              </p>
+              </Title>
               <p className="2xl:text-xl lg:text-lg">
                 Мы собрали статистику за 10 лет работы
                 <br />с застройщиками, реализовав 21 проект
               </p>
             </div>
-            <div className="grid grid-cols-2 gap-8">
-              <div className="flex flex-col justify-between">
-                <div className="grid grid-cols-2 gap-6">
+            <div className="grid lg:grid-cols-2 grid-cols-1 gap-8">
+              <div className="space-y-20">
+                <div className="grid sm:grid-cols-2 gap-6">
                   <div className="border-t-2 pt-8 border-[#454554]">
-                    <p className="font-gilroy 2xl:text-8xl sm:text-8xl text-6xl text-gradient">
-                      10
+                    <p className="sm:text-lg">До</p>
+                    <div className="space-x-2 pt-4">
+                      <span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
+                        2
+                      </span>
+                      <span className="text-gradient text-2xl font-bold">
+                        раз
+                      </span>
+                    </div>
+                    <p className="sm:text-lg">
+                      сокращает время
+                      <br />
+                      реализации проекта
                     </p>
-                    <p className="2xl:text-lg">что-то на умном</p>
                   </div>
+
                   <div className="border-t-2 pt-8 border-[#454554]">
-                    <p className="font-gilroy 2xl:text-8xl sm:text-8xl text-6xl text-gradient">
-                      26
-                    </p>
-                    <p className="2xl:text-lg">
+                    <p className="sm:text-lg">До</p>
+                    <div className="space-x-2 pt-4">
+                      <span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
+                        26
+                      </span>
+                      {/* <span className="text-gradient text-2xl font-bold">раз</span> */}
+                    </div>
+                    <p className="sm:text-lg">
                       что-то на умном
                       <br />в две строчки
                     </p>
                   </div>
+
                   <div className="border-t-2 pt-8 border-[#454554]">
-                    <p className="font-gilroy 2xl:text-8xl sm:text-8xl text-6xl text-gradient">
-                      32%
-                    </p>
-                    <p className="2xl:text-lg">
+                    <p className="sm:text-lg">На</p>
+                    <div className="space-x-2 pt-4">
+                      <span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
+                        18%
+                      </span>
+                      {/* <span className="text-gradient text-2xl font-bold">раз</span> */}
+                    </div>
+                    <p className="sm:text-lg">
                       что-то на умном
                       <br />в две строчки
                     </p>
                   </div>
+
                   <div className="border-t-2 pt-8 border-[#454554]">
-                    <p className="font-gilroy 2xl:text-8xl sm:text-8xl text-6xl text-gradient">
-                      12%
-                    </p>
-                    <p className="2xl:text-lg">
+                    <p className="sm:text-lg">На</p>
+                    <div className="space-x-2 pt-4">
+                      <span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
+                        12%
+                      </span>
+                      {/* <span className="text-gradient text-2xl font-bold">раз</span> */}
+                    </div>
+                    <p className="sm:text-lg">
                       что-то на умном
                       <br />в две строчки
                     </p>
                   </div>
                 </div>
-                <button className="self-start 2xl:text-xl px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity sm:w-auto w-full">
+
+                <button className="lg:block hidden self-start 2xl:text-xl px-8 py-3 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity sm:w-auto w-full">
                   Заказать решение
                 </button>
               </div>
-              <div className=" ">
-                <img src="/images/1135.jpg" alt="" className="rounded" />
-              </div>
+              <div
+                className="h-full min-h-[520px] rounded bg-cover bg-no-repeat bg-center"
+                style={{ backgroundImage: `url('/images/efficiency.jpg')` }}
+              ></div>
+              <button className="lg:hidden block sm:w-fit self-start 2xl:text-xl px-8 py-3 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity">
+                Заказать решение
+              </button>
             </div>
           </div>
         </div>
         <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <div className="relative space-y-16">
             <div className="grid lg:grid-cols-2 gap-6">
-              <div className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
-                Функциональные возможности
-              </div>
+              <Title>Функциональные возможности</Title>
               <div className="2xl:text-xl lg:text-lg">
                 Интерактивная презентация увлекает покупателей и предоставляет
                 актуальную информацию о жилом комплексе, отвечая на все
@@ -258,7 +270,7 @@ function App() {
             </div>
             {/* <div className="h-0.5 bg-[#23242A]"></div> */}
             {/* <Slider /> */}
-            <div className="grid grid-cols-2 relative z-50">
+            <div className="grid lg:grid-cols-2 relative z-50">
               <FeatureCard
                 text="Интеграция с CRM - системой"
                 handleMouseEnter={() => setSelectedFeatureImageIndex(0)}
@@ -339,9 +351,7 @@ function App() {
               transition={{ delay: 2.5, duration: 1 }}
               className="lg:space-y-16 space-y-8"
             >
-              <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
-                Экскурсия в виртуальной реальности
-              </p>
+              <Title>Экскурсия в виртуальной реальности</Title>
               <p className="2xl:text-xl lg:text-lg">
                 Клиенту достаточно надеть шлем виртуальной реальности, чтобы
                 прогуляться, оценить и ощутить пространство. Он полностью
@@ -360,16 +370,10 @@ function App() {
             <img src="/images/shapes/3.svg" alt="" />
           </div>
 
-          <div className="relative grid grid-cols-2 gap-8">
+          <div className="relative grid xl:grid-cols-2 gap-8">
             <div className="space-y-8">
-              <div className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
-                Анализируем
-                <br />
-                поведение
-                <br />
-                пользователей
-              </div>
-              <div className="2xl:text-2xl lg:text-lg space-y-4">
+              <Title>Анализируем поведение пользователей</Title>
+              <div className="2xl:text-2xl sm:text-xl text-lg space-y-4">
                 <p>
                   Система внутренней аналитики программы собирает информацию о
                   поведении пользователя и эффективности работы менеджеров для
@@ -382,162 +386,180 @@ function App() {
               </div>
             </div>
 
-            <div className="grid grid-cols-3 gap-4">
-              <div className="col-span-2 space-y-4">
-                <div className="p-8 space-y-6 bg-[#272730] rounded-lg">
-                  <p className="text-xl uppercase tracking-wider">
+            <div className="grid sm:grid-cols-3 gap-4">
+              <div className="sm:col-span-2 space-y-4">
+                <div className="2xl:p-8 sm:p-6 p-4 space-y-6 bg-[#272730] rounded-lg">
+                  <p className="2xl:text-xl sm:text-base text-sm uppercase tracking-wider">
                     Конверсия менеджеров в брони
                   </p>
                   <div className="space-y-4">
-                    <div className="grid grid-cols-8 gap-4 items-center text-xl">
-                      <span className="col-span-3 w-[152px] whitespace-nowrap">
+                    <div className="flex items-center space-x-4 2xl:text-xl sm:text-base text-sm">
+                      <span className="w-[40%] whitespace-nowrap">
                         К. Н. Федоров
                       </span>
-                      <div className=" col-span-4">
-                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[206px] h-10 rounded"></div>
+                      <div className="w-[45%]">
+                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] h-10 rounded"></div>
                       </div>
-                      <span className="col-span-1 text-right w-full">45%</span>
+                      <span className="w-[15%] text-right">45%</span>
                     </div>
 
-                    <div className="grid grid-cols-8 gap-4 items-center text-xl">
-                      <span className="col-span-3 w-[152px] whitespace-nowrap">
+                    <div className="flex items-center space-x-4 2xl:text-xl sm:text-base text-sm">
+                      <span className="w-[40%] whitespace-nowrap">
                         И. Ф. Яковлева
                       </span>
-                      <div className=" col-span-4">
-                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[145px] h-10 rounded"></div>
+                      <div className="w-[45%]">
+                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] h-10 rounded"></div>
                       </div>
-                      <span className="col-span-1 text-right w-full">30%</span>
+                      <span className="w-[15%] text-right">30%</span>
                     </div>
 
-                    <div className="grid grid-cols-8 gap-4 items-center text-xl">
-                      <span className="col-span-3 w-[152px] whitespace-nowrap">
+                    <div className="flex items-center space-x-4 2xl:text-xl sm:text-base text-sm">
+                      <span className="w-[40%] whitespace-nowrap">
                         А. М. Ташева
                       </span>
-                      <div className=" col-span-4">
+                      <div className="w-[45%]">
                         <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[83px] h-10 rounded"></div>
                       </div>
-                      <span className="col-span-1 text-right w-full">20%</span>
+                      <span className="w-[15%] text-right">20%</span>
                     </div>
                   </div>
                 </div>
 
-                <div className="p-8 space-y-6 bg-[#272730] rounded-lg">
-                  <p className="text-xl uppercase tracking-wider">
+                <div className="2xl:p-8 sm:p-6 p-4 space-y-6 bg-[#272730] rounded-lg">
+                  <p className="2xl:text-xl sm:text-base text-sm uppercase tracking-wider">
                     Популярные типы квартир, %
                   </p>
-                  <div className="flex space-x-10">
+                  <div className="flex items-center space-x-10">
                     <PieChart />
+
                     <div className="space-y-2.5">
                       <div className="flex items-center space-x-2">
                         <div className="w-4 h-4 bg-[#7A31C3] rounded-full"></div>
-                        <p className="text-xl">Студии</p>
+                        <p className="2xl:text-xl sm:text-base text-sm">
+                          Студии
+                        </p>
                       </div>
 
                       <div className="flex items-center space-x-2">
                         <div className="w-4 h-4 bg-[#798FFF] rounded-full"></div>
-                        <p className="text-xl">1-к. квартиры</p>
+                        <p className="2xl:text-xl sm:text-base text-sm">
+                          1-к. квартиры
+                        </p>
                       </div>
 
                       <div className="flex items-center space-x-2">
                         <div className="w-4 h-4 bg-[#D375FF] rounded-full"></div>
-                        <p className="text-xl">2-к. квартиры</p>
+                        <p className="2xl:text-xl sm:text-base text-sm">
+                          2-к. квартиры
+                        </p>
                       </div>
 
                       <div className="flex items-center space-x-2">
                         <div className="w-4 h-4 bg-[#8742F8] rounded-full"></div>
-                        <p className="text-xl">3-к. квартиры</p>
+                        <p className="2xl:text-xl sm:text-base text-sm">
+                          3-к. квартиры
+                        </p>
                       </div>
 
                       <div className="flex items-center space-x-2">
                         <div className="w-4 h-4 bg-[#FB57F4] rounded-full"></div>
-                        <p className="text-xl">4-к. квартиры</p>
+                        <p className="2xl:text-xl sm:text-base text-sm">
+                          4-к. квартиры
+                        </p>
                       </div>
                     </div>
                   </div>
                 </div>
 
-                <div className="p-8 space-y-6 bg-[#272730] rounded-lg">
-                  <p className="text-xl uppercase tracking-wider">
+                <div className="2xl:p-8 sm:p-6 p-4 space-y-6 bg-[#272730] rounded-lg">
+                  <p className="2xl:text-xl sm:text-base text-sm uppercase tracking-wider">
                     Воронка продаж
                   </p>
                   <div className="space-y-4">
-                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
-                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                    <div className="grid grid-cols-5 gap-4 items-center">
+                      <div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
                         <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-full h-10 rounded flex justify-center items-center">
                           Сеансы
                         </div>
                       </div>
-                      <span className="col-span-1 text-right w-full">100%</span>
+                      <span className="col-span-1 text-right w-full 2xl:text-xl">100%</span>
                     </div>
 
-                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
-                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                    <div className="grid grid-cols-5 gap-4 items-center">
+                      <div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
                         <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[90%] h-10 rounded flex justify-center items-center">
                           В избранное
                         </div>
                       </div>
-                      <span className="col-span-1 text-right w-full">
+                      <span className="col-span-1 text-right w-full 2xl:text-xl">
                         93,47%
                       </span>
                     </div>
 
-                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
-                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                    <div className="grid grid-cols-5 gap-4 items-center">
+                      <div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
                         <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[50%] h-10 rounded flex justify-center items-center">
                           Брони
                         </div>
                       </div>
-                      <span className="col-span-1 text-right w-full">
+                      <span className="col-span-1 text-right w-full 2xl:text-xl">
                         45,68%
                       </span>
                     </div>
 
-                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
-                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                    <div className="grid grid-cols-5 gap-4 items-center">
+                      <div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
                         <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[35%] h-10 rounded flex justify-center items-center">
                           Продажи
                         </div>
                       </div>
-                      <span className="col-span-1 text-right w-full">
+                      <span className="col-span-1 text-right w-full 2xl:text-xl">
                         29,13%
                       </span>
                     </div>
                   </div>
                 </div>
               </div>
-              <div className="grid grid-cols-1 space-y-4">
-                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+
+              <div className="grid sm:grid-cols-1 grid-cols-2 gap-4 sm:space-y-4">
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
                   <div className="font-gilroy text-gradient">
-                    <p className="text-6xl">12</p>
+                    <p className="sm:text-6xl text-5xl">12</p>
                     <p className="text-xl font-medium">минут</p>
                   </div>
-                  <p className="text-xl">Среднее время сеанса</p>
+                  <p className="2xl:text-xl sm:text-base text-sm">
+                    Среднее время сеанса
+                  </p>
                 </div>
 
-                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
                   <div className="font-gilroy text-gradient">
-                    <p className="text-6xl">856</p>
+                    <p className="sm:text-6xl text-5xl">856</p>
                     {/* <p className="text-xl font-medium">минут</p> */}
                   </div>
-                  <p className="text-xl">
+                  <p className="2xl:text-xl sm:text-base text-sm">
                     Коммерческих предложений сформировано
                   </p>
                 </div>
 
-                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
                   <div className="font-gilroy text-gradient">
-                    <p className="text-6xl">12,41%</p>
+                    <p className="sm:text-6xl text-5xl">12,41%</p>
                     {/* <p className="text-xl font-medium">минут</p> */}
                   </div>
-                  <p className="text-xl">Конверсия из сеанса в бронь</p>
+                  <p className="2xl:text-xl sm:text-base text-sm">
+                    Конверсия из сеанса в бронь
+                  </p>
                 </div>
 
-                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
                   <div className="font-gilroy text-gradient">
-                    <p className="text-6xl">132,1</p>
+                    <p className="sm:text-6xl text-5xl">132,1</p>
                     <p className="text-xl font-medium">млн. р.</p>
                   </div>
-                  <p className="text-xl">Получено через Graff.estate</p>
+                  <p className="2xl:text-xl sm:text-base text-sm">
+                    Получено через Graff.estate
+                  </p>
                 </div>
               </div>
             </div>
@@ -545,86 +567,53 @@ function App() {
         </div>
 
         <div className="relative">
-          <div className="absolute -top-8 right-0">
-            <img src="/images/mockup.png" alt="" />
-          </div>
           <div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
             <div className="absolute -top-8 -left-44 w-full h-full">
               <img src="/images/shapes/4.svg" alt="" />
             </div>
 
-            <div className="w-[52%] space-y-16">
-              <div className="space-y-14">
-                <p className="font-gilroy text-2xl uppercase tracking-wider">
-                  Инструмент продаж поможет вам продавать удаленно
-                </p>
-                <p className="font-gilroy text-5xl font-medium">
-                  Покажите все преимущества вашего жилого комплекса клиенту из
-                  любого конца мира. Местоположение и устройство значения не
-                  имеют.
-                  <br />
-                  Нужен только интернет.
-                </p>
-                <p className="text-xl">
-                  Высокий уровень графики и полное погружение покупателя
-                  <br /> в процесс выбора квартиры.
-                </p>
+            <div className="grid lg:grid-cols-2 lg:gap-4 items-center">
+              <div className="space-y-16">
+                <div className="space-y-14">
+                  <p className="font-gilroy xl:text-2xl sm:text-xl uppercase tracking-wider">
+                    Инструмент продаж поможет вам продавать удаленно
+                  </p>
+                  <p className="font-gilroy 2xl:text-5xl sm:text-4xl text-3xl font-medium">
+                    Покажите все преимущества вашего жилого комплекса клиенту из
+                    любого конца мира. Местоположение и устройство значения не
+                    имеют.
+                    <br />
+                    Нужен только интернет.
+                  </p>
+                  <p className="2xl:text-2xl sm:text-xl text-lg">
+                    Высокий уровень графики и полное погружение покупателя
+                    <br /> в процесс выбора квартиры.
+                  </p>
+                </div>
+                <div className="space-y-8">
+                  <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full cursor-pointer">
+                    <span>Узнать больше</span>
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.00002 19L16 12L9.00002 5"
+                        stroke="#F2F2F2"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
               </div>
-              <div className="space-y-8">
-                <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
-                  <span>Узнать больше</span>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9.00002 19L16 12L9.00002 5"
-                      stroke="#F2F2F2"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </button>
-                <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
-                  <span>Узнать столько же</span>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9.00002 19L16 12L9.00002 5"
-                      stroke="#F2F2F2"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </button>
-                <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
-                  <span>Узнать меньше и отупеть в край</span>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9.00002 19L16 12L9.00002 5"
-                      stroke="#F2F2F2"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </button>
+
+              <div className="relative">
+                <img src="/images/mockup.png" alt="" className="" />
               </div>
             </div>
           </div>
@@ -633,16 +622,10 @@ function App() {
         <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <div className="lg:space-y-20 space-y-12">
             <div className="grid lg:grid-cols-2 gap-6">
-              <div className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
-                Оцените
-                <br />
-                эффективность
-                <br />
-                интерактивного
-                <br />
-                инструмента продаж
-              </div>
-              <div className="2xl:text-2xl lg:text-lg">
+              <Title>
+                Оцените эффективность интерактивного инструмента продаж
+              </Title>
+              <div className="2xl:text-2xl xl:text-xl text-lg">
                 Мы изучили отраслевую аналитику на рынке продаж новых квартир и
                 на основе данных собрали калькулятор эффективности продукта.
                 <br />
@@ -659,29 +642,117 @@ function App() {
         </div>
 
         <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
-          <div className="grid grid-cols-2 gap-8">
-            <div className="bg-[#22222A] rounded-lg">
-              <div
-                className="h-[404px] bg-no-repeat bg-cover bg-center"
-                style={{ backgroundImage: `url('/images/cards/1.jpg')` }}
-              ></div>
-              <div className="p-8 space-y-2">
-                <p className="text-4xl">ЖК «Life Резиденция»</p>
-                <p className="text-[#ABABBA]">Россия, Тюмень.</p>
+          <div className="space-y-20">
+            <Title>Релевантный опыт</Title>
+            <div className="2xl:space-y-10 xl:space-y-8 space-y-6 flex flex-col">
+              <div className="grid lg:grid-cols-2 xl:gap-8 gap-4">
+                <RelevantExpCard
+                  image="/images/cards/1.jpg"
+                  name="ЖК «Life Резиденция»"
+                  location="Россия, Тюмень."
+                />
+                <RelevantExpCard
+                  image="/images/cards/2.jpg"
+                  name="МФК «Re:volution towers»"
+                  location="Россия, Екатеринбург."
+                />
+                <RelevantExpCard
+                  image="/images/cards/3.jpg"
+                  name="Iskan Abu Dhabi"
+                  location="ОАЭ, Абу-Даби."
+                />
+                <RelevantExpCard
+                  image="/images/cards/4.jpg"
+                  name="ЖК «Авторский квартал Машаров»"
+                  location="Россия, Тюмень."
+                />
+
+                {isShowRelevantExpCards && (
+                  <>
+                    <RelevantExpCard
+                      image="/images/cards/5.jpg"
+                      name="ЖК «Айвазовский»"
+                      location="Россия, Тюмень."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/6.jpg"
+                      name="ЖК «Графика»"
+                      location="Россия, Санкт-Петербург."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/7.jpg"
+                      name="ЖК «4you»"
+                      location="Россия, Екатеринбург."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/8.jpg"
+                      name="ЖК «Уральский»"
+                      location="Россия, Екатеринбург."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/9.jpg"
+                      name="ЖК «Новая Атмосфера»"
+                      location="Россия, Брянск."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/10.jpg"
+                      name="ЖК «Тринити»"
+                      location="Россия, Екатеринбург."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/11.jpg"
+                      name="ЖК «Дом на Опалихинской»"
+                      location="Россия, Екатеринбург."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/12.jpg"
+                      name="ЖК «Свой Круг»"
+                      location="Россия, Екатеринбург."
+                    />
+                    <RelevantExpCard
+                      image="/images/cards/13.jpg"
+                      name="ЖК «Александровский»"
+                      location="Россия, Нижний Тагил."
+                    />
+                  </>
+                )}
               </div>
+              {!isShowRelevantExpCards && (
+                <button
+                  className="flex items-center self-center space-x-3 2xl:text-2xl xl:text-xl"
+                  onClick={() => setIsShowRelevantExpCards(true)}
+                >
+                  <span>Показать больше</span>
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 9.00002L12 16L5 9.00002"
+                      stroke="#F2F2F2"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+              )}
             </div>
           </div>
         </div>
 
-        <div className="bg-[#1C1D21]">
+        <div className="bg-[#23232A]">
           <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
             <div className="space-y-16 mt-12 mb-8">
               <div className="space-y-16">
                 <div className="space-y-8">
-                  <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl w-1/2 text-gradient">
+                  <p className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl w-1/2 text-gradient">
                     Свяжитесь с нами
                   </p>
-                  <p className="2xl:text-3xl sm:text-2xl text-xl">
+                  <p className="font-gilroy 2xl:text-5xl sm:text-2xl text-xl">
                     Хотите увеличить конверсию?
                     <br />
                     Давайте обсудим детали!
@@ -695,14 +766,14 @@ function App() {
                     <div className="space-y-2">
                       <label
                         htmlFor=""
-                        className="text-[#73788C] block 2xl:text-xl text-lg"
+                        className="text-[#D9D9D9] block 2xl:text-xl text-lg"
                       >
                         Имя Фамилия*
                       </label>
                       <input
                         required
                         type="text"
-                        className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
+                        className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
                         value={fullname}
                         onChange={(e) => setFullname(e.target.value)}
                       />
@@ -710,13 +781,13 @@ function App() {
                     <div className="space-y-2">
                       <label
                         htmlFor=""
-                        className="text-[#73788C] block 2xl:text-xl text-lg"
+                        className="text-[#D9D9D9] block 2xl:text-xl text-lg"
                       >
                         Компания
                       </label>
                       <input
                         type="text"
-                        className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
+                        className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
                       />
@@ -726,14 +797,14 @@ function App() {
                     <div className="space-y-2">
                       <label
                         htmlFor=""
-                        className="text-[#73788C] block 2xl:text-xl text-lg"
+                        className="text-[#D9D9D9] block 2xl:text-xl text-lg"
                       >
                         Email*
                       </label>
                       <input
                         required
                         type="email"
-                        className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
+                        className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
                       />
@@ -741,7 +812,7 @@ function App() {
                     <div className="space-y-2">
                       <label
                         htmlFor=""
-                        className="text-[#73788C] block 2xl:text-xl text-lg"
+                        className="text-[#D9D9D9] block 2xl:text-xl text-lg"
                       >
                         Номер телефона
                       </label>
@@ -749,7 +820,7 @@ function App() {
                         maskChar={null}
                         mask={"+7 (999) 999-99-99"}
                         type="text"
-                        className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
+                        className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
                       />
@@ -757,17 +828,18 @@ function App() {
                   </div>
                   <div className="space-y-8">
                     <div className="space-x-4">
-                      {/* <input
-                        type="checkbox"
-                        name=""
-                        className="cursor-pointer"
-                      /> */}
-                      <label htmlFor="" className="">
-                        <span className="text-[#F2F2F2] text-opacity-50">
-                          Нажимая на кнопку «Отправить заявку» вы соглашаетесь с
+                      <label className="text-xl">
+                        <input
+                          type="checkbox"
+                          name=""
+                          className="bg-[#454554] hover:bg-[#454554] cursor-pointer 
+                          w-10 h-10 rounded-lg checked:bg-[#454554] checked:hover:bg-[#454554] border-0 focus:ring-offset-0 focus:ring-transparent mr-4"
+                        />
+                        <span className="text-[#ABABBA] text-opacity-50">
+                          Я согласен с
                         </span>{" "}
                         <a href="#" className="text-white">
-                          Политикой конфиденциальности
+                          политикой конфиденциальности
                         </a>
                       </label>
                     </div>

client/src/components/Calc.tsx

@@ -128,8 +128,6 @@ function Calc() {
     if (diffImplementationTime) {
       const lastIndex = Number(diffImplementationTime.toString().slice(-2));
 
-      console.log(lastIndex);
-
       if (lastIndex === 1) {
         setDiffImplementationTimeCase("месяц");
       } else if (lastIndex > 1 && lastIndex < 5) {
@@ -296,20 +294,20 @@ function Calc() {
           Результаты расчета
         </p>
 
-        <div className="space-y-6">
-          <div className="border-b-2 border-[#2E3038] pb-6 space-y-6">
+        <div className="grid xl:grid-cols-1 grid-cols-2 xl:gap-0 gap-6 xl:space-y-6">
+          <div className="xl:border-b-2 xl:border-t-0 border-t-2 border-[#2E3038] xl:pt-0 pt-6 xl:pb-6 space-y-6">
             <p className="text-[#C5C7CE]">Срок реализации</p>
             <div className="grid grid-cols-2">
               <div className="space-y-1">
                 <p
                   className={[
-                    "font-gilroy text-7xl transition-colors",
+                    "font-gilroy 2xl:text-7xl sm:text-6xl text-5xl transition-colors",
                     isEnabled && "text-[#D375FF]",
                   ].join(" ")}
                 >
                   {implementationTime}
                 </p>
-                <p className="text-xl">{implementationTimeCase}</p>
+                <p className="2xl:text-xl">{implementationTimeCase}</p>
               </div>
               {isEnabled && (
                 <p className="text-xl fade-in">
@@ -323,19 +321,19 @@ function Calc() {
             </div>
           </div>
 
-          <div className="space-y-6">
+          <div className="xl:border-t-0 border-t-2 border-[#2E3038] xl:pt-0 pt-6 space-y-6">
             <p className="text-[#C5C7CE]">Месячный доход</p>
             <div className="grid grid-cols-2">
               <div className="space-y-1">
                 <p
                   className={[
-                    "font-gilroy text-7xl transition-colors",
+                    "font-gilroy 2xl:text-7xl sm:text-6xl text-5xl transition-colors",
                     isEnabled && "text-[#D375FF]",
                   ].join(" ")}
                 >
                   {profitPerMonth}
                 </p>
-                <p className="text-xl">млн. р.</p>
+                <p className="2xl:text-xl">млн. р.</p>
               </div>
               {isEnabled && (
                 <p className="text-xl fade-in">

client/src/components/FeatureCard.tsx

@@ -19,11 +19,11 @@ function FeatureCard({ text, image, handleMouseEnter }: IFeatureCard) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g clip-path="url(#clip0_1414_844)">
+        <g clipPath="url(#clip0_1414_844)">
           <path
             d="M2.14528 38.9894L39 1M39 1L38.7903 39M39 1H1"
             stroke="#D9D9D9"
-            stroke-width="3"
+            strokeWidth="3"
           />
         </g>
         <defs>
@@ -37,7 +37,7 @@ function FeatureCard({ text, image, handleMouseEnter }: IFeatureCard) {
           </clipPath>
         </defs>
       </svg>
-      <p className="font-gilroy uppercase text-2xl">{text}</p>
+      <p className="font-gilroy uppercase 2xl:text-2xl sm:text-xl">{text}</p>
       {/* <img src={image} alt="" className="opacity-0" /> */}
     </div>
   );

client/src/components/PieChart/PieChart.tsx

@@ -3,12 +3,12 @@ import "./PieChart.css";
 
 function PieChart() {
   return (
-    <figure className="pie-chart relative sm:w-[180px] sm:h-[180px] w-[128px] h-[128px]">
-      <span className="absolute sm:top-[40px] sm:left-[40px] top-[28px] left-[26px]">36,27%</span>
-      <span className="absolute sm:top-[35px] sm:left-[112px] top-[28px] left-[86px]">6,22%</span>
-      <span className="absolute sm:top-[64px] sm:left-[118px] top-[50px] left-[90px]">9,95%</span>
+    <figure className="pie-chart relative sm:w-[180px] sm:h-[180px] w-[128px] h-[128px] sm:text-base text-sm">
+      <span className="absolute sm:top-[40px] sm:left-[40px] top-[28px] left-[26px] ">36,27%</span>
+      <span className="absolute sm:top-[40px] sm:left-[122px] top-[28px] left-[86px]">6,22%</span>
+      <span className="absolute sm:top-[72px] sm:left-[126px] top-[50px] left-[90px]">9,95%</span>
       <span className="absolute sm:top-[108px] sm:left-[108px] top-[82px] left-[76px]">17,93%</span>
-      <span className="absolute sm:top-[114px] sm:left-[36px] top-[84px] left-[20px]">29,64%</span>
+      <span className="absolute sm:top-[118px] sm:left-[32px] top-[84px] left-[20px]">29,64%</span>
     </figure>
   );
 }

client/src/components/RelevantExpCard.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+interface IRelevantExpCard {
+  image: string;
+  name: string;
+  location: string;
+}
+
+function RelevantExpCard({ image, name, location }: IRelevantExpCard) {
+  return (
+    <div className="bg-[#22222A] rounded-lg overflow-hidden">
+      <div
+        className="relative sm:h-[404px] h-[200px] bg-no-repeat bg-cover bg-center"
+        style={{ backgroundImage: `url('${image}')` }}
+      >
+        <div className="bg-black bg-opacity-25 absolute top-0 left-0 w-full h-full flex justify-center items-center cursor cursor-pointer group">
+          <svg
+            className="group-hover:scale-125 transition-transform"
+            width="64"
+            height="64"
+            viewBox="0 0 64 64"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M54.285 30.971C55.0618 31.4371 55.0618 32.5629 54.285 33.029L17.8174 54.9096C17.0176 55.3895 16 54.8133 16 53.8806L16 10.1194C16 9.18667 17.0176 8.61054 17.8174 9.09044L54.285 30.971Z"
+              fill="#F2F2F2"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="p-8 space-y-2">
+        <p className="font-gilroy 2xl:text-4xl sm:text-3xl text-2xl">{name}</p>
+        <p className="text-[#ABABBA] 2xl:text-xl sm:text-lg text-base">{location}</p>
+      </div>
+    </div>
+  );
+}
+
+export default RelevantExpCard;

client/src/components/SearchableSelect.tsx

@@ -83,7 +83,7 @@ function SearchableSelect({
         <input
           type="text"
           placeholder={selectedOption?.name || placeholder}
-          className="px-5 py-3.5 w-full outline-none bg-inherit placeholder:text-white"
+          className="px-5 py-3.5 w-full focus:ring-transparent outline-none border-none bg-inherit placeholder:text-white"
           value={searchQuery}
           onChange={handleChangeQuery}
         />

client/src/components/Title.tsx

@@ -0,0 +1,15 @@
+import React, { Children } from "react";
+
+interface ITitle {
+  children: React.ReactNode;
+}
+
+function Title({ children }: ITitle) {
+  return (
+    <p className="font-gilroy 2xl:text-7xl sm:text-6xl text-4xl text-gradient w-fit">
+      {children}
+    </p>
+  );
+}
+
+export default Title;

client/tailwind.config.js

@@ -1,12 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};