сверстан контейнер после нажатия на кнопку Начать демонстрацию

src/components/mainPart/mainPart.tsx

@@ -1,34 +1,62 @@
-import React from "react";
+import React, { useState } from "react";
 import './mainPart.css';
-import whiteLogo from './logoWhiteIcon.svg';
+import { PinkButton } from "./button";
+import { MainPartHeader } from "./mainPartHeader";
+import { ContentContainer } from "./contentContainer";
+import { MainPartFooter } from "./main-part-footer";
 
 export const MainPart: React.FC = React.memo(() => {
+    const [currentContent, setCurrentContent] = useState<JSX.Element>(
+        <ContentContainer 
+            titleText="Удаленная демонстрация жилого комплекса"
+            descriptText="Основанная на стриминге технология удаленной демонстрации позволяет познакомиться с жилым комплексом, не посещая офис продаж."
+            onClickButton={() => onClickStartDemo()}
+            textButton='Начать демонстрацию'
+        />
+    );
+
+    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='Запланировать демонстрацию'
+            />
+            </>
+            
+        )
+    }
+
+    function onClickCreateNewDemo() {
+
+    }
+
+    function onClickPlaneDemo() {
+
+    }
+
+    function onClickConnect() {
+
+    }
+
     return <div className="main-part-container">
         <div className="background-image"></div>
-        <div className="main-part-header">
-            <img className="main-part-header-logo" alt="logo" src={whiteLogo} />
-            <div className="main-part-header-lang">
-                <span className="main-part-header-lang en">EN</span>
-                <span className="main-part-header-lang-slash">/</span>
-                <span className="main-part-header-lang ru">RU</span>
-            </div>
-        </div>
-        <div className="main-part-text-container">
-            <span className="main-part-text-title">
-                Удаленная демонстрация жилого комплекса
-            </span>
-            <span className="main-part-text-descript">
-                Основанная на стриминге технология удаленной демонстрации позволяет познакомиться с жилым комплексом, не посещая офис продаж.
-            </span>
-            <button className="main-part-text-button">Начать демонстрацию</button>
-        </div>
-        <div className="main-part-footer-container">
-            <span className="main-part-footer-text">
-                Данная технология находится на стадии разработки. Если подключиться к демонстрации не удалось, свяжитесь с нами.
-            </span>
-            <span className="main-part-footer-number">
-                +7 800 770 00 67 (Россия) / +971 50 983 8902 (ОАЭ)
-            </span>
+        <MainPartHeader />
+        <div className="main-part-content">
+            {currentContent}
         </div>
+        <MainPartFooter />
     </div>
 })