add transition, add plane container

src/components/mainPart/mainPart.tsx

@@ -4,8 +4,12 @@ import { PinkButton } from "./button";
 import { MainPartHeader } from "./mainPartHeader";
 import { ContentContainer } from "./contentContainer";
 import { MainPartFooter } from "./main-part-footer";
+import { OrLineContainer } from "./orLineContainer";
+import { CSSTransition } from "react-transition-group";
+
 
 export const MainPart: React.FC = React.memo(() => {
+    const [showBackground, setShowBackground] = useState<boolean>(false);
     const [currentContent, setCurrentContent] = useState<JSX.Element>(
         <ContentContainer 
             titleText="Удаленная демонстрация жилого комплекса"
@@ -16,26 +20,21 @@ export const MainPart: React.FC = React.memo(() => {
     );
 
     function onClickStartDemo() {
-        setCurrentContent(<>
-            <ContentContainer 
-                titleText="Запустите демонстрацию"
-                descriptText="Начните новую демонстрацию жилого комплекса"
-                onClickButton={() => onClickCreateNewDemo()}
-                textButton='Начать новую демонстрацию'
-            />
-            <div className="main-part-content-or-line-container">
-                <span className="main-part-content-or-line"></span>
-                <span className="main-part-content-or-line-text">или</span>
-                <span className="main-part-content-or-line"></span>
-            </div>
-            
-            <ContentContainer 
-                descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
-                onClickButton={() => onClickPlaneDemo()}
-                textButton='Запланировать демонстрацию'
-            />
+        setCurrentContent(
+            <>
+                <ContentContainer 
+                    titleText="Запустите демонстрацию"
+                    descriptText="Начните новую демонстрацию жилого комплекса"
+                    onClickButton={() => onClickCreateNewDemo()}
+                    textButton='Начать новую демонстрацию'
+                />
+                <OrLineContainer />
+                <ContentContainer 
+                    descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
+                    onClickButton={() => onClickPlaneDemo()}
+                    textButton='Запланировать демонстрацию'
+                />
             </>
-            
         )
     }
 
@@ -52,19 +51,35 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onClickPlaneDemo() {
-
+        enableBackground();
     }
 
     function onClickConnect() {
 
     }
 
+    function enableBackground() {
+        setShowBackground(true);
+    }
+
+    function disableBackground() {
+        setShowBackground(false);
+    }
+
     return <div className="main-part-container">
         <div className="background-image"></div>
         <MainPartHeader />
         <div className="main-part-content">
             {currentContent}
         </div>
+        <CSSTransition
+            in={showBackground}
+            timeout={300}
+            classNames='show-background'
+            unmountOnExit
+        >
+            <div className="background-container"></div>
+        </CSSTransition>
         <MainPartFooter />
     </div>
 })