add transition, add plane container

src/components/mainPart/main-part-footer.tsx

@@ -2,8 +2,15 @@ import React from "react";
 
 export const MainPartFooter:React.FC = React.memo(() => {
     return <div className="main-part-footer-container">
-        <span className="main-part-footer-text">
-            Данная технология находится на стадии разработки. Если подключиться к демонстрации не удалось, свяжитесь с нами.
+        <span className="main-part-footer-text-container">
+            <div className="main-part-footer-text">
+                <span className="main-part-footer-text-one">
+                    Данная технология находится на стадии разработки.
+                </span>
+                <span className="main-part-footer-text-two">
+                    Если подключиться к демонстрации не удалось, свяжитесь с нами.
+                </span>            
+            </div>
         </span>
         <span className="main-part-footer-number">
             +7 800 770 00 67 (Россия) / +971 50 983 8902 (ОАЭ)

src/components/mainPart/mainPart.css

@@ -1,4 +1,4 @@
-.main-part-container {
+.main-part-container {    
     position: relative;
     width: 100%;
     height: 100vh;
@@ -22,6 +22,7 @@
 }
 
 .main-part-header {
+    z-index: 1;
     box-sizing: border-box;
     width: 100%;
     display: flex;
@@ -139,8 +140,48 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    max-width: 600px;
+    gap: 8px;
 }
 
-.main-part-footer-text::before {
+.main-part-footer-text-container {
+    display: flex;
+}
+
+.main-part-footer-text-container::before {    
     content: '*';
+}
+
+.main-part-footer-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.background-container {
+    z-index: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(30, 22, 48, 0.8);
+    backdrop-filter: blur(12px);
+}
+
+.show-background-enter {
+    opacity: 0;
+}
+
+.show-background-enter-active {
+    opacity: 1;
+    transition: .3s;
+}
+
+.show-background-exit {
+    opacity: 1;
+}
+
+.show-background-exit-active {
+    opacity: 0;
+    transition: .3s;
 }

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>
 })

src/components/mainPart/orLineContainer.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const OrLineContainer:React.FC = () => <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>;