mobile mockup section made

src/Components/navBar/desktopMenu.js

@@ -13,8 +13,8 @@ const DesktopMenu = ({ currentUser, hidden }) => (
             <div className="logo-container">
                 <img src={logo} className="logo" />
                 <p>
-                <span className='logoTitle'> پلتفرم چت بازو</span>
-                <span className='logoDes'>دستیار کسب و کار شما برای ارتباط با مشتریان</span>
+                    <span className='logoTitle'> پلتفرم چت بازو</span>
+                    <span className='logoDes'>دستیار کسب و کار شما برای ارتباط با مشتریان</span>
                 </p>
             </div>
             <div className="options">

src/Components/navBar/navBar.css

@@ -8,6 +8,7 @@
     box-shadow:0px 0px 28px rgba(0,0,0,0.15);
     height:90px;
     vertical-align: middle;
+    margin-bottom: 50px;
 }
 
 .header {
@@ -21,8 +22,6 @@
 
     font-size: 13px;
     align-items: center;
-   position: fixed;
-   top: 0;
     margin:0;
     vertical-align: middle;
     padding: 15px 0px;
@@ -60,9 +59,6 @@
     align-items: center;
     justify-content: space-between;
     
-    
-    
-    
   }
 
   .header .options .option {

src/Pages/Home/Home.css

@@ -0,0 +1,5 @@
+.HomePage{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/Pages/Home/Home.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import DesktopMenu from '../../Components/navBar/desktopMenu'
+import DesktopMenu from '../../Components/navBar/desktopMenu';
+import MobileMockup from '../../Components/mobileMockup/mobileMockup';
+import './Home.css';
 
 const HomePage = () =>{
     return(
-        <div>
+        <div className='HomePage'>
             <DesktopMenu />
+            <MobileMockup />
         </div>
     )
 };