Mobile MockUp Done

src/Components/mobileMockup/mobileMockup.css

@@ -1,7 +1,7 @@
 .mobileMockup{
     border-radius: 29px;
     background-color: white;
-    box-shadow: 0px 0px 33px rgba(0,0,0,0.1);
+    box-shadow: 0px 0px 33px rgba(0,0,0,0.05);
     width: 18em;
     max-width: 90vw;
     min-height: 35em;
@@ -10,6 +10,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    border:1px solid rgba(0,0,0,0.07);
+    margin-bottom:50px;
 }
 .mobileMockup .firstSection{
     width:90%;
@@ -184,3 +186,50 @@
 .nirooGerefteh img{
     padding: 2.5px;
 }
+.mobileMockup .writeSth{
+    width:90%;
+    margin: 10px 0px;
+    display: flex;
+    align-items: center;
+}
+.mobileMockup .writeSth input{
+    height: 40px;
+    padding: 2.5px 10px;
+    border: 1px solid #EEF5FF;
+    border-radius: 0px 10px 10px 0px;
+    border-left: 0px solid red;
+    font-family: 'iranSans';
+    background-color: white;
+    width:75%;
+    outline: none;
+}
+.mobileMockup .writeSth button{
+    background-color: white;
+    height: 47px;
+    padding: 2.5px;
+    display: flex;
+    border-radius: 10px 0px 0px 10px;
+    border: 1px solid #EEF5FF;
+    border-right: 0px;
+    align-items: center;
+    justify-content: space-between;
+    width: 25%;
+}
+.mobileMockup .writeSth input:focus{
+    outline: none;
+}
+.mobileMockUpStand{
+    background-color: white;
+    width: 24em;
+    height: 24em;
+    border-radius: 50%;
+    margin-bottom:-34em ;
+    margin-top: 10em;
+    box-shadow:0px 0px 53px rgba(13,65,255,0.1);
+    
+}
+.mobileMockupcontainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/Components/mobileMockup/mobileMockup.js

@@ -13,13 +13,21 @@ import tahmoores from '../../assets/images/tahmoores.png';
 import sohrab from '../../assets/images/sohrab.png';
 import gavazn from '../../assets/images/gavazn.png';
 import babanoel from '../../assets/images/babanoel.png';
+
+
 import StartButton from '../buttons/startBtn';
 
+import smileyIcon from '../../assets/images/vuesax-linear-emoji-normal.png';
+import fileIcon from '../../assets/images/vuesax-linear-attach-square.png';
+
+
 import logoRiz from '../../assets/images/logo-riz.png';
 
 
 const MobileMockup = () => {
     return (
+        <div className='mobileMockupcontainer'>
+            <div className='mobileMockUpStand'></div>
         <div className='mobileMockup'>
             <div className='firstSection'>
                 <div>
@@ -109,6 +117,15 @@ const MobileMockup = () => {
                 <img src={logoRiz} />
                 نیرو گرفته از بازو
             </div>
+
+            <div className="writeSth">
+                <input type='text' placeholder='پیامی بنویسید' />
+                <button>
+                    <img src={smileyIcon} />
+                    <img src={fileIcon} />
+                </button>
+            </div>
+        </div>
         </div>
     );
 };