upd

client/src/App.tsx

@@ -48,6 +48,13 @@ function App() {
         phone,
       },
     });
+
+    setFullname("");
+    setEmail("");
+    setCompany("");
+    setPhone("");
+
+    alert("Заявка отправлена!");
   }
 
   useEffect(() => {
@@ -62,7 +69,7 @@ function App() {
     <div className="bg-[#151619] text-white">
       <div
         ref={parallaxRef}
-        className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl"
+        className="lg:container mx-auto p-4 xl:max-w-screen-2xl"
       >
         <div className="space-y-8">
           <div className="flex justify-between">
@@ -102,12 +109,12 @@ function App() {
         </div>
       </div>
 
-      <div className="relative space-y-64">
+      <div className="relative 2xl:space-y-60 md: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('./public/images/content.jpg')" }}
+          style={{ backgroundImage: "url('/images/content.jpg')" }}
         ></div>
-        <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <div className="space-y-32">
             <div className="grid sm:grid-cols-2 gap-6">
               <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
@@ -120,13 +127,13 @@ function App() {
             </div>
             <div className="grid lg:grid-cols-4 grid-cols-2 gap-6">
               <div className="border-t-2 pt-8 border-[#23242A]">
-                <p className="font-gilroy 2xl:text-9xl text-8xl text-gradient">
+                <p className="font-gilroy 2xl:text-9xl sm:text-8xl text-6xl text-gradient">
                   10
                 </p>
                 <p className="2xl:text-xl lg:text-lg">что-то на умном</p>
               </div>
               <div className="border-t-2 pt-8 border-[#23242A]">
-                <p className="font-gilroy 2xl:text-9xl text-8xl text-gradient">
+                <p className="font-gilroy 2xl:text-9xl sm:text-8xl text-6xl text-gradient">
                   26
                 </p>
                 <p className="2xl:text-xl lg:text-lg">
@@ -135,7 +142,7 @@ function App() {
                 </p>
               </div>
               <div className="border-t-2 pt-8 border-[#23242A]">
-                <p className="font-gilroy 2xl:text-9xl text-8xl text-gradient">
+                <p className="font-gilroy 2xl:text-9xl sm:text-8xl text-6xl text-gradient">
                   32%
                 </p>
                 <p className="2xl:text-xl lg:text-lg">
@@ -144,7 +151,7 @@ function App() {
                 </p>
               </div>
               <div className="border-t-2 pt-8 border-[#23242A]">
-                <p className="font-gilroy 2xl:text-9xl text-8xl text-gradient">
+                <p className="font-gilroy 2xl:text-9xl sm:text-8xl text-6xl text-gradient">
                   12%
                 </p>
                 <p className="2xl:text-xl lg:text-lg">
@@ -158,7 +165,7 @@ function App() {
             </button>
           </div>
         </div>
-        <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <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">
@@ -175,7 +182,7 @@ function App() {
             <Slider />
           </div>
         </div>
-        <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <div className="lg:grid grid-cols-2 gap-6">
             <div className="overflow-hidden h-[412px]">
               <Canvas className="min-h-[1024px] -translate-y-80">
@@ -207,7 +214,7 @@ function App() {
             </div>
           </div>
         </div>
-        <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <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">
@@ -425,7 +432,7 @@ function App() {
           </div>
         </div>
         <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:container mx-auto p-4 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">
@@ -469,8 +476,7 @@ function App() {
             </div>
           </div>
         </div>
-
-        <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <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">
@@ -497,8 +503,7 @@ function App() {
             <Calc />
           </div>
         </div>
-
-        <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
           <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 text-gradient">
@@ -603,8 +608,8 @@ function App() {
           </div>
         </div>
         <div className="bg-[#1C1D21]">
-          <div className="lg:container mx-auto sm:p-4 p-2 xl:max-w-screen-2xl">
-            <div className="space-y-16 mt-32 mb-8">
+          <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">

client/src/components/Calc.tsx

@@ -115,8 +115,8 @@ function Calc() {
               жилья в комплексе
             </p>
             <p className="space-x-2">
-              <span className="text-5xl font-gilroy">{avgAreaInComplex}</span>
-              <span className="text-xl">м2</span>
+              <span className="sm:text-5xl text-4xl font-gilroy">{avgAreaInComplex}</span>
+              <span className="sm:text-xl">м2</span>
             </p>
           </div>
 
@@ -127,10 +127,10 @@ function Calc() {
               квартиры
             </p>
             <p className="space-x-2">
-              <span className="text-5xl font-gilroy">
+              <span className="sm:text-5xl text-4xl font-gilroy">
                 {averageApartmentArea}
               </span>
-              <span className="text-xl">м2</span>
+              <span className="sm:text-xl">м2</span>
             </p>
           </div>
 
@@ -141,8 +141,8 @@ function Calc() {
               одного м2
             </p>
             <p className="space-x-2">
-              <span className="text-5xl font-gilroy">{averagePrice}</span>
-              <span className="text-xl">тыс. р.</span>
+              <span className="sm:text-5xl text-4xl font-gilroy">{averagePrice}</span>
+              <span className="sm:text-xl">тыс. р.</span>
             </p>
           </div>
 

client/src/components/Slider/Slide.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ISlideContainer {
+  title: string;
+  body: string;
+  image: string;
+}
+
+function Slide({ title, body, image }: ISlideContainer) {
+  return (
+    <div className="lg:grid grid-cols-4 gap-16 mr-16 lg:space-y-0 space-y-4">
+      <div className="col-span-1 space-y-6 flex flex-col justify-center">
+        <p
+          className="font-gilroy text-gradient 2xl:text-4xl md:text-3xl text-2xl"
+          dangerouslySetInnerHTML={{ __html: title }}
+        ></p>
+        <p className="text-lg lg:w-full sm:w-1/2 w-full">{body}</p>
+      </div>
+      <div className="col-span-3 flex justify-end">
+        <img src={image} alt="" />
+      </div>
+    </div>
+  );
+}
+
+export default Slide;

client/src/components/Slider/Slide1.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide1() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Интеграция
-          <br />с CRM - системой
-        </p>
-        <p className="text-lg">
-          Приложение передает информацию о клиенте в CRM-систему застройщика и
-          получает актуальную информацию по ценам и статусам квартир
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide1.png" alt="" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide1;

client/src/components/Slider/Slide2.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide2() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Вся инфрастуктура
-          <br />
-          на одном экране
-        </p>
-        <p className="text-lg">
-          Возможность оценить инфраструктуру района покажет важные для клиента
-          точки интереса и время, за которое он сможет до них дойти
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide2.jpg" alt="" className="rounded-md" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide2;

client/src/components/Slider/Slide3.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide3() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Параметрический
-          <br />
-          поиск квартир
-        </p>
-        <p className="text-lg">
-          Фильтр позволит отметить конкретные преимущества, определить
-          количество комнат, желаемый этаж, цену, и получить выборку подходящих
-          вариантов
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide3.png" alt="" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide3;

client/src/components/Slider/Slide4.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide4() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Виртуальный тур
-          <br />
-          по жилому комплексу
-        </p>
-        <p className="text-lg">
-          Клиент лично оценит угол инсоляции, малые архитектурные формы и
-          ландшафт, перемещаясь по комплексу с помощью тапа
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide4.jpg" alt="" className="rounded-md" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide4;

client/src/components/Slider/Slide5.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide5() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Конфигуратор интерьера
-        </p>
-        <p className="text-lg">
-          Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора
-          интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные
-          детали
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide5.png" alt="" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide5;

client/src/components/Slider/Slide6.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide6() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Формирование
-          <br />
-          вишлиста
-        </p>
-        <p className="text-lg">
-          Клиент может добавить варианты квартир в избранное, сравнить их между
-          собой по основным параметрам и выбрать свою будущую квартиру
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide6.png" alt="" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide6;

client/src/components/Slider/Slide7.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide7() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Любой рендер
-          <br />
-          за несколько секунд
-        </p>
-        <p className="text-lg">
-          Когда для рекламы вам понадобится любой объект с любого ракурса,
-          просто сделайте фотографию внутри презентации
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide7.jpg" alt="" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide7;

client/src/components/Slider/Slide8.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import SlideContainer from "./SlideContainer";
-
-function Slide8() {
-  return (
-    <SlideContainer>
-      <div className="col-span-1 space-y-6 flex flex-col justify-center">
-        <p className="font-gilroy text-gradient text-4xl">
-          Отправка коммерческого
-          <br />
-          предложения
-        </p>
-        <p className="text-lg">
-          Коммерческое предложение с выбранными квартирами может быть отправлено
-          клиенту на почту или распечатано и отдано лично в руки
-        </p>
-      </div>
-      <div className="col-span-3 flex justify-end">
-        <img src="/images/slider/slide8.png" alt="" />
-      </div>
-    </SlideContainer>
-  );
-}
-
-export default Slide8;

client/src/components/Slider/SlideContainer.tsx

@@ -1,12 +0,0 @@
-import React, { ReactNode } from "react";
-import { SwiperSlide } from "swiper/react";
-
-interface ISlideContainer {
-  children: ReactNode;
-}
-
-function SlideContainer({ children }: ISlideContainer) {
-  return <div className="grid grid-cols-4 gap-16 mr-16">{children}</div>;
-}
-
-export default SlideContainer;

client/src/components/Slider/Slider.tsx

@@ -1,19 +1,12 @@
 import React, { useRef, useState } from "react";
 import { Navigation, Pagination, Scrollbar, Autoplay } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
+import Slide from "./Slide";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";
 import "swiper/css/autoplay";
-import Slide1 from "./Slide1";
-import Slide2 from "./Slide2";
-import Slide3 from "./Slide3";
-import Slide4 from "./Slide4";
-import Slide5 from "./Slide5";
-import Slide6 from "./Slide6";
-import Slide7 from "./Slide7";
-import Slide8 from "./Slide8";
 
 function Slider() {
   const [_, setInit] = useState<boolean>();
@@ -38,28 +31,76 @@ function Slider() {
         className="w-[calc(100%+64px)]"
       >
         <SwiperSlide>
-          <Slide1 />
+          <Slide
+            title={"Интеграция<br />с CRM - системой"}
+            body={
+              "Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир"
+            }
+            image={"/images/slider/slide1.png"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide2 />
+          <Slide
+            title={"Вся инфрастуктура<br />на одном экране"}
+            body={
+              "Возможность оценить инфраструктуру района покажет важные для клиента точки интереса и время, за которое он сможет до них дойти"
+            }
+            image={"/images/slider/slide2.jpg"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide3 />
+          <Slide
+            title={"Параметрический<br />поиск квартир"}
+            body={
+              "Фильтр позволит отметить конкретные преимущества, определить количество комнат, желаемый этаж, цену, и получить выборку подходящих вариантов"
+            }
+            image={"/images/slider/slide3.png"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide4 />
+          <Slide
+            title={"Виртуальный тур<br />по жилому комплексу"}
+            body={
+              "Клиент лично оценит угол инсоляции, малые архитектурные формы и ландшафт, перемещаясь по комплексу с помощью тапа"
+            }
+            image={"/images/slider/slide4.jpg"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide5 />
+          <Slide
+            title={"Конфигуратор интерьера"}
+            body={
+              "Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные детали"
+            }
+            image={"/images/slider/slide5.png"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide6 />
+          <Slide
+            title={"Формирование<br />вишлиста"}
+            body={
+              "Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру"
+            }
+            image={"/images/slider/slide6.png"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide7 />
+          <Slide
+            title={"Любой рендер<br />за несколько секунд"}
+            body={
+              "Когда для рекламы вам понадобится любой объект с любого ракурса, просто сделайте фотографию внутри презентации"
+            }
+            image={"/images/slider/slide7.jpg"}
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slide8 />
+          <Slide
+            title={"Отправка коммерческого<br />предложения"}
+            body={
+              "Коммерческое предложение с выбранными квартирами может быть отправлено клиенту на почту или распечатано и отдано лично в руки"
+            }
+            image={"/images/slider/slide8.png"}
+          />
         </SwiperSlide>
       </Swiper>
       <div className="flex justify-between">

client/src/main.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
-import AppTest from './AppTest'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   // <React.StrictMode>

client/src/utils/api.ts

@@ -1,7 +1,7 @@
 import ky from "ky";
 
 const api = ky.create({
-  prefixUrl: "http://localhost:3003",
+  prefixUrl: "/api",
 });
 
 export default api;

client/vite.config.ts

@@ -6,8 +6,22 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 3002,
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:3003",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
   },
   preview: {
     port: 3002,
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:3003",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
   },
 });