Mobile Mockup fifth part, start button, and نیرو گرفته done!

src/Components/buttons/Button.css

@@ -73,4 +73,15 @@ button.text:hover{
 }
 button.text.disabled{
     color:#E8E8ED;
+}
+.StartButton{
+    background: white;
+    color:#1577F8;
+    direction: ltr;
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    margin:15px;
+    border-radius: 200em;
+    box-shadow: 0px 0px 19px rgba(0, 76, 255, 0.14);
 }

src/Components/buttons/startBtn.js

@@ -0,0 +1,15 @@
+import React from "react";
+import './Button.css';
+
+import sendIcon from '../../assets/images/vuesax-linear-send.png';
+
+const StartButton = () =>{
+    return(
+        <button className="StartButton">
+            <img src={sendIcon} />
+            شروع مکالمه
+        </button>
+    )
+}
+
+export default StartButton;

src/Components/mobileMockup/mobileMockup.css

@@ -2,7 +2,7 @@
     border-radius: 29px;
     background-color: white;
     box-shadow: 0px 0px 33px rgba(0,0,0,0.1);
-    width: 20em;
+    width: 18em;
     max-width: 90vw;
     min-height: 35em;
     padding: 0.25em 1em;
@@ -118,7 +118,7 @@
     font-size: 0.67em;
     background: white;
     margin:15px;
-    margin-bottom: 3px;
+    margin-bottom: 4px;
     border-radius:7px ;
     box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
 }
@@ -135,4 +135,52 @@
     margin-left: 5%;
     margin-top: 0px;
     color:rgba(0,0,0,0.3);
+}
+.fifthSection{
+    width:90%;
+}
+.fifthSection div{
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 5px;
+    border-radius: 15px;
+    align-items: center;
+    margin-top:5px;
+}
+.fifthSection div div{
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+    align-items:flex-start;
+}
+.fifthSection div div h4{
+    margin-bottom:-10px;
+    margin-top:3px;
+    font-size: 0.8em;
+    float: right;
+}
+.fifthSection div div p{
+    font-size: 0.6em;
+}
+.fifthSection div img{
+    height: 100%;
+}
+.fifthSection .Smotedavel{
+    background:rgba(214,232,255, 0.2);
+    border:2px solid rgba(238, 245, 255, 1.0);
+    color:#1577F8;
+}
+.fifthSection .contactUs{
+    background:rgba(239,255,214, 0.2);
+    border:2px solid #EFFFEE;
+    color:#10A875;
+}
+.nirooGerefteh{
+    display: flex;
+    align-items: center;
+    font-size: 0.6em;
+    color: #C7C7C7;
+}
+.nirooGerefteh img{
+    padding: 2.5px;
 }

src/Components/mobileMockup/mobileMockup.js

@@ -3,8 +3,9 @@ import './mobileMockup.css';
 
 import whatsAppLogo from '../../assets/images/XMLID_468_.png';
 import bookIcon from '../../assets/images/vuesax-bold-book.png';
-import chatIcon from '../../assets/images/vuesax-bold-message-text.png';
+import chatIcon from '../../assets/images/uesax-bold-message-text.png';
-import smsIcon from '../../assets/images/vuesax-bold-sms.png';
+import smsIcon from '../../assets/images/uesax-bold-sms.png';
+import formTMSIcon from '../../assets/images/vuesax-bold-sms.png';
 
 import alireza from '../../assets/images/alireza.png';
 import mahmood from '../../assets/images/mahmood.png';
@@ -12,6 +13,9 @@ 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 logoRiz from '../../assets/images/logo-riz.png';
 
 
 const MobileMockup = () => {
@@ -71,15 +75,39 @@ const MobileMockup = () => {
 
                 <img src={tahmoores} />
                 <div>
-                <div className='messageBox'>
+                    <div className='messageBox'>
-                    <p>
+                        <p>
-                    سلام به روباتیو خوش اومدی 
+                            سلام به روباتیو خوش اومدی
-من اینجا هستم تا به شما کمک کنم تا نهایت از امکانات ما لذت ببرید.ضمنا اگر کمی‌خواستید من در خدمت شما هستم تا شب هم اینجا می مونم آره فکر کردی من ولت میکنم نخیر
+                            من اینجا هستم تا به شما کمک کنم تا نهایت از امکانات ما لذت ببرید.ضمنا اگر کمی‌خواستید من در خدمت شما هستم تا شب هم اینجا می مونم آره فکر کردی من ولت میکنم نخیر
-                    </p>
+                        </p>
-                    
+
+                    </div>
+                    <p className='messageTime'>12:30</p>
                 </div>
-                <p  className='messageTime'>12:30</p>
+            </div>
+
+            <div className='fifthSection'>
+                <div className='Smotedavel'>
+                    <div>
+                        <h4>سوالات متداول</h4>
+                        <p>اگر دنبال سوال خودت هستی اینجا دنبالش بگرد</p>
+                    </div>
+                    <img src={chatIcon} />
                 </div>
+                <div className='contactUs'>
+                    <div>
+                        <h4>فرم تماس با ما</h4>
+                        <p>اگر دنبال سوال خودت هستی اینجا دنبالش بگرد</p>
+                    </div>
+                    <img src={formTMSIcon} />
+                </div>
+            </div>
+
+            <StartButton />
+
+            <div className='nirooGerefteh'>
+                <img src={logoRiz} />
+                نیرو گرفته از بازو
             </div>
         </div>
     );