From f8c8aee32b9e71d290d13b672373417a90fb7d34 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Tue, 26 Jul 2022 14:10:15 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=20=D0=B3?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=B2=D0=BD=D0=BE=D0=B9=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=8B(=D0=BF=D0=B5=D1=80=D0=B2=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/footer/footer.css      | 14 ++++
 src/components/mainPart/form/form.tsx |  2 +-
 src/components/mainPart/mainPart.css  | 99 ++++++++++++++++++++-------
 src/components/mainPart/mainPart.tsx  | 10 +--
 4 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index a030da9..dde82b0 100644
--- a/src/components/footer/footer.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/mainPart/form/form.tsx b/src/components/mainPart/form/form.tsx
index f674b24..42cc8fa 100644
--- a/src/components/mainPart/form/form.tsx
+++ b/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)
     }
 
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index 7f30c12..b658d23 100644
--- a/src/components/mainPart/mainPart.css
+++ b/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%;       
+    }
 }
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 34fc3c3..2ca7c56 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/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'}
             >