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

src/components/mainPart/button.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+type TProps = {
+    onClick: () => void
+    textButton: string
+}
+
+export const PinkButton:React.FC<TProps> = React.memo((props) => {
+    return <button className="main-part-text-button" onClick={() => props.onClick()}>{props.textButton}</button>
+})

src/components/mainPart/contentContainer.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { PinkButton } from "./button";
+
+type TProps = {
+    textButton: string
+    onClickButton: () => void
+    titleText?: string
+    descriptText: string
+}
+
+export const ContentContainer:React.FC<TProps> = React.memo((props) => {
+    return <div className="main-part-text-container">
+        {
+            props.titleText && 
+            <span className="main-part-text-title">
+                {props.titleText}
+            </span>
+        }        
+        <span className="main-part-text-descript">
+            {props.descriptText}
+        </span>
+        <PinkButton
+            onClick={props.onClickButton}
+            textButton={props.textButton}                
+        />
+    </div>
+})

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

@@ -0,0 +1,12 @@
+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>
+        <span className="main-part-footer-number">
+            +7 800 770 00 67 (Россия) / +971 50 983 8902 (ОАЭ)
+        </span>
+    </div>
+})

src/components/mainPart/mainPart.css

@@ -55,6 +55,12 @@
     background-color: #CE56C2;
 }
 
+.main-part-content {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
 .main-part-text-container {
     width: 800px;
     display: flex;
@@ -89,6 +95,33 @@
     border-radius: 8px;
     border: none;
     color: #FFFFFF;
+    transition: .3s;
+    cursor: pointer;
+}
+
+.main-part-text-button:hover {
+    background-color: #FFFFFF;
+    color: #CE56C2;
+    border: 2px solid #CE56C2;
+    transition: .3s;
+}
+
+.main-part-content-or-line-container {
+    display: flex;
+    width: 320px;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 130%;
+}
+
+.main-part-content-or-line {
+    height: 2px;
+    background-color: #FFFFFF;
+    width: 100%;
 }
 
 .main-part-footer-container {

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

src/components/mainPart/mainPartHeader.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import whiteLogo from './logoWhiteIcon.svg';
+
+export const MainPartHeader:React.FC = React.memo(() => {
+    return <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>
+})