добавлен адаптив главной страницы(первого контейнера)

src/components/footer/footer.css

@@ -79,4 +79,18 @@
 
 .contact-data-value-container {
     width: 100%;
+}
+
+@media screen and (max-width: 1280px) {
+    .footer-container {       
+        padding: 120px 12px;
+    }
+
+    .main-part-text-container {
+        z-index: 1;
+        width: 600px;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+    }
 }

src/components/mainPart/form/form.tsx

@@ -69,7 +69,7 @@ export const Form:React.FC<TProps> = React.memo((props) => {
             setIsError(true);
             return
         }
-        console.log(data)
+        // console.log(data)
         props.onSubmit(data, props.dateInfo)
     }
 

src/components/mainPart/mainPart.css

@@ -188,31 +188,7 @@
     transition: .3s;
 }
 
-/* starting ENTER animation */
-.change-main-part-content-enter {
-    opacity: 0;
-    transform: translateY(0);
-}
 
-/* ending ENTER animation */
-.change-main-part-content-enter-active {
-    opacity: 1;    
-    transition: .3s;
-    transform: translateY(0);
-}
-
-/* starting EXIT animation */
-.change-main-part-content-exit {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-/* ending EXIT animation */
-.change-main-part-content-exit-active {
-    opacity: 0;    
-    transition: .3s;
-    transform: translateY(0);
-}
 
 .main-part-plan-content {
     z-index: 1;
@@ -282,4 +258,79 @@
     /* margin-top: 24px; */
     display: flex;
     gap: 32px;
+}
+
+/* starting ENTER animation */
+.change-main-part-content-enter {
+    opacity: 0;
+}
+
+/* ending ENTER animation */
+.change-main-part-content-enter-active {
+    opacity: 1;    
+    transition: .3s;
+}
+
+/* starting EXIT animation */
+.change-main-part-content-exit {
+    opacity: 1;
+}
+
+/* ending EXIT animation */
+.change-main-part-content-exit-active {
+    opacity: 0;    
+    transition: .3s;
+}
+
+@media screen and (max-width: 1280px) {
+    .main-part-container {    
+        padding: 50px 12px 16px 12px;
+    }
+
+    .main-part-text-container {
+        z-index: 1;
+        width: 600px;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .main-part-container {    
+        padding: 20px 20px 16px 20px;
+    }
+
+    .main-part-text-container {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .main-part-container {    
+        padding: 10px 10px 8px 10px;
+    }
+
+    .main-part-text-container {
+        width: 100%;
+        gap: 30px;
+    }
+
+    .main-part-text-title {
+        font-weight: 700;
+        font-size: 40px;
+        line-height: 100%;
+        max-width: 300px;
+    }
+    
+    .main-part-text-descript {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 130%;
+        max-width: 300px;
+    }
+
+    .main-part-text-button {
+        width: 100%;       
+    }
 }

src/components/mainPart/mainPart.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import './mainPart.css';
 import { MainPartHeader } from "./mainPartHeader";
 import { ContentContainer } from "./contentContainer";
@@ -17,7 +17,7 @@ type FormData = {
 }
 
 export const MainPart: React.FC = React.memo(() => {
-    const changeContent = useRef(0);
+    const [changeContent, setChangeContent] = useState(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
     const defaultCurrentContent = 
@@ -30,7 +30,7 @@ export const MainPart: React.FC = React.memo(() => {
     const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);
 
     useEffect(() => {
-        // changeContent.current += 1;
+        // setChangeContent(changeContent + 1);
     }, [currentContent])
 
     function onClickStartDemo() {
@@ -122,7 +122,7 @@ export const MainPart: React.FC = React.memo(() => {
                 onClickButton={() => toMain()}
             />
         )
-        console.log(data, date)
+        // console.log(data, date)
     }
 
     function toMain() {
@@ -143,7 +143,7 @@ export const MainPart: React.FC = React.memo(() => {
         <MainPartHeader />
         <TransitionGroup>
             <CSSTransition
-                key={changeContent.current}
+                key={changeContent}
                 timeout={300}
                 classNames={'change-main-part-content'}
             >