From 6ff2629b80173d8bb581c162e60a753b5ecec45f Mon Sep 17 00:00:00 2001
From: inmake <inmake.ru@gmail.com>
Date: Wed, 19 Apr 2023 19:23:32 +0500
Subject: [PATCH] upd

---
 client/package.json                   |   1 +
 client/src/App.tsx                    | 177 ++++++++++++---------
 client/src/components/Calc.tsx        | 216 +++++---------------------
 client/src/components/ComplexCard.tsx |  32 ++++
 client/src/components/Map.tsx         |   2 +-
 client/src/components/VRHemlet.tsx    |   3 +-
 client/yarn.lock                      |  22 ++-
 server/app.js                         |  36 ++++-
 server/package.json                   |   3 +-
 server/yarn.lock                      |   5 +
 10 files changed, 248 insertions(+), 249 deletions(-)
 create mode 100644 client/src/components/ComplexCard.tsx

diff --git a/client/package.json b/client/package.json
index ffb09ee..68eec41 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@react-three/drei": "^9.62.2",
     "@react-three/fiber": "^8.12.0",
+    "@react-three/postprocessing": "^2.7.1",
     "framer-motion": "^10.11.6",
     "ky": "^0.33.3",
     "react": "^18.2.0",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 4add304..dd93f99 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -2,7 +2,7 @@ import "./App.css";
 import { Canvas } from "@react-three/fiber";
 import { FormEvent, Suspense, useEffect, useRef, useState } from "react";
 import PieChart from "./components/PieChart/PieChart";
-import { Model } from "./components/govno";
+import { Model } from "./components/VRHemlet";
 import Calc from "./components/Calc";
 import Slider from "./components/Slider/Slider";
 import Map from "./components/Map";
@@ -10,6 +10,7 @@ import { motion } 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";
 
 function App() {
   const parallaxRef = useRef<HTMLDivElement>(null);
@@ -19,6 +20,9 @@ function App() {
   const [company, setCompany] = useState<string>("");
   const [phone, setPhone] = useState<string>("");
 
+  const [isShowMoreComplexCards, setIsShowMoreComplexCards] =
+    useState<boolean>(false);
+
   function handleScroll() {
     if (parallaxRef.current) {
       parallaxRef.current.style.transform = `translateY(${
@@ -179,11 +183,11 @@ function App() {
                   <ambientLight intensity={0.5} />
                   <directionalLight color="white" position={[-3, 1, 5]} />
                   <Model />
-                  <OrbitControls
+                  {/* <OrbitControls
                     enablePan={true}
                     enableZoom={true}
                     enableRotate={true}
-                  />
+                  /> */}
                 </Suspense>
               </Canvas>
             </div>
@@ -204,7 +208,7 @@ function App() {
           </div>
         </div>
         <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
-          <div className="space-y-16 my-32">
+          <div className="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">
                 Анализируем
@@ -420,10 +424,10 @@ function App() {
             </div>
           </div>
         </div>
-        <div className="relative">
-          <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
-            <div className="lg:grid grid-cols-2 gap-8 items-center">
-              <div className="space-y-16 my-16">
+        <div className="relative overflow-hidden" style={{ marginTop: 0 }}>
+          <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl ">
+            <div className="lg:grid grid-cols-2 gap-8 items-center ">
+              <div className="space-y-16">
                 <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
                   Инструмент продаж поможет вам продавать удаленно
                 </p>
@@ -459,15 +463,15 @@ function App() {
                   </i>
                 </button>
               </div>
+              <div className="lg:block hidden translate-y-20">
+                <Map />
+              </div>
             </div>
           </div>
-          <div className="">
-            <Map />
-          </div>
         </div>
 
         <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
-          <div className="space-y-16 my-32">
+          <div className="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">
                 Можем оценить
@@ -495,75 +499,108 @@ function App() {
         </div>
 
         <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
-          <div className="space-y-8 my-32">
+          <div className="space-y-16">
             <div className="lg:flex flex-col items-center space-y-8">
               <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl lg:w-1/2 text-gradient">
                 Релевантный опыт
               </p>
             </div>
             <div className="lg:grid grid-cols-4 block">
-              <div className="col-span-1 text-9xl lg:block hidden">MAP</div>
+              {/* <div className="col-span-1 text-9xl lg:block hidden">MAP</div> */}
               <div className="col-span-3 space-y-4">
-                <div className="flex sm:flex-row flex-col bg-[#1C1D21] hover:bg-[#2E3038]  rounded-xl transition-colors cursor-pointer">
-                  <div className="col-span-1">
-                    <img
-                      src="/images/cards/card_1.jpg"
-                      alt=""
-                      className="sm:w-[264px] sm:h-[160px] w-full rounded-xl"
+                <ComplexCard
+                  image="/images/cards/card_1.jpg"
+                  name="ЖК «Life Резиденция»"
+                  location="Россия, Тюмень"
+                />
+                <ComplexCard
+                  image={"/images/cards/card_2.jpg"}
+                  name="МФК «Re:volution towers»"
+                  location="Россия, Екатеринбург"
+                />
+                <ComplexCard
+                  image={"/images/cards/card_3.jpg"}
+                  name="Iskan Abu Dhabi"
+                  location="ОАЭ, Абу-Даби"
+                />
+                <ComplexCard
+                  image={"/images/cards/card_4.jpg"}
+                  name="ЖК «Авторский квартал Машаров»"
+                  location="Россия, Тюмень"
+                />
+                {isShowMoreComplexCards && (
+                  <>
+                    <ComplexCard
+                      image={"/images/cards/card_5.jpg"}
+                      name="ЖК «Айвазовский»"
+                      location="Россия, Тюмень"
                     />
-                  </div>
-                  <div className="xl:col-span-3 col-span-2 flex items-center">
-                    <div className="sm:p-6 p-4 space-y-2">
-                      <p className="font-gilroy 2xl:text-3xl sm:text-2xl text-xl">
-                        ЖК «Авторский квартал Машаров»
-                      </p>
-                      <p className="2xl:text-lg sm:text-base text-xs text-[#73788C]">
-                        Россия, Тюмень
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex sm:flex-row flex-col bg-[#1C1D21] hover:bg-[#2E3038]  rounded-xl transition-colors cursor-pointer">
-                  <div className="col-span-1">
-                    <img
-                      src="/images/cards/card_1.jpg"
-                      alt=""
-                      className="sm:w-[264px] sm:h-[160px] w-full rounded-xl"
+                    <ComplexCard
+                      image={"/images/cards/card_6.jpg"}
+                      name="ЖК «Графика»"
+                      location="Россия, Санкт-Петербург"
                     />
-                  </div>
-                  <div className="xl:col-span-3 col-span-2 flex items-center">
-                    <div className="sm:p-6 p-4 space-y-2">
-                      <p className="font-gilroy 2xl:text-3xl sm:text-2xl text-xl">
-                        ЖК «Авторский квартал Машаров»
-                      </p>
-                      <p className="2xl:text-lg sm:text-base text-xs text-[#73788C]">
-                        Россия, Тюмень
-                      </p>
-                    </div>
-                  </div>
-                </div>
+                    <ComplexCard
+                      image={"/images/cards/card_7.jpg"}
+                      name="ЖК «4you»"
+                      location="Россия, Екатеринбург"
+                    />
+                    <ComplexCard
+                      image={"/images/cards/card_8.jpg"}
+                      name="ЖК «Уральский»"
+                      location="Россия, Екатеринбург"
+                    />
+                    <ComplexCard
+                      image={"/images/cards/card_9.jpg"}
+                      name="ЖК «Новая Атмосфера»"
+                      location="Россия, Брянск"
+                    />
+                    <ComplexCard
+                      image={"/images/cards/card_10.jpg"}
+                      name="ЖК «Тринити»"
+                      location="Россия, Екатеринбург"
+                    />
+                    <ComplexCard
+                      image={"/images/cards/card_11.jpg"}
+                      name="ЖК «Дом на Опалихинской»"
+                      location="Россия, Екатеринбург"
+                    />
+                    <ComplexCard
+                      image={"/images/cards/card_12.jpg"}
+                      name="ЖК «Свой Круг»"
+                      location="Россия, Тюмень"
+                    />
+                    <ComplexCard
+                      image={"/images/cards/card_13.jpg"}
+                      name="ЖК «Александровский»"
+                      location="Россия, Нижний Тагил"
+                    />
+                  </>
+                )}
 
-                {/* <div className=" "> */}
-                <button className="2xl:text-xl flex items-center justify-center space-x-2 opacity-95 hover:opacity-100 transition-opacity lg:w-auto w-full">
-                  <span>Показать больше</span>
-                  <svg
-                    width="29"
-                    height="29"
-                    viewBox="0 0 29 29"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
+                {!isShowMoreComplexCards && (
+                  <button
+                    className="2xl:text-xl flex items-center justify-center space-x-2 opacity-95 hover:opacity-100 transition-opacity lg:w-auto w-full"
+                    onClick={() => setIsShowMoreComplexCards(true)}
                   >
-                    <path
-                      d="M22.8 10.8L14.4 19.2L6.00001 10.8"
-                      stroke="#F2F2F2"
-                      strokeWidth="2.4"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </button>
-                {/* </div> */}
+                    <span>Показать больше</span>
+                    <svg
+                      width="29"
+                      height="29"
+                      viewBox="0 0 29 29"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M22.8 10.8L14.4 19.2L6.00001 10.8"
+                        stroke="#F2F2F2"
+                        strokeWidth="2.4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                )}
               </div>
             </div>
           </div>
diff --git a/client/src/components/Calc.tsx b/client/src/components/Calc.tsx
index d7aee6b..a0e3616 100644
--- a/client/src/components/Calc.tsx
+++ b/client/src/components/Calc.tsx
@@ -2,6 +2,7 @@ import React, { ChangeEvent, useEffect, useState } from "react";
 import SearchableSelect from "./SearchableSelect";
 import RangeSlider from "./RangeSlider";
 import ky from "ky";
+import { motion } from "framer-motion";
 
 function Calc() {
   const [regions, setRegions] = useState<any[]>([]);
@@ -16,6 +17,8 @@ function Calc() {
   const [profitPerMonth, setProfitPerMonth] = useState<number>();
   const [implementationTime, setImplementationTime] = useState<number>();
   const [avgAreaInComplex, setAvgAreaInComplex] = useState<number>(10000);
+  const [implementationTimeCase, setImplementationTimeCase] =
+    useState<string>("");
 
   async function getRegions() {
     const result: [] = await ky.get("http://localhost:3000/regions").json();
@@ -76,170 +79,25 @@ function Calc() {
     averagePrice,
   ]);
 
+  useEffect(() => {
+    if (implementationTime) {
+      const lastIndex = Number(implementationTime.toString().at(-1));
+
+      if (lastIndex === 1) {
+        setImplementationTimeCase("месяц");
+      } else if (lastIndex > 1 && lastIndex < 5) {
+        setImplementationTimeCase("месяца");
+      } else if ((lastIndex > 4 && lastIndex < 15) || lastIndex === 0) {
+        setImplementationTimeCase("месяцев");
+      }
+    }
+  }, [implementationTime]);
+
   useEffect(() => {
     getRegions();
   }, []);
 
   return (
-    // <div className="grid grid-cols-4 gap-8">
-    //   <div className="col-span-1 space-y-10">
-    //     <div className="space-y-4">
-    //       <div className="space-y-2">
-    //         <label htmlFor="" className="text-[#C5C7CE]">
-    //           Регион
-    //         </label>
-    //         <SearchableSelect
-    //           placeholder={"Выберите город"}
-    //           options={regions}
-    //           handleSelect={(option) => selectRegion(option.id)}
-    //         />
-    //       </div>
-    //       <p className="text-sm text-[#73788C]">
-    //         Данные будут установлены в соответсвии со средними показателями по
-    //         выбранному региону
-    //       </p>
-    //     </div>
-    //     <div className="space-y-2">
-    //       <label htmlFor="" className="text-[#C5C7CE]">
-    //         Очных консультаций в месяц
-    //       </label>
-    //       <input
-    //         type="text"
-    //         pattern="^[0-9]+$"
-    //         className="px-5 py-3.5 border border-transparent outline-none focus:border-[#BC75FF] transition-colors rounded  w-full bg-[#23242A]"
-    //         value={consultsPerMonth}
-    //         onChange={handleChangeConsultsPerMonth}
-    //       />
-    //     </div>
-    //     <div className="space-y-2">
-    //       <label htmlFor="" className="text-[#C5C7CE]">
-    //         Площадь жилья в комплексе (м2)
-    //       </label>
-    //       <input
-    //         type="text"
-    //         pattern="^[0-9]+$"
-    //         className="px-5 py-3.5 border border-transparent outline-none focus:border-[#BC75FF] transition-colors rounded  w-full bg-[#23242A]"
-    //         value={totalHousingAreaInComplex}
-    //         onChange={handleChangeTotalArea}
-    //       />
-    //     </div>
-    //     <div className="space-y-2">
-    //       <label htmlFor="" className="text-[#C5C7CE]">
-    //         Средняя площадь квартиры
-    //       </label>
-    //       <RangeSlider
-    //         min={1}
-    //         max={100}
-    //         defaultValue={averageApartmentArea}
-    //         onChange={(value) => setAverageApartmentArea(value)}
-    //       />
-    //     </div>
-    //     <div className="space-y-2">
-    //       <label htmlFor="" className="text-[#C5C7CE]">
-    //         Средняя стоимость 1 м2
-    //       </label>
-    //       <RangeSlider
-    //         min={30000}
-    //         max={300000}
-    //         defaultValue={averagePrice}
-    //         onChange={(value) => setAveragePrice(value)}
-    //       />
-    //     </div>
-    //   </div>
-    //   <div className="col-span-3">
-    //     <div className="bg-[#1C1D21] h-full rounded-lg p-12 space-y-12">
-    //       <div className="space-y-8">
-    //         <div className="space-y-2">
-    //           <p className="text-[#C5C7CE]">
-    //             Консультации, закончившиеся бронью
-    //           </p>
-    //           <div className="text-2xl flex justify-between font-gilroy">
-    //             <span>{consultsInBooking}</span>
-    //             <span>{!isEnabled ? "30" : "45"}%</span>
-    //           </div>
-    //           <div className="h-8 bg-[#2E3038] rounded">
-    //             <div
-    //               className={[
-    //                 "h-full bg-[#798FFF] rounded transition-all",
-    //                 !isEnabled ? "w-[30%]" : "w-[45%]",
-    //               ].join(" ")}
-    //             ></div>
-    //           </div>
-    //           <div className="flex justify-between text-sm text-[#73788C]">
-    //             <span>0</span>
-    //             <span>50</span>
-    //             <span>100</span>
-    //           </div>
-    //         </div>
-
-    //         <div className="space-y-2">
-    //           <p className="text-[#C5C7CE]">Продажи</p>
-    //           <div className="text-2xl flex justify-between font-gilroy">
-    //             <span>{consultsInSales}</span>
-    //             <span>{!isEnabled ? "10" : "20"}%</span>
-    //           </div>
-    //           <div className="h-8 bg-[#2E3038] rounded">
-    //             <div
-    //               className={[
-    //                 "h-full bg-[#798FFF] rounded transition-all",
-    //                 !isEnabled ? "w-[10%]" : "w-[20%]",
-    //               ].join(" ")}
-    //             ></div>
-    //           </div>
-    //           <div className="flex justify-between text-sm text-[#73788C]">
-    //             <span>0</span>
-    //             <span>50</span>
-    //             <span>100</span>
-    //           </div>
-    //         </div>
-    //       </div>
-
-    //       <div className="space-y-8">
-    //         <p className="text-3xl font-gilroy">Результаты расчета</p>
-    //         <div className="flex space-x-8">
-    //           <div className="space-y-4">
-    //             <p className="space-x-2 text-gradient">
-    //               <span className="text-6xl font-gilroy">{implementationTime}</span>
-    //               <span className="text-xl font-bold">месяцев</span>
-    //             </p>
-    //             <p>
-    //               На{" "}
-    //               <span className="text-gradient font-bold">
-    //                 12 месяцев
-    //               </span>{" "}
-    //               вы сократили
-    //               <br />
-    //               срок реализации проекта
-    //             </p>
-    //           </div>
-
-    //           <div className="space-y-4">
-    //             <p className="space-x-2 text-gradient">
-    //               <span className="text-6xl font-gilroy">{profitPerMonth}</span>
-    //               <span className="text-xl font-bold">млн. руб.</span>
-    //             </p>
-    //             <p>
-    //               На{" "}
-    //               <span className="text-gradient font-bold">
-    //                 37,8 млн. руб.
-    //               </span>{" "}
-    //               в месяц вы заработали больше
-    //               <br /> с помощью нашего инструмента продаж
-    //             </p>
-    //           </div>
-    //         </div>
-    //       </div>
-
-    //       <button
-    //         className="px-8 py-4 rounded-full bg-[#373943]"
-    //         onClick={toggleIsEnabled}
-    //       >
-    //         {!isEnabled ? "Включить" : "Отключить"} инструмент
-    //       </button>
-    //     </div>
-    //   </div>
-    // </div>
-
     <div className="lg:grid xl:grid-cols-3 lg:grid-cols-2 2xl:gap-12 lg:gap-6 lg:space-y-0 space-y-12">
       <div className="space-y-4">
         <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
@@ -256,7 +114,9 @@ function Calc() {
         <div className="bg-[#1C1D21] 2xl:p-6 p-4 space-y-4 rounded">
           <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
             <p className="2xl:text-base text-sm text-[#C5C7CE]">
-              Средняя площадь жилья в комплексе
+              Средняя площадь
+              <br />
+              жилья в комплексе
             </p>
             <p className="space-x-2">
               <span className="text-5xl font-gilroy">{avgAreaInComplex}</span>
@@ -266,7 +126,9 @@ function Calc() {
 
           <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
             <p className="2xl:text-base text-sm text-[#C5C7CE]">
-              Средняя площадь квартиры
+              Средняя площадь
+              <br />
+              квартиры
             </p>
             <p className="space-x-2">
               <span className="text-5xl font-gilroy">
@@ -278,7 +140,9 @@ function Calc() {
 
           <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
             <p className="2xl:text-base text-sm text-[#C5C7CE]">
-              Средняя стоимость одного м2
+              Средняя стоимость
+              <br />
+              одного м2
             </p>
             <p className="space-x-2">
               <span className="text-5xl font-gilroy">{averagePrice}</span>
@@ -369,36 +233,42 @@ function Calc() {
         <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
           Результаты расчета
         </p>
-        <div className="xl:space-y-4 xl:block grid grid-cols-2">
-          <div className="space-y-2">
-            <p className="text-lg text-[#C5C7CE] pb-4">Срок реализации</p>
+        <div className="xl:space-y-4 xl:block grid lg:grid-cols-2 gap-4">
+          <div className="space-y-2 lg:border-t-2 border-[#2E3038] pt-4">
+            <p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
+              Срок реализации
+            </p>
             <p
               className={[
-                "text-7xl font-gilroy transition-all",
+                "2xl:text-7xl sm:text-6xl text-5xl font-gilroy transition-all",
                 isEnabled && "text-gradient",
               ].join(" ")}
             >
               {implementationTime}
             </p>
-            <p className="text-xl text-[#C5C7CE]">месяцa</p>
+            <p className="2xl:text-xl text-[#C5C7CE]">
+              {implementationTimeCase}
+            </p>
           </div>
-          <div className="space-y-2">
-            <p className="text-lg text-[#C5C7CE] pb-4">Месячный доход</p>
+          <div className="space-y-2 border-t-2 border-[#2E3038] pt-4">
+            <p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
+              Месячный доход
+            </p>
             <p
               className={[
-                "text-7xl font-gilroy transition-all",
+                "2xl:text-7xl sm:text-6xl text-5xl font-gilroy transition-all",
                 isEnabled && "text-gradient",
               ].join(" ")}
             >
               {profitPerMonth}
             </p>
-            <p className="text-xl text-[#C5C7CE]">млн. р.</p>
+            <p className="2xl:text-xl text-[#C5C7CE]">млн. р.</p>
           </div>
         </div>
-        <div className="xl:w-auto w-1/2">
+        <div className="xl:w-auto md:w-1/2 w-full">
           <button
             className={[
-              "w-full text-xl py-4 px-8 rounded-full xl:mt-0 mt-10",
+              "w-full 2xl:text-xl py-4 px-8 rounded-full xl:mt-0 mt-10",
               !isEnabled ? "bg-gradient" : "bg-[#23242A]",
             ].join(" ")}
             onClick={() => setIsEnabled(!isEnabled)}
diff --git a/client/src/components/ComplexCard.tsx b/client/src/components/ComplexCard.tsx
new file mode 100644
index 0000000..ae657c2
--- /dev/null
+++ b/client/src/components/ComplexCard.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+interface IComplexCard {
+  image: string;
+  name: string;
+  location: string;
+}
+
+function ComplexCard({ image, name, location }: IComplexCard) {
+  return (
+    // <div className="flex sm:flex-row flex-col bg-[#1C1D21] hover:bg-[#2E3038]  rounded-xl transition-colors cursor-pointer">
+    <div className="flex sm:flex-row flex-col bg-[#1C1D21] rounded-xl transition-colors">
+      <div className="col-span-1">
+        <img
+          src={image}
+          alt=""
+          className="sm:w-[264px] sm:h-[160px] min-w-[264px] w-full rounded-xl"
+        />
+      </div>
+      <div className="xl:col-span-3 col-span-2 flex items-center">
+        <div className="sm:p-6 p-4 space-y-2">
+          <p className="font-gilroy 2xl:text-3xl sm:text-2xl text-xl">{name}</p>
+          <p className="2xl:text-lg sm:text-base text-xs text-[#73788C]">
+            {location}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ComplexCard;
diff --git a/client/src/components/Map.tsx b/client/src/components/Map.tsx
index bb7d2a8..f5e2bd6 100644
--- a/client/src/components/Map.tsx
+++ b/client/src/components/Map.tsx
@@ -10,7 +10,7 @@ function Map() {
       ref={pathRef}
       width="1236"
       height="1124"
-      viewBox="0 0 1236 1124"
+      // viewBox="0 0 1236 1124"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/client/src/components/VRHemlet.tsx b/client/src/components/VRHemlet.tsx
index a7cf099..da949d2 100644
--- a/client/src/components/VRHemlet.tsx
+++ b/client/src/components/VRHemlet.tsx
@@ -29,10 +29,9 @@ export function Model(props: any) {
           name="SM_VRHelmet"
           geometry={nodes.SM_VRHelmet.geometry}
           material={materials.M_Plastic_White}
-
         >
           {/* <meshBasicMaterial  transparent={true} opacity={0.5} forceSinglePass={true} /> */}
-          <Wireframe />
+          {/* <Wireframe  /> */}
         </mesh>
       </group>
     </group>
diff --git a/client/yarn.lock b/client/yarn.lock
index 680621b..7629d1f 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -265,6 +265,16 @@
     suspend-react "^0.0.8"
     zustand "^3.7.1"
 
+"@react-three/postprocessing@^2.7.1":
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/@react-three/postprocessing/-/postprocessing-2.7.1.tgz#b042c974266ff3ce00139766fdd43b39aeaa65ae"
+  integrity sha512-FhmQB7INWKaecxq8u155cpbPWM2AM9SDazGmHMsW1r0IZy5aqsI1IWCxA+jJD1V7p6y0zXabssEqZ7JaANkiig==
+  dependencies:
+    postprocessing "^6.30.1"
+    react-merge-refs "^1.1.0"
+    screen-space-reflections "2.5.0"
+    three-stdlib "^2.8.11"
+
 "@swc/core-darwin-arm64@1.3.44":
   version "1.3.44"
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.44.tgz#e0f5eb9d962c4e6192531c2e3b8c11f55faf1b89"
@@ -1047,6 +1057,11 @@ postcss@^8.0.9, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postprocessing@^6.30.1:
+  version "6.30.2"
+  resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.30.2.tgz#8cfb5561bfce63c983fae5d2cd8efa5bbd04fe6d"
+  integrity sha512-Vt77s5DkHyUOV4bmk10J46DHJLglBfIo9ARPI0o62UIAx9omANfuPJTKiLVoYlC1ApkV9y3ldBDipF3IldB7YA==
+
 potpack@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz"
@@ -1229,6 +1244,11 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
+screen-space-reflections@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/screen-space-reflections/-/screen-space-reflections-2.5.0.tgz#2a6ea982da96f9c35f34a361b2555439f9fbb1f6"
+  integrity sha512-fWSDMhJS0xwD3LTxRRch7Lb9NzxsR66sCmtDmAA7i+OGnghUrBBsrha85ng7StnCBaLq/BKmZ97dLxWd1XgWdQ==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -1327,7 +1347,7 @@ three-mesh-bvh@^0.5.23:
   resolved "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.5.23.tgz"
   integrity sha512-nyk+MskdyDgECqkxdv57UjazqqhrMi+Al9PxJN6yFtx1CTW4r0eCQ27FtyYKY5gCIWhxjtNfWYDPVy8lzx6LkA==
 
-three-stdlib@^2.21.8:
+three-stdlib@^2.21.8, three-stdlib@^2.8.11:
   version "2.21.8"
   resolved "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.21.8.tgz"
   integrity sha512-kqisiKvO4mSy59v5vWqBQSH8famLxp7Z51LxpMJI9GwDxqODaW02rhIwmjYDEzZWNFpjZpoDHVGbdpeHf8h3SA==
diff --git a/server/app.js b/server/app.js
index 6211eb4..cf3b173 100644
--- a/server/app.js
+++ b/server/app.js
@@ -3,6 +3,7 @@ import cors from "cors";
 import ky from "ky";
 import mongoose from "mongoose";
 import Mail from "./models/Mail.js";
+import nodemailer from "nodemailer";
 
 const app = express();
 const port = 3000;
@@ -66,9 +67,42 @@ app.get("/region/:id", async (req, res) => {
 });
 
 app.post("/mail", async (req, res) => {
-  console.log(req.body);
+  const { fullname, email, company, phone } = req.body;
   await Mail.create(req.body);
 
+  // mx0.graff.tech
+
+  let testAccount = await nodemailer.createTestAccount();
+
+  // create reusable transporter object using the default SMTP transport
+  let transporter = nodemailer.createTransport({
+    host: "mail.netangels.ru",
+    port: 587,
+    secure: false, // true for 465, false for other ports
+    auth: {
+      user: "test@graff.tech", // generated ethereal user
+      pass: "ZmL0pKiDFWUyCDMq", // generated ethereal password
+    },
+  });
+
+  // send mail with defined transport object
+  let info = await transporter.sendMail({
+    from: `${email}`, // sender address
+    to: "info@graff.tech", // list of receivers
+    subject: fullname, // Subject line
+    text: `${company} ${phone}`, // plain text body
+    html: `${company} ${phone}`, // html body
+  });
+
+  console.log(info);
+
+  // console.log("Message sent: %s", info.messageId);
+  // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>
+
+  // Preview only available when sending through an Ethereal account
+  // console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
+  // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
+
   res.send({ ok: 1 });
 });
 
diff --git a/server/package.json b/server/package.json
index ed525c5..d6a64f1 100644
--- a/server/package.json
+++ b/server/package.json
@@ -11,7 +11,8 @@
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "ky": "^0.33.3",
-    "mongoose": "^7.0.4"
+    "mongoose": "^7.0.4",
+    "nodemailer": "^6.9.1"
   },
   "devDependencies": {
     "nodemon": "^2.0.22"
diff --git a/server/yarn.lock b/server/yarn.lock
index 512c8f1..d6b3e5f 100644
--- a/server/yarn.lock
+++ b/server/yarn.lock
@@ -498,6 +498,11 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
+nodemailer@^6.9.1:
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.1.tgz#8249d928a43ed85fec17b13d2870c8f758a126ed"
+  integrity sha512-qHw7dOiU5UKNnQpXktdgQ1d3OFgRAekuvbJLcdG5dnEo/GtcTHRYM7+UfJARdOFU9WUQO8OiIamgWPmiSFHYAA==
+
 nodemon@^2.0.22:
   version "2.0.22"
   resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.22.tgz#182c45c3a78da486f673d6c1702e00728daf5258"